Jean-Luc Makiola
b15a14dea0
- 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)
117 lines
4.4 KiB
Markdown
117 lines
4.4 KiB
Markdown
---
|
|
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*
|