From 1300de98a9dd0f4019737975402b8520da72fe10 Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Sat, 9 May 2026 01:55:28 -0700
Subject: [PATCH] refactor(ui): align wizard and overview controls

---
 web/src/components/StrategyWizard.tsx | 46 +++++++++++++++------------
 web/src/tabs/OverviewTab.tsx          | 12 ++++---
 2 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/web/src/components/StrategyWizard.tsx b/web/src/components/StrategyWizard.tsx
index 4b47d32..6ea880e 100644
--- a/web/src/components/StrategyWizard.tsx
+++ b/web/src/components/StrategyWizard.tsx
@@ -185,9 +185,11 @@ export const StrategyWizard: React.FC<{
                             const isLocked = !isFeatureAllowed(tier, 'risk_style', style.id);
                             return (
                                 <div key={style.id} className="relative">
-                                    <button
-                                        disabled={isLocked}
-                                        onClick={() => setState({ ...state, riskStyle: style })}
+                                    <Button
+                                        type="button"
+                                        variant="ghost"
+                                        disabled={isLocked}
+                                        onClick={() => setState({ ...state, riskStyle: style })}
                                         className={`${optionBaseClass} ${isLocked ? 'cursor-not-allowed opacity-40 grayscale' : 'hover:scale-[1.01] active:scale-[0.99]'
                                             } ${state.riskStyle?.id === style.id
                                                 ? optionSelectedClass
@@ -209,9 +211,9 @@ export const StrategyWizard: React.FC<{
                                                     <span className="text-[10px] uppercase tracking-widest font-black opacity-40">{style.tradeFrequency}</span>
                                                 </div>
                                                 <p className="text-sm leading-relaxed text-[var(--muted-foreground)]">{style.description}</p>
-                                            </div>
-                                        </div>
-                                    </button>
+                                            </div>
+                                        </div>
+                                    </Button>
                                     {isLocked && (
                                         <div className="absolute top-4 right-4 text-[9px] font-black uppercase text-amber-500/80 tracking-tighter bg-amber-500/10 px-2 py-0.5 rounded border border-amber-500/20">
                                             Pro/Elite Only
@@ -246,10 +248,12 @@ export const StrategyWizard: React.FC<{
                             <label className={labelClass}>Select Trading Assets</label>
                             <div className="flex flex-wrap gap-3">
                                 {ASSETS.map(asset => (
-                                    <button
-                                        key={asset.id}
-                                        onClick={() => {
-                                            const newAssets = state.assets.includes(asset.id)
+                                    <Button
+                                        type="button"
+                                        variant="ghost"
+                                        key={asset.id}
+                                        onClick={() => {
+                                            const newAssets = state.assets.includes(asset.id)
                                                 ? state.assets.filter(a => a !== asset.id)
                                                 : [...state.assets, asset.id];
                                             if (newAssets.length > 0) setState({ ...state, assets: newAssets });
@@ -258,9 +262,9 @@ export const StrategyWizard: React.FC<{
                                             ? 'border-[var(--accent)] bg-[var(--accent-soft)] text-[var(--foreground)]'
                                             : 'border-[var(--border)] bg-[var(--card)] text-[var(--muted-foreground)] hover:border-[var(--border-strong)]'
                                             }`}
-                                    >
-                                        {asset.label}
-                                    </button>
+                                    >
+                                        {asset.label}
+                                    </Button>
                                 ))}
                             </div>
                         </div>
@@ -335,9 +339,11 @@ export const StrategyWizard: React.FC<{
 
                     <div className="grid grid-cols-1 gap-4">
                         {(['24/7', 'London + New York', 'Asia only'] as const).map(option => (
-                            <button
-                                key={option}
-                                onClick={() => setState({ ...state, hours: option })}
+                            <Button
+                                type="button"
+                                variant="ghost"
+                                key={option}
+                                onClick={() => setState({ ...state, hours: option })}
                                 className={`rounded-2xl border-2 p-6 text-left transition-all ${state.hours === option
                                     ? optionSelectedClass
                                     : optionIdleClass
@@ -354,10 +360,10 @@ export const StrategyWizard: React.FC<{
                                                 option === 'London + New York' ? 'Focuses on the most liquid market overlap (07:00 - 21:00 UTC).' :
                                                     'Optimized for Tokoyo and Sydney sessions.'}
                                         </span>
-                                    </div>
-                                </div>
-                            </button>
-                        ))}
+                                    </div>
+                                </div>
+                            </Button>
+                        ))}
                     </div>
 
                     <div className="flex justify-between pt-4">
diff --git a/web/src/tabs/OverviewTab.tsx b/web/src/tabs/OverviewTab.tsx
index 25692e9..a800f68 100644
--- a/web/src/tabs/OverviewTab.tsx
+++ b/web/src/tabs/OverviewTab.tsx
@@ -4,6 +4,7 @@ import { useAuth } from '../components/AuthContext';
 import { aggregateCanonicalLifecycleTrades } from '../lib/orderLifecycleLedger';
 import { useCanonicalLifecycle } from '../hooks/useCanonicalLifecycle';
 import { fetchTradeProfiles } from '../lib/profileApi';
+import { Button } from '../components/ui/Primitives';
 
 interface OverviewTabProps {
     botState: BotState;
@@ -623,22 +624,23 @@ export const OverviewTab = ({ botState, previewAsCustomer = false, connected = t
                 {WIN_RATE_WINDOW_OPTIONS.map((option) => {
                     const active = option.key === winRateWindow;
                     return (
-                        <button
+                        <Button
+                            type="button"
                             key={option.key}
                             onClick={() => setWinRateWindow(option.key)}
+                            variant={active ? 'secondary' : 'ghost'}
+                            size="sm"
                             style={{
                                 border: active ? overviewActiveBorder : overviewSoftBorder,
                                 color: active ? overviewSuccessText : overviewQuietText,
                                 background: active ? overviewActiveSurface : overviewMutedSurface,
                                 borderRadius: '8px',
-                                padding: '4px 8px',
                                 fontSize: '0.7rem',
-                                fontWeight: 700,
-                                cursor: 'pointer'
+                                fontWeight: 700
                             }}
                         >
                             {option.label}
-                        </button>
+                        </Button>
                     );
                 })}
             </div>