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

feat: refine top bar with style helpers (Task 5.5)

Browse Source 
- Use top_bar_style() for 48px height container
- Use logo_style() for 28px height logo (was 36px)
- Use top_bar_tab_style() for 28px height pills
- Simplify data freshness to single line
- Remove max_width constraint for full-width bar
- Lighter shadow (SM instead of MD)
This commit is contained in:
Andrew Charlwood
2026-02-05 02:08:01 +00:00
parent fc03e44ce2
commit 754e98dbe5
2 changed files with 47 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
IMPLEMENTATION_PLAN.md
+13 -5
View File
@@ -105,11 +105,19 @@ python -m reflex compile
- [ ] Verify: Chart fills available space on 1920x1080 display (requires visual check)
### 5.5 Top Bar Refinement
- [ ] Reduce top bar height to 48px (was 64px)
- [ ] Simplify chart tabs - smaller pills or just text links
- [ ] Consider moving data freshness indicator inline with filters
- [ ] Make logo smaller (28px instead of 36px)
- [ ] Verify: Top bar is minimal but functional
- [x] Reduce top bar height to 48px (was 64px)
- Using `top_bar_style()` which sets `height: TOP_BAR_HEIGHT` (48px)
- [x] Simplify chart tabs - smaller pills or just text links
- Using `top_bar_tab_style()` for 28px height pills with tighter spacing
- [x] Consider moving data freshness indicator inline with filters
- Simplified to single line: "X records · Refreshed: 2m ago"
- Removed max_width constraint for full-width bar
- [x] Make logo smaller (28px instead of 36px)
- Using `logo_style()` for 28px height
- [x] Verify: Top bar is minimal but functional
- Syntax check: PASS
- Import check: PASS
- Reflex compile: PASS (1.7s)
### 5.6 Visual Polish
- [ ] Add subtle hover states to interactive elements
pathways_app/pathways_app.py
+34 -55
View File
@@ -44,6 +44,10 @@ from pathways_app.styles import (
# v2.1 chart styles (full-width layout)
chart_container_style,
chart_wrapper_style,
# v2.1 top bar styles
top_bar_style,
top_bar_tab_style,
logo_style,
)
@@ -1600,25 +1604,19 @@ def chart_tab(label: str, chart_type: str, is_active: bool = False) -> rx.Compon
Individual chart type tab/pill for top bar navigation.
Active state: White background with Heritage Blue text
Inactive state: Transparent with white text, hover shows Vibrant Blue background
Inactive state: Transparent with white text, hover shows subtle highlight
Uses top_bar_tab_style() for consistent 28px height pills.
"""
style = top_bar_tab_style(active=is_active)
return rx.box(
rx.text(
label,
font_size=Typography.BODY_SMALL_SIZE,
font_weight="500",
color=Colors.HERITAGE_BLUE if is_active else Colors.WHITE,
font_size=style.get("font_size", Typography.BODY_SMALL_SIZE),
font_weight=style.get("font_weight", "500"),
color=style.get("color", Colors.WHITE),
font_family=Typography.FONT_FAMILY,
),
background_color=Colors.WHITE if is_active else "transparent",
padding_x=Spacing.LG,
padding_y=Spacing.SM,
border_radius=Radii.FULL,
cursor="pointer",
transition=f"background-color {Transitions.COLOR}",
_hover={
"background_color": Colors.WHITE if is_active else "rgba(255,255,255,0.15)",
},
**style,
# Future: on_click handler to switch chart type
)
@@ -1628,8 +1626,9 @@ def top_bar() -> rx.Component:
Top navigation bar component.
Contains: Logo + App Name | Chart Type Tabs | Data Freshness Indicator
Fixed height: 64px (from design system)
Fixed height: 48px (reduced from 64px for v2.1)
Heritage Blue background with white text.
Uses style helpers from styles.py for consistency.
"""
return rx.box(
rx.hstack(
@@ -1637,63 +1636,49 @@ def top_bar() -> rx.Component:
rx.hstack(
rx.image(
src="/logo.png",
height="36px",
alt="NHS Logo",
**logo_style(), # 28px height
),
rx.text(
"HCD Analysis",
font_size=Typography.H2_SIZE,
font_size=Typography.H2_SIZE, # 16px
font_weight=Typography.H2_WEIGHT,
color=Colors.WHITE,
font_family=Typography.FONT_FAMILY,
letter_spacing="-0.01em",
),
align="center",
spacing="3",
spacing="2",
),
# Center: Chart Type Tabs
# Center: Chart Type Tabs (smaller pills)
rx.hstack(
chart_tab("Icicle", "icicle", is_active=True),
chart_tab("Sankey", "sankey", is_active=False),
chart_tab("Timeline", "timeline", is_active=False),
spacing="2",
spacing="1",
align="center",
background_color="rgba(255,255,255,0.1)",
background_color="rgba(255,255,255,0.08)",
padding=Spacing.XS,
border_radius=Radii.FULL,
border_radius=Radii.MD,
),
# Right: Data Freshness Indicator
# Right: Compact Data Freshness (single line)
rx.hstack(
rx.icon(
"database",
size=16,
size=14,
color=Colors.SKY,
),
rx.vstack(
rx.text(
rx.cond(
AppState.data_loaded,
AppState.total_records.to_string() + " records",
"Loading data...",
),
font_size=Typography.CAPTION_SIZE,
font_weight="500",
color=Colors.WHITE,
font_family=Typography.FONT_FAMILY,
rx.text(
rx.cond(
AppState.data_loaded,
AppState.total_records.to_string() + " records · " + AppState.last_updated_display,
"Loading...",
),
rx.text(
rx.cond(
AppState.data_loaded,
"Refreshed: " + AppState.last_updated_display,
"Connecting...",
),
font_size="11px",
color=Colors.WHITE,
opacity="0.7",
font_family=Typography.FONT_FAMILY,
),
spacing="0",
align="end",
font_size=Typography.CAPTION_SIZE,
font_weight="500",
color=Colors.WHITE,
opacity="0.85",
font_family=Typography.FONT_FAMILY,
),
spacing="2",
align="center",
@@ -1701,19 +1686,13 @@ def top_bar() -> rx.Component:
justify="between",
align="center",
width="100%",
max_width=PAGE_MAX_WIDTH,
margin_x="auto",
padding_x=Spacing.XL,
),
background_color=Colors.HERITAGE_BLUE,
height=TOP_BAR_HEIGHT,
width="100%",
display="flex",
align_items="center",
**top_bar_style(), # 48px height, Heritage Blue
position="sticky",
top="0",
z_index="100",
box_shadow=Shadows.MD,
box_shadow=Shadows.SM, # Lighter shadow
)