diff --git a/Ralph/prd.json b/Ralph/prd.json index caa9ac2..a071404 100644 --- a/Ralph/prd.json +++ b/Ralph/prd.json @@ -84,7 +84,7 @@ "Verify in browser using dev-browser skill" ], "priority": 4, - "passes": false, + "passes": true, "notes": "Sidebar width is already updated via CSS var in US-019. This story handles all internal sizing. The sidebar has many repeated patterns (detail rows) — ensure consistency across all rows." }, { @@ -103,7 +103,7 @@ "Verify in browser using dev-browser skill" ], "priority": 5, - "passes": false, + "passes": true, "notes": "The profile text is the largest body copy block in the dashboard — it must feel effortlessly readable. KPI values should be the most visually prominent numbers on the page." }, { diff --git a/Ralph/progress.txt b/Ralph/progress.txt index a39aea1..0f6d948 100644 --- a/Ralph/progress.txt +++ b/Ralph/progress.txt @@ -90,3 +90,30 @@ - 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 +--- + diff --git a/src/components/tiles/PatientSummaryTile.tsx b/src/components/tiles/PatientSummaryTile.tsx index 17e7295..99f97a1 100644 --- a/src/components/tiles/PatientSummaryTile.tsx +++ b/src/components/tiles/PatientSummaryTile.tsx @@ -32,7 +32,7 @@ function MetricCard({ kpi }: MetricCardProps) { const buttonStyles: React.CSSProperties = { width: '100%', textAlign: 'left', - padding: '16px', + padding: '20px', background: 'var(--surface)', border: '1px solid var(--border-light)', borderRadius: 'var(--radius-sm)', @@ -41,7 +41,7 @@ function MetricCard({ kpi }: MetricCardProps) { } const valueStyles: React.CSSProperties = { - fontSize: '28px', + fontSize: '34px', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.2, @@ -49,14 +49,14 @@ function MetricCard({ kpi }: MetricCardProps) { } const labelStyles: React.CSSProperties = { - fontSize: '12px', + fontSize: '14px', fontWeight: 500, color: 'var(--text-primary)', marginTop: '4px', } const subStyles: React.CSSProperties = { - fontSize: '10px', + fontSize: '12px', color: 'var(--text-tertiary)', fontFamily: 'var(--font-geist-mono)', marginTop: '2px', @@ -86,14 +86,14 @@ function MetricCard({ kpi }: MetricCardProps) { export function PatientSummaryTile() { const profileTextStyles: React.CSSProperties = { - fontSize: '13px', - lineHeight: '1.6', + fontSize: '15px', + lineHeight: '1.65', color: 'var(--text-primary)', } const kpiGridStyles: React.CSSProperties = { display: 'grid', - gap: '12px', + gap: '16px', } return ( @@ -110,7 +110,7 @@ export function PatientSummaryTile() { {/* Latest Results subsection */} -