From 217b46e1236cc3f73caeb5c8ef25532a2b26fe39 Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Sat, 9 May 2026 01:34:41 -0700
Subject: [PATCH] refactor(ui): standardize home chart controls

---
 web/src/index.css          | 32 ++++++++++++++++++++++++++++
 web/src/views/HomeView.tsx | 43 ++++++++++++++------------------------
 2 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/web/src/index.css b/web/src/index.css
index 48d6961..361f6a1 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -922,6 +922,38 @@ body {
   color: var(--bl-success);
 }
 
+.home-chart-segment {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: color-mix(in oklab, var(--card) 76%, transparent);
+  padding: 3px;
+}
+
+.home-chart-toggle {
+  min-height: 28px;
+  border-radius: 9px;
+  padding: 0 9px;
+  color: var(--muted-foreground);
+  font-size: 12px;
+  font-weight: 680;
+}
+
+.home-chart-toggle[data-active='true'] {
+  background: var(--accent-soft);
+  color: var(--primary);
+  box-shadow: 0 6px 16px color-mix(in oklab, var(--primary) 12%, transparent);
+}
+
+.home-chart-toggle--pill {
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 720;
+}
+
 @media (max-width: 760px) {
   .admin-console-header {
     align-items: stretch;
diff --git a/web/src/views/HomeView.tsx b/web/src/views/HomeView.tsx
index 70158f9..7ad3360 100644
--- a/web/src/views/HomeView.tsx
+++ b/web/src/views/HomeView.tsx
@@ -375,25 +375,20 @@ function StockChart({
     }}>
       {/* Period selector + chart type */}
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12, gap: 12 }}>
-        <div style={{ display: 'flex', gap: 2 }}>
+        <div className="home-chart-segment" aria-label="Chart period">
           {PERIODS.map(p => (
-            <button
+            <Button
               key={p}
+              type="button"
+              variant="ghost"
+              size="sm"
               onClick={() => setPeriod(p)}
-              style={{
-                padding: '4px 9px',
-                border: 'none',
-                borderRadius: 6,
-                fontSize: 12,
-                fontWeight: period === p ? 700 : 500,
-                background: period === p ? 'var(--accent-soft)' : 'transparent',
-                color: period === p ? 'var(--primary)' : 'var(--muted-foreground)',
-                cursor: 'pointer',
-                transition: 'all 0.15s',
-              }}
+              className="home-chart-toggle"
+              data-active={period === p}
+              aria-pressed={period === p}
             >
               {p}
-            </button>
+            </Button>
           ))}
         </div>
         <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: 'var(--muted-foreground)', fontSize: 12 }}>
@@ -401,25 +396,19 @@ function StockChart({
             {INDICATORS.map(indicator => {
               const active = enabledIndicators[indicator.key];
               return (
-                <button
+                <Button
                   key={indicator.key}
+                  type="button"
+                  variant="ghost"
+                  size="sm"
                   onClick={() => toggleIndicator(indicator.key)}
                   title={indicator.hint}
                   aria-pressed={active}
-                  style={{
-                    padding: '5px 9px',
-                    borderRadius: 999,
-                    border: active ? '1px solid var(--primary)' : '1px solid var(--border)',
-                    background: active ? 'var(--accent-soft)' : 'var(--card)',
-                    color: active ? 'var(--primary)' : 'var(--muted-foreground)',
-                    fontSize: 11,
-                    fontWeight: 700,
-                    cursor: 'pointer',
-                    boxShadow: active ? '0 2px 8px color-mix(in oklab, var(--primary) 18%, transparent 82%)' : 'none',
-                  }}
+                  className="home-chart-toggle home-chart-toggle--pill"
+                  data-active={active}
                 >
                   {indicator.label}
-                </button>
+                </Button>
               );
             })}
           </div>