Skip to content

Commit c80ddf3

Browse files
pmarqueespmarquees
authored
Merge pull request #5 from pmarquees/claude/issue-4-20250523_152503
fix: center home page content and apply consistent black theme
2 parents 3e496fc + 6949e2f commit c80ddf3

File tree

7 files changed

+114
-59
lines changed

7 files changed

+114
-59
lines changed

‎src/app/(dashboard)/layout.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ export default function DashboardLayout({
2626
};
2727

2828
return (
29-
<div className="flex min-h-screen flex-col">
30-
<header className="sticky top-0 z-50 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
29+
<div className="flex min-h-screen flex-col bg-black text-white">
30+
<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">
3131
<Link href="/" className="flex items-center gap-2 font-semibold">
3232
<motion.span
3333
className="text-xl font-bold text-orange"
@@ -46,17 +46,19 @@ export default function DashboardLayout({
4646
size="icon"
4747
onClick={showOnboarding}
4848
title="Show onboarding guide"
49-
className="hover-orange"
49+
className="hover-orange text-white hover:text-orange"
5050
>
5151
<LucideHelpCircle className="h-5 w-5" />
5252
</Button>
5353
<UserMenu />
5454
</div>
5555
</header>
56-
<main className="flex-1 p-10">
57-
<PageTransition>
58-
{children}
59-
</PageTransition>
56+
<main className="flex-1 flex items-center justify-center p-10">
57+
<div className="w-full max-w-7xl">
58+
<PageTransition>
59+
{children}
60+
</PageTransition>
61+
</div>
6062
</main>
6163
<Toaster />
6264
<OnboardingModal />

‎src/app/auth/login/page.tsx‎

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,34 @@ export const metadata: Metadata = {
1010

1111
export default function LoginPage() {
1212
return (
13-
<div className="container flex h-screen w-screen flex-col items-center justify-center">
14-
<div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
15-
<div className="flex flex-col space-y-2 text-center">
16-
<h1 className="text-2xl font-semibold tracking-tight">Welcome back</h1>
17-
<p className="text-sm text-muted-foreground">
18-
Enter your credentials to sign in to your account
13+
<div className="flex min-h-screen flex-col bg-black text-white">
14+
<header className="border-b border-white/10">
15+
<div className="container flex h-16 items-center justify-between">
16+
<Link href="/" className="flex items-center gap-2 font-bold text-orange hover-orange">
17+
Promply
18+
</Link>
19+
</div>
20+
</header>
21+
<div className="container flex flex-1 w-screen flex-col items-center justify-center">
22+
<div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
23+
<div className="flex flex-col space-y-2 text-center">
24+
<h1 className="text-2xl font-semibold tracking-tight text-white">Welcome back</h1>
25+
<p className="text-sm text-white/70">
26+
Enter your credentials to sign in to your account
27+
</p>
28+
</div>
29+
<Suspense fallback={<div>Loading...</div>}>
30+
<LoginForm />
31+
</Suspense>
32+
<p className="px-8 text-center text-sm text-white/70">
33+
<Link
34+
href="/auth/register"
35+
className="hover:text-orange underline underline-offset-4"
36+
>
37+
Don&apos;t have an account? Sign Up
38+
</Link>
1939
</p>
2040
</div>
21-
<Suspense fallback={<div>Loading...</div>}>
22-
<LoginForm />
23-
</Suspense>
24-
<p className="px-8 text-center text-sm text-muted-foreground">
25-
<Link
26-
href="/auth/register"
27-
className="hover:text-brand underline underline-offset-4"
28-
>
29-
Don&apos;t have an account? Sign Up
30-
</Link>
31-
</p>
3241
</div>
3342
</div>
3443
);

‎src/app/auth/register/page.tsx‎

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,34 @@ export const metadata: Metadata = {
1010

1111
export default function RegisterPage() {
1212
return (
13-
<div className="container flex h-screen w-screen flex-col items-center justify-center">
14-
<div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
15-
<div className="flex flex-col space-y-2 text-center">
16-
<h1 className="text-2xl font-semibold tracking-tight">Create an account</h1>
17-
<p className="text-sm text-muted-foreground">
18-
Enter your information to create an account
13+
<div className="flex min-h-screen flex-col bg-black text-white">
14+
<header className="border-b border-white/10">
15+
<div className="container flex h-16 items-center justify-between">
16+
<Link href="/" className="flex items-center gap-2 font-bold text-orange hover-orange">
17+
Promply
18+
</Link>
19+
</div>
20+
</header>
21+
<div className="container flex flex-1 w-screen flex-col items-center justify-center">
22+
<div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
23+
<div className="flex flex-col space-y-2 text-center">
24+
<h1 className="text-2xl font-semibold tracking-tight text-white">Create an account</h1>
25+
<p className="text-sm text-white/70">
26+
Enter your information to create an account
27+
</p>
28+
</div>
29+
<Suspense fallback={<div>Loading...</div>}>
30+
<RegisterForm />
31+
</Suspense>
32+
<p className="px-8 text-center text-sm text-white/70">
33+
<Link
34+
href="/auth/login"
35+
className="hover:text-orange underline underline-offset-4"
36+
>
37+
Already have an account? Sign In
38+
</Link>
1939
</p>
2040
</div>
21-
<Suspense fallback={<div>Loading...</div>}>
22-
<RegisterForm />
23-
</Suspense>
24-
<p className="px-8 text-center text-sm text-muted-foreground">
25-
<Link
26-
href="/auth/login"
27-
className="hover:text-brand underline underline-offset-4"
28-
>
29-
Already have an account? Sign In
30-
</Link>
31-
</p>
3241
</div>
3342
</div>
3443
);

‎src/app/globals.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,54 @@
141141
body {
142142
@apply bg-background text-foreground;
143143
}
144+
145+
/* Force dark theme */
146+
:root {
147+
color-scheme: dark;
148+
}
149+
150+
/* Override card backgrounds for better visibility on black */
151+
.bg-card {
152+
background-color: oklch(0.25 0 0) !important;
153+
}
154+
155+
.text-card-foreground {
156+
color: oklch(0.985 0 0) !important;
157+
}
158+
159+
.text-muted-foreground {
160+
color: oklch(0.7 0 0) !important;
161+
}
162+
163+
.border {
164+
border-color: oklch(0.4 0 0) !important;
165+
}
166+
167+
/* Input styling for black background */
168+
input[data-slot="input"] {
169+
background-color: oklch(0.2 0 0) !important;
170+
border-color: oklch(0.4 0 0) !important;
171+
color: white !important;
172+
}
173+
174+
input[data-slot="input"]:focus {
175+
border-color: var(--orange) !important;
176+
box-shadow: 0 0 0 3px var(--orange-light) !important;
177+
}
178+
179+
input[data-slot="input"]::placeholder {
180+
color: oklch(0.6 0 0) !important;
181+
}
182+
183+
/* Button styling improvements */
184+
button[data-slot="button"] {
185+
color: white !important;
186+
}
187+
188+
/* Label styling */
189+
label {
190+
color: white !important;
191+
}
144192
}
145193

146194
/* Orange accent utility classes */

‎src/app/layout.tsx‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -32,20 +32,7 @@ export default function RootLayout({
3232
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
3333
>
3434
<SessionProvider>
35-
<div className="flex min-h-screen flex-col">
36-
<header className="border-b border-orange/10">
37-
<div className="container flex h-16 items-center justify-between">
38-
<Link href="/" className="flex items-center gap-2 font-bold text-orange hover-orange">
39-
Promply
40-
</Link>
41-
<div className="flex items-center gap-6">
42-
<NavItems />
43-
<UserMenu />
44-
</div>
45-
</div>
46-
</header>
47-
<main className="flex-1">{children}</main>
48-
</div>
35+
{children}
4936
</SessionProvider>
5037
</body>
5138
</html>

‎src/components/NavItems.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export function NavItems() {
7474
"flex items-center gap-2 text-sm font-medium transition-colors hover:text-orange",
7575
pathname === navItem.href
7676
? "text-orange"
77-
: "text-foreground/60"
77+
: "text-white/70 hover:text-white"
7878
)}
7979
>
8080
<navItem.icon className="h-4 w-4" />

‎src/components/auth/user-menu.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@ export function UserMenu() {
3030
if (status === "unauthenticated") {
3131
return (
3232
<div className="flex items-center gap-2">
33-
<Button variant="ghost" size="sm" asChild className="hover:text-orange">
33+
<Button variant="ghost" size="sm" asChild className="hover:text-orange text-white">
3434
<Link href="/auth/login">Sign In</Link>
3535
</Button>
36-
<Button size="sm" asChild className="bg-orange hover:bg-orange-light border-orange">
36+
<Button size="sm" asChild className="bg-orange hover:bg-orange-light border-orange text-white">
3737
<Link href="/auth/register">Sign Up</Link>
3838
</Button>
3939
</div>
@@ -50,7 +50,7 @@ export function UserMenu() {
5050
<DropdownMenu>
5151
<DropdownMenuTrigger asChild>
5252
<motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
53-
<Button variant="ghost" size="sm" className="relative hover:text-orange">
53+
<Button variant="ghost" size="sm" className="relative hover:text-orange text-white">
5454
{session?.user?.name || session?.user?.email}
5555
</Button>
5656
</motion.div>

0 commit comments

Comments
 (0)