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