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

- 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)

IMPLEMENTATION_PLAN.md

@@ -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)
+- [x] Reduce top bar height to 48px (was 64px)
-- [ ] Simplify chart tabs - smaller pills or just text links
+  - Using `top_bar_style()` which sets `height: TOP_BAR_HEIGHT` (48px)
-- [ ] Consider moving data freshness indicator inline with filters
+- [x] Simplify chart tabs - smaller pills or just text links
-- [ ] Make logo smaller (28px instead of 36px)
+  - Using `top_bar_tab_style()` for 28px height pills with tighter spacing
-- [ ] Verify: Top bar is minimal but functional
+- [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

@@ -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_size=style.get("font_size", Typography.BODY_SMALL_SIZE),
-            font_weight="500",
+            font_weight=style.get("font_weight", "500"),
-            color=Colors.HERITAGE_BLUE if is_active else Colors.WHITE,
+            color=style.get("color", Colors.WHITE),
             font_family=Typography.FONT_FAMILY,
         ),
-        background_color=Colors.WHITE if is_active else "transparent",
+        **style,
-        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)",
-        },
         # 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,83 +1636,63 @@ 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",
+                        AppState.total_records.to_string() + " records · " + AppState.last_updated_display,
-                            "Loading data...",
+                        "Loading...",
                     ),
                     font_size=Typography.CAPTION_SIZE,
                     font_weight="500",
                     color=Colors.WHITE,
+                    opacity="0.85",
                     font_family=Typography.FONT_FAMILY,
                 ),
-                    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",
-                ),
                 spacing="2",
                 align="center",
             ),
             justify="between",
             align="center",
             width="100%",
-            max_width=PAGE_MAX_WIDTH,
-            margin_x="auto",
             padding_x=Spacing.XL,
         ),
-        background_color=Colors.HERITAGE_BLUE,
+        **top_bar_style(),  # 48px height, Heritage Blue
-        height=TOP_BAR_HEIGHT,
-        width="100%",
-        display="flex",
-        align_items="center",
         position="sticky",
         top="0",
         z_index="100",
-        box_shadow=Shadows.MD,
+        box_shadow=Shadows.SM,  # Lighter shadow
     )