makiolaj/SimpleFinanceDash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b15a14dea0ecd7d817bb1a3e598f700867e16334
SimpleFinanceDash/.planning/phases/04-full-app-design-consistency/04-01-PLAN.md

212 lines
9.3 KiB
Markdown
Raw Blame History

---
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>
Reference in New Issue View Git Blame Copy Permalink