null/BillTracker
null
/
BillTracker
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 1 Wiki Activity

dark theme

This commit is contained in:
null 2026-05-28 19:40:55 -05:00
parent 6d42dd9a29
commit d99ea8057e
6 changed files with 51 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/components/MobileTrackerRow.jsx
View File

@ -13,12 +13,12 @@ const MONTHS = [
]; ];
const ROW_STATUS_CLS = { const ROW_STATUS_CLS = {
paid: 'bg-emerald-500/[0.04] dark:bg-emerald-400/[0.05]', paid: 'bg-emerald-500/[0.04] dark:bg-emerald-400/[0.035]',
autodraft: 'bg-sky-500/[0.04] dark:bg-sky-400/[0.04]', autodraft: 'bg-sky-500/[0.04] dark:bg-sky-400/[0.03]',
upcoming: '', upcoming: '',
due_soon: 'bg-amber-400/[0.07] dark:bg-amber-300/[0.035]', due_soon: 'bg-amber-400/[0.07] dark:bg-amber-300/[0.025]',
late: 'bg-orange-400/[0.08] dark:bg-orange-300/[0.035]', late: 'bg-orange-400/[0.08] dark:bg-orange-300/[0.024]',
missed: 'bg-red-400/[0.08] dark:bg-rose-300/[0.03]', missed: 'bg-red-400/[0.08] dark:bg-rose-300/[0.018]',
}; };
function paymentDateForTrackerMonth(year, month, dueDay) { function paymentDateForTrackerMonth(year, month, dueDay) {

10
client/components/StatusBadge.jsx
View File

@ -2,12 +2,12 @@ import React, { useMemo } from 'react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
const STATUS_META = { const STATUS_META = {
paid: { label: 'Paid', cls: 'bg-emerald-500/15 text-emerald-500 border border-emerald-500/30 dark:text-emerald-300 dark:border-emerald-300/25' }, paid: { label: 'Paid', cls: 'bg-emerald-500/15 text-emerald-500 border border-emerald-500/30 dark:bg-emerald-300/10 dark:text-emerald-200 dark:border-emerald-300/30' },
upcoming: { label: 'Upcoming', cls: 'bg-secondary text-muted-foreground border border-border' }, upcoming: { label: 'Upcoming', cls: 'bg-secondary text-muted-foreground border border-border' },
due_soon: { label: 'Due Soon', cls: 'bg-amber-400/15 text-amber-500 border border-amber-400/30 dark:text-amber-300 dark:border-amber-300/25' }, due_soon: { label: 'Due Soon', cls: 'bg-amber-400/15 text-amber-500 border border-amber-400/30 dark:bg-amber-300/10 dark:text-amber-200 dark:border-amber-300/28' },
late: { label: 'Late', cls: 'bg-orange-400/15 text-orange-500 border border-orange-400/30 dark:bg-orange-300/10 dark:text-orange-300 dark:border-orange-300/22' }, late: { label: 'Late', cls: 'bg-orange-400/15 text-orange-500 border border-orange-400/30 dark:bg-orange-300/10 dark:text-orange-200 dark:border-orange-300/26' },
missed: { label: 'Missed', cls: 'bg-red-400/15 text-red-500 border border-red-400/30 dark:bg-rose-300/10 dark:text-rose-300 dark:border-rose-300/22' }, missed: { label: 'Missed', cls: 'bg-red-400/15 text-red-500 border border-red-400/30 dark:bg-rose-300/10 dark:text-rose-200 dark:border-rose-300/26' },
autodraft: { label: 'Autodraft', cls: 'bg-sky-400/15 text-sky-500 border border-sky-400/30 dark:text-sky-300 dark:border-sky-300/25' }, autodraft: { label: 'Autodraft', cls: 'bg-sky-400/15 text-sky-500 border border-sky-400/30 dark:bg-sky-300/10 dark:text-sky-200 dark:border-sky-300/28' },
skipped: { label: 'Skipped', cls: 'bg-muted text-muted-foreground border border-border' }, skipped: { label: 'Skipped', cls: 'bg-muted text-muted-foreground border border-border' },
}; };

4
client/components/SummaryCard.jsx
View File

@ -19,7 +19,7 @@ const CARD_DEFS = {
bar: 'from-emerald-500 to-emerald-300', bar: 'from-emerald-500 to-emerald-300',
glow: 'shadow-[0_4px_20px_rgba(16,185,129,0.15)]', glow: 'shadow-[0_4px_20px_rgba(16,185,129,0.15)]',
borderActive: 'border-emerald-400/40', borderActive: 'border-emerald-400/40',
valueClass: 'text-emerald-600 dark:text-emerald-300', valueClass: 'text-emerald-600 dark:text-emerald-200',
activateWhen: (v) => v > 0, activateWhen: (v) => v > 0,
}, },
remaining: { remaining: {
@ -36,7 +36,7 @@ const CARD_DEFS = {
bar: 'from-rose-400 to-orange-300', bar: 'from-rose-400 to-orange-300',
glow: 'shadow-[0_4px_20px_rgba(251,113,133,0.10)]', glow: 'shadow-[0_4px_20px_rgba(251,113,133,0.10)]',
borderActive: 'border-rose-400/35', borderActive: 'border-rose-400/35',
valueClass: 'text-red-500 dark:text-rose-300', valueClass: 'text-red-500 dark:text-rose-200',
activateWhen: (v) => v > 0, activateWhen: (v) => v > 0,
}, },
}; };

2
client/components/layout/Layout.jsx
View File

@ -3,7 +3,7 @@ import AppNavigation from './Sidebar';
export default function Layout({ mainContentId }) { export default function Layout({ mainContentId }) {
return ( return (
<div className="min-h-screen bg-[radial-gradient(circle_at_top_left,oklch(var(--primary)/0.10),transparent_34rem),linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.22))] text-foreground" <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,oklch(var(--primary)/0.08),transparent_32rem),linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.14))] text-foreground"
role="main" role="main"
aria-labelledby={mainContentId} aria-labelledby={mainContentId}
> >

52
client/index.css
View File

@ -69,38 +69,38 @@
} }
.dark { .dark {
--background: 0.22 0.012 245; --background: 0.18 0.016 245;
--foreground: 0.94 0.006 245; --foreground: 0.95 0.006 245;
--card: 0.27 0.012 245; --card: 0.245 0.016 245;
--card-foreground: 0.94 0.006 245; --card-foreground: 0.95 0.006 245;
--popover: 0.30 0.012 245; --popover: 0.27 0.018 245;
--popover-foreground: 0.94 0.006 245; --popover-foreground: 0.95 0.006 245;
--primary: 0.68 0.15 150; --primary: 0.67 0.18 150;
--primary-foreground: 0.16 0.010 245; --primary-foreground: 0.14 0.018 150;
--secondary: 0.33 0.014 250; --secondary: 0.29 0.018 245;
--secondary-foreground: 0.91 0.006 245; --secondary-foreground: 0.92 0.007 245;
--muted: 0.32 0.012 250; --muted: 0.285 0.016 245;
--muted-foreground: 0.72 0.012 245; --muted-foreground: 0.68 0.014 245;
--accent: 0.35 0.018 160; --accent: 0.31 0.030 158;
--accent-foreground: 0.94 0.006 245; --accent-foreground: 0.95 0.006 245;
--destructive: 0.68 0.16 26; --destructive: 0.66 0.18 26;
--destructive-foreground: 0.98 0.004 245; --destructive-foreground: 0.98 0.004 245;
--border: 0.38 0.012 245; --border: 0.35 0.018 245;
--input: 0.38 0.012 245; --input: 0.36 0.018 245;
--ring: 0.66 0.14 150; --ring: 0.67 0.16 150;
--chart-1: 0.55 0.22 270; --chart-1: 0.55 0.22 270;
--chart-2: 0.62 0.14 150; --chart-2: 0.62 0.14 150;
--chart-3: 0.65 0.18 310; --chart-3: 0.65 0.18 310;
--chart-4: 0.62 0.16 130; --chart-4: 0.62 0.16 130;
--chart-5: 0.58 0.18 255; --chart-5: 0.58 0.18 255;
--sidebar: 0.20 0.010 245; --sidebar: 0.19 0.014 245;
--sidebar-foreground: 0.92 0.006 245; --sidebar-foreground: 0.93 0.006 245;
--sidebar-primary: 0.68 0.15 150; --sidebar-primary: 0.67 0.18 150;
--sidebar-primary-foreground: 0.16 0.010 245; --sidebar-primary-foreground: 0.14 0.018 150;
--sidebar-accent: 0.30 0.014 160; --sidebar-accent: 0.29 0.026 158;
--sidebar-accent-foreground: 0.92 0.006 245; --sidebar-accent-foreground: 0.93 0.006 245;
--sidebar-border: 0.34 0.012 245; --sidebar-border: 0.32 0.018 245;
--sidebar-ring: 0.66 0.14 150; --sidebar-ring: 0.67 0.16 150;
} }
* { * {

24
client/pages/TrackerPage.jsx
View File

@ -49,21 +49,21 @@ function paymentDateForTrackerMonth(year, month, dueDay) {
} }
const ROW_STATUS_CLS = { const ROW_STATUS_CLS = {
paid: 'bg-emerald-500/[0.04] dark:bg-emerald-400/[0.05]', paid: 'bg-emerald-500/[0.04] dark:bg-emerald-400/[0.035]',
autodraft: 'bg-sky-500/[0.04] dark:bg-sky-400/[0.04]', autodraft: 'bg-sky-500/[0.04] dark:bg-sky-400/[0.03]',
upcoming: '', upcoming: '',
due_soon: 'bg-amber-400/[0.07] dark:bg-amber-300/[0.035]', due_soon: 'bg-amber-400/[0.07] dark:bg-amber-300/[0.025]',
late: 'bg-orange-400/[0.08] dark:bg-orange-300/[0.035]', late: 'bg-orange-400/[0.08] dark:bg-orange-300/[0.024]',
missed: 'bg-red-400/[0.08] dark:bg-rose-300/[0.03]', missed: 'bg-red-400/[0.08] dark:bg-rose-300/[0.018]',
}; };
const STATUS_META = { const STATUS_META = {
paid: { label: 'Paid', cls: 'bg-emerald-500/15 text-emerald-500 border border-emerald-500/30 dark:text-emerald-300 dark:border-emerald-300/25' }, paid: { label: 'Paid', cls: 'bg-emerald-500/15 text-emerald-500 border border-emerald-500/30 dark:bg-emerald-300/10 dark:text-emerald-200 dark:border-emerald-300/30' },
upcoming: { label: 'Upcoming', cls: 'bg-secondary text-muted-foreground border border-border' }, upcoming: { label: 'Upcoming', cls: 'bg-secondary text-muted-foreground border border-border' },
due_soon: { label: 'Due Soon', cls: 'bg-amber-400/15 text-amber-500 border border-amber-400/30 dark:text-amber-300 dark:border-amber-300/25' }, due_soon: { label: 'Due Soon', cls: 'bg-amber-400/15 text-amber-500 border border-amber-400/30 dark:bg-amber-300/10 dark:text-amber-200 dark:border-amber-300/28' },
late: { label: 'Late', cls: 'bg-orange-400/15 text-orange-500 border border-orange-400/30 dark:bg-orange-300/10 dark:text-orange-300 dark:border-orange-300/22' }, late: { label: 'Late', cls: 'bg-orange-400/15 text-orange-500 border border-orange-400/30 dark:bg-orange-300/10 dark:text-orange-200 dark:border-orange-300/26' },
missed: { label: 'Missed', cls: 'bg-red-400/15 text-red-500 border border-red-400/30 dark:bg-rose-300/10 dark:text-rose-300 dark:border-rose-300/22' }, missed: { label: 'Missed', cls: 'bg-red-400/15 text-red-500 border border-red-400/30 dark:bg-rose-300/10 dark:text-rose-200 dark:border-rose-300/26' },
autodraft: { label: 'Autodraft', cls: 'bg-sky-400/15 text-sky-500 border border-sky-400/30 dark:text-sky-300 dark:border-sky-300/25' }, autodraft: { label: 'Autodraft', cls: 'bg-sky-400/15 text-sky-500 border border-sky-400/30 dark:bg-sky-300/10 dark:text-sky-200 dark:border-sky-300/28' },
skipped: { label: 'Skipped', cls: 'bg-muted text-muted-foreground border border-border' }, skipped: { label: 'Skipped', cls: 'bg-muted text-muted-foreground border border-border' },
}; };
@ -134,7 +134,7 @@ const CARD_DEFS = {
bar: 'from-emerald-500 to-emerald-300', bar: 'from-emerald-500 to-emerald-300',
glow: 'shadow-[0_4px_20px_rgba(16,185,129,0.15)]', glow: 'shadow-[0_4px_20px_rgba(16,185,129,0.15)]',
borderActive: 'border-emerald-400/40', borderActive: 'border-emerald-400/40',
valueClass: 'text-emerald-600 dark:text-emerald-300', valueClass: 'text-emerald-600 dark:text-emerald-200',
activateWhen: (v) => v > 0, activateWhen: (v) => v > 0,
}, },
remaining: { remaining: {
@ -151,7 +151,7 @@ const CARD_DEFS = {
bar: 'from-rose-400 to-orange-300', bar: 'from-rose-400 to-orange-300',
glow: 'shadow-[0_4px_20px_rgba(251,113,133,0.10)]', glow: 'shadow-[0_4px_20px_rgba(251,113,133,0.10)]',
borderActive: 'border-rose-400/35', borderActive: 'border-rose-400/35',
valueClass: 'text-red-500 dark:text-rose-300', valueClass: 'text-red-500 dark:text-rose-200',
activateWhen: (v) => v > 0, activateWhen: (v) => v > 0,
}, },
}; };