120 lines
6.4 KiB
Plaintext
120 lines
6.4 KiB
Plaintext
# Progress Log — Typography & Spacing Scale Rework
|
|
# Branch: ralph/dashboard-restructure
|
|
# Started: 2026-02-14
|
|
|
|
## Codebase Patterns
|
|
|
|
### Project Structure
|
|
- Components in `src/components/`, tiles in `src/components/tiles/`
|
|
- Detail renderers in `src/components/detail/`
|
|
- 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`) — primary UI font
|
|
- Blumir (`font-ui-alt`) — alternative variable font
|
|
- Geist Mono (`font-geist`) — 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)
|
|
- --sidebar-width: 272px (target: 304px)
|
|
- --topbar-height: 48px (target: 56px)
|
|
- --subnav-height: 36px (target: 42px)
|
|
- Dashboard grid gap: 12/16px (target: 14/20px)
|
|
- Card padding: 20px (target: 24px)
|
|
|
|
### 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/index.css — CSS custom properties, grid gap
|
|
- src/components/Card.tsx — Card padding, CardHeader sizing
|
|
- src/components/TopBar.tsx — brand, search, session text
|
|
- src/components/SubNav.tsx — tab text, height
|
|
- src/components/Sidebar.tsx — all sidebar content sizing
|
|
- src/components/tiles/PatientSummaryTile.tsx — profile text, KPI cards
|
|
- src/components/DashboardLayout.tsx — LastConsultationSubsection, main content padding
|
|
- src/components/tiles/ProjectsTile.tsx — project items, tech tags
|
|
- src/components/EducationSubsection.tsx — education entries
|
|
- src/components/WorkExperienceSubsection.tsx — role items, expanded content
|
|
- src/components/RepeatMedicationsSubsection.tsx — skill rows, category sections
|
|
- src/components/ParentSection.tsx — parent heading sizing
|
|
|
|
### Sizing Context
|
|
- Target display: 2560x1440 (QHD)
|
|
- Current body text: 13px → target: 15px
|
|
- Current labels/metadata: 9-10px → target: 11-12px minimum
|
|
- Current sidebar details: 11-11.5px → target: 13px
|
|
- No text below 11px anywhere in dashboard
|
|
|
|
---
|
|
|
|
## 2026-02-14 — US-019
|
|
- Updated --sidebar-width 272px→304px, --topbar-height 48px→56px, --subnav-height 36px→42px in index.css
|
|
- Updated .dashboard-grid gap from 12px→14px (mobile), 16px→20px (tablet/desktop)
|
|
- Updated Card.tsx: padding 20px→24px, CardHeader title fontSize 12px→13px, rightText fontSize 10px→11px, dot 8px→9px, marginBottom 16px→18px
|
|
- Files changed: src/index.css, src/components/Card.tsx
|
|
- **Learnings for future iterations:**
|
|
- CSS vars (--sidebar-width, --topbar-height, --subnav-height) propagate automatically to TopBar, Sidebar, DashboardLayout — no additional changes needed
|
|
- Card padding and CardHeader sizing affect every tile in the dashboard since all tiles use these components
|
|
- Dashboard grid gap is defined in 3 media query blocks in index.css: base (mobile), 768px (tablet), 1024px (desktop)
|
|
---
|
|
|
|
## 2026-02-14 — US-020
|
|
- Scaled TopBar: brand text 13px→15px, 'Remote' label 11px→12px, search text 13px→14px, search height 42px→46px, Ctrl+K kbd 10px→11px, A.RECRUITER 12px→13px, session badge 11px→12px, skip-link 13px→14px, Home icon 18→20, Search icon 16→17
|
|
- Scaled SubNav: tab fontSize 13px→14px, minHeight 36px→42px
|
|
- Files changed: src/components/TopBar.tsx, src/components/SubNav.tsx
|
|
- **Learnings for future iterations:**
|
|
- TopBar has two brand spans: one for desktop (sm:inline) and one for mobile (sm:hidden) — both need fontSize updates
|
|
- TopBar session badge also has two spans: one for xs+ (xs:inline) and one for mobile (xs:hidden) — both need updating
|
|
- SubNav height is controlled by both the CSS var (--subnav-height) and the button minHeight — both should match
|
|
- SubNav uses sticky positioning with top: var(--topbar-height), so it automatically adjusts when topbar height changes
|
|
---
|
|
|
|
## 2026-02-14 — US-018
|
|
- Changed initial Phase state from 'boot' to 'pmr' in src/App.tsx (line 47)
|
|
- Boot/ECG/login phases remain in code — only the default state changed
|
|
- App now loads directly to DashboardLayout on refresh
|
|
- Files changed: src/App.tsx
|
|
- **Learnings for future iterations:**
|
|
- Phase state is a simple string union on line 47 of App.tsx: `useState<Phase>('boot'|'ecg'|'login'|'pmr')`
|
|
- US-028 will revert this exact change back to 'boot'
|
|
---
|
|
|
|
## 2026-02-14 — US-021
|
|
- Scaled all Sidebar internal sizing: padding, avatar, name, title, status badge, detail rows, SectionTitle, TagPill, AlertFlag
|
|
- Sidebar padding 20px/16px → 24px/20px, avatar 52→60px, name 15→17px, title 11.5→13px
|
|
- Status badge 11→12px, dot 6→7px, all detail rows 11.5→13px, GPhC mono 11→12px
|
|
- SectionTitle 10→11px, TagPill 10.5→12px (padding 3px/8px → 4px/10px)
|
|
- AlertFlag 11→13px (padding 7px/10px → 8px/12px), icon 14→16, container 16→18px
|
|
- Detail row padding 2px → 4px, grid gap 6→8px, PersonHeader marginBottom 6→10px
|
|
- Tags/Alerts section padding 14px/6px → 16px/8px
|
|
- Files changed: src/components/Sidebar.tsx
|
|
- **Learnings for future iterations:**
|
|
- Sidebar has 6 identical detail row blocks (GPhC, Education, Location, Phone, Email, Registered) — use replace_all for fontSize/padding changes
|
|
- SectionTitle fontSize affects both Tags and Alerts section headers
|
|
- The sidebar width itself comes from CSS var --sidebar-width (updated in US-019), not from Sidebar.tsx
|
|
- Tags gap (5px) and alerts gap (6px) were left as-is — they looked proportional already
|
|
---
|
|
|
|
## 2026-02-14 — US-022
|
|
- Scaled PatientSummaryTile: profile text 13px→15px (lineHeight 1.6→1.65), KPI value 28px→34px, label 12px→14px, sublabel 10px→12px
|
|
- KPI card padding 16px→20px, grid gap 12px→16px, Latest Results marginTop 24px→28px
|
|
- Files changed: src/components/tiles/PatientSummaryTile.tsx
|
|
- **Learnings for future iterations:**
|
|
- PatientSummaryTile has two main sections: profile text block and KPI grid (Latest Results)
|
|
- MetricCard is a local component (not exported) — all KPI styling is self-contained in this file
|
|
- KPI grid uses Tailwind responsive classes (grid-cols-1 xs:grid-cols-2) combined with inline style for gap
|
|
- The sublabel uses font-geist (monospace) for the "technical texture" pattern
|
|
---
|
|
|