pmarquees · pmarquees · May 23, 2025 · May 23, 2025
diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx
@@ -26,8 +26,8 @@ export default function DashboardLayout({
   };
 
   return (
-    <div className="flex min-h-screen flex-col">
-      <header className="sticky top-0 z-50 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
+    <div className="flex min-h-screen flex-col bg-black text-white">
+      <header className="sticky top-0 z-50 flex h-16 items-center gap-4 border-b border-white/10 bg-black px-4 md:px-6">
         <Link href="/" className="flex items-center gap-2 font-semibold">
           <motion.span 
             className="text-xl font-bold text-orange"
@@ -46,17 +46,19 @@ export default function DashboardLayout({
             size="icon" 
             onClick={showOnboarding}
             title="Show onboarding guide"
-            className="hover-orange"
+            className="hover-orange text-white hover:text-orange"
           >
             <LucideHelpCircle className="h-5 w-5" />
           </Button>
           <UserMenu />
         </div>
       </header>
-      <main className="flex-1 p-10">
-        <PageTransition>
-          {children}
-        </PageTransition>
+      <main className="flex-1 flex items-center justify-center p-10">
+        <div className="w-full max-w-7xl">
+          <PageTransition>
+            {children}
+          </PageTransition>
+        </div>
       </main>
       <Toaster />
       <OnboardingModal />

diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
@@ -10,25 +10,34 @@ export const metadata: Metadata = {
 
 export default function LoginPage() {
   return (
-    <div className="container flex h-screen w-screen flex-col items-center justify-center">
-      <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-        <div className="flex flex-col space-y-2 text-center">
-          <h1 className="text-2xl font-semibold tracking-tight">Welcome back</h1>
-          <p className="text-sm text-muted-foreground">
-            Enter your credentials to sign in to your account
+    <div className="flex min-h-screen flex-col bg-black text-white">
+      <header className="border-b border-white/10">
+        <div className="container flex h-16 items-center justify-between">
+          <Link href="/" className="flex items-center gap-2 font-bold text-orange hover-orange">
+            Promply
+          </Link>
+        </div>
+      </header>
+      <div className="container flex flex-1 w-screen flex-col items-center justify-center">
+        <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+          <div className="flex flex-col space-y-2 text-center">
+            <h1 className="text-2xl font-semibold tracking-tight text-white">Welcome back</h1>
+            <p className="text-sm text-white/70">
+              Enter your credentials to sign in to your account
+            </p>
+          </div>
+          <Suspense fallback={<div>Loading...</div>}>
+            <LoginForm />
+          </Suspense>
+          <p className="px-8 text-center text-sm text-white/70">
+            <Link
+              href="/auth/register"
+              className="hover:text-orange underline underline-offset-4"
+            >
+              Don&apos;t have an account? Sign Up
+            </Link>
           </p>
         </div>
-        <Suspense fallback={<div>Loading...</div>}>
-          <LoginForm />
-        </Suspense>
-        <p className="px-8 text-center text-sm text-muted-foreground">
-          <Link
-            href="/auth/register"
-            className="hover:text-brand underline underline-offset-4"
-          >
-            Don&apos;t have an account? Sign Up
-          </Link>
-        </p>
       </div>
     </div>
   );

diff --git a/src/app/auth/register/page.tsx b/src/app/auth/register/page.tsx
@@ -10,25 +10,34 @@ export const metadata: Metadata = {
 
 export default function RegisterPage() {
   return (
-    <div className="container flex h-screen w-screen flex-col items-center justify-center">
-      <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-        <div className="flex flex-col space-y-2 text-center">
-          <h1 className="text-2xl font-semibold tracking-tight">Create an account</h1>
-          <p className="text-sm text-muted-foreground">
-            Enter your information to create an account
+    <div className="flex min-h-screen flex-col bg-black text-white">
+      <header className="border-b border-white/10">
+        <div className="container flex h-16 items-center justify-between">
+          <Link href="/" className="flex items-center gap-2 font-bold text-orange hover-orange">
+            Promply
+          </Link>
+        </div>
+      </header>
+      <div className="container flex flex-1 w-screen flex-col items-center justify-center">
+        <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+          <div className="flex flex-col space-y-2 text-center">
+            <h1 className="text-2xl font-semibold tracking-tight text-white">Create an account</h1>
+            <p className="text-sm text-white/70">
+              Enter your information to create an account
+            </p>
+          </div>
+          <Suspense fallback={<div>Loading...</div>}>
+            <RegisterForm />
+          </Suspense>
+          <p className="px-8 text-center text-sm text-white/70">
+            <Link
+              href="/auth/login"
+              className="hover:text-orange underline underline-offset-4"
+            >
+              Already have an account? Sign In
+            </Link>
           </p>
         </div>
-        <Suspense fallback={<div>Loading...</div>}>
-          <RegisterForm />
-        </Suspense>
-        <p className="px-8 text-center text-sm text-muted-foreground">
-          <Link
-            href="/auth/login"
-            className="hover:text-brand underline underline-offset-4"
-          >
-            Already have an account? Sign In
-          </Link>
-        </p>
       </div>
     </div>
   );

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -141,6 +141,54 @@
   body {
     @apply bg-background text-foreground;
   }
+
+  /* Force dark theme */
+  :root {
+    color-scheme: dark;
+  }
+
+  /* Override card backgrounds for better visibility on black */
+  .bg-card {
+    background-color: oklch(0.25 0 0) !important;
+  }
+
+  .text-card-foreground {
+    color: oklch(0.985 0 0) !important;
+  }
+
+  .text-muted-foreground {
+    color: oklch(0.7 0 0) !important;
+  }
+
+  .border {
+    border-color: oklch(0.4 0 0) !important;
+  }
+
+  /* Input styling for black background */
+  input[data-slot="input"] {
+    background-color: oklch(0.2 0 0) !important;
+    border-color: oklch(0.4 0 0) !important;
+    color: white !important;
+  }
+
+  input[data-slot="input"]:focus {
+    border-color: var(--orange) !important;
+    box-shadow: 0 0 0 3px var(--orange-light) !important;
+  }
+
+  input[data-slot="input"]::placeholder {
+    color: oklch(0.6 0 0) !important;
+  }
+
+  /* Button styling improvements */
+  button[data-slot="button"] {
+    color: white !important;
+  }
+
+  /* Label styling */
+  label {
+    color: white !important;
+  }
 }
 
 /* Orange accent utility classes */

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -32,20 +32,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <SessionProvider>
-          <div className="flex min-h-screen flex-col">
-            <header className="border-b border-orange/10">
-              <div className="container flex h-16 items-center justify-between">
-                <Link href="/" className="flex items-center gap-2 font-bold text-orange hover-orange">
-                  Promply
-                </Link>
-                <div className="flex items-center gap-6">
-                  <NavItems />
-                  <UserMenu />
-                </div>
-              </div>
-            </header>
-            <main className="flex-1">{children}</main>
-          </div>
+          {children}
         </SessionProvider>
       </body>
     </html>

diff --git a/src/components/NavItems.tsx b/src/components/NavItems.tsx
@@ -74,7 +74,7 @@ export function NavItems() {
               "flex items-center gap-2 text-sm font-medium transition-colors hover:text-orange",
               pathname === navItem.href
                 ? "text-orange"
-                : "text-foreground/60"
+                : "text-white/70 hover:text-white"
             )}
           >
             <navItem.icon className="h-4 w-4" />

diff --git a/src/components/auth/user-menu.tsx b/src/components/auth/user-menu.tsx
@@ -30,10 +30,10 @@ export function UserMenu() {
   if (status === "unauthenticated") {
     return (
       <div className="flex items-center gap-2">
-        <Button variant="ghost" size="sm" asChild className="hover:text-orange">
+        <Button variant="ghost" size="sm" asChild className="hover:text-orange text-white">
           <Link href="/auth/login">Sign In</Link>
         </Button>
-        <Button size="sm" asChild className="bg-orange hover:bg-orange-light border-orange">
+        <Button size="sm" asChild className="bg-orange hover:bg-orange-light border-orange text-white">
           <Link href="/auth/register">Sign Up</Link>
         </Button>
       </div>
@@ -50,7 +50,7 @@ export function UserMenu() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
-          <Button variant="ghost" size="sm" className="relative hover:text-orange">
+          <Button variant="ghost" size="sm" className="relative hover:text-orange text-white">
             {session?.user?.name || session?.user?.email}
           </Button>
         </motion.div>