refactor(ui): remove legacy badge style debt
This commit is contained in:
parent
45e389fd2a
commit
5f38adac62
@ -23,7 +23,7 @@ excluded_parts = {"test", "assets"}
|
||||
|
||||
patterns = [
|
||||
("raw interactive controls outside approved primitives", "Raw Interactive Controls", re.compile(r"<(button|input|textarea|select)(\s|>)"), True),
|
||||
("legacy global surface classes", "Legacy Global Surface Classes", re.compile(r"\b(surface-card|surface-muted|badge|input-shell)\b"), False),
|
||||
("legacy global surface classes", "Legacy Global Surface Classes", re.compile(r"(?<![-\w])(surface-card|surface-muted|badge|input-shell)\b"), False),
|
||||
("hardcoded color literals", "Hardcoded Color Literals", re.compile(r"(#[0-9a-f]{3,8}\b|rgba?\()", re.IGNORECASE), False),
|
||||
("direct @bytelyst/ui imports outside product adapter", "Direct Common UI Imports Outside Adapter", re.compile(r"@bytelyst/ui"), True),
|
||||
]
|
||||
|
||||
@ -591,24 +591,6 @@ body {
|
||||
box-shadow: 0 0 10px var(--accent);
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 4px 10px;
|
||||
border-radius: 100px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.badge.live {
|
||||
background: #e67e22;
|
||||
}
|
||||
|
||||
.badge.paper {
|
||||
background: #3498db;
|
||||
}
|
||||
|
||||
.badge.alerts {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.kill-switch {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
|
||||
@ -31,16 +31,6 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.session-badge {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #888;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.vol-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
@ -99,18 +89,11 @@
|
||||
color: #ff3366;
|
||||
}
|
||||
|
||||
.signal-badge {
|
||||
.signal-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
margin-bottom: 24px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.signal-time {
|
||||
@ -195,47 +178,10 @@
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.rule-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.rule-badge.passed {
|
||||
background: rgba(0, 255, 136, 0.15);
|
||||
color: #00ff88;
|
||||
border-color: rgba(0, 255, 136, 0.3);
|
||||
}
|
||||
|
||||
.rule-badge.failed {
|
||||
background: rgba(255, 51, 102, 0.15);
|
||||
color: #ff3366;
|
||||
border-color: rgba(255, 51, 102, 0.3);
|
||||
}
|
||||
|
||||
.rule-badge.pending {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #888;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.rule-badge.skipped {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
color: #555;
|
||||
border-color: rgba(255, 255, 255, 0.05);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.rule-badge:hover {
|
||||
transform: scale(1.02);
|
||||
.rule-status {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.ai-details {
|
||||
@ -277,15 +223,6 @@
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.rule-icon {
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.rule-name {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.indicators-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@ -313,31 +250,8 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Mode Badge */
|
||||
.mode-badge {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.mode-badge.alerts {
|
||||
background: #555;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mode-badge.paper {
|
||||
background: #3498db;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mode-badge.live {
|
||||
background: #e67e22;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Active Position Panel */
|
||||
|
||||
.active-position-panel {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import './SymbolCard.css';
|
||||
import { PriceChart } from './PriceChart';
|
||||
import { Badge, ProductStatusBadge } from './ui/Primitives';
|
||||
|
||||
interface SymbolCardProps {
|
||||
symbol: string;
|
||||
@ -75,7 +76,6 @@ const ruleDisplayNames: { [key: string]: string } = {
|
||||
};
|
||||
|
||||
export const SymbolCard = ({ symbol, data }: SymbolCardProps) => {
|
||||
const signalColor = data.signal === 'BUY' ? '#00ff88' : data.signal === 'SELL' ? '#ff3366' : '#888';
|
||||
const profileSignalEntries = Object.entries(data.profileSignals || {});
|
||||
|
||||
return (
|
||||
@ -84,10 +84,8 @@ export const SymbolCard = ({ symbol, data }: SymbolCardProps) => {
|
||||
<div className="title-area">
|
||||
<h2>{symbol}</h2>
|
||||
<div className="session-info">
|
||||
<span className={`mode-badge ${data.tradingMode?.toLowerCase()}`}>
|
||||
{data.tradingMode}
|
||||
</span>
|
||||
<span className="session-badge">{data.session}</span>
|
||||
<ProductStatusBadge status={data.tradingMode}>{data.tradingMode}</ProductStatusBadge>
|
||||
<Badge variant="neutral" size="sm">{data.session}</Badge>
|
||||
<span className={`vol-label ${data.volatility.toLowerCase()}`}>
|
||||
{data.volatility} Vol
|
||||
</span>
|
||||
@ -106,8 +104,8 @@ export const SymbolCard = ({ symbol, data }: SymbolCardProps) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="signal-badge" style={{ backgroundColor: signalColor }}>
|
||||
{data.signal || 'NONE'}
|
||||
<div className="signal-status">
|
||||
<ProductStatusBadge status={data.signal}>{data.signal || 'NONE'}</ProductStatusBadge>
|
||||
{data.signalTime && (
|
||||
<span className="signal-time">
|
||||
{Math.floor((Date.now() - data.signalTime) / 60000)}m ago
|
||||
@ -120,13 +118,6 @@ export const SymbolCard = ({ symbol, data }: SymbolCardProps) => {
|
||||
<h3>Profile Signals</h3>
|
||||
<div className="rules-grid">
|
||||
{profileSignalEntries.map(([profileId, profileSignal]) => {
|
||||
const badgeClass = profileSignal.signal === 'BUY'
|
||||
? 'passed'
|
||||
: profileSignal.signal === 'SELL'
|
||||
? 'failed'
|
||||
: profileSignal.signal === 'MIXED'
|
||||
? 'pending'
|
||||
: 'skipped';
|
||||
const executionState = profileSignal.execution?.status;
|
||||
const executionClass = executionState === 'EXECUTED'
|
||||
? 'executed'
|
||||
@ -135,12 +126,16 @@ export const SymbolCard = ({ symbol, data }: SymbolCardProps) => {
|
||||
: 'skipped';
|
||||
return (
|
||||
<div key={profileId} className="rule-container">
|
||||
<div className={`rule-badge ${badgeClass}`} title={profileSignal.reason || profileSignal.signal}>
|
||||
<Badge
|
||||
className="rule-status"
|
||||
variant={profileSignal.signal === 'BUY' ? 'success' : profileSignal.signal === 'SELL' ? 'danger' : profileSignal.signal === 'MIXED' ? 'warning' : 'neutral'}
|
||||
title={profileSignal.reason || profileSignal.signal}
|
||||
>
|
||||
<span className="rule-name">
|
||||
{(profileSignal.profileName || profileId).slice(0, 18)}
|
||||
</span>
|
||||
<span className="rule-icon">{profileSignal.signal}</span>
|
||||
</div>
|
||||
</Badge>
|
||||
{profileSignal.execution && (
|
||||
<div className={`profile-execution ${executionClass}`} title={profileSignal.execution.reason}>
|
||||
<div className="profile-execution-head">
|
||||
@ -209,15 +204,16 @@ export const SymbolCard = ({ symbol, data }: SymbolCardProps) => {
|
||||
|
||||
return (
|
||||
<div key={ruleName} className="rule-container">
|
||||
<div
|
||||
className={`rule-badge ${ruleData.isSkipped ? 'skipped' : (ruleData.isPending ? 'pending' : (ruleData.passed ? 'passed' : 'failed'))}`}
|
||||
<Badge
|
||||
className="rule-status"
|
||||
variant={ruleData.isSkipped ? 'neutral' : (ruleData.isPending ? 'warning' : (ruleData.passed ? 'success' : 'danger'))}
|
||||
title={ruleData.reason}
|
||||
>
|
||||
<span className="rule-icon">
|
||||
{ruleData.isSkipped ? '➖' : (ruleData.isPending ? '⏳' : (ruleData.passed ? '✓' : '✗'))}
|
||||
</span>
|
||||
<span className="rule-name">{ruleDisplayNames[ruleName] || ruleName}</span>
|
||||
</div>
|
||||
</Badge>
|
||||
{isAI && aiData && (
|
||||
<div className={`ai-details ${ruleData.passed ? 'passed' : 'failed'}`}>
|
||||
{aiData.confidence !== undefined && (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user