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

refactor(ui): tokenize home and shell status colors

Browse Source
This commit is contained in:
root 2026-05-07 05:27:40 +00:00
parent 548c01fee8
commit 4802f028fa
4 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/layout/Header.tsx
View File

@ -144,7 +144,7 @@ export function Header() {
</span>
<span style={{
fontSize: 12, fontWeight: 700, lineHeight: 1.3,
color: idx.positive ? '#16A34A' : '#DC2626',
color: idx.positive ? 'var(--bl-success)' : 'var(--bl-danger)',
}}>
{signStr}{idx.changePct.toFixed(2)}%
</span>
@ -171,7 +171,7 @@ export function Header() {
width: 7,
height: 7,
borderRadius: '50%',
background: connected ? '#22C55E' : 'var(--destructive)',
background: connected ? 'var(--bl-success)' : 'var(--destructive)',
display: 'inline-block',
flexShrink: 0,
}} />

6
web/src/components/layout/RightPanel.tsx
View File

@ -39,7 +39,7 @@ function PortfolioSummary() {
</div>
<div style={{
fontSize: 12, fontWeight: 600, marginTop: 2,
color: pnlPos ? '#16A34A' : '#DC2626',
color: pnlPos ? 'var(--bl-success)' : 'var(--bl-danger)',
}}>
{pnlPos ? '+' : ''}{fmt$(totalPnl)} unrealized
</div>
@ -79,7 +79,7 @@ function PortfolioSummary() {
}}>
<span style={{ fontSize: 12, fontWeight: 700, color: 'var(--foreground)' }}>{pos.symbol}</span>
<span style={{ fontSize: 12, color: 'var(--foreground)' }}>{pos.currentPrice?.toFixed(2) ?? '—'}</span>
<span style={{ fontSize: 12, fontWeight: 600, color: pos_ ? '#16A34A' : '#DC2626' }}>
<span style={{ fontSize: 12, fontWeight: 600, color: pos_ ? 'var(--bl-success)' : 'var(--bl-danger)' }}>
{pos_ ? '+' : ''}{pct.toFixed(2)}%
</span>
<span style={{ fontSize: 12, color: 'var(--foreground)' }}>{fmt$(pos.marketValue ?? 0)}</span>
@ -210,7 +210,7 @@ function NewsFeed() {
{loading && <NewsFeedSkeleton />}
{!loading && error && (
<div style={{ fontSize: 12, color: '#DC2626', padding: '12px 16px' }}>{error}</div>
<div style={{ fontSize: 12, color: 'var(--bl-danger)', padding: '12px 16px' }}>{error}</div>
)}
{!loading && !error && news.length === 0 && (

6
web/src/components/layout/Sidebar.tsx
View File

@ -31,7 +31,7 @@ export function Sidebar() {
width: 40,
height: 40,
borderRadius: 10,
background: 'linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 70%, #1d4ed8 30%))',
background: 'linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 70%, var(--bl-info-strong) 30%))',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@ -96,7 +96,7 @@ export function Sidebar() {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: '#fff',
color: 'var(--primary-foreground)',
fontSize: 12,
fontWeight: 700,
cursor: 'pointer',
@ -113,7 +113,7 @@ export function Sidebar() {
width: 9,
height: 9,
borderRadius: '50%',
background: '#22C55E',
background: 'var(--bl-success)',
border: '2px solid var(--card)',
}} />
</div>

11
web/src/views/HomeView.tsx
View File

@ -45,6 +45,9 @@ interface ResearchProfile {
const EQUITY_EMPTY_STATE_SYMBOLS = ['AAPL','MSFT','GOOGL','AMZN','NVDA'];
const CRYPTO_EMPTY_STATE_SYMBOLS = ['BTC/USDT','ETH/USDT','SOL/USDT','ADA/USDT','DOGE/USDT'];
const CRYPTO_BASES = new Set(['BTC','ETH','SOL','ADA','DOGE','XRP','LTC','DOT','AVAX','MATIC','BNB']);
const homePositiveText = 'var(--bl-success)';
const homeNegativeText = 'var(--bl-danger)';
const homeNegativeMuted = 'color-mix(in oklab, var(--bl-danger) 38%, var(--background))';
function uniqueSymbols(symbols: string[]) {
return Array.from(new Set(symbols.map(s => s.trim().toUpperCase()).filter(Boolean)));
@ -267,7 +270,7 @@ export function TickerHeader({
{price > 0 ? price.toFixed(2) : '—'}
</span>
{price > 0 && (
<span style={{ fontSize: 15, fontWeight: 600, color: positive ? '#16A34A' : '#DC2626' }}>
<span style={{ fontSize: 15, fontWeight: 600, color: positive ? homePositiveText : homeNegativeText }}>
{positive ? '+' : ''}{change.toFixed(2)} ({positive ? '+' : ''}{changePct.toFixed(2)}%)
</span>
)}
@ -446,9 +449,9 @@ function StockChart({
) : error ? (
<div style={{
height: 220, display: 'flex', flexDirection: 'column',
alignItems: 'center', justifyContent: 'center', gap: 8, color: '#EF4444', fontSize: 13,
alignItems: 'center', justifyContent: 'center', gap: 8, color: homeNegativeText, fontSize: 13,
}}>
<BarChart2 size={32} color="#FCA5A5" />
<BarChart2 size={32} color={homeNegativeMuted} />
<span>{error}</span>
</div>
) : chartData.length < 2 ? (
@ -770,7 +773,7 @@ function ResearchCards({
{earnings.slice(0,3).map((e, i) => (
<div key={i} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--muted-foreground)', padding: '2px 0' }}>
<span>{fmtDate(e.date)}</span>
<span style={{ color: e.eps >= (e.epsEstimated ?? e.eps) ? '#16A34A' : '#DC2626' }}>
<span style={{ color: e.eps >= (e.epsEstimated ?? e.eps) ? homePositiveText : homeNegativeText }}>
EPS {e.eps != null ? `$${e.eps.toFixed(2)}` : '—'}
</span>
</div>