Files

Jean-Luc Makiola b15a14dea0 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

4.4 KiB

Raw Blame History

phase, plan, subsystem, tags, requires, provides, affects, tech-stack, key-files, key-decisions, patterns-established, requirements-completed, duration, completed

phase

plan

subsystem

tags

requires

provides

affects

tech-stack

key-files

key-decisions

patterns-established

requirements-completed

duration

completed

04-full-app-design-consistency

react

tailwind

i18n

auth

shadcn

phase	provides
01-foundation	auth pages (LoginPage.tsx, RegisterPage.tsx) and i18n setup

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

04-02-PLAN

04-03-PLAN

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

created

modified

src/pages/LoginPage.tsx

src/pages/RegisterPage.tsx

src/i18n/en.json

src/i18n/de.json

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

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

UI-AUTH-01

UI-DESIGN-01

2min

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:

Task 1: Redesign LoginPage with brand presence and OAuth icons - 36d068e (feat)
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

4.4 KiB Raw Blame History