136 lines
8.3 KiB
Plaintext
136 lines
8.3 KiB
Plaintext
# Progress Log — Login Logo & Blur Refinements
|
|
# Branch: ralph/login-logo-refinements
|
|
# 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/components/CvmisLogo.tsx — logo component with animation (timing constants to extract)
|
|
- src/components/LoginScreen.tsx — main login screen (overlay, blur, card styling)
|
|
- src/App.tsx — phase management (skip/restore boot sequence)
|
|
- src/index.css — CSS custom properties, design tokens
|
|
|
|
### CvmisLogo Component (from previous run)
|
|
- `size` prop: numeric, sets SVG height attribute directly
|
|
- `cssHeight` prop: string, sets height via CSS style (use for clamp/responsive values)
|
|
- `animated` prop: boolean, enables framer-motion reveal animation (1000ms total)
|
|
- Logo animation: 500ms rise (green capsule) + 500ms fan-out (all three) = 1000ms total
|
|
- All timing values are named constants at top of file — tune there, not inline
|
|
- Blend constants (OVERLAY_BLEND_*) are exported for use by other components (US-005)
|
|
|
|
### LoginScreen.tsx State (from previous run)
|
|
- Overlay: fixed inset-0 zIndex: 110, rgba(240, 245, 244, 0.7) + backdrop-filter: blur(20px)
|
|
- TopBar is zIndex: 100 — overlay now correctly covers it (fixed in US-006)
|
|
- Card borderRadius: 12px, inputs/button borderRadius: 4px
|
|
- Some colors already tokenized (--surface, --accent, --bg-dashboard) from previous run
|
|
- Some colors still hardcoded (#111827 input text, button bg states, caret color)
|
|
|
|
---
|
|
|
|
## 2026-02-15 - US-001: Skip to login phase for dev iteration
|
|
- Changed initial Phase state from `'boot'` to `'login'` in `src/App.tsx` line 47
|
|
- Files changed: `src/App.tsx`
|
|
- **Learnings for future iterations:**
|
|
- Phase state is a simple `useState<Phase>` on line 47 of App.tsx
|
|
- All phase rendering logic (`boot`, `ecg`, `login`, `pmr`) remains intact — only initial value changes
|
|
- US-011 will revert this exact change back to `'boot'`
|
|
---
|
|
|
|
## 2026-02-15 - US-002: Extract animation timing into named constants
|
|
- Extracted all inline timing values in CvmisLogo.tsx to named constants at top of file
|
|
- Constants added: RISE_DURATION_MS, RISE_DURATION_S, RISE_OPACITY_DURATION_S, RISE_EASING, RISE_START_Y, FAN_DELAY_AFTER_RISE_MS, FAN_DURATION_S, FAN_ROTATION_DEG, FAN_HORIZONTAL_PX, FAN_RIGHT_STAGGER_S, TOTAL_ANIMATION_MS
|
|
- Added overlap blend constants for US-005: OVERLAY_BLEND_START_PROGRESS, OVERLAP_BLEND_MAX_OPACITY, OVERLAP_BLEND_TRANSITION_DURATION_S (exported)
|
|
- Files changed: `src/components/CvmisLogo.tsx`
|
|
- **Learnings for future iterations:**
|
|
- Blend constants are `export`ed because TypeScript strict mode flags unused `const` declarations — exporting avoids the TS6133 error while making them available for US-005
|
|
- TOTAL_ANIMATION_MS is computed from FAN_DELAY_AFTER_RISE_MS + FAN_DURATION_S * 1000, so changing rise or fan timing automatically updates the done-timer
|
|
- FAN_EASING was already a named constant before this story; it was left in place and grouped with the new fan constants
|
|
---
|
|
|
|
## 2026-02-15 - US-003: Scale logo and branding block to ~50% of login card height
|
|
- Scaled CvmisLogo `cssHeight` prop from `clamp(80px, 8vw, 120px)` to `clamp(160px, 18vw, 280px)`
|
|
- Adjusted logo wrapper marginBottom from 10px to 12px for spacing balance
|
|
- Browser-verified: desktop ratio 51.3% (target 50% ±10%), mobile (375px) ratio 41.1% — both within tolerance
|
|
- No overflow or clipping on mobile viewport
|
|
- Files changed: `src/components/LoginScreen.tsx`
|
|
- **Learnings for future iterations:**
|
|
- The CvmisLogo `cssHeight` prop maps directly to a CSS `height` style on the SVG — `clamp()` values work well for responsive scaling
|
|
- At 375px viewport, `18vw = 67.5px` which triggers the clamp minimum of 160px — the logo remains a comfortable size on small screens
|
|
- The branding block ratio can be measured by comparing `brandingBlock.getBoundingClientRect().height + marginBottom` against `card.innerHeight - padding`
|
|
- The branding block container has class `flex flex-col items-center` — use this selector for programmatic measurement
|
|
---
|
|
|
|
## 2026-02-15 - US-004: Increase branding text to match dashboard typography scale
|
|
- Increased CVMIS title fontSize from `13px` to `clamp(16px, 1.4vw, 20px)` — renders 20px on desktop
|
|
- Increased subtitle fontSize from `11px` to `clamp(12px, 1vw, 14px)` — renders 14px on desktop
|
|
- Increased subtitle marginTop from `2px` to `3px` for better spacing with larger text
|
|
- Both remain in font-ui (Elvaro Grotesque) with weight 600 (title) and 400 (subtitle)
|
|
- Browser-verified: text is visually balanced with the larger logo and login form
|
|
- Files changed: `src/components/LoginScreen.tsx`
|
|
- **Learnings for future iterations:**
|
|
- The branding text clamp values use the same responsive pattern as the logo `cssHeight` — mid-values around 1-1.5vw work well for text
|
|
- Title and subtitle are `<span>` elements inside the `.flex.flex-col.items-center` branding container
|
|
- Weight hierarchy (600 title, 400 subtitle) provides sufficient visual differentiation without needing size contrast as large
|
|
---
|
|
|
|
## 2026-02-15 - US-005: Add overlap blend effect on fanning capsules
|
|
- Added `blendActive` state to CvmisLogo, triggered by timer at `blendStartMs` (50% through fan animation)
|
|
- Added two blend overlay `<g>` elements after the main pills: copies of left/right pill shapes with `mixBlendMode: 'multiply'` and opacity transitioning from 0 to 0.2
|
|
- Blend overlays share the same `transform` and `transition` as their corresponding original pills, plus an opacity transition using `OVERLAP_BLEND_TRANSITION_DURATION_S`
|
|
- Reduced motion: `blendActive` starts `true`, `transition: 'none'` — final blend state shown immediately
|
|
- Browser-verified: blend darkening visible at pill overlap areas, opacity confirmed at 0.2
|
|
- Files changed: `src/components/CvmisLogo.tsx`
|
|
- **Learnings for future iterations:**
|
|
- `mix-blend-mode` is not CSS-animatable — use overlay elements with animated opacity instead of trying to transition the blend mode
|
|
- Blend overlay approach: duplicate the pill shapes (rect only, no icons) as separate `<g>` elements with `mixBlendMode: 'multiply'` and low opacity
|
|
- The `useMemo` for `blendStartMs` avoids recalculation — all timing constants are module-level so this is stable
|
|
- Combined CSS transition strings work in SVG `<g>` style: `transform 0.6s cubic-bezier(...), opacity 0.3s ease-out`
|
|
---
|
|
|
|
## 2026-02-15 - US-006: Extend backdrop blur to cover full dashboard including TopBar
|
|
- Changed overlay from Tailwind `z-50` class to inline `zIndex: 110` to sit above TopBar (`zIndex: 100`)
|
|
- Browser-verified: TopBar, sidebar, and all content uniformly blurred; login card remains crisp
|
|
- Files changed: `src/components/LoginScreen.tsx`
|
|
- **Learnings for future iterations:**
|
|
- TopBar uses inline `zIndex: 100` (not a Tailwind class), so overlay needs inline zIndex > 100
|
|
- Tailwind's `z-50` = z-index 50, which was below the TopBar — switched to inline style for precise control
|
|
- The login card doesn't need its own z-index since it's a child of the overlay and inherits stacking context
|
|
---
|