Skip to content

Commit 4d3c6b6

Browse files
AdityaGoyal1999AdityaGoyal1999
committed
App UI polished
1 parent fb0c140 commit 4d3c6b6

12 files changed

Lines changed: 129 additions & 135 deletions

‎frontend/app/globals.css‎

Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -47,75 +47,75 @@
4747
--radius-4xl: calc(var(--radius) * 2.6);
4848
}
4949

50-
/* Clean light theme */
50+
/* Editorial warm cream — matches landing (see app/page.tsx) */
5151
:root {
52-
--background: oklch(0.99 0 0);
53-
--foreground: oklch(0.21 0.03 264);
54-
--card: oklch(1 0 0);
55-
--card-foreground: oklch(0.21 0.03 264);
56-
--popover: oklch(1 0 0);
57-
--popover-foreground: oklch(0.21 0.03 264);
58-
--primary: oklch(0.55 0.22 264);
59-
--primary-foreground: oklch(0.985 0 0);
60-
--secondary: oklch(0.52 0.02 264);
61-
--secondary-foreground: oklch(0.985 0 0);
62-
--muted: oklch(0.97 0.01 264);
63-
--muted-foreground: oklch(0.5 0.02 264);
64-
--accent: oklch(0.55 0.26 292);
65-
--accent-foreground: oklch(0.985 0 0);
52+
--background: #efeeed;
53+
--foreground: #0e0e0f;
54+
--card: #ffffff;
55+
--card-foreground: #0e0e0f;
56+
--popover: #fafaf9;
57+
--popover-foreground: #0e0e0f;
58+
--primary: #0e0e0f;
59+
--primary-foreground: #fafaf9;
60+
--secondary: #e4e2df;
61+
--secondary-foreground: #0e0e0f;
62+
--muted: #e8e6e3;
63+
--muted-foreground: rgba(14, 14, 15, 0.66);
64+
--accent: #dedcd8;
65+
--accent-foreground: #0e0e0f;
6666
--destructive: oklch(0.577 0.245 27.325);
67-
--border: oklch(0.91 0.005 264);
68-
--input: oklch(0.91 0.005 264);
69-
--ring: oklch(0.55 0.22 264);
70-
--chart-1: oklch(0.55 0.22 264);
71-
--chart-2: oklch(0.55 0.26 292);
72-
--chart-3: oklch(0.6 0.18 165);
73-
--chart-4: oklch(0.65 0.14 220);
74-
--chart-5: oklch(0.52 0.02 264);
67+
--border: rgba(14, 14, 15, 0.15);
68+
--input: rgba(14, 14, 15, 0.2);
69+
--ring: rgba(14, 14, 15, 0.3);
70+
--chart-1: #0e0e0f;
71+
--chart-2: #3d3d40;
72+
--chart-3: #6b6b6f;
73+
--chart-4: #9c9ca0;
74+
--chart-5: #c9c8c5;
7575
--radius: 0.625rem;
76-
--sidebar: oklch(0.99 0.005 264);
77-
--sidebar-foreground: oklch(0.21 0.03 264);
78-
--sidebar-primary: oklch(0.55 0.22 264);
79-
--sidebar-primary-foreground: oklch(0.985 0 0);
80-
--sidebar-accent: oklch(0.97 0.01 264);
81-
--sidebar-accent-foreground: oklch(0.21 0.03 264);
82-
--sidebar-border: oklch(0.91 0.005 264);
83-
--sidebar-ring: oklch(0.55 0.22 264);
76+
--sidebar: #e9e7e4;
77+
--sidebar-foreground: #0e0e0f;
78+
--sidebar-primary: #0e0e0f;
79+
--sidebar-primary-foreground: #fafaf9;
80+
--sidebar-accent: rgba(14, 14, 15, 0.06);
81+
--sidebar-accent-foreground: #0e0e0f;
82+
--sidebar-border: rgba(14, 14, 15, 0.12);
83+
--sidebar-ring: rgba(14, 14, 15, 0.28);
8484
}
8585

