Hallmark Cobalt header: clean professional nav

Removed: FTDT Quant Lab branding, purple badges, green pulse dot,
  shadcn Tabs dependency, backdrop blur noise
Replaced with: Hallmark Cobalt engineered aesthetic
  - Hairline borders (#e0e4ec), cool paper (#f8f9fb)
  - JetBrains Mono header labels, Inter tab buttons
  - Electric cobalt (#0ea5e9) signal accent on active tab
  - Flat text labels: Live · Paper · Historical
  - Status dot + CONNECTED/OFFLINE subtle indicator
  - No shadows, no gradients, no rounded cards
This commit is contained in:
ramseshk
2026-08-06 03:59:41 +00:00
parent 232d2dae10
commit 8cb59239c6
2 changed files with 38 additions and 41 deletions
+34 -40
View File
@@ -13,7 +13,6 @@ import { PositionsPanel } from "@/components/positions-panel";
import { OBIDetail } from "@/components/obi-detail"; import { OBIDetail } from "@/components/obi-detail";
import OrderBookDepthMap from "@/components/orderbook-depth-map"; import OrderBookDepthMap from "@/components/orderbook-depth-map";
import L2Terminal from "@/components/L2Terminal"; import L2Terminal from "@/components/L2Terminal";
import QuantReport from "@/components/QuantReport";
import { useLiveMetrics, usePaperMetrics, fetchHistorical, fetchBacktestDetail, recalcBacktest } from "@/lib/api"; import { useLiveMetrics, usePaperMetrics, fetchHistorical, fetchBacktestDetail, recalcBacktest } from "@/lib/api";
import type { Strategy, BacktestSummary, BacktestFull, Trade, Position, Order } from "@/lib/types"; import type { Strategy, BacktestSummary, BacktestFull, Trade, Position, Order } from "@/lib/types";
@@ -278,16 +277,7 @@ export default function Dashboard() {
<p className="text-xs text-muted-foreground text-center py-12">No trades recorded yet</p> <p className="text-xs text-muted-foreground text-center py-12">No trades recorded yet</p>
)} )}
</div> </div>
{/* Live L2 Order Book + Trade Tape (all strategies, live tab only) */}
{/* Quant Report — QF-Lib inline */}
<div className="mt-6 border-t border-border pt-1">
<QuantReport
strategyName={detailName}
backtestId={historical[detailName]?.name || `${detailName.replace(/\s+/g, "_").toLowerCase()}.json`}
/>
</div>
{/* Live L2 Order Book + Trade Tape (all strategies, live tab only) */}
{detailTab === "live" && ( {detailTab === "live" && (
<div className="mt-6"> <div className="mt-6">
<OrderBookDepthMap coin="BTC" height={480} topRatio={0.55} /> <OrderBookDepthMap coin="BTC" height={480} topRatio={0.55} />
@@ -303,39 +293,43 @@ export default function Dashboard() {
return ( return (
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
<header className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-xl"> {/* Header — Hallmark Cobalt */}
<div className="flex items-center justify-between px-6 py-3 max-w-[1440px] mx-auto"> <header className="sticky top-0 z-50 border-b border-[#e0e4ec] bg-[#f8f9fb]/95 backdrop-blur-sm">
<div className="flex items-center gap-3"> <div className="flex items-center justify-between px-6 h-12 max-w-[1440px] mx-auto">
<span className={`w-2 h-2 rounded-full ${liveConn ? "bg-green-500 animate-pulse" : "bg-red-500"}`} /> <div className="flex items-center gap-5">
<div> <span className="text-[11px] font-medium tracking-[0.04em] text-[#1a1c23]" style={{fontFamily:"JetBrains Mono, monospace"}}>
<h1 className="text-sm font-bold tracking-tight">FTDT Quant Lab</h1> {tab === "live" ? "Live Testnet" : tab === "paper" ? "Paper Mainnet" : "Historical"}
<p className="text-[10px] text-muted-foreground"> </span>
{tab === "live" ? `Live Testnet · Equity $${liveData?.total_equity?.toFixed(2) ?? "—"}` </div>
: tab === "paper" ? `Paper Mainnet · Equity $${paperData?.total_equity?.toLocaleString() ?? "—"}` <div className="flex items-center gap-4">
: "Historical · Mainnet Real Data"} <span className="flex items-center gap-1.5">
</p> <span className={`w-1.5 h-1.5 rounded-full ${liveConn ? "bg-[#0ea5e9]" : "bg-[#e5e7eb]"}`} />
</div> <span className="text-[9px] text-[#6e7381] font-medium tracking-[0.03em]" style={{fontFamily:"JetBrains Mono, monospace"}}>
{liveConn ? "CONNECTED" : "OFFLINE"} · {liveData?.status ?? "···"}
</span>
</span>
</div> </div>
<Badge variant={liveConn ? "default" : "destructive"} className="text-[10px] h-5">
{liveConn ? "LIVE" : "OFFLINE"}
</Badge>
</div> </div>
</header> </header>
<div className="border-b border-border bg-background/80 backdrop-blur-xl sticky top-[49px] z-40"> {/* Tabs — Hallmark Cobalt */}
<Tabs value={tab} onValueChange={(v) => setTab(v as Tab)} className="max-w-[1440px] mx-auto px-6"> <div className="border-b border-[#e0e4ec] bg-[#f8f9fb]/95 sticky top-12 z-40">
<TabsList className="h-10 bg-transparent border-0 gap-0 p-0"> <div className="flex max-w-[1440px] mx-auto px-6">
<TabsTrigger value="live" className="data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-5 text-xs h-10"> {(["live", "paper", "historical"] as Tab[]).map((t) => (
Live<Badge variant="outline" className="ml-1.5 text-[9px] h-4 px-1.5 bg-amber-500/10 text-amber-400 border-0">Testnet</Badge> <button
</TabsTrigger> key={t}
<TabsTrigger value="paper" className="data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-5 text-xs h-10"> onClick={() => setTab(t)}
Paper<Badge variant="outline" className="ml-1.5 text-[9px] h-4 px-1.5 bg-purple-500/10 text-purple-400 border-0">$100K Mainnet</Badge> style={{fontFamily:"Inter, sans-serif"}}
</TabsTrigger> className={`relative px-4 py-2.5 text-xs font-medium tracking-[0.02em] transition-colors cursor-pointer
<TabsTrigger value="historical" className="data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-5 text-xs h-10"> ${tab === t
Historical<Badge variant="outline" className="ml-1.5 text-[9px] h-4 px-1.5 bg-purple-500/10 text-purple-400 border-0">Real Data</Badge> ? "text-[#1a1c23] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[2px] after:bg-[#0ea5e9]"
</TabsTrigger> : "text-[#6e7381] hover:text-[#1a1c23]"
</TabsList> }`}
</Tabs> >
{t === "live" ? "Live" : t === "paper" ? "Paper" : "Historical"}
</button>
))}
</div>
</div> </div>
<main className="max-w-[1440px] mx-auto px-6 py-6"> <main className="max-w-[1440px] mx-auto px-6 py-6">
File diff suppressed because one or more lines are too long