feat(ui): Revamp the signin/signup page

1 files changed, 48 insertions, 26 deletions

diff --git a/apps/web/components/signin/SignInForm.tsx b/apps/web/components/signin/SignInForm.tsx
index ca8f3137..8ad39f8f 100644
--- a/apps/web/components/signin/SignInForm.tsx
+++ b/apps/web/components/signin/SignInForm.tsx
@@ -1,4 +1,13 @@
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { authOptions } from "@/server/auth";
+import { Info } from "lucide-react";
 
 import serverConfig from "@karakeep/shared/config";
 
@@ -16,34 +25,47 @@ export default async function SignInForm() {
   }
 
   return (
-    <div className="flex flex-col items-center space-y-2">
-      {serverConfig.demoMode && (
-        <div className="mb-1 w-full items-start space-y-1 rounded bg-accent p-3">
-          <p className="text-center font-bold">Demo Mode</p>
-          <p>Email: {serverConfig.demoMode.email} </p>
-          <p>Password: {serverConfig.demoMode.password} </p>
-        </div>
-      )}
-      <CredentialsForm />
+    <div className="w-full">
+      <Card className="w-full">
+        <CardHeader className="text-center">
+          <CardTitle className="text-2xl font-bold">Welcome Back</CardTitle>
+          <CardDescription>Sign in to your Karakeep account</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {serverConfig.demoMode && (
+            <Alert>
+              <Info className="h-4 w-4" />
+              <AlertDescription>
+                <div className="space-y-1">
+                  <p className="font-semibold">Demo Mode</p>
+                  <p>Email: {serverConfig.demoMode.email}</p>
+                  <p>Password: {serverConfig.demoMode.password}</p>
+                </div>
+              </AlertDescription>
+            </Alert>
+          )}
 
-      {providerValues && providerValues.length > 0 && (
-        <>
-          <div className="flex w-full items-center">
-            <div className="flex-1 grow border-t-2 border-gray-200"></div>
-            <span className="bg-white px-3 text-gray-500">Or</span>
-            <div className="flex-1 grow border-t-2 border-gray-200"></div>
-          </div>
-          <div className="space-y-2">
-            {providerValues.map((provider) => (
-              <div key={provider.id}>
-                <SignInProviderButton
-                  provider={{ id: provider.id, name: provider.name }}
-                />
+          <CredentialsForm />
+
+          {providerValues && providerValues.length > 0 && (
+            <>
+              <div className="flex w-full items-center">
+                <div className="flex-1 grow border-t border-gray-200"></div>
+                <span className="bg-white px-3 text-sm text-gray-500">Or</span>
+                <div className="flex-1 grow border-t border-gray-200"></div>
+              </div>
+              <div className="space-y-2">
+                {providerValues.map((provider) => (
+                  <SignInProviderButton
+                    key={provider.id}
+                    provider={{ id: provider.id, name: provider.name }}
+                  />
+                ))}
               </div>
-            ))}
-          </div>
-        </>
-      )}
+            </>
+          )}
+        </CardContent>
+      </Card>
     </div>
   );
 }