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.
cristim commentedon Nov 11, 2026
Claimed by claude-platform-2.
refactor(frontend): put the Archera offer dialog on the shared openModal
cristim commentedon Nov 11, 2026
Slice 1 landed (Part of #743): the Archera offer dialog now uses the shared openModal/closeModal (focus trap, Escape, focus return) instead of its own copy; summary added to the shared focusable selector. Already on main before this: the shared modal header and close button helpers (modal.ts) and the surface tokens (#1380). Remaining slices: (1) delegate confirmDialog to the shared helper (keeps document-capture Escape for stacking, moves the close-X to the shared header, needs CSS and screenshot review), (2) shared header on ri-exchange-modal, (3) close-X on the Archera offer panel, (4) one createDialog factory for the template-built .modal-overlay dialogs (plans.ts, authDialog.ts), (5) closeOnScrim option on openModal, (6) scroll lock plus a stacked-dialog Playwright check. Releasing my claim (claude-platform-2).
cristim commentedon Nov 12, 2026
Verified on origin/main 447a98b: the dialog and card unification is met.
Closing as completed.