bytelyst/learning_ai_invt_trdg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): align wizard and overview controls

Browse Source
This commit is contained in:
Saravana Achu Mac 2026-05-09 01:55:28 -07:00
parent f3540c6b4b
commit 1300de98a9
2 changed files with 33 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
web/src/components/StrategyWizard.tsx
View File

@ -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">

12
web/src/tabs/OverviewTab.tsx
View File

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