rams/ftdt-quant-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hallmark Cobalt: unified light palette + Ubuntu fonts

Browse Source 
Layout: Ubuntu + Ubuntu Mono (next/font/google), light mode
CSS: Hallmark Cobalt palette — cool paper bg, hairlines,
  electric cobalt primary, slate secondary
Cards: white bg, hairline borders, muted type badges
Header/tabs: Ubuntu Mono labels, Ubuntu tab buttons
Removed: dark mode, Inter/JetBrains Mono, purple gradients
This commit is contained in:
ramseshk
2026-08-06 04:22:50 +00:00
parent 98ee58dfaa
commit 6552511978
5 changed files with 82 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard-next/src/components/strategy-card.tsx
+15 -16
View File
@@ -25,52 +25,51 @@ export function StrategyCard({ name, strategy, tab, onClick, badge, stats, pnlPc
const pnlPctVal = strategy.pnl_pct ?? 0;
// Type colors
const typeColors: Record<string, string> = {
reversal: "bg-blue-500/20 text-blue-400",
momentum: "bg-amber-500/20 text-amber-400",
stat_arb: "bg-purple-500/20 text-purple-400",
carry: "bg-cyan-500/20 text-cyan-400",
market_making: "bg-emerald-500/20 text-emerald-400",
reversal: "bg-blue-100 text-blue-700",
momentum: "bg-amber-100 text-amber-700",
stat_arb: "bg-purple-100 text-purple-700",
carry: "bg-cyan-100 text-cyan-700",
market_making: "bg-emerald-100 text-emerald-700",
};
const typeColor = typeColors[strategy.type] || "bg-gray-500/20 text-gray-400";
// Asset shorthand
const typeColor = typeColors[strategy.type] || "bg-gray-100 text-gray-600";
const assetShort = strategy.instrument?.split("-")[0] || "";
return (
<Card
className="p-4 cursor-pointer hover:border-primary/50 hover:shadow-md transition-all duration-200 hover:-translate-y-0.5 border-border"
className="p-4 cursor-pointer hover:border-[#0ea5e9]/30 hover:shadow-sm transition-all duration-200 border-[#e0e4ec] bg-white"
onClick={onClick}
>
<div className="flex items-start justify-between mb-2">
<div>
<p className="text-xs font-semibold leading-tight">{name}</p>
<p className="text-xs font-medium leading-tight text-[#1a1c23]">{name}</p>
<div className="flex gap-1 mt-0.5">
<span className={`text-[8px] px-1.5 py-px rounded font-mono ${typeColor}`}>{strategy.type}</span>
<span className="text-[9px] text-muted-foreground">{assetShort}</span>
<span className={`text-[8px] px-1.5 py-px rounded font-medium font-mono ${typeColor}`}>{strategy.type}</span>
<span className="text-[9px] text-[#6e7381]">{assetShort}</span>
</div>
</div>
<div className="flex gap-1">
<Badge variant={strategy.status === "running" ? "default" : "secondary"} className="text-[8px] h-4 px-1.5">
{strategy.status?.toUpperCase()}
</Badge>
<Badge variant="outline" className="text-[8px] h-4 px-1.5 border-border">
<Badge variant="outline" className="text-[8px] h-4 px-1.5 border-[#e0e4ec]">
{strategy.fee_model?.toUpperCase()}
</Badge>
</div>
</div>
<div className={`text-xl font-mono font-bold mb-2 flex items-center gap-1 ${isUp ? "text-green-500" : "text-red-500"}`}>
<div className={`text-xl font-mono font-bold mb-2 flex items-center gap-1 ${isUp ? "text-[#10b981]" : "text-[#ef4444]"}`}>
{isUp ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
${equity.toFixed(2)}
</div>
<div className="flex gap-3 text-[9px] text-muted-foreground flex-wrap">
<span>PnL: <b className={pnlPctVal >= 0 ? "text-green-500" : "text-red-500"}>{pnl >= 0 ? "+" : ""}{pnl.toFixed(2)} ({pnlPctVal >= 0 ? "+" : ""}{pnlPctVal.toFixed(2)}%)</b></span>
<div className="flex gap-3 text-[9px] text-[#6e7381] flex-wrap">
<span>PnL: <b className={pnlPctVal >= 0 ? "text-[#10b981]" : "text-[#ef4444]"}>{pnl >= 0 ? "+" : ""}{pnl.toFixed(2)} ({pnlPctVal >= 0 ? "+" : ""}{pnlPctVal.toFixed(2)}%)</b></span>
<span>Trades: <b>{strategy.trades_today ?? 0}</b></span>
<span>Win: <b>{Math.round((strategy.win_rate ?? 0) * 100)}%</b></span>
<span>Pos: <b>{(strategy.position ?? 0).toFixed(4)}</b></span>
</div>
<div className="mt-2 pt-2 border-t border-border/50 text-[9px] text-muted-foreground leading-relaxed">
<div className="mt-2 pt-2 border-t border-[#e0e4ec]/50 text-[9px] text-[#6e7381] leading-relaxed">
<b>Alloc:</b> ${strategy.allocation} · <b>Max pos:</b> {strategy.max_position ?? "—"} · <b>Stop:</b> {strategy.stop_loss ?? "—"}
</div>
</Card>