Merge pull request #13 from Design-System-Project/feature/tfr2-110-lo…

…gin-screen improve login screen
Design-System-Pro · Aug 23, 2024 · 02d2357 · 02d2357
2 parents 7de5d50 + 758900e
commit 02d2357
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 26 deletions.
diff --git a/apps/dashboard/src/app/auth/layout.tsx b/apps/dashboard/src/app/auth/layout.tsx
@@ -17,7 +17,12 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={cn('flex flex-col items-center', inter.className)}>
+      <body
+        className={cn(
+          'min-h-screen flex flex-col justify-center items-center',
+          inter.className
+        )}
+      >
         {children}
       </body>
     </html>

diff --git a/apps/dashboard/src/app/auth/login/_components/magic-link-form.tsx b/apps/dashboard/src/app/auth/login/_components/magic-link-form.tsx
@@ -1,8 +1,7 @@
 'use client';
 
-// eslint-disable-next-line import/named -- TODO: Review
 import { useFormState } from 'react-dom';
-import { Input, Label, Text } from '@ds-project/components';
+import { CardContent, CardFooter, Input, Label } from '@ds-project/components';
 import { loginUser } from '../_actions';
 import { Message } from './message';
 import { SubmitButton } from './submit-button';
@@ -13,22 +12,21 @@ export const MagicLinkForm = () => {
   });
 
   return (
-    <form action={formAction} className="flex flex-col space-y-8">
-      <Label>Email</Label>
-      <Input
-        autoComplete="email"
-        name="email"
-        placeholder="[email protected]"
-        required
-        type="email"
-      />
-      <p>Sign in instantly by getting a magic link sent to your email</p>
-
-      <SubmitButton />
-      <Text>
-        <p>{state.error}</p>
-      </Text>
-      <Message email={state.email} visible={state.ok} />
+    <form action={formAction} className="flex flex-col gap-4">
+      <CardContent className="grid gap-4">
+        <Label>Email</Label>
+        <Input
+          autoComplete="email"
+          name="email"
+          placeholder="[email protected]"
+          required
+          type="email"
+        />
+      </CardContent>
+      <CardFooter>
+        <Message email={state.email} visible={state.ok} />
+        {!state.ok ? <SubmitButton /> : null}
+      </CardFooter>
     </form>
   );
 };
diff --git a/apps/dashboard/src/app/auth/login/_components/submit-button.tsx b/apps/dashboard/src/app/auth/login/_components/submit-button.tsx
@@ -1,5 +1,5 @@
 'use client';
-// eslint-disable-next-line import/named -- TODO: Review
+
 import { useFormStatus } from 'react-dom';
 import { Button, Icons } from '@ds-project/components';
 
@@ -8,6 +8,7 @@ export const SubmitButton = () => {
 
   return (
     <Button
+      className="w-full"
       aria-disabled={formStatus.pending}
       aria-label="Get magic link"
       aria-pressed
@@ -17,7 +18,7 @@ export const SubmitButton = () => {
         {formStatus.pending ? (
           <Icons.SymbolIcon className="mr-2 size-4 animate-spin" />
         ) : null}
-        <Icons.Link2Icon className="mr-2 size-4" /> Get magic link
+        Login
       </>
     </Button>
   );

diff --git a/apps/dashboard/src/app/auth/login/page.tsx b/apps/dashboard/src/app/auth/login/page.tsx
@@ -1,11 +1,23 @@
-import { Icons } from '@ds-project/components';
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@ds-project/components';
 import { MagicLinkForm } from './_components';
 
 export default function Page() {
   return (
-    <section className="flex max-w-sm flex-col items-center gap-6">
-      <Icons.EnterIcon height={64} width={64} />
+    <Card className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle className="text-2xl">
+          <h1>Login</h1>
+        </CardTitle>
+        <CardDescription>
+          <p>Enter your email below to login to your account.</p>
+        </CardDescription>
+      </CardHeader>
       <MagicLinkForm />
-    </section>
+    </Card>
   );
 }
diff --git a/packages/components/src/alert/alert.tsx b/packages/components/src/alert/alert.tsx
@@ -10,7 +10,7 @@ const alertVariants = cva(
     variants: {
       variant: {
         default: 'ds-bg-background ds-text-foreground',
-        info: 'ds-border-yellow-500/50 ds-text-yellow-500 dark:ds-border-yellow-500 [&>svg]:ds-text-yellow-500',
+        info: 'ds-border-slate-800/50 ds-text-slate-800 dark:ds-border-slate-800 [&>svg]:ds-text-slate-800',
         destructive:
           'ds-border-destructive/50 ds-text-destructive dark:ds-border-destructive [&>svg]:ds-text-destructive',
       },