From b15a14dea0ecd7d817bb1a3e598f700867e16334 Mon Sep 17 00:00:00 2001 From: Jean-Luc Makiola Date: Tue, 17 Mar 2026 16:12:33 +0100 Subject: [PATCH] docs(04-01): complete auth page redesign plan - LoginPage and RegisterPage redesigned with muted bg, card accent, logo, subtitle - Google and GitHub SVG provider icons added to OAuth buttons - auth.loginSubtitle and auth.registerSubtitle keys in en.json and de.json - STATE.md updated with position, decisions, metrics - ROADMAP.md updated with Phase 4 progress (1/3 plans complete) --- .planning/ROADMAP.md | 2 +- .planning/STATE.md | 17 +-- .../04-01-SUMMARY.md | 116 ++++++++++++++++++ 3 files changed, 127 insertions(+), 8 deletions(-) create mode 100644 .planning/phases/04-full-app-design-consistency/04-01-SUMMARY.md diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index e15a5ff..96e268d 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -138,4 +138,4 @@ Phases execute in numeric order: 1 -> 2 -> 3 -> 4 | 1. Design Foundation and Primitives | 2/2 | Complete | 2026-03-16 | | 2. Dashboard Charts and Layout | 3/3 | Complete | 2026-03-16 | | 3. Collapsible Dashboard Sections | 1/2 | In Progress| | -| 4. Full-App Design Consistency | 0/3 | Not started | - | +| 4. Full-App Design Consistency | 1/3 | In Progress| | diff --git a/.planning/STATE.md b/.planning/STATE.md index c2ad7af..f25696a 100644 --- a/.planning/STATE.md +++ b/.planning/STATE.md @@ -3,14 +3,14 @@ gsd_state_version: 1.0 milestone: v1.0 milestone_name: milestone status: planning -stopped_at: Phase 4 context gathered -last_updated: "2026-03-17T14:50:31.407Z" +stopped_at: Completed 04-01-PLAN.md +last_updated: "2026-03-17T15:11:52.126Z" last_activity: 2026-03-16 — Phase 2 complete, transitioned to Phase 3 progress: total_phases: 4 completed_phases: 3 - total_plans: 7 - completed_plans: 7 + total_plans: 10 + completed_plans: 8 percent: 100 --- @@ -57,6 +57,7 @@ Progress: [████████████████████] 5/5 pla | Phase 02-dashboard-charts-and-layout P03 | 3min | 2 tasks | 2 files | | Phase 03-collapsible-dashboard-sections P01 | 2min | 2 tasks | 8 files | | Phase 03-collapsible-dashboard-sections P02 | 2min | 1 tasks | 2 files | +| Phase 04-full-app-design-consistency P01 | 2min | 2 tasks | 4 files | ## Accumulated Context @@ -82,6 +83,8 @@ Recent decisions affecting current work: - [Phase 03-collapsible-dashboard-sections]: Direction-aware diff: spending types (bill, variable_expense, debt) over when actual > budgeted; income/saving/investment over when actual < budgeted - [Phase 03-collapsible-dashboard-sections]: CollapsibleContent wired to CSS keyframes via data-[state=open]:animate-collapsible-open Tailwind variant - [Phase 03-collapsible-dashboard-sections]: key prop state reset over useEffect: keying DashboardContent by budgetId causes full remount on month change, cleanly resetting openSections without violating react-hooks linter rules +- [Phase 04-full-app-design-consistency]: Inline SVG paths used for Google and GitHub icons — avoids dependency on external icon library while keeping icons fully styled +- [Phase 04-full-app-design-consistency]: Auth card accent pattern established: border-t-4 border-t-primary shadow-lg on Card with bg-muted/60 background and favicon.svg logo ### Pending Todos @@ -93,6 +96,6 @@ None yet. ## Session Continuity -Last session: 2026-03-17T14:50:31.405Z -Stopped at: Phase 4 context gathered -Resume file: .planning/phases/04-full-app-design-consistency/04-CONTEXT.md +Last session: 2026-03-17T15:11:52.124Z +Stopped at: Completed 04-01-PLAN.md +Resume file: None diff --git a/.planning/phases/04-full-app-design-consistency/04-01-SUMMARY.md b/.planning/phases/04-full-app-design-consistency/04-01-SUMMARY.md new file mode 100644 index 0000000..c80e520 --- /dev/null +++ b/.planning/phases/04-full-app-design-consistency/04-01-SUMMARY.md @@ -0,0 +1,116 @@ +--- +phase: 04-full-app-design-consistency +plan: 01 +subsystem: ui +tags: [react, tailwind, i18n, auth, shadcn] + +# Dependency graph +requires: + - phase: 01-foundation + provides: auth pages (LoginPage.tsx, RegisterPage.tsx) and i18n setup +provides: + - Redesigned LoginPage with muted background, primary-accent card, app logo, subtitle, and Google/GitHub SVG icons + - Redesigned RegisterPage matching LoginPage visual treatment + - auth.loginSubtitle and auth.registerSubtitle i18n keys in en.json and de.json +affects: [04-02-PLAN, 04-03-PLAN] + +# Tech tracking +tech-stack: + added: [] + patterns: + - Auth pages use bg-muted/60 background (not bg-background) to create depth + - Card accent pattern: border-t-4 border-t-primary shadow-lg for visual anchoring + - App logo (favicon.svg) above CardTitle with mx-auto mb-3 size-10 for brand presence + - Inline SVG provider icons (no external icon library) for OAuth buttons with gap-2 spacing + +key-files: + created: [] + modified: + - src/pages/LoginPage.tsx + - src/pages/RegisterPage.tsx + - src/i18n/en.json + - src/i18n/de.json + +key-decisions: + - "Inline SVG paths used for Google and GitHub icons — avoids dependency on external icon library while keeping icons fully styled" + - "auth.registerSubtitle i18n key added in Task 1 (same commit as loginSubtitle) for atomicity, then consumed in Task 2" + +patterns-established: + - "Auth card accent: border-t-4 border-t-primary shadow-lg on Card" + - "Auth background: bg-muted/60 on root div" + - "App logo placement: img[src=/favicon.svg] inside CardHeader above CardTitle" + +requirements-completed: [UI-AUTH-01, UI-DESIGN-01] + +# Metrics +duration: 2min +completed: 2026-03-17 +--- + +# Phase 4 Plan 01: Auth Page Redesign Summary + +**LoginPage and RegisterPage redesigned with muted background, primary-accent card border, favicon logo, subtitle text, and inline SVG OAuth provider icons** + +## Performance + +- **Duration:** 2 min +- **Started:** 2026-03-17T15:08:11Z +- **Completed:** 2026-03-17T15:10:30Z +- **Tasks:** 2 +- **Files modified:** 4 + +## Accomplishments +- Both auth pages now use `bg-muted/60` background for visual depth instead of flat `bg-background` +- Card accent (`border-t-4 border-t-primary shadow-lg`) applied consistently on both pages +- `favicon.svg` app logo placed above the CardTitle for brand presence on first impression +- Google and GitHub OAuth buttons on LoginPage now show inline SVG provider icons with `gap-2` spacing +- `auth.loginSubtitle` and `auth.registerSubtitle` i18n keys added to both `en.json` and `de.json` + +## Task Commits + +Each task was committed atomically: + +1. **Task 1: Redesign LoginPage with brand presence and OAuth icons** - `36d068e` (feat) +2. **Task 2: Redesign RegisterPage to match LoginPage treatment** - `0ff9939` (feat) + +**Plan metadata:** (docs commit — see below) + +## Files Created/Modified +- `src/pages/LoginPage.tsx` - Redesigned with muted bg, card accent, logo, subtitle, SVG OAuth icons +- `src/pages/RegisterPage.tsx` - Redesigned to match LoginPage visual treatment, no OAuth buttons +- `src/i18n/en.json` - Added auth.loginSubtitle and auth.registerSubtitle keys +- `src/i18n/de.json` - Added German translations for both new auth subtitle keys + +## Decisions Made +- Inline SVG paths used for Google and GitHub icons — avoids pulling in an external icon library while keeping icons crisp at any scale and fully styled via Tailwind +- `auth.registerSubtitle` key was added in Task 1 alongside `loginSubtitle` for atomicity, even though it's only consumed by RegisterPage in Task 2 — this matches the plan's instruction to "update both en.json and de.json atomically in this task" + +## Deviations from Plan + +None - plan executed exactly as written. + +## Issues Encountered + +None - all steps completed cleanly, `bun run build` passed after each task. + +## User Setup Required + +None - no external service configuration required. + +## Next Phase Readiness +- Auth page visual treatment is complete; 04-02 and 04-03 plans can build on this established design pattern +- The card accent pattern (border-t-4 border-t-primary) and muted background are now documented for potential reuse in other full-page forms + +## Self-Check: PASSED + +- FOUND: src/pages/LoginPage.tsx +- FOUND: src/pages/RegisterPage.tsx +- FOUND: src/i18n/en.json +- FOUND: src/i18n/de.json +- FOUND: 04-01-SUMMARY.md +- FOUND commit: 36d068e (Task 1) +- FOUND commit: 0ff9939 (Task 2) + +--- +*Phase: 04-full-app-design-consistency* +*Completed: 2026-03-17*