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)
2026-03-17 16:12:33 +01:00
parent 0ff9939789
commit b15a14dea0
3 changed files with 127 additions and 8 deletions
--- 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|  |
--- 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
--- a/.planning/phases/04-full-app-design-consistency/04-01-SUMMARY.md
+++ 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*