Repository navigation
chore(frontend): unify four modal systems and five card styles, reuse kpi-tile #743
Description
Summary
There are four modal systems and five card styles. The Opportunities summary cards are hand-built .card innerHTML instead of the Home .kpi-tile component, so the same kind of KPI looks different on two pages.
Where
Reviewed commit b50ca38:
frontend/src/styles/modals.css:19(.modal-content: 8px radius, no shadow, 0.5 scrim)frontend/src/styles/modals.css:80(.modal-overlay),:378(Archera panel with its own shadow)frontend/src/styles/components.css:984(.modal-confirm: heavy shadow, 0.45 scrim, z-index 2000 vs 1000)frontend/src/styles/components.css:4-9(card styles:.card,.kpi-tile,.plan-card,.group-card,.stat-carddiffer in border/shadow/fill)frontend/src/recommendations.ts:906-921(4 summary cards as raw.cardinnerHTML)
Failure scenario
Source-level finding (card difference also visible in screenshots). Opening different dialogs shows different radius, shadow, scrim opacity and z-order; KPI tiles on Home and Opportunities do not match.
User impact
All users: the app reads as stitched together, and the z-index split risks stacking confirm vs content modals unpredictably.
Suggested fix
One .dialog (shadow-lg, r-lg, --cudly-scrim, header row with close button) and one .card (1px border + shadow-sm), and reuse .kpi-tile on Opportunities.
Screenshots
In the review fleet archive (/Users/cristi/.claude/agent-comms/review-fleet-20261008/screens/), NOT uploaded: opportunities-full-1280.png, home-full-1280.png.
Severity
Medium: consistency debt across the UI, no functional failure.
Reviewer ID: VIS-13 (vis M7)
Found by the 2026-10-08 review fleet.
Activity
IAmJSD commentedon Oct 24, 2026
Claiming: working on this
fix(frontend): one card and dialog surface, kpi-tile on Opportunities (…
Merge remote-tracking branch 'origin/main' into ui/issue-180
IAmJSD commentedon Oct 27, 2026
Status update (2026-10-27, checked against main at 7b86e38): What is left is frontend UI work, which cristim owns, so no PR from us.
#1380 put every card and dialog on one shared surface through tokens (scrim, dialog shadow, radius, named z-index ladder) and reused kpi-tile on Opportunities. Two frontend refactors are left: a shared .dialog component with a header row and close button, and merging the four JS modal systems into one. Neither has started on main.
Left / blocked on: UI (cristim): one .dialog component with a header and close button (about 20 dialogs in index.html and TS, plus close wiring), and merging modal.ts openModal, confirmDialog.ts, the Archera offer and the .modal-overlay variants into one implementation.