chore: archive v1.0 phase directories

2026-03-24 09:46:00 +01:00
parent 3a771ba7cd
commit 439d0e950d
35 changed files with 0 additions and 0 deletions
--- a/.planning/milestones/v1.0-phases/04-full-app-design-consistency/04-01-PLAN.md
+++ b/.planning/milestones/v1.0-phases/04-full-app-design-consistency/04-01-PLAN.md
@@ -0,0 +1,211 @@
+---
+phase: 04-full-app-design-consistency
+plan: 01
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+  - src/pages/LoginPage.tsx
+  - src/pages/RegisterPage.tsx
+  - src/i18n/en.json
+  - src/i18n/de.json
+autonomous: true
+requirements: [UI-AUTH-01, UI-DESIGN-01]
+
+must_haves:
+  truths:
+    - "Login page shows muted background with the card floating on top, app logo above title"
+    - "Register page matches Login page design — same background, logo, card accent treatment"
+    - "OAuth buttons (Google, GitHub) display provider SVG icons next to text labels"
+    - "Auth subtitle text appears below the app title inside the card"
+    - "Switching to German locale shows fully translated auth page text"
+  artifacts:
+    - path: "src/pages/LoginPage.tsx"
+      provides: "Redesigned login page with muted bg, logo, card accent, OAuth icons"
+      contains: "bg-muted"
+    - path: "src/pages/RegisterPage.tsx"
+      provides: "Redesigned register page matching login design"
+      contains: "bg-muted"
+    - path: "src/i18n/en.json"
+      provides: "Auth subtitle i18n keys"
+      contains: "auth.loginSubtitle"
+    - path: "src/i18n/de.json"
+      provides: "German auth subtitle translations"
+      contains: "auth.loginSubtitle"
+  key_links:
+    - from: "src/pages/LoginPage.tsx"
+      to: "/favicon.svg"
+      via: "img src for app logo"
+      pattern: 'src="/favicon.svg"'
+    - from: "src/pages/RegisterPage.tsx"
+      to: "/favicon.svg"
+      via: "img src for app logo"
+      pattern: 'src="/favicon.svg"'
+---
+
+<objective>
+Redesign the Login and Register pages with brand presence and visual polish matching the established design system.
+
+Purpose: Auth pages are the first impression of the app. Currently they use a plain `bg-background` with a bare card. This plan upgrades them to use a muted background, app logo, card accent styling, and provider SVG icons on OAuth buttons -- establishing visual consistency from the very first screen.
+
+Output: Redesigned LoginPage.tsx, RegisterPage.tsx, and new i18n keys for auth subtitles.
+</objective>
+
+<execution_context>
+@/home/jlmak/.claude/get-shit-done/workflows/execute-plan.md
+@/home/jlmak/.claude/get-shit-done/templates/summary.md
+</execution_context>
+
+<context>
+@.planning/PROJECT.md
+@.planning/ROADMAP.md
+@.planning/STATE.md
+@.planning/phases/04-full-app-design-consistency/04-CONTEXT.md
+@.planning/phases/04-full-app-design-consistency/04-RESEARCH.md
+
+<interfaces>
+<!-- PageShell is NOT used here -- auth pages are standalone, outside AppLayout -->
+
+From src/pages/LoginPage.tsx (current structure to modify):
+- Root: `<div className="flex min-h-screen items-center justify-center bg-background p-4">`
+- Card: `<Card className="w-full max-w-sm">`
+- Has OAuth buttons for Google and GitHub (text-only, no icons)
+- Has Separator with "Or continue with" text
+
+From src/pages/RegisterPage.tsx (current structure to modify):
+- Same root div pattern as LoginPage
+- No OAuth buttons (only email/password form)
+- No Separator
+
+From src/i18n/en.json (existing auth keys):
+```json
+"auth": {
+  "login": "Login",
+  "register": "Register",
+  "email": "Email",
+  "password": "Password",
+  "displayName": "Display Name",
+  "noAccount": "Don't have an account?",
+  "hasAccount": "Already have an account?",
+  "orContinueWith": "Or continue with"
+}
+```
+
+Logo asset: `/public/favicon.svg` -- stylized lightning-bolt SVG in purple (#863bff). Use via `<img src="/favicon.svg">`.
+</interfaces>
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Redesign LoginPage with brand presence and OAuth icons</name>
+  <files>src/pages/LoginPage.tsx, src/i18n/en.json, src/i18n/de.json</files>
+  <action>
+Modify LoginPage.tsx:
+
+1. **Background:** Change root div className from `bg-background` to `bg-muted/60`.
+
+2. **Card accent:** Add `border-t-4 border-t-primary shadow-lg` to the Card className.
+
+3. **App logo:** Inside CardHeader, above the CardTitle, add:
+   ```tsx
+   <img src="/favicon.svg" alt="" className="mx-auto mb-3 size-10" aria-hidden="true" />
+   ```
+
+4. **Subtitle:** Below the CardTitle, add:
+   ```tsx
+   <p className="text-sm text-muted-foreground">{t("auth.loginSubtitle")}</p>
+   ```
+
+5. **OAuth provider SVG icons:** Replace the plain text-only Google and GitHub buttons with inline SVG icons. Add a small (size-4) SVG before the text label in each button:
+
+   For Google button, add before "Google" text:
+   ```tsx
+   <svg className="size-4" viewBox="0 0 24 24" aria-hidden="true">
+     <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z" fill="#4285F4"/>
+     <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+     <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+     <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+   </svg>
+   ```
+
+   For GitHub button, add before "GitHub" text:
+   ```tsx
+   <svg className="size-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+     <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z"/>
+   </svg>
+   ```
+
+   Add `gap-2` to each Button's className to space the icon and text. The buttons already have `className="flex-1"` -- add `gap-2` via the className string.
+
+6. **i18n keys:** Add to en.json inside the "auth" object:
+   - `"loginSubtitle": "Sign in to your account"`
+   - `"registerSubtitle": "Create a new account"`
+
+   Add to de.json inside the "auth" object:
+   - `"loginSubtitle": "Melde dich bei deinem Konto an"`
+   - `"registerSubtitle": "Erstelle ein neues Konto"`
+
+IMPORTANT: Update both en.json and de.json atomically in this task. Do not leave any raw i18n key strings.
+  </action>
+  <verify>
+    <automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build</automated>
+  </verify>
+  <done>LoginPage shows muted/60 background, primary-colored top border on card, favicon.svg logo above title, "Sign in to your account" subtitle, Google SVG icon + GitHub SVG icon on OAuth buttons. Both en.json and de.json have the new auth subtitle keys.</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Redesign RegisterPage to match LoginPage treatment</name>
+  <files>src/pages/RegisterPage.tsx</files>
+  <action>
+Modify RegisterPage.tsx to match the LoginPage design established in Task 1:
+
+1. **Background:** Change root div className from `bg-background` to `bg-muted/60`.
+
+2. **Card accent:** Add `border-t-4 border-t-primary shadow-lg` to the Card className.
+
+3. **App logo:** Inside CardHeader, above the CardTitle, add:
+   ```tsx
+   <img src="/favicon.svg" alt="" className="mx-auto mb-3 size-10" aria-hidden="true" />
+   ```
+
+4. **Subtitle:** Below the CardTitle, add:
+   ```tsx
+   <p className="text-sm text-muted-foreground">{t("auth.registerSubtitle")}</p>
+   ```
+   The i18n key `auth.registerSubtitle` was already added in Task 1.
+
+5. **CardHeader padding:** Add `pb-4` to CardHeader className to match LoginPage spacing: `className="text-center pb-4"`.
+
+Also apply `pb-4` to LoginPage's CardHeader if not already done in Task 1 (add `className="text-center pb-4"`).
+
+Do NOT add OAuth buttons to RegisterPage -- it only has email/password registration. The existing "Already have an account?" link stays as-is.
+  </action>
+  <verify>
+    <automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build</automated>
+  </verify>
+  <done>RegisterPage shows same muted/60 background, same card accent (border-t-4 primary, shadow-lg), same favicon logo, and register-specific subtitle. Visual parity with LoginPage minus OAuth buttons.</done>
+</task>
+
+</tasks>
+
+<verification>
+- `bun run build` compiles without TypeScript errors
+- `grep -c "bg-background" src/pages/LoginPage.tsx src/pages/RegisterPage.tsx` returns 0 for both files (old pattern fully replaced)
+- `grep -c "bg-muted" src/pages/LoginPage.tsx src/pages/RegisterPage.tsx` returns 1 for each (new pattern applied)
+- `grep "loginSubtitle" src/i18n/en.json src/i18n/de.json` returns matches in both files
+- `grep "registerSubtitle" src/i18n/en.json src/i18n/de.json` returns matches in both files
+</verification>
+
+<success_criteria>
+- Both auth pages use `bg-muted/60` background instead of `bg-background`
+- Both auth pages show the app logo (`favicon.svg`) above the title
+- Both auth pages have a card with `border-t-4 border-t-primary shadow-lg`
+- LoginPage OAuth buttons show Google and GitHub SVG icons
+- Both en.json and de.json have `auth.loginSubtitle` and `auth.registerSubtitle` keys
+- `bun run build` passes
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/04-full-app-design-consistency/04-01-SUMMARY.md`
+</output>