SimpleFinanceDash/.planning/milestones/v1.0-phases/04-full-app-design-consistency/04-01-PLAN.md at Develop

makiolaj/SimpleFinanceDash

Fork 0

Files

Jean-Luc Makiola 439d0e950d chore: archive v1.0 phase directories

2026-03-24 09:46:00 +01:00

9.3 KiB

Raw Permalink Blame History

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase

plan

type

wave

depends_on

files_modified

autonomous

requirements

must_haves

04-full-app-design-consistency

execute

src/pages/LoginPage.tsx

src/pages/RegisterPage.tsx

src/i18n/en.json

src/i18n/de.json

true

UI-AUTH-01

UI-DESIGN-01

truths

artifacts

key_links

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

path	provides	contains
src/pages/LoginPage.tsx	Redesigned login page with muted bg, logo, card accent, OAuth icons	bg-muted

path	provides	contains
src/pages/RegisterPage.tsx	Redesigned register page matching login design	bg-muted

path	provides	contains
src/i18n/en.json	Auth subtitle i18n keys	auth.loginSubtitle

path	provides	contains
src/i18n/de.json	German auth subtitle translations	auth.loginSubtitle

from	to	via	pattern
src/pages/LoginPage.tsx	/favicon.svg	img src for app logo	src="/favicon.svg"

from	to	via	pattern
src/pages/RegisterPage.tsx	/favicon.svg	img src for app logo	src="/favicon.svg"

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.

<execution_context> @/home/jlmak/.claude/get-shit-done/workflows/execute-plan.md @/home/jlmak/.claude/get-shit-done/templates/summary.md </execution_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

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):

"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">.

Task 1: Redesign LoginPage with brand presence and OAuth icons src/pages/LoginPage.tsx, src/i18n/en.json, src/i18n/de.json Modify LoginPage.tsx:

Background: Change root div className from bg-background to bg-muted/60.
Card accent: Add border-t-4 border-t-primary shadow-lg to the Card className.

App logo: Inside CardHeader, above the CardTitle, add:

<img src="/favicon.svg" alt="" className="mx-auto mb-3 size-10" aria-hidden="true" />

Subtitle: Below the CardTitle, add:

<p className="text-sm text-muted-foreground">{t("auth.loginSubtitle")}</p>

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:

<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:

<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.

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. cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build 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.

Task 2: Redesign RegisterPage to match LoginPage treatment src/pages/RegisterPage.tsx Modify RegisterPage.tsx to match the LoginPage design established in Task 1:

Background: Change root div className from bg-background to bg-muted/60.
Card accent: Add border-t-4 border-t-primary shadow-lg to the Card className.

App logo: Inside CardHeader, above the CardTitle, add:

<img src="/favicon.svg" alt="" className="mx-auto mb-3 size-10" aria-hidden="true" />

Subtitle: Below the CardTitle, add:
```
<p className="text-sm text-muted-foreground">{t("auth.registerSubtitle")}</p>
```
The i18n key auth.registerSubtitle was already added in Task 1.
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. cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build 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.

- `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

<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>

After completion, create `.planning/phases/04-full-app-design-consistency/04-01-SUMMARY.md`

9.3 KiB Raw Permalink Blame History

9.3 KiB

Raw Permalink Blame History