86-
/* Analytics dark theme */
86+
/* Warm dark (optional) — keeps cream landing spirit, readable contrast */
8787
.dark {
88-
--background: oklch(0.2 0.02 264);
89-
--foreground: oklch(0.98 0.005 264);
90-
--card: oklch(0.24 0.02 264);
91-
--card-foreground: oklch(0.98 0.005 264);
92-
--popover: oklch(0.24 0.02 264);
93-
--popover-foreground: oklch(0.98 0.005 264);
94-
--primary: oklch(0.55 0.18 165);
95-
--primary-foreground: oklch(0.2 0.02 264);
96-
--secondary: oklch(0.28 0.02 264);
97-
--secondary-foreground: oklch(0.98 0.005 264);
98-
--muted: oklch(0.25 0.02 264);
99-
--muted-foreground: oklch(0.65 0.02 264);
100-
--accent: oklch(0.65 0.15 220);
101-
--accent-foreground: oklch(0.2 0.02 264);
88+
--background: #1a1a1b;
89+
--foreground: #f4f3f1;
90+
--card: #222223;
91+
--card-foreground: #f4f3f1;
92+
--popover: #222223;
93+
--popover-foreground: #f4f3f1;
94+
--primary: #f4f3f1;
95+
--primary-foreground: #1a1a1b;
96+
--secondary: #2e2e30;
97+
--secondary-foreground: #f4f3f1;
98+
--muted: #2a2a2c;
99+
--muted-foreground: rgba(244, 243, 241, 0.65);
100+
--accent: #333335;
101+
--accent-foreground: #f4f3f1;
102102
--destructive: oklch(0.704 0.191 22.216);
103-
--border: oklch(0.35 0.02 264);
104-
--input: oklch(0.35 0.02 264);
105-
--ring: oklch(0.55 0.18 165);
106-
--chart-1: oklch(0.55 0.18 165);
107-
--chart-2: oklch(0.65 0.15 220);
108-
--chart-3: oklch(0.7 0.12 264);
109-
--chart-4: oklch(0.55 0.26 292);
110-
--chart-5: oklch(0.6 0.1 264);
111-
--sidebar: oklch(0.22 0.02 264);
112-
--sidebar-foreground: oklch(0.98 0.005 264);
113-
--sidebar-primary: oklch(0.55 0.18 165);
114-
--sidebar-primary-foreground: oklch(0.2 0.02 264);
115-
--sidebar-accent: oklch(0.28 0.02 264);
116-
--sidebar-accent-foreground: oklch(0.98 0.005 264);
117-
--sidebar-border: oklch(0.35 0.02 264);
118-
--sidebar-ring: oklch(0.55 0.18 165);
103+
--border: rgba(244, 243, 241, 0.12);
104+
--input: rgba(244, 243, 241, 0.14);
105+
--ring: rgba(244, 243, 241, 0.35);
106+
--chart-1: #f4f3f1;
107+
--chart-2: #c9c8c5;
108+
--chart-3: #9c9ca0;
109+
--chart-4: #6b6b6f;
110+
--chart-5: #3d3d40;
111+
--sidebar: #1e1e1f;
112+
--sidebar-foreground: #f4f3f1;
113+
--sidebar-primary: #f4f3f1;
114+
--sidebar-primary-foreground: #1a1a1b;
115+
--sidebar-accent: rgba(244, 243, 241, 0.08);
116+
--sidebar-accent-foreground: #f4f3f1;
117+
--sidebar-border: rgba(244, 243, 241, 0.1);
118+
--sidebar-ring: rgba(244, 243, 241, 0.35);
119119
}
120120

121121
@layer base {

‎frontend/app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { StepsSection } from "@/components/home/steps-section";
66

77
export default function Home() {
88
return (
9-
<div className="min-h-screen bg-[#efeeed] text-[#0e0e0f]">
9+
<div className="min-h-screen bg-background text-foreground">
1010
<main className="mx-auto w-full max-w-6xl px-6 py-8 sm:px-10 lg:px-12">
1111
<HomeHeader />
1212
<HomeHero />

‎frontend/app/signup/page.tsx‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Header } from "@/components/Header";
99
import { Button } from "@/components/ui/button";
1010

1111
const inputClassName =
12-
"h-10 w-full rounded-md border border-border bg-background px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2";
12+
"h-10 w-full rounded-md border border-border bg-card px-3 text-sm text-foreground shadow-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background";
1313

1414
function AuthForm() {
1515
const router = useRouter();
@@ -117,7 +117,7 @@ function AuthForm() {
117117
)}
118118
<Button
119119
type="button"
120-
className="h-10 w-full rounded-md bg-foreground text-background hover:bg-foreground/90"
120+
className="h-10 w-full rounded-xl bg-primary text-primary-foreground hover:bg-primary/90"
121121
onClick={handleSubmit}
122122
disabled={loading}
123123
>
@@ -146,10 +146,7 @@ function AuthForm() {
146146
{isLogin ? (
147147
<>
148148
Don&apos;t have an account?{" "}
149-
<Link
150-
href="/signup"
151-
className="font-medium text-primary hover:underline"
152-
>
149+
<Link href="/signup" className="font-medium text-foreground underline-offset-4 hover:underline">
153150
Sign up
154151
</Link>
155152
</>
@@ -158,7 +155,7 @@ function AuthForm() {
158155
Already have an account?{" "}
159156
<Link
160157
href="/signup?mode=login"
161-
className="font-medium text-primary hover:underline"
158+
className="font-medium text-foreground underline-offset-4 hover:underline"
162159
>
163160
Log in
164161
</Link>
@@ -174,19 +171,28 @@ function SignUpPageFallback() {
174171
<div className="space-y-6">
175172
<div className="h-8 w-64 animate-pulse rounded bg-muted" />
176173
<div className="space-y-3">
177-
<div className="h-10 w-full rounded-md border border-border bg-background" />
174+
<div className="h-10 w-full rounded-md border border-border bg-card" />
178175
<div className="h-10 w-full rounded-md bg-muted" />
179176
</div>
180-
<div className="h-10 w-full rounded-md border border-border" />
177+
<div className="h-10 w-full rounded-md border border-border bg-background" />
181178
</div>
182179
);
183180
}
184181

185182
export default function SignUpPage() {
186183
return (
187-
<div className="flex min-h-screen flex-col bg-[#fafafa]">
188-
<Header />
189-
<main className="flex flex-1 flex-col items-center justify-center px-4 pt-14 pb-8">
184+
<div className="flex min-h-screen flex-col bg-background text-foreground">
185+
<Header
186+
trailing={
187+
<Link
188+
href="/"
189+
className="text-sm font-semibold text-muted-foreground transition-colors hover:text-foreground"
190+
>
191+
Back to home
192+
</Link>
193+
}
194+
/>
195+
<main className="flex flex-1 flex-col items-center justify-center px-6 pb-12 pt-6 sm:px-10 lg:px-12">
190196
<div className="w-full max-w-[400px] space-y-8">
191197
<Suspense fallback={<SignUpPageFallback />}>
192198
<AuthForm />

‎frontend/components/Header.tsx‎

Lines changed: 18 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,26 @@
11
import Link from "next/link";
2-
import Image from "next/image";
2+
import type { ReactNode } from "react";
33

4-
const navLinks = [
5-
{ href: "#", label: "About us" },
6-
{ href: "#", label: "Features" },
7-
{ href: "#", label: "Pricing" },
8-
{ href: "#", label: "Contact" },
9-
{ href: "/signup", label: "Sign up" },
10-
];
4+
type HeaderProps = {
5+
/** Replaces the default “Sign up” pill (e.g. auth page “Back to home”). */
6+
trailing?: ReactNode;
7+
};
118

12-
export function Header() {
9+
export function Header({ trailing }: HeaderProps) {
1310
return (
14-
<header className="fixed left-0 right-0 top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
15-
<div className="container flex h-14 items-center justify-between px-4">
16-
<Link
17-
href="/"
18-
className="flex items-center gap-2 font-semibold text-foreground transition-colors hover:text-primary"
19-
>
20-
<Image
21-
src="/logo/vector/default-monochrome-black.svg"
22-
alt="What to read AI?"
23-
width={28}
24-
height={28}
25-
className="size-7 shrink-0 object-contain"
26-
/>
27-
What to read AI?
11+
<header className="w-full border-b border-border pb-6">
12+
<div className="mx-auto flex w-full max-w-6xl items-center justify-between px-6 sm:px-10 lg:px-12">
13+
<Link href="/" className="text-2xl font-semibold tracking-tight text-foreground">
14+
What to read AI
2815
</Link>
29-
<nav className="flex items-center gap-6">
30-
{navLinks.map(({ href, label }) => (
31-
<Link
32-
key={label}
33-
href={href}
34-
className="text-sm text-muted-foreground transition-colors hover:text-foreground"
35-
>
36-
{label}
37-
</Link>
38-
))}
39-
</nav>
16+
{trailing ?? (
17+
<Link
18+
href="/signup"
19+
className="rounded-full border border-foreground px-5 py-2 text-sm font-semibold text-foreground transition-colors hover:bg-foreground hover:text-background"
20+
>
21+
Sign Up
22+
</Link>
23+
)}
4024
</div>
4125
</header>
4226
);

‎frontend/components/dashboard-onboarding-trigger.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export function DashboardOnboardingTrigger() {
3535
}, []);
3636

3737
return (
38-
<div className="fixed right-4 top-3 z-50">
38+
<div className="fixed right-4 top-3 z-50 rounded-md border border-border bg-background/95 p-0.5 shadow-sm backdrop-blur-sm">
3939
<Button type="button" variant="outline" size="sm" onClick={handleStartOnboarding}>
4040
Demo App
4141
</Button>

‎frontend/components/dashboard-sidebar-profile.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export function DashboardSidebarProfile({
5050
variant="ghost"
5151
size="icon"
5252
onClick={onLogout}
53-
className="shrink-0 bg-sidebar-accent text-sidebar-foreground hover:bg-red-100 hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden"
53+
className="shrink-0 bg-sidebar-accent text-sidebar-foreground hover:bg-destructive/10 hover:text-destructive group-data-[collapsible=icon]:hidden"
5454
aria-label="Log out"
5555
>
5656
<LogOut className="size-4" />

‎frontend/components/dashboard-sidebar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export function DashboardSidebar({ children }: { children: React.ReactNode }) {
4040
}
4141

4242
return (
43-
<SidebarProvider>
43+
<SidebarProvider className="bg-background text-foreground">
4444
<Sidebar collapsible="icon">
4545
<SidebarHeader className="border-b border-sidebar-border">
4646
<SidebarMenu>
@@ -83,7 +83,7 @@ export function DashboardSidebar({ children }: { children: React.ReactNode }) {
8383
</SidebarFooter>
8484
</Sidebar>
8585
<SidebarInset>
86-
<header className="flex h-12 shrink-0 items-center gap-2 border-b bg-background px-4">
86+
<header className="flex h-12 shrink-0 items-center gap-2 border-b border-border bg-background px-4">
8787
<SidebarTrigger />
8888
</header>
8989
{children}

‎frontend/components/home/home-footer.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@ import Link from "next/link";
22

33
export function HomeFooter() {
44
return (
5-
<footer className="border-t border-black/15">
5+
<footer className="border-t border-border">
66
<div className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-6 py-10 sm:px-10 lg:flex-row lg:items-center lg:justify-between lg:px-12">
77
<div>
8-
<p className="text-xl font-semibold tracking-tight">What to read AI</p>
9-
<p className="mt-2 text-sm text-black/65">
8+
<p className="text-xl font-semibold tracking-tight text-foreground">What to read AI</p>
9+
<p className="mt-2 text-sm text-muted-foreground">
1010
Personalized book recommendations to help you pick your next read.
1111
</p>
1212
</div>
1313

14-
<div className="flex flex-wrap items-center gap-6 text-sm text-black/70">
15-
<Link href="/signup" className="transition-colors hover:text-black">
14+
<div className="flex flex-wrap items-center gap-6 text-sm text-muted-foreground">
15+
<Link href="/signup" className="transition-colors hover:text-foreground">
1616
Sign Up
1717
</Link>
1818
</div>

‎frontend/components/home/home-header.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import Link from "next/link";
22

33
export function HomeHeader() {
44
return (
5-
<header className="flex items-center justify-between border-b border-black/15 pb-6">
6-
<Link href="/" className="text-2xl font-semibold tracking-tight">
5+
<header className="flex items-center justify-between border-b border-border pb-6">
6+
<Link href="/" className="text-2xl font-semibold tracking-tight text-foreground">
77
What to read AI
88
</Link>
99

1010
<Link
1111
href="/signup"
12-
className="rounded-full border border-black px-5 py-2 text-sm font-semibold transition-colors hover:bg-black hover:text-white"
12+
className="rounded-full border border-foreground px-5 py-2 text-sm font-semibold text-foreground transition-colors hover:bg-foreground hover:text-background"
1313
>
1414
Sign Up
1515
</Link>

‎frontend/components/home/home-hero.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@ import Link from "next/link";
33

44
export function HomeHero() {
55
return (
6-
<section className="grid gap-10 border-b border-black/15 py-12 md:grid-cols-2 md:items-center">
6+
<section className="grid gap-10 border-b border-border py-12 md:grid-cols-2 md:items-center">
77
<div className="space-y-7">
8-
<h1 className="max-w-md text-5xl font-bold leading-[1.05] tracking-tight sm:text-6xl">
8+
<h1 className="max-w-md text-5xl font-bold leading-[1.05] tracking-tight text-foreground sm:text-6xl">
99
Welcome to What to read AI where you can find the best books for you.
1010
</h1>
11-
<p className="max-w-md text-lg leading-relaxed text-black/70">
11+
<p className="max-w-md text-lg leading-relaxed text-muted-foreground">
1212
Explore the best books for you in no time.
1313
</p>
1414
<Link
1515
href="/signup"
16-
className="inline-flex rounded-xl bg-black px-8 py-3 text-base font-semibold text-white transition-colors hover:bg-black/85"
16+
className="inline-flex rounded-xl bg-primary px-8 py-3 text-base font-semibold text-primary-foreground transition-colors hover:bg-primary/85"
1717
>
1818
Get Started
1919
</Link>

0 commit comments

Comments
 (0)