update auth forms with dark theme styling

kscalelabs · Nov 11, 2024 · c907a6f · c907a6f
1 parent f27daf5
commit c907a6f
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 12 deletions.
diff --git a/frontend/src/components/auth/AuthBlock.tsx b/frontend/src/components/auth/AuthBlock.tsx
@@ -16,14 +16,14 @@ import { useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
 
 interface AuthBlockProps {
-  title?: string;
+  title?: string | React.ReactNode;
   onClosed?: () => void;
   signup?: boolean;
 }
 
 const AuthBlock: React.FC<AuthBlockProps> = ({ title, onClosed, signup }) => {
   return (
-    <Card className="w-[400px] bg-gray-2 text-gray-12 rounded-lg">
+    <Card className="w-[400px] bg-gray-12 text-gray-12 rounded-lg">
       <CardHeader>
         <Header title={title} onClosed={onClosed} />
       </CardHeader>

diff --git a/frontend/src/components/auth/LoginForm.tsx b/frontend/src/components/auth/LoginForm.tsx
@@ -60,7 +60,12 @@ const LoginForm = () => {
         showStrength={false} // Hide password strength bar
       />
       {/* Submit Button */}
-      <Button variant="default">Login</Button>
+      <Button
+        variant="outline"
+        className="bg-gray-2 text-black hover:bg-gray-8"
+      >
+        Login
+      </Button>
     </form>
   );
 };

diff --git a/frontend/src/components/auth/SignupWithEmail.tsx b/frontend/src/components/auth/SignupWithEmail.tsx
@@ -56,7 +56,12 @@ const SignupWithEmail = () => {
         {errors?.email && <ErrorMessage>{errors?.email?.message}</ErrorMessage>}
       </div>
       {/* Signup Button */}
-      <Button variant="default">Sign up with email</Button>
+      <Button
+        variant="outline"
+        className="bg-gray-2 text-black hover:bg-gray-100"
+      >
+        Sign up with email
+      </Button>
     </form>
   );
 };

diff --git a/frontend/src/components/pages/Login.tsx b/frontend/src/components/pages/Login.tsx
@@ -4,7 +4,7 @@ const Login = () => {
   return (
     <div className="mx-8">
       <div className="flex justify-center items-center">
-        <AuthBlock title="Welcome back!" />
+        <AuthBlock title={<span className="text-gray-2">Welcome back!</span>} />
       </div>
     </div>
   );

diff --git a/frontend/src/components/pages/Logout.tsx b/frontend/src/components/pages/Logout.tsx
@@ -24,9 +24,9 @@ const Logout = () => {
   return (
     <div className="mx-8">
       <div className="flex justify-center items-center">
-        <Card className="w-[400px] shadow-md bg-gray-2 text-gray-12 rounded-lg">
+        <Card className="w-[400px] shadow-md bg-gray-12 text-gray-12 rounded-lg">
           <CardHeader>
-            <Header title="Logout" />
+            <Header title={<span className="text-gray-2">Logout</span>} />
           </CardHeader>
           <CardContent className="flex justify-center">
             <Spinner />

diff --git a/frontend/src/components/pages/Signup.tsx b/frontend/src/components/pages/Signup.tsx
@@ -4,7 +4,10 @@ const Signup = () => {
   return (
     <div className="mx-8">
       <div className="flex justify-center items-center">
-        <AuthBlock title="Welcome!" signup />
+        <AuthBlock
+          title={<span className="text-gray-2">Welcome!</span>}
+          signup
+        />
       </div>
     </div>
   );

diff --git a/frontend/src/components/ui/Header.tsx b/frontend/src/components/ui/Header.tsx
@@ -1,17 +1,15 @@
 import { FaTimes } from "react-icons/fa";
 
 interface HeaderProps {
-  title?: string;
+  title: string | React.ReactNode;
   label?: string;
   onClosed?: () => void;
 }
 
 const Header = ({ title, label, onClosed }: HeaderProps) => {
   return (
     <div className="w-full flex flex-col items-center justify-center gap-y-4">
-      <h1 className="text-3xl font-semibold text-primary py-4">
-        {title ?? "K-Scale Labs"}
-      </h1>
+      <h1 className="text-3xl font-semibold text-primary py-4">{title}</h1>
       {label && <p className="text-muted-foreground text-s,">{label}</p>}
       {onClosed && (
         <button