docs(02-01): complete auth page branding plan
- SUMMARY.md: auth pages branded with gradient bg, wordmark, Alert errors - STATE.md: advanced progress, added decisions, updated session - ROADMAP.md: phase 02 plan progress updated (1/2 summaries) - REQUIREMENTS.md: AUTH-01 through AUTH-04 marked complete
This commit is contained in:
@@ -17,10 +17,10 @@ Requirements for this milestone. Each maps to roadmap phases.
|
|||||||
|
|
||||||
### Auth Screens
|
### Auth Screens
|
||||||
|
|
||||||
- [ ] **AUTH-01**: Login screen has a branded pastel gradient background (not plain white)
|
- [x] **AUTH-01**: Login screen has a branded pastel gradient background (not plain white)
|
||||||
- [ ] **AUTH-02**: Login screen displays a styled app wordmark/logo treatment
|
- [x] **AUTH-02**: Login screen displays a styled app wordmark/logo treatment
|
||||||
- [ ] **AUTH-03**: Register screen matches login screen's branded look
|
- [x] **AUTH-03**: Register screen matches login screen's branded look
|
||||||
- [ ] **AUTH-04**: Auth form errors display with styled alert blocks and error icons
|
- [x] **AUTH-04**: Auth form errors display with styled alert blocks and error icons
|
||||||
|
|
||||||
### Navigation & Layout
|
### Navigation & Layout
|
||||||
|
|
||||||
@@ -95,10 +95,10 @@ Which phases cover which requirements. Updated during roadmap creation.
|
|||||||
| DSGN-04 | Phase 1 | Complete |
|
| DSGN-04 | Phase 1 | Complete |
|
||||||
| DSGN-05 | Phase 1 | Complete |
|
| DSGN-05 | Phase 1 | Complete |
|
||||||
| FIX-02 | Phase 1 | Complete |
|
| FIX-02 | Phase 1 | Complete |
|
||||||
| AUTH-01 | Phase 2 | Pending |
|
| AUTH-01 | Phase 2 | Complete |
|
||||||
| AUTH-02 | Phase 2 | Pending |
|
| AUTH-02 | Phase 2 | Complete |
|
||||||
| AUTH-03 | Phase 2 | Pending |
|
| AUTH-03 | Phase 2 | Complete |
|
||||||
| AUTH-04 | Phase 2 | Pending |
|
| AUTH-04 | Phase 2 | Complete |
|
||||||
| NAV-01 | Phase 2 | Pending |
|
| NAV-01 | Phase 2 | Pending |
|
||||||
| NAV-02 | Phase 2 | Pending |
|
| NAV-02 | Phase 2 | Pending |
|
||||||
| NAV-03 | Phase 2 | Pending |
|
| NAV-03 | Phase 2 | Pending |
|
||||||
|
|||||||
@@ -3,14 +3,14 @@ gsd_state_version: 1.0
|
|||||||
milestone: v1.0
|
milestone: v1.0
|
||||||
milestone_name: milestone
|
milestone_name: milestone
|
||||||
status: planning
|
status: planning
|
||||||
stopped_at: Completed 01-design-token-foundation-01-02-PLAN.md
|
stopped_at: Completed 02-layout-and-brand-identity-02-01-PLAN.md
|
||||||
last_updated: "2026-03-11T20:28:15.679Z"
|
last_updated: "2026-03-11T20:50:06.093Z"
|
||||||
last_activity: 2026-03-11 — Roadmap created from requirements and research
|
last_activity: 2026-03-11 — Roadmap created from requirements and research
|
||||||
progress:
|
progress:
|
||||||
total_phases: 4
|
total_phases: 4
|
||||||
completed_phases: 1
|
completed_phases: 1
|
||||||
total_plans: 2
|
total_plans: 4
|
||||||
completed_plans: 2
|
completed_plans: 3
|
||||||
percent: 0
|
percent: 0
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -52,6 +52,7 @@ Progress: [░░░░░░░░░░] 0%
|
|||||||
*Updated after each plan completion*
|
*Updated after each plan completion*
|
||||||
| Phase 01-design-token-foundation P01 | 4 | 3 tasks | 6 files |
|
| Phase 01-design-token-foundation P01 | 4 | 3 tasks | 6 files |
|
||||||
| Phase 01-design-token-foundation P02 | 60 | 3 tasks | 8 files |
|
| Phase 01-design-token-foundation P02 | 60 | 3 tasks | 8 files |
|
||||||
|
| Phase 02-layout-and-brand-identity P01 | 8 | 2 tasks | 5 files |
|
||||||
|
|
||||||
## Accumulated Context
|
## Accumulated Context
|
||||||
|
|
||||||
@@ -69,6 +70,8 @@ Recent decisions affecting current work:
|
|||||||
- [Phase 01-design-token-foundation]: InlineEditCell wraps TableCell internally — callers own row structure, component owns display/edit state
|
- [Phase 01-design-token-foundation]: InlineEditCell wraps TableCell internally — callers own row structure, component owns display/edit state
|
||||||
- [Phase 01-design-token-foundation]: amountColorClass() is the only allowed way to color amount cells — raw text-green/text-red classes banned in dashboard components
|
- [Phase 01-design-token-foundation]: amountColorClass() is the only allowed way to color amount cells — raw text-green/text-red classes banned in dashboard components
|
||||||
- [Phase 01-design-token-foundation]: Chart Cell fills use palette[type].base keyed by categoryType — charts and card headers share the same color token
|
- [Phase 01-design-token-foundation]: Chart Cell fills use palette[type].base keyed by categoryType — charts and card headers share the same color token
|
||||||
|
- [Phase 02-layout-and-brand-identity]: Gradient background uses palette.saving/bill/investment light shades at 135deg for subtle tinted-paper feel on auth screens
|
||||||
|
- [Phase 02-layout-and-brand-identity]: Alert destructive replaces plain error <p> — semantic role=alert improves a11y and enables test assertions
|
||||||
|
|
||||||
### Pending Todos
|
### Pending Todos
|
||||||
|
|
||||||
@@ -81,6 +84,6 @@ None yet.
|
|||||||
|
|
||||||
## Session Continuity
|
## Session Continuity
|
||||||
|
|
||||||
Last session: 2026-03-11T20:19:46.066Z
|
Last session: 2026-03-11T20:50:06.091Z
|
||||||
Stopped at: Completed 01-design-token-foundation-01-02-PLAN.md
|
Stopped at: Completed 02-layout-and-brand-identity-02-01-PLAN.md
|
||||||
Resume file: None
|
Resume file: None
|
||||||
|
|||||||
@@ -0,0 +1,65 @@
|
|||||||
|
---
|
||||||
|
phase: 02-layout-and-brand-identity
|
||||||
|
plan: "01"
|
||||||
|
subsystem: auth-ui
|
||||||
|
tags: [branding, auth, pastel-gradient, shadcn-alert, wordmark]
|
||||||
|
dependency_graph:
|
||||||
|
requires: [frontend/src/lib/palette.ts, frontend/src/components/ui/alert.tsx]
|
||||||
|
provides: [branded-login-page, branded-register-page, shadcn-alert]
|
||||||
|
affects: [auth-flow-first-impression]
|
||||||
|
tech_stack:
|
||||||
|
added: [shadcn-alert]
|
||||||
|
patterns: [palette-light-shades-for-bg, gradient-text-clip, inline-style-tokens]
|
||||||
|
key_files:
|
||||||
|
created:
|
||||||
|
- frontend/src/components/ui/alert.tsx
|
||||||
|
- frontend/src/pages/LoginPage.test.tsx
|
||||||
|
- frontend/src/pages/RegisterPage.test.tsx
|
||||||
|
modified:
|
||||||
|
- frontend/src/pages/LoginPage.tsx
|
||||||
|
- frontend/src/pages/RegisterPage.tsx
|
||||||
|
decisions:
|
||||||
|
- "Gradient background uses palette.saving.light, palette.bill.light, palette.investment.light at 135deg — three light shades for a subtle tinted-paper feel"
|
||||||
|
- "Wordmark gradient runs oklch(0.50 0.12 260) to oklch(0.50 0.12 320) — primary hue to pink-shifted hue"
|
||||||
|
- "Alert destructive replaces plain <p> error text — semantic role='alert' improves a11y and enables test assertion"
|
||||||
|
metrics:
|
||||||
|
duration: "~8 minutes"
|
||||||
|
completed: "2026-03-11"
|
||||||
|
tasks_completed: 2
|
||||||
|
files_changed: 5
|
||||||
|
---
|
||||||
|
|
||||||
|
# Phase 02 Plan 01: Auth Page Branding Summary
|
||||||
|
|
||||||
|
Pastel gradient login and register pages with a gradient text wordmark and shadcn Alert errors — auth screens transformed from plain white cards into the first branded touchpoint.
|
||||||
|
|
||||||
|
## What Was Built
|
||||||
|
|
||||||
|
Both LoginPage and RegisterPage received identical branding treatment:
|
||||||
|
|
||||||
|
1. **Gradient background** — inline `style` with `linear-gradient(135deg, ...)` using `palette.saving.light`, `palette.bill.light`, and `palette.investment.light` light shades (~oklch 0.95-0.96 chroma 0.03-0.04). Replaces the `bg-background` Tailwind class.
|
||||||
|
|
||||||
|
2. **Gradient text wordmark** — `<span data-testid="wordmark">` with CSS text-clip gradient from primary blue (hue 260) to pink-violet (hue 320) renders the app name in the card header below the page title.
|
||||||
|
|
||||||
|
3. **shadcn Alert errors** — `Alert variant="destructive"` with `AlertCircle` icon and `AlertDescription` replaces the plain `<p className="text-sm text-destructive">` error display. Provides semantic `role="alert"` for a11y.
|
||||||
|
|
||||||
|
4. **Card shadow** — `shadow-lg` added to Card for visual lift against the gradient background.
|
||||||
|
|
||||||
|
## Tasks Completed
|
||||||
|
|
||||||
|
| Task | Name | Commit | Files |
|
||||||
|
|------|------|--------|-------|
|
||||||
|
| 1 | Install shadcn Alert and create test scaffolds | dfd88de | alert.tsx, LoginPage.test.tsx, RegisterPage.test.tsx |
|
||||||
|
| 2 | Brand LoginPage and RegisterPage | 381a060 | LoginPage.tsx, RegisterPage.tsx |
|
||||||
|
|
||||||
|
## Verification Results
|
||||||
|
|
||||||
|
- All 6 tests pass (AUTH-01 through AUTH-04): `bun vitest run src/pages/`
|
||||||
|
- Full test suite: 35 tests pass, 0 failures
|
||||||
|
- Production build: `bun run build` succeeds with zero errors
|
||||||
|
|
||||||
|
## Deviations from Plan
|
||||||
|
|
||||||
|
None — plan executed exactly as written.
|
||||||
|
|
||||||
|
## Self-Check: PASSED
|
||||||
Reference in New Issue
Block a user