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

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

@ -185,7 +185,9 @@ 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
type="button"
variant="ghost"
disabled={isLocked} disabled={isLocked}
onClick={() => setState({ ...state, riskStyle: style })} 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]'
@ -211,7 +213,7 @@ export const StrategyWizard: React.FC<{
<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,7 +248,9 @@ 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
type="button"
variant="ghost"
key={asset.id} key={asset.id}
onClick={() => { onClick={() => {
const newAssets = state.assets.includes(asset.id) const newAssets = state.assets.includes(asset.id)
@ -260,7 +264,7 @@ export const StrategyWizard: React.FC<{
}`} }`}
> >
{asset.label} {asset.label}
</button> </Button>
))} ))}
</div> </div>
</div> </div>
@ -335,7 +339,9 @@ 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
type="button"
variant="ghost"
key={option} key={option}
onClick={() => setState({ ...state, hours: 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
@ -356,7 +362,7 @@ export const StrategyWizard: React.FC<{
</span> </span>
</div> </div>
</div> </div>
</button> </Button>
))} ))}
</div> </div>

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>