+ {r.key}
+ {r.sessions}
+
{formatNumber(r.hours, r.hours % 1 === 0 ? 0 : 1)}
diff --git a/src/components/ui/Toast.jsx b/src/components/ui/Toast.jsx
index 1e05327..b4d8f89 100644
--- a/src/components/ui/Toast.jsx
+++ b/src/components/ui/Toast.jsx
@@ -12,25 +12,25 @@ export default function Toast({ toast, onClose, duration = 4500 }) {
const tone =
toast.tone === 'win'
- ? 'border-emerald-500/50 bg-emerald-600/20'
+ ? 'border-emerald-300 bg-emerald-50'
: toast.tone === 'loss'
- ? 'border-rose-500/50 bg-rose-600/20'
- : 'border-felt-500/50 bg-felt-600/30';
+ ? 'border-rose-300 bg-rose-50'
+ : 'border-felt-300 bg-felt-100';
return (
{toast.icon || '✅'}
-
{toast.title}
- {toast.message &&
{toast.message}
}
+
{toast.title}
+ {toast.message &&
{toast.message}
}
✕
diff --git a/src/components/ui/Tooltip.jsx b/src/components/ui/Tooltip.jsx
index 0bb00f3..1d0f31b 100644
--- a/src/components/ui/Tooltip.jsx
+++ b/src/components/ui/Tooltip.jsx
@@ -22,7 +22,7 @@ export default function Tooltip({ text, children, className = '' }) {
onMouseLeave={() => setOpen(false)}
>
{
e.stopPropagation();
setOpen((v) => !v);
@@ -33,10 +33,10 @@ export default function Tooltip({ text, children, className = '' }) {
{open && text && (
{text}
-
)}
diff --git a/src/components/ui/chartTheme.js b/src/components/ui/chartTheme.js
index 29cd7f8..dfc80a2 100644
--- a/src/components/ui/chartTheme.js
+++ b/src/components/ui/chartTheme.js
@@ -1,28 +1,29 @@
-// Shared dark-theme constants and a tooltip renderer for Recharts.
+// Shared light-theme constants and a tooltip renderer for Recharts.
import { formatMoney } from '../../utils/formatting.js';
export const CHART = {
- grid: '#1f2a25',
- axis: '#5b6b63',
- green: '#34d399',
+ grid: '#e2e8f0', // slate-200
+ axis: '#64748b', // slate-500
+ green: '#059669', // emerald-600
greenSoft: '#2d6a4f',
- red: '#fb7185',
- amber: '#fbbf24',
- ev: '#7dd3fc',
- paths: ['#34d399', '#7dd3fc', '#fbbf24', '#fb7185', '#a78bfa', '#f472b6', '#38bdf8', '#4ade80'],
+ red: '#e11d48', // rose-600
+ amber: '#d97706', // amber-600
+ ev: '#0284c7', // sky-600
+ paths: ['#059669', '#0284c7', '#d97706', '#e11d48', '#7c3aed', '#db2777', '#0891b2', '#16a34a'],
};
export function tooltipStyle() {
return {
contentStyle: {
- background: '#0f1512',
- border: '1px solid #2d6a4f66',
+ background: '#ffffff',
+ border: '1px solid #2d6a4f55',
borderRadius: 10,
fontSize: 12,
- color: '#fff',
+ color: '#0f172a',
+ boxShadow: '0 8px 24px rgba(15,23,42,0.12)',
},
- labelStyle: { color: '#ffffffaa', marginBottom: 4 },
- itemStyle: { color: '#fff' },
+ labelStyle: { color: '#475569', marginBottom: 4 },
+ itemStyle: { color: '#0f172a' },
};
}
diff --git a/src/constants.js b/src/constants.js
index 9989efa..d5895a9 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -78,9 +78,9 @@ export const DEFAULT_BANKROLL = {
export const DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
export const TABS = [
- { id: 'log', label: 'Log', icon: '📋', full: 'Log Session' },
- { id: 'dashboard', label: 'Stats', icon: '📊', full: 'Dashboard' },
- { id: 'charts', label: 'Charts', icon: '📈', full: 'Charts' },
- { id: 'calculators', label: 'Calc', icon: '🧮', full: 'Calculators' },
- { id: 'history', label: 'History', icon: '📝', full: 'Session History' },
+ { id: 'log', label: 'Log', icon: 'log', full: 'Log Session' },
+ { id: 'dashboard', label: 'Stats', icon: 'dashboard', full: 'Dashboard' },
+ { id: 'charts', label: 'Charts', icon: 'charts', full: 'Charts' },
+ { id: 'calculators', label: 'Calc', icon: 'calculator', full: 'Calculators' },
+ { id: 'history', label: 'History', icon: 'history', full: 'Session History' },
];
diff --git a/src/index.css b/src/index.css
index 92d2062..9fe656b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,7 +3,7 @@
@tailwind utilities;
:root {
- color-scheme: dark;
+ color-scheme: light;
}
html,
@@ -15,10 +15,25 @@ body,
body {
margin: 0;
-webkit-font-smoothing: antialiased;
- font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+ text-rendering: optimizeLegibility;
+ font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+ background-color: #f6f7f9;
+ color: #0f172a;
}
-/* Slim, dark scrollbars */
+/* Tabular figures everywhere numbers matter (set per-element via .tabular-nums). */
+.tabular-nums {
+ font-variant-numeric: tabular-nums;
+}
+
+@layer components {
+ /* Elevated surface used for every panel / metric tile. */
+ .card {
+ @apply rounded-2xl bg-white ring-1 ring-slate-200/70 shadow-card;
+ }
+}
+
+/* Slim, light scrollbars */
::-webkit-scrollbar {
width: 9px;
height: 9px;
@@ -27,11 +42,11 @@ body {
background: transparent;
}
::-webkit-scrollbar-thumb {
- background: #1b4332;
+ background: #cbd5e1;
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
- background: #2d6a4f;
+ background: #94a3b8;
}
/* Remove number input spinners for a cleaner look */
@@ -80,7 +95,7 @@ input[type='number'] {
}
}
.skeleton {
- background: linear-gradient(90deg, #11201a 25%, #16271f 50%, #11201a 75%);
+ background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
background-size: 200% 100%;
animation: skeleton-shine 1.4s ease-in-out infinite;
}
diff --git a/src/utils/formatting.js b/src/utils/formatting.js
index d6ce506..7b8ba1e 100644
--- a/src/utils/formatting.js
+++ b/src/utils/formatting.js
@@ -32,15 +32,15 @@ export function formatHours(value) {
// Tailwind text color for a P&L value. Near-breakeven (|x| <= threshold) is amber.
export function pnlColor(value, threshold = 20) {
- if (value > threshold) return 'text-emerald-400';
- if (value < -threshold) return 'text-rose-400';
- return 'text-amber-400';
+ if (value > threshold) return 'text-emerald-600';
+ if (value < -threshold) return 'text-rose-600';
+ return 'text-amber-600';
}
export function pnlBg(value, threshold = 20) {
- if (value > threshold) return 'bg-emerald-500/10 border-emerald-500/30';
- if (value < -threshold) return 'bg-rose-500/10 border-rose-500/30';
- return 'bg-amber-500/10 border-amber-500/30';
+ if (value > threshold) return 'bg-emerald-50 border-emerald-200';
+ if (value < -threshold) return 'bg-rose-50 border-rose-200';
+ return 'bg-amber-50 border-amber-200';
}
export function formatDate(iso) {
diff --git a/tailwind.config.js b/tailwind.config.js
index 436646c..e2ac330 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,27 +1,38 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,jsx}'],
- darkMode: 'class',
theme: {
extend: {
colors: {
felt: {
- 50: '#e8f3ee',
- 100: '#c6e1d5',
+ 50: '#eef6f1',
+ 100: '#d3e8dd',
+ 200: '#a8d0bd',
+ 300: '#74b095',
400: '#40916c',
500: '#2d6a4f',
600: '#1b4332',
700: '#143728',
},
- ink: {
- 900: '#0b0f0d',
- 800: '#11161300',
- 850: '#0f1512',
- },
},
fontFamily: {
+ sans: [
+ 'Inter var',
+ 'Inter',
+ 'ui-sans-serif',
+ 'system-ui',
+ '-apple-system',
+ 'Segoe UI',
+ 'Roboto',
+ 'sans-serif',
+ ],
mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
},
+ boxShadow: {
+ card: '0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05)',
+ 'card-md': '0 4px 16px rgba(15, 23, 42, 0.08)',
+ hero: '0 12px 32px -8px rgba(20, 55, 40, 0.45)',
+ },
},
},
plugins: [],
diff --git a/vite.config.js b/vite.config.js
index a4fadcc..85e09a9 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -36,8 +36,8 @@ export default defineConfig(({ mode }) => {
name: 'Felt Ledger',
short_name: 'Felt Ledger',
description: 'Track your poker sessions, bankroll, win rate, and variance.',
- theme_color: '#0b0f0d',
- background_color: '#0b0f0d',
+ theme_color: '#f1f5f9',
+ background_color: '#f1f5f9',
display: 'standalone',
orientation: 'portrait',
start_url: '/',