David/kanban-dev-webapp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(login): use theme tokens instead of hardcoded neutral colours

Browse source 
The login page was still on Plan 1a's dark-only palette, so in light theme
it rendered a near-black card on a light page with the heading black-on-black
and effectively invisible. This is the first screen a client ever sees.

Plan 1b Task 13 required the hardcoded-colour grep to return nothing; it was
not run.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Dave 2026-09-16 10:36:01 +02:00
parent 95346c5c82
commit e419bc21db
1 changed files with 22 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/app/login/page.tsx
View file

@ -34,41 +34,54 @@ export default function LoginPage() {
}
return (
<main className="flex min-h-screen items-center justify-center p-6">
<main className="flex min-h-screen items-center justify-center bg-page p-6">
<form
onSubmit={onSubmit}
className="w-full max-w-sm space-y-4 rounded-xl border border-neutral-800 bg-neutral-900 p-6"
className="w-full max-w-sm space-y-4 rounded-[var(--radius-panel)] border border-border-subtle bg-panel p-6 shadow-[var(--shadow-panel)]"
>
<h1 className="text-lg font-semibold">Sign in</h1>
<div className="space-y-1">
<h1 className="text-lg font-semibold tracking-tight text-text-primary">
Sign in
</h1>
<p className="text-xs text-text-muted">
Project tracking for client work
</p>
</div>
<label className="block space-y-1">
<span className="text-sm text-neutral-400">Email</span>
<span className="text-sm text-text-secondary">Email</span>
<input
type="email"
required
autoComplete="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full rounded-lg border border-neutral-700 bg-neutral-950 px-3 py-2 outline-none focus:border-neutral-500"
className="w-full rounded-lg border border-border-subtle bg-surface px-3 py-2 text-text-primary outline-none focus:border-brand"
/>
</label>
<label className="block space-y-1">
<span className="text-sm text-neutral-400">Password</span>
<span className="text-sm text-text-secondary">Password</span>
<input
type="password"
required
autoComplete="current-password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full rounded-lg border border-neutral-700 bg-neutral-950 px-3 py-2 outline-none focus:border-neutral-500"
className="w-full rounded-lg border border-border-subtle bg-surface px-3 py-2 text-text-primary outline-none focus:border-brand"
/>
</label>
{error && <p className="text-sm text-red-400">{error}</p>}
{error && (
<p role="alert" className="text-sm text-accent">
{error}
</p>
)}
<button
type="submit"
disabled={pending}
className="w-full rounded-lg bg-neutral-100 px-3 py-2 font-medium text-neutral-900 disabled:opacity-50"
className="w-full rounded-lg bg-brand px-3 py-2 font-medium text-brand-fg transition-colors hover:bg-brand-hover disabled:opacity-50"
>
{pending ? "Signing in…" : "Sign in"}
</button>