From dd8e6cbb647a02889a477af4ee727d7844116c23 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 30 May 2026 16:21:29 +0000 Subject: [PATCH 1/2] Light theme UI overhaul Full redesign from dark to a clean light theme, auditing every color token: - Surfaces: dark ink backgrounds -> white cards on slate-100 app background - Text: white/opacity scale -> slate scale (900/800/700/600/500/400/300) - Borders: white-alpha -> slate-200/100; shadows softened to slate - P&L semantics: emerald/rose/amber shifted to -600/-700 for contrast on light - Colored panels (RoR, toasts, banners): /15-/20 fills -> -50/-100 light tints - Charts: light grid/axis, white tooltip, darker line palette for white bg - Day-of-week heatmap empty cell, scrollbars, skeleton shimmer all lightened - index.html: light theme-color, default iOS status bar, no dark class - PWA manifest theme/background -> light - Green felt-500 accent retained for buttons/active states (white text kept) https://claude.ai/code/session_01BJm4NrTLSrdCZaP8Rr5zXr --- README.md | 2 +- index.html | 8 +-- src/App.jsx | 78 +++++++++++++------------- src/components/tabs/Calculators.jsx | 34 +++++------ src/components/tabs/Charts.jsx | 6 +- src/components/tabs/Dashboard.jsx | 50 ++++++++--------- src/components/tabs/LogSession.jsx | 22 ++++---- src/components/tabs/SessionHistory.jsx | 48 ++++++++-------- src/components/ui/AccountMenu.jsx | 24 ++++---- src/components/ui/EmptyState.jsx | 6 +- src/components/ui/MetricCard.jsx | 12 ++-- src/components/ui/Skeleton.jsx | 4 +- src/components/ui/StatTable.jsx | 12 ++-- src/components/ui/Toast.jsx | 14 ++--- src/components/ui/Tooltip.jsx | 6 +- src/components/ui/chartTheme.js | 27 ++++----- src/index.css | 10 ++-- src/utils/formatting.js | 12 ++-- vite.config.js | 4 +- 19 files changed, 190 insertions(+), 189 deletions(-) diff --git a/README.md b/README.md index d8e14d0..97001b4 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ your numbers follow you across devices. See [`SUPABASE_SETUP.md`](./SUPABASE_SET game / day-of-week heatmap. - **📈 Charts** — bankroll curve vs EV, session-result histogram, rolling hourly rate, monthly P&L, session-length-vs-profit scatter, and a Monte Carlo - variance simulation. All dark-themed (Recharts). + variance simulation. Clean light theme (Recharts). - **🧮 Calculators** — a bankroll calculator (required roll for a target Risk of Ruin, months to build) and a variance simulator (10 Monte Carlo paths, best/worst/median, probability of being up, expected max drawdown). diff --git a/index.html b/index.html index b202c7f..0761dd4 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,9 @@ - + - + @@ -14,12 +14,12 @@ - + Felt Ledger - +
diff --git a/src/App.jsx b/src/App.jsx index a05aaf0..12a84c5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -84,7 +84,7 @@ export default function App() { // guest data to a user who's actually signed in. if (configured && !ready) { return ( -
+
♠️
Loading…
@@ -94,25 +94,25 @@ export default function App() { } return ( -
+
{/* Header */} -
+
♠️

Felt Ledger

-

{activeTab?.full}

+

{activeTab?.full}

@@ -124,7 +124,7 @@ export default function App() { /> @@ -196,14 +196,14 @@ export default function App() {
{tabProps[tab]}
{/* Mobile bottom tab bar */} -
@@ -256,7 +256,7 @@ function Modal({ title, children, onClose }) { } const modalInput = - 'w-full rounded-lg border border-white/10 bg-ink-900 px-3 py-2 text-sm text-white outline-none focus:border-felt-400 focus:ring-1 focus:ring-felt-400'; + 'w-full rounded-lg border border-slate-200 bg-slate-100 px-3 py-2 text-sm text-slate-900 outline-none focus:border-felt-400 focus:ring-1 focus:ring-felt-400'; function BankrollModal({ bankroll, stats, currency, onSetCurrent, onClose }) { const [val, setVal] = useState(String(bankroll.current ?? 0)); @@ -264,24 +264,24 @@ function BankrollModal({ bankroll, stats, currency, onSetCurrent, onClose }) {
-
-
Starting
+
+
Starting
{formatMoney(Number(val) || 0, currency)}
-
All-time P&L
-
= 0 ? 'text-emerald-400' : 'text-rose-400'}`}> +
All-time P&L
+
= 0 ? 'text-emerald-600' : 'text-rose-600'}`}> {formatMoney(stats.totalProfit, currency, { sign: true })}
-
Current
-
+
Current
+
{formatMoney((Number(val) || 0) + stats.totalProfit, currency)}
@@ -304,28 +304,28 @@ function SettingsModal({ settings, onUpdate, onClose, onLoadSamples, mode }) { return (
-
+
{mode === 'cloud' ? ( <> - - Synced to your cloud account + + Synced to your cloud account ) : ( <> - - Local mode — data stays in this browser. Sign in to sync. + + Local mode — data stays in this browser. Sign in to sync. )}
- Currency -
+ Currency +
{CURRENCIES.map((cur) => (