From 357733fd15102017b86ef4fc666a9b077fb95066 Mon Sep 17 00:00:00 2001
From: Michael Mainguy <mike.mainguy@gmail.com>
Date: Tue, 12 Aug 2025 08:51:15 -0500
Subject: [PATCH] Enhance navigation with prominent styling and CSS module
 architecture
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add comprehensive header layout with appHeader, headerLeft, and backButton classes
- Implement prominent navigation buttons with hover effects and active state indicators
- Add app title with proper typography styling using CSS variables
- Create navButton class with blue primary color scheme, transitions, and shadow effects
- Add active state visual feedback with bottom border triangle indicator
- Use CSS variables from App.css for consistent theming and maintainability
- Improve responsive layout with flexbox positioning and proper spacing

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/App.module.css | 94 ++++++++++++++++++++++++++++++++++++++++++++++
 src/App.tsx        | 14 ++++---
 2 files changed, 103 insertions(+), 5 deletions(-)

diff --git a/src/App.module.css b/src/App.module.css
index 6fe48e1..841493c 100644
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -57,3 +57,97 @@ body {
     color: var(--color-text);
     font-family: system-ui, var(--font-family-base);
 }
+
+/* Main App Layout */
+.mainApp {
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    min-height: 100vh;
+}
+
+.appHeader {
+    padding: var(--spacing-lg) var(--spacing-lg);
+    background: var(--color-bg-secondary);
+    border-bottom: 1px solid var(--color-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.headerLeft {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-lg);
+}
+
+.backButton {
+    background: var(--color-bg-light);
+    border: 1px solid var(--color-border);
+    color: var(--color-text);
+    padding: var(--spacing-sm) var(--spacing-md);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    font-size: var(--font-size-base);
+    transition: all 0.2s ease;
+}
+
+.backButton:hover {
+    background: var(--color-bg-hover);
+    border-color: var(--color-primary);
+    color: var(--color-primary);
+}
+
+.appTitle {
+    margin: 0;
+    color: var(--color-text-highlight);
+    font-size: var(--font-size-xxl);
+    font-weight: bold;
+}
+
+/* Navigation */
+.nav {
+    display: flex;
+    gap: var(--spacing-xs);
+}
+
+.navButton {
+    background: var(--color-bg-secondary);
+    border: 2px solid var(--color-border);
+    color: var(--color-text);
+    padding: var(--spacing-sm) var(--spacing-lg);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    font-size: var(--font-size-lg);
+    font-weight: 500;
+    transition: all 0.3s ease;
+    position: relative;
+    min-width: 120px;
+}
+
+.navButton:hover {
+    background: var(--color-primary);
+    color: white;
+    border-color: var(--color-primary);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
+}
+
+.navButton.active {
+    background: var(--color-primary);
+    color: white;
+    border-color: var(--color-primary);
+    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
+}
+
+.navButton.active::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid var(--color-primary);
+}
diff --git a/src/App.tsx b/src/App.tsx
index 2d11207..53722d8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -181,18 +181,19 @@ function App() {
   return (
     <>
       <div className={styles.mainApp}>
-        <div>
-          <div>
+        <div className={styles.appHeader}>
+          <div className={styles.headerLeft}>
             <button
+              className={styles.backButton}
               onClick={handleBackToSelector}
             >
               ← Back to Traces
             </button>
-            <h1>Perf Viz</h1>
+            <h1 className={styles.appTitle}>Performance Trace Analysis</h1>
           </div>
-          
-          <nav>
+          <nav className={styles.nav}>
             <button 
+              className={`${styles.navButton} ${currentView === 'trace' ? styles.active : ''}`}
               onClick={() => {
                 setCurrentView('trace')
                 updateUrlWithTraceId(selectedTraceId, 'trace', null)
@@ -201,6 +202,7 @@ function App() {
               Trace Stats
             </button>
             <button 
+              className={`${styles.navButton} ${currentView === 'phases' ? styles.active : ''}`}
               onClick={() => {
                 setCurrentView('phases')
                 updateUrlWithTraceId(selectedTraceId, 'phases', null)
@@ -209,6 +211,7 @@ function App() {
               Phase Events
             </button>
             <button 
+              className={`${styles.navButton} ${currentView === 'http' ? styles.active : ''}`}
               onClick={() => {
                 setCurrentView('http')
                 updateUrlWithTraceId(selectedTraceId, 'http', null)
@@ -217,6 +220,7 @@ function App() {
               HTTP Requests
             </button>
             <button 
+              className={`${styles.navButton} ${currentView === 'debug' ? styles.active : ''}`}
               onClick={() => {
                 setCurrentView('debug')
                 updateUrlWithTraceId(selectedTraceId, 'debug', null)