← back to Bertha
chore(alshi-dash,kalshi-dash): update 6 files (.jsx) [+188/-38] Files changed: M kalshi-dash/src/Layout.jsx M kalshi-dash/src/index.css M kalshi-dash/src/pages/Dashboard.jsx M kalshi-dash/src/pages/Heatmap.jsx M kalshi-dash/src/pages/Markets.jsx M kalshi-dash/src/pages/Positions.jsx
a0d4a47de5711d29ba52176e140aa4a0069123fb · 2026-03-02 05:04:00 +0000 · DW Commit Agent
Files touched
M kalshi-dash/src/Layout.jsxM kalshi-dash/src/index.cssM kalshi-dash/src/pages/Dashboard.jsxM kalshi-dash/src/pages/Heatmap.jsxM kalshi-dash/src/pages/Markets.jsxM kalshi-dash/src/pages/Positions.jsx
Diff
commit a0d4a47de5711d29ba52176e140aa4a0069123fb
Author: DW Commit Agent <commit-agent@dw-agents.com>
Date: Mon Mar 2 05:04:00 2026 +0000
chore(alshi-dash,kalshi-dash): update 6 files (.jsx) [+188/-38]
Files changed:
M kalshi-dash/src/Layout.jsx
M kalshi-dash/src/index.css
M kalshi-dash/src/pages/Dashboard.jsx
M kalshi-dash/src/pages/Heatmap.jsx
M kalshi-dash/src/pages/Markets.jsx
M kalshi-dash/src/pages/Positions.jsx
---
kalshi-dash/src/Layout.jsx | 2 +-
kalshi-dash/src/index.css | 136 +++++++++++++++++++++++++++++++++++-
kalshi-dash/src/pages/Dashboard.jsx | 9 ++-
kalshi-dash/src/pages/Heatmap.jsx | 19 +++--
kalshi-dash/src/pages/Markets.jsx | 10 ++-
kalshi-dash/src/pages/Positions.jsx | 50 ++++++-------
6 files changed, 188 insertions(+), 38 deletions(-)
diff --git a/kalshi-dash/src/Layout.jsx b/kalshi-dash/src/Layout.jsx
index b0d3669..db480a1 100644
--- a/kalshi-dash/src/Layout.jsx
+++ b/kalshi-dash/src/Layout.jsx
@@ -120,7 +120,7 @@ export default function Layout() {
{!col && (
<span
className="kalshi-gradient heading"
- style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.06em', whiteSpace: 'nowrap' }}
+ style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.06em', whiteSpace: 'nowrap', filter: 'drop-shadow(0 0 8px rgba(0,240,255,0.3))' }}
>
KEN TRADER
</span>
diff --git a/kalshi-dash/src/index.css b/kalshi-dash/src/index.css
index 7f3bbe0..cacaefe 100644
--- a/kalshi-dash/src/index.css
+++ b/kalshi-dash/src/index.css
@@ -72,8 +72,8 @@ h1, h2, h3, h4, h5, h6 {
transition: all var(--transition);
}
.card:hover {
- border-color: var(--border-light);
- box-shadow: 0 0 20px var(--cyan-glow);
+ border-color: rgba(0, 240, 255, 0.25);
+ box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.08), 0 0 24px rgba(0, 240, 255, 0.12), 0 4px 16px rgba(0, 0, 0, 0.3);
}
.card-elevated {
background: var(--surface-el);
@@ -311,3 +311,135 @@ tr:hover td { background: var(--cyan-glow); }
.text-dim { color: var(--text-dim); }
.text-muted { color: var(--text-muted); }
.border-cyan { border-color: var(--cyan) !important; }
+
+/* ─── Glass Card ─── */
+.card-glass {
+ background: rgba(20, 20, 25, 0.8);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ border: 1px solid rgba(0, 240, 255, 0.1);
+ border-radius: var(--radius-lg);
+}
+
+/* ─── Neon Text Glow ─── */
+.text-glow {
+ text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
+}
+.text-glow-green {
+ text-shadow: 0 0 10px rgba(0, 195, 137, 0.4);
+}
+.text-glow-red {
+ text-shadow: 0 0 10px rgba(255, 92, 92, 0.4);
+}
+
+/* ─── Divider with Glow ─── */
+.divider-glow {
+ height: 1px;
+ background: linear-gradient(90deg, transparent, var(--cyan), transparent);
+ border: none;
+ margin: 0;
+}
+
+/* ─── Skeleton Shimmer ─── */
+.skeleton {
+ background: linear-gradient(
+ 90deg,
+ var(--surface-el) 25%,
+ var(--border) 50%,
+ var(--surface-el) 75%
+ );
+ background-size: 200% 100%;
+ animation: shimmer 1.5s ease-in-out infinite;
+ border-radius: var(--radius-sm);
+}
+@keyframes shimmer {
+ 0% { background-position: 200% 0; }
+ 100% { background-position: -200% 0; }
+}
+
+/* ─── Scrolling Ticker ─── */
+@keyframes ticker {
+ from { transform: translateX(0); }
+ to { transform: translateX(-50%); }
+}
+
+/* ─── Button Press ─── */
+.btn:active:not(:disabled) {
+ transform: scale(0.97);
+}
+
+/* ─── Neon Focus Ring ─── */
+.neon-focus:focus-visible {
+ outline: none;
+ box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--cyan), 0 0 12px rgba(0, 240, 255, 0.3);
+}
+
+/* ─── Stat card accent variants ─── */
+.card-accent-cyan { border-top: 2px solid var(--cyan); }
+.card-accent-green { border-top: 2px solid var(--green); }
+.card-accent-red { border-top: 2px solid var(--red); }
+.card-accent-orange { border-top: 2px solid var(--orange); }
+.card-accent-blue { border-top: 2px solid var(--blue); }
+.card-accent-purple { border-top: 2px solid var(--purple); }
+
+/* ─── Table row: left-border accent on hover ─── */
+tr:hover td {
+ background: var(--cyan-glow);
+}
+tbody tr:hover td:first-child {
+ box-shadow: inset 3px 0 0 var(--cyan);
+}
+
+/* ─── Alternating table rows ─── */
+tbody tr:nth-child(even) td {
+ background: rgba(28, 28, 36, 0.4);
+}
+tbody tr:nth-child(even):hover td {
+ background: var(--cyan-glow);
+}
+
+/* ─── Market card hover lift ─── */
+.card-lift {
+ transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
+}
+.card-lift:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 240, 255, 0.1);
+}
+
+/* ─── P&L glow variants ─── */
+.pnl-positive {
+ color: var(--green);
+ text-shadow: 0 0 8px rgba(0, 195, 137, 0.35);
+}
+.pnl-negative {
+ color: var(--red);
+ text-shadow: 0 0 8px rgba(255, 92, 92, 0.35);
+}
+
+/* ─── Section accent bar ─── */
+.section-accent-green {
+ border-left: 3px solid var(--green);
+ padding-left: 10px;
+}
+.section-accent-red {
+ border-left: 3px solid var(--red);
+ padding-left: 10px;
+}
+.section-accent-cyan {
+ border-left: 3px solid var(--cyan);
+ padding-left: 10px;
+}
+
+/* ─── Sidebar nav active glow ─── */
+.nav-active-glow {
+ box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.08);
+}
+
+/* ─── Win/Loss bar glow ─── */
+.bar-win-glow {
+ box-shadow: 0 0 8px rgba(0, 195, 137, 0.5);
+}
+.bar-loss-glow {
+ box-shadow: 0 0 8px rgba(255, 92, 92, 0.5);
+}
diff --git a/kalshi-dash/src/pages/Dashboard.jsx b/kalshi-dash/src/pages/Dashboard.jsx
index 31cb819..d97663b 100644
--- a/kalshi-dash/src/pages/Dashboard.jsx
+++ b/kalshi-dash/src/pages/Dashboard.jsx
@@ -532,34 +532,39 @@ export default function Dashboard() {
label: 'Balance',
value: d.balance ? `$${(d.balance / 100).toLocaleString(undefined, { minimumFractionDigits: 2 })}` : '—',
color: 'var(--green)',
+ accent: 'card-accent-green',
icon: 'M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z',
},
{
label: 'Positions',
value: d.position_count ?? '—',
color: 'var(--orange)',
+ accent: 'card-accent-orange',
icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z',
},
{
label: 'Open Markets',
value: d.open_orders ?? '—',
color: 'var(--blue)',
+ accent: 'card-accent-blue',
icon: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6',
},
{
label: 'Today P&L',
value: d.daily_pnl ? `$${(d.daily_pnl / 100).toLocaleString(undefined, { minimumFractionDigits: 2 })}` : '$0.00',
color: (d.daily_pnl || 0) >= 0 ? 'var(--green)' : 'var(--red)',
+ accent: (d.daily_pnl || 0) >= 0 ? 'card-accent-green' : 'card-accent-red',
icon: 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
},
{
label: 'Markets Tracked',
value: d.markets_tracked ?? '—',
color: 'var(--purple)',
+ accent: 'card-accent-purple',
icon: 'M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9',
},
].map(s => (
- <div key={s.label} className="card" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+ <div key={s.label} className={`card ${s.accent}`} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<span className="stat-label">{s.label}</span>
<div
@@ -578,7 +583,7 @@ export default function Dashboard() {
</svg>
</div>
</div>
- <p className="stat-v" style={{ color: s.color }}>{s.value}</p>
+ <p className="stat-v mono" style={{ color: s.color }}>{s.value}</p>
</div>
))}
</div>
diff --git a/kalshi-dash/src/pages/Heatmap.jsx b/kalshi-dash/src/pages/Heatmap.jsx
index 2273027..27caffe 100644
--- a/kalshi-dash/src/pages/Heatmap.jsx
+++ b/kalshi-dash/src/pages/Heatmap.jsx
@@ -146,13 +146,15 @@ function MarketTile({ item, onClick, isSelected }) {
borderRadius: 6,
zIndex: isSelected ? 10 : 1,
transition: 'all 150ms ease',
+ boxShadow: isSelected ? '0 0 16px rgba(0,240,255,0.4)' : undefined,
}}
>
{/* Hover glow */}
<div
className="absolute inset-0 opacity-0 group-hover:opacity-100 pointer-events-none"
style={{
- background: `radial-gradient(circle at center, ${getPnlBg(item.pnl)}, transparent)`,
+ background: `radial-gradient(circle at center, ${getPnlBg(item.pnl).replace(')', ', transparent)').replace('rgba', 'radial-gradient').includes('radial') ? getPnlBg(item.pnl) : getPnlBg(item.pnl)}, transparent)`,
+ boxShadow: `inset 0 0 12px ${item.pnl >= 0 ? 'rgba(0,195,137,0.3)' : 'rgba(255,92,92,0.3)'}`,
transition: 'opacity 200ms ease',
}}
/>
@@ -581,12 +583,15 @@ export default function Heatmap() {
{/* Summary Stats */}
<div className="grid grid-cols-6 gap-3">
- {summaryStats.map(s => (
- <div key={s.label} className="card">
- <p className="stat-label mb-1">{s.label}</p>
- <p className="stat-v text-xl" style={{ color: s.color }}>{s.value}</p>
- </div>
- ))}
+ {summaryStats.map((s, i) => {
+ const accentMap = ['card-accent-green', 'card-accent-orange', 'card-accent-blue', 'card-accent-purple', 'card-accent-green', 'card-accent-cyan'];
+ return (
+ <div key={s.label} className={`card ${accentMap[i] || 'card-accent-cyan'}`}>
+ <p className="stat-label mb-1">{s.label}</p>
+ <p className="stat-v mono text-xl" style={{ color: s.color }}>{s.value}</p>
+ </div>
+ );
+ })}
</div>
{/* Category Pills */}
diff --git a/kalshi-dash/src/pages/Markets.jsx b/kalshi-dash/src/pages/Markets.jsx
index f99db03..f134896 100644
--- a/kalshi-dash/src/pages/Markets.jsx
+++ b/kalshi-dash/src/pages/Markets.jsx
@@ -169,8 +169,14 @@ function EventRow({ e }) {
className="cursor-pointer transition"
onClick={toggle}
style={{ background: expanded ? 'rgba(0,240,255,0.04)' : undefined }}
- onMouseEnter={ev => { if (!expanded) ev.currentTarget.style.background = 'var(--cyan-glow)'; }}
- onMouseLeave={ev => { if (!expanded) ev.currentTarget.style.background = ''; }}
+ onMouseEnter={ev => {
+ if (!expanded) {
+ ev.currentTarget.style.background = 'var(--cyan-glow)';
+ }
+ }}
+ onMouseLeave={ev => {
+ if (!expanded) ev.currentTarget.style.background = '';
+ }}
>
<td className="max-w-[300px]">
<div className="flex items-center gap-2">
diff --git a/kalshi-dash/src/pages/Positions.jsx b/kalshi-dash/src/pages/Positions.jsx
index d7ff697..28245fe 100644
--- a/kalshi-dash/src/pages/Positions.jsx
+++ b/kalshi-dash/src/pages/Positions.jsx
@@ -229,29 +229,29 @@ export default function Positions() {
{/* ── Summary Stat Cards ── */}
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
- <div className="card">
+ <div className="card card-accent-cyan">
<p className="stat-label">Positions</p>
- <p className="stat-v mt-2" style={{ color: 'var(--cyan)' }}>{summary.positionCount || 0}</p>
+ <p className="stat-v mono mt-2" style={{ color: 'var(--cyan)' }}>{summary.positionCount || 0}</p>
</div>
- <div className="card">
+ <div className="card card-accent-orange">
<p className="stat-label">Total Cost</p>
- <p className="stat-v mt-2" style={{ color: 'var(--text)' }}>{fmt(summary.totalCost || 0)}</p>
+ <p className="stat-v mono mt-2" style={{ color: 'var(--text)' }}>{fmt(summary.totalCost || 0)}</p>
</div>
- <div className="card">
+ <div className={`card ${(summary.totalPnl || 0) >= 0 ? 'card-accent-green' : 'card-accent-red'}`}>
<p className="stat-label">Realized P&L</p>
- <p className={`stat-v mt-2 ${pnlColor(summary.totalPnl || 0)}`}>
+ <p className={`stat-v mono mt-2 ${(summary.totalPnl || 0) >= 0 ? 'pnl-positive' : 'pnl-negative'}`}>
{fmtPnl(summary.totalPnl || 0)}
</p>
</div>
- <div className="card">
+ <div className="card card-accent-blue">
<p className="stat-label">Contracts</p>
- <p className="stat-v mt-2" style={{ color: 'var(--blue)' }}>
+ <p className="stat-v mono mt-2" style={{ color: 'var(--blue)' }}>
{(summary.totalContracts || 0).toLocaleString()}
</p>
</div>
- <div className="card">
+ <div className="card card-accent-green">
<p className="stat-label">Win Rate</p>
- <p className="stat-v mt-2 text-green">{winRate}</p>
+ <p className="stat-v mono mt-2 text-green">{winRate}</p>
</div>
</div>
@@ -272,8 +272,8 @@ export default function Positions() {
const winPct = (winners.reduce((s, p) => s + p.realized_pnl_cents, 0) / totalAbs) * 100;
return (
<div className="flex h-full w-full">
- <div style={{ width: `${winPct}%`, background: 'var(--green)', borderRadius: '2px 0 0 2px' }} />
- <div style={{ width: `${100 - winPct}%`, background: 'var(--red)', borderRadius: '0 2px 2px 0' }} />
+ <div className="bar-win-glow" style={{ width: `${winPct}%`, background: 'var(--green)', borderRadius: '2px 0 0 2px' }} />
+ <div className="bar-loss-glow" style={{ width: `${100 - winPct}%`, background: 'var(--red)', borderRadius: '0 2px 2px 0' }} />
</div>
);
})()}
@@ -568,14 +568,15 @@ export default function Positions() {
<div
className="flex items-center gap-3 px-4 py-3"
style={{
- background: 'var(--green-dim)',
- borderBottom: '1px solid var(--border)',
+ background: 'rgba(0,195,137,0.06)',
+ borderBottom: '1px solid rgba(0,195,137,0.2)',
+ borderLeft: '4px solid var(--green)',
}}
>
- <span className="text-sm font-bold text-green">Winners</span>
+ <span className="text-sm font-bold text-green" style={{ textShadow: '0 0 10px rgba(0,195,137,0.4)' }}>Winners</span>
<span className="badge bg-green">{winners.length}</span>
<div className="flex-1" />
- <span className="mono font-bold text-green">
+ <span className="mono font-bold pnl-positive">
{fmtPnl(winners.reduce((s, p) => s + p.realized_pnl_cents, 0))}
</span>
</div>
@@ -622,8 +623,8 @@ export default function Positions() {
<td className="mono" style={{ color: 'var(--text-dim)' }}>
{fmt(p.open_cost_cents)}
</td>
- <td className="mono font-bold text-green">{fmtPnl(p.realized_pnl_cents)}</td>
- <td className="mono text-green">{roi}</td>
+ <td className="mono font-bold pnl-positive">{fmtPnl(p.realized_pnl_cents)}</td>
+ <td className="mono pnl-positive">{roi}</td>
</tr>
);
})}
@@ -636,14 +637,15 @@ export default function Positions() {
<div
className="flex items-center gap-3 px-4 py-3"
style={{
- background: 'var(--red-dim)',
- borderBottom: '1px solid var(--border)',
+ background: 'rgba(255,92,92,0.06)',
+ borderBottom: '1px solid rgba(255,92,92,0.2)',
+ borderLeft: '4px solid var(--red)',
}}
>
- <span className="text-sm font-bold text-red">Losers</span>
+ <span className="text-sm font-bold text-red" style={{ textShadow: '0 0 10px rgba(255,92,92,0.4)' }}>Losers</span>
<span className="badge bg-red">{losers.length}</span>
<div className="flex-1" />
- <span className="mono font-bold text-red">
+ <span className="mono font-bold pnl-negative">
{fmtPnl(losers.reduce((s, p) => s + p.realized_pnl_cents, 0))}
</span>
</div>
@@ -690,8 +692,8 @@ export default function Positions() {
<td className="mono" style={{ color: 'var(--text-dim)' }}>
{fmt(p.open_cost_cents)}
</td>
- <td className="mono font-bold text-red">{fmtPnl(p.realized_pnl_cents)}</td>
- <td className="mono text-red">{roi}</td>
+ <td className="mono font-bold pnl-negative">{fmtPnl(p.realized_pnl_cents)}</td>
+ <td className="mono pnl-negative">{roi}</td>
</tr>
);
})}
← 3fc7c62 chore(alshi-dash,kalshi-dash): update 5 files (.css) [+160/-
·
back to Bertha
·
chore(alshi-dash,kalshi-dash): update 11 files (.css) [+896/ 4c8a644 →