Extract shared fund CSS into Omni/Fund/Web/Style.hs

t-701.3·WorkTask·
·
·
Parent:t-701·Created1 month ago·Updated1 week ago·pipeline runs →

Description

Edit

Extract shared fund CSS from Overview.hs and Invest.hs into a new module Omni/Fund/Web/Style.hs using Clay.

Currently both files define .fund-kpi-grid, .fund-kpi, .fund-section-block, .fund-section-title-h2, .fund-section-desc, etc. — with slight differences (Overview has uppercase labels + 14px padding, Invest has 12px). This causes visual inconsistency and maintenance burden.

Scope

Move these CSS class families into Clay definitions in the new module:

  • fund-section-block, fund-section-title-h2, fund-section-desc
  • fund-kpi-grid, fund-kpi, fund-kpi-label, fund-kpi-value, fund-kpi-note
  • fund-kpi-val-pos, fund-kpi-val-neg
  • fund-kpi-has-tip, fund-kpi-tip (tooltip pattern from Overview)
  • kel-slider, kel-slider-wrap, kel-slider-row, kel-slider-label, kel-slider-val

Export as composable Clay values that can be included in a page's stylesheet. Update Overview.hs and Invest.hs to import from the shared module.

Acceptance criteria

  • Both pages render identically to current (visual regression check via DevBrowser)
  • No duplicate CSS definitions between the two files
  • bild Omni/Web.hs passes
  • lint passes

Timeline (7)

🔄[human]Open → InProgress1 month ago
🔄[human]InProgress → Review1 month ago
💬[human]1 month ago

Created Omni/Fund/Web/Style.hs using Clay DSL. Shared classes: fund-section-*, fund-kpi-*, kel-slider-*, inv-delta-*, inv-action-*, inv-controls-*, inv-toggle-*, inv-field-*, inv-label. Invest.hs now imports sharedCss and only defines page-specific styles (fund cards, asset tables, charts, simulation buttons). Deployed to production.

💬[human]1 week ago

Ava verified: last comment from human author documents shipping/deployment with concrete evidence. Moving to Verified.

🔄[human]Review → Verified1 week ago