# Progress Log — Login Screen Rework # Branch: ralph/login-screen-rework # Started: 2026-02-15 ## Codebase Patterns ### Project Structure - Components in `src/components/`, tiles in `src/components/tiles/` - Data files in `src/data/` - Types in `src/types/pmr.ts` and `src/types/index.ts` - Hooks in `src/hooks/`, Contexts in `src/contexts/`, Lib in `src/lib/` - Path alias: `@/` maps to `./src/` ### Phase Management - App.tsx controls phase: 'boot' -> 'ecg' -> 'login' -> 'pmr' - BootSequence.tsx, ECGAnimation.tsx — LOCKED, do not modify - LoginScreen.tsx bridges to dashboard ### Typography - Elvaro Grotesque (`font-ui`, `var(--font-ui)`) — primary UI font - Blumir (`font-ui-alt`) — alternative variable font - Geist Mono (`font-geist`, `var(--font-geist-mono)`) — timestamps, data values - Fira Code (`font-mono`) — boot/ECG terminal only - Do NOT use Inter, Roboto, DM Sans, or system defaults ### Design Tokens (index.css CSS variables) - --surface: #FFFFFF (card/topbar background) - --bg-dashboard: #F0F5F4 (warm sage content background) - --accent: #0D6E6E (teal primary) - --accent-hover: #0A8080 - --accent-light: rgba(10,128,128,0.08) - --border: #D4E0DE (structural borders) - --border-card: #E4EDEB (card/inner borders) - --text-primary: #1A2B2A - --text-secondary: #5B7A78 - --text-tertiary: #8DA8A5 - --sidebar-width: 304px - --topbar-height: 56px ### Known Dependencies - React 18.3.1, TypeScript, Vite, Tailwind CSS - Framer Motion 11.15.0, Lucide React 0.468.0, fuse.js 7.0.0 ### Key Files for This Feature - src/App.tsx — phase management, will need restructuring for blur overlay - src/components/LoginScreen.tsx — main login screen (416 lines) - src/components/TopBar.tsx — Home icon replacement target (line 57) - src/components/DashboardLayout.tsx — rendered behind login blur - src/contexts/DetailPanelContext.tsx — wraps DashboardLayout - cvmis-logo.svg — source SVG with 3 capsule groups - LogoReveal/frame 1-5.jpg — animation reference frames ### LoginScreen.tsx Key Lines - Line 20: connectionState useState - Line 43: canLogin derived state - Line 60-101: startLoginSequence (typing animation) - Line 110-137: useEffect with connectionTimeout (2000ms) and startLoginSequence delay (400ms) - Line 145-415: JSX render (card, form, button, status indicator) - Line 213-218: Shield icon (to be replaced) - Line 229: "CareerRecord PMR" title - Line 240: "Clinical Information System" subtitle - Line 367-388: Connection status indicator (6px dot, 10px text) ---