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

9.3 KiB
Raw 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 01 execute 1
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
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
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:

  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:

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

  4. Subtitle: Below the CardTitle, add:

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

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

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

  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:

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

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

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