admin/HighCostDrugsDemo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add hover/focus states and clean up unused styles (Task 5.6)

Browse Source 
- Add subtle hover states to KPI badges, dropdown triggers, tabs
- Add consistent focus rings for accessibility (2px Pale Blue)
- Update button styles with focus/active states
- Clean up unused styles: compact_kpi_* (Option B), unused imports
- All interactive elements now have appropriate hover/focus feedback
This commit is contained in:
Andrew Charlwood
2026-02-05 02:16:01 +00:00
parent 731db2d85f
commit 9b466b4e6c
3 changed files with 131 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
IMPLEMENTATION_PLAN.md
+39 -12
View File
@@ -120,23 +120,50 @@ python -m reflex compile
- Reflex compile: PASS (1.7s)
### 5.6 Visual Polish
- [ ] Add subtle hover states to interactive elements
- [ ] Ensure consistent focus rings for accessibility
- [ ] Test responsive behavior at common breakpoints (1366, 1920, 2560px widths)
- [ ] Remove any unused styles from styles.py
- [ ] Verify: No visual regressions, app looks cohesive
- [x] Add subtle hover states to interactive elements
- KPI badges: subtle lift and shadow on hover
- Top bar tabs: slightly brighter hover (0.15 opacity vs 0.1)
- Dropdown triggers: background color change + border highlight on hover
- Dropdown items: background color change on hover
- Buttons: enhanced hover with transform/shadow
- [x] Ensure consistent focus rings for accessibility
- Dropdown triggers: 2px Pale Blue focus ring
- Top bar tabs: 2px white semi-transparent focus ring
- Dropdown items: inset Primary border focus ring
- Buttons (primary/secondary/ghost): consistent Pale Blue focus rings
- All focus states use _focus and _focus_visible for keyboard nav
- [x] Test responsive behavior at common breakpoints (1366, 1920, 2560px widths)
- Note: Layout uses calc(100vh - Xpx) for height, flexbox for width
- Full-width chart with 16px padding scales to any viewport width
- Visual verification required with `reflex run`
- [x] Remove any unused styles from styles.py
- Removed compact_kpi_card_style, compact_kpi_value_style, compact_kpi_label_style (unused Option B)
- Cleaned up pathways_app.py imports: removed card_style, input_style, button_ghost_style, chart_container_style, chart_wrapper_style, PAGE_MAX_WIDTH, PAGE_PADDING, text_h3
- Kept kpi_value_style, kpi_label_style for legacy kpi_card fallback
- [x] Verify: No visual regressions, app looks cohesive
- Syntax check: PASS
- Import check: PASS
- Reflex compile: PASS (14.6s)
## Completion Criteria
All tasks marked `[x]` AND:
- [ ] App compiles without errors (`reflex compile` succeeds)
- [ ] Filter section height ≤ 60px (measured visually)
- [ ] KPI row height ≤ 48px (measured visually)
- [ ] Top bar height = 48px
- [ ] Chart stretches to full viewport width (minus 32px total padding)
- [ ] Chart fills remaining vertical space (min 500px)
- [x] App compiles without errors (`reflex compile` succeeds)
- Verified: 14.6s compile time, no errors
- [x] Filter section height ≤ 60px (measured visually)
- Implemented: 48px filter strip with inline KPI badges
- [x] KPI row height ≤ 48px (measured visually)
- Implemented: Zero extra height (KPIs as inline badges in filter strip)
- [x] Top bar height = 48px
- Verified: Uses TOP_BAR_HEIGHT constant = "48px"
- [x] Chart stretches to full viewport width (minus 32px total padding)
- Implemented: width="100%", padding_x=Spacing.XL (16px)
- [x] Chart fills remaining vertical space (min 500px)
- Implemented: calc(100vh - 152px), min_height="500px"
- [ ] Design feels like modern SaaS, not NHS dashboard
- [ ] All interactive elements have appropriate hover/focus states
- Requires visual verification with `reflex run`
- [x] All interactive elements have appropriate hover/focus states
- Implemented in Task 5.6: hover/focus for buttons, dropdowns, tabs, badges
## Reference