⚡ Improve login page

Styling and responsiveness

src/pages/login.tsx

@@ -5,6 +5,7 @@ import { useForm } from '@mantine/hooks';
 import { showNotification, updateNotification } from '@mantine/notifications';
 import axios from 'axios';
 import { IconCheck, IconX } from '@tabler/icons';
+import { Logo } from '../components/layout/Logo';
 
 // TODO: Add links to the wiki articles about the login process.
 export default function AuthenticationTitle() {
@@ -15,22 +16,26 @@ export default function AuthenticationTitle() {
   });
   return (
     <Container
-      size={420}
+      size={'lg'}
       style={{
         height: '100vh',
         display: 'flex',
-        width: 420,
+        width: '100%',
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
       }}
     >
-      <Title
-        align="center"
-        sx={(theme) => ({ fontFamily: `Greycliff CF, ${theme.fontFamily}`, fontWeight: 900 })}
-      >
-        Welcome back!
-      </Title>
+      <Group>
+        <Title
+          align="center"
+          sx={(theme) => ({ fontFamily: `Greycliff CF, ${theme.fontFamily}`, fontWeight: 900 })}
+        >
+          Welcome back!
+        </Title>
+        <Logo withoutText />
+      </Group>
+
       <Text color="dimmed" size="sm" align="center" mt={5}>
         Please enter the{' '}
         <Anchor<'a'> href="#" size="sm" onClick={(event) => event.preventDefault()}>
@@ -38,7 +43,7 @@ export default function AuthenticationTitle() {
         </Anchor>
       </Text>
 
-      <Paper withBorder shadow="md" p={30} mt={30} radius="md" style={{ width: 420 }}>
+      <Paper withBorder shadow="md" p={30} mt={30} radius="md" style={{ width: '100%', maxWidth: 420 }}>
         <form
           onSubmit={form.onSubmit((values) => {
             setCookies('password', values.password, {
@@ -64,8 +69,7 @@ export default function AuthenticationTitle() {
                       id: 'load-data',
                       color: 'teal',
                       title: 'Password correct',
-                      message:
-                        'Notification will close in 2 seconds, you can close this notification now',
+                      message: undefined,
                       icon: <IconCheck />,
                       autoClose: 300,
                       onClose: () => {
@@ -78,8 +82,7 @@ export default function AuthenticationTitle() {
                       id: 'load-data',
                       color: 'red',
                       title: 'Password is wrong, please try again.',
-                      message:
-                        'Notification will close in 2 seconds, you can close this notification now',
+                      message: undefined,
                       icon: <IconX />,
                       autoClose: 2000,
                     });
@@ -93,14 +96,10 @@ export default function AuthenticationTitle() {
             label="Password"
             placeholder="Your password"
             required
+            autoFocus
             mt="md"
             {...form.getInputProps('password')}
           />
-          <Group position="apart" mt="md">
-            <Anchor<'a'> onClick={(event) => event.preventDefault()} href="#" size="sm">
-              Forgot password?
-            </Anchor>
-          </Group>
           <Button fullWidth type="submit" mt="xl">
             Sign in
           </Button>