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:58:01 -05:00
parent f8b88350d9
commit 33e5c187a3
5 changed files with 44 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/components/MobileTrackerRow.jsx
View File

@ -13,12 +13,12 @@ const MONTHS = [
];
const ROW_STATUS_CLS = {
paid: 'bg-emerald-500/[0.04] dark:bg-emerald-400/[0.035]',
autodraft: 'bg-sky-500/[0.04] dark:bg-sky-400/[0.03]',
paid: 'bg-emerald-500/[0.04] dark:bg-emerald-400/[0.02]',
autodraft: 'bg-sky-500/[0.04] dark:bg-sky-400/[0.018]',
upcoming: '',
due_soon: 'bg-amber-400/[0.07] dark:bg-amber-300/[0.025]',
late: 'bg-orange-400/[0.08] dark:bg-orange-300/[0.024]',
missed: 'bg-red-400/[0.08] dark:bg-rose-300/[0.018]',
due_soon: 'bg-amber-400/[0.07] dark:bg-amber-300/[0.016]',
late: 'bg-orange-400/[0.08] dark:bg-orange-300/[0.014]',
missed: 'bg-red-400/[0.08] dark:bg-rose-300/[0.01]',
};
function paymentDateForTrackerMonth(year, month, dueDay) {
@ -164,7 +164,7 @@ export const MobileTrackerRow = React.memo(function MobileTrackerRow({ row, year
<>
<div
className={cn(
'rounded-lg border border-border/60 bg-background/60 p-3 shadow-sm',
'rounded-lg border border-border/70 bg-card/90 p-3 shadow-sm shadow-black/10',
'space-y-3 transition-colors',
isSkipped ? 'opacity-55' : rowBg,
)}

4
client/components/SummaryCard.jsx
View File

@ -48,8 +48,8 @@ export const SummaryCard = React.memo(function SummaryCard({ type, value, onEdit
return (
<div className={cn(
'flex-1 min-w-0 relative overflow-hidden rounded-xl border border-border',
'bg-card px-5 py-4 transition-all duration-300',
'flex-1 min-w-0 relative overflow-hidden rounded-xl border border-border/80',
'bg-card/95 px-5 py-4 shadow-sm shadow-black/15 transition-all duration-300',
isActive && def.glow,
isActive && def.borderActive,
)}>

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

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

28
client/index.css
View File

@ -69,38 +69,38 @@
}
.dark {
--background: 0.18 0.016 245;
--background: 0.165 0.014 245;
--foreground: 0.95 0.006 245;
--card: 0.245 0.016 245;
--card: 0.225 0.014 245;
--card-foreground: 0.95 0.006 245;
--popover: 0.27 0.018 245;
--popover: 0.25 0.016 245;
--popover-foreground: 0.95 0.006 245;
--primary: 0.67 0.18 150;
--primary: 0.69 0.18 150;
--primary-foreground: 0.14 0.018 150;
--secondary: 0.29 0.018 245;
--secondary: 0.265 0.016 245;
--secondary-foreground: 0.92 0.007 245;
--muted: 0.285 0.016 245;
--muted-foreground: 0.68 0.014 245;
--accent: 0.31 0.030 158;
--muted: 0.255 0.014 245;
--muted-foreground: 0.70 0.014 245;
--accent: 0.295 0.035 158;
--accent-foreground: 0.95 0.006 245;
--destructive: 0.66 0.18 26;
--destructive-foreground: 0.98 0.004 245;
--border: 0.35 0.018 245;
--border: 0.36 0.018 245;
--input: 0.36 0.018 245;
--ring: 0.67 0.16 150;
--ring: 0.69 0.16 150;
--chart-1: 0.55 0.22 270;
--chart-2: 0.62 0.14 150;
--chart-3: 0.65 0.18 310;
--chart-4: 0.62 0.16 130;
--chart-5: 0.58 0.18 255;
--sidebar: 0.19 0.014 245;
--sidebar: 0.18 0.014 245;
--sidebar-foreground: 0.93 0.006 245;
--sidebar-primary: 0.67 0.18 150;
--sidebar-primary: 0.69 0.18 150;
--sidebar-primary-foreground: 0.14 0.018 150;
--sidebar-accent: 0.29 0.026 158;
--sidebar-accent: 0.275 0.030 158;
--sidebar-accent-foreground: 0.93 0.006 245;
--sidebar-border: 0.32 0.018 245;
--sidebar-ring: 0.67 0.16 150;
--sidebar-ring: 0.69 0.16 150;
}
* {

42
client/pages/TrackerPage.jsx
View File

@ -49,12 +49,12 @@ function paymentDateForTrackerMonth(year, month, dueDay) {
}
const ROW_STATUS_CLS = {
paid: 'bg-emerald-500/[0.04] dark:bg-emerald-400/[0.035]',
autodraft: 'bg-sky-500/[0.04] dark:bg-sky-400/[0.03]',
paid: 'bg-emerald-500/[0.04] dark:bg-emerald-400/[0.02]',
autodraft: 'bg-sky-500/[0.04] dark:bg-sky-400/[0.018]',
upcoming: '',
due_soon: 'bg-amber-400/[0.07] dark:bg-amber-300/[0.025]',
late: 'bg-orange-400/[0.08] dark:bg-orange-300/[0.024]',
missed: 'bg-red-400/[0.08] dark:bg-rose-300/[0.018]',
due_soon: 'bg-amber-400/[0.07] dark:bg-amber-300/[0.016]',
late: 'bg-orange-400/[0.08] dark:bg-orange-300/[0.014]',
missed: 'bg-red-400/[0.08] dark:bg-rose-300/[0.01]',
};
const STATUS_META = {
@ -199,8 +199,8 @@ function SummaryCard({ type, value, onEdit, hint, label }) {
return (
<div className={cn(
'flex-1 min-w-0 relative overflow-hidden rounded-xl border border-border',
'bg-card px-5 py-4 transition-all duration-300',
'flex-1 min-w-0 relative overflow-hidden rounded-xl border border-border/80',
'bg-card/95 px-5 py-4 shadow-sm shadow-black/15 transition-all duration-300',
isActive && def.glow,
isActive && def.borderActive,
)}>
@ -240,7 +240,7 @@ function TrendCard({ trend }) {
if (!trend) return null;
return (
<div className="flex-1 min-w-0 relative overflow-hidden rounded-xl border border-border bg-card px-5 py-4 transition-all duration-300">
<div className="flex-1 min-w-0 relative overflow-hidden rounded-xl border border-border/80 bg-card/95 px-5 py-4 shadow-sm shadow-black/15 transition-all duration-300">
<div className="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-purple-500 to-indigo-400" />
<div className="flex items-center gap-2 mb-3">
<TrendingUp className="h-4 w-4 text-foreground" />
@ -1436,7 +1436,7 @@ function Row({ row, year, month, refresh, index, onEditBill }) {
<>
<TableRow
className={cn(
'group border-border/50 transition-colors duration-150',
'group border-border/65 transition-colors duration-150',
isSkipped ? 'opacity-40' : 'hover:bg-accent/50',
rowBg,
)}
@ -2053,10 +2053,10 @@ function Bucket({ label, rows, year, month, refresh, onEditBill, loading }) {
const allPaid = pct >= 100;
return (
<div className="rounded-xl border border-border overflow-hidden bg-card">
<div className="rounded-xl border border-border/80 overflow-hidden bg-card/95 shadow-sm shadow-black/15">
{/* Bucket header */}
<div className="flex items-center justify-between px-5 py-3 bg-muted/30 border-b border-border">
<div className="flex items-center justify-between px-5 py-3 bg-muted/35 border-b border-border/80">
<div className="flex items-center gap-3">
<span className="text-[11px] font-bold uppercase tracking-[0.12em] text-muted-foreground">
{label}
@ -2141,16 +2141,16 @@ function Bucket({ label, rows, year, month, refresh, onEditBill, loading }) {
<div className="overflow-x-auto">
<Table className="min-w-[1120px]">
<TableHeader>
<TableRow className="border-border hover:bg-transparent">
<TableHead className="w-[18%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">Bill</TableHead>
<TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">Due</TableHead>
<TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground text-right">Expected</TableHead>
<TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground text-right text-muted-foreground/70">Last Month</TableHead>
<TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground text-right">Paid</TableHead>
<TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">Paid Date</TableHead>
<TableHead className="w-[9%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">Status</TableHead>
<TableRow className="border-border/80 bg-background/30 hover:bg-background/30">
<TableHead className="w-[18%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90">Bill</TableHead>
<TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90">Due</TableHead>
<TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90 text-right">Expected</TableHead>
<TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/80 text-right">Last Month</TableHead>
<TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90 text-right">Paid</TableHead>
<TableHead className="w-[10%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90">Paid Date</TableHead>
<TableHead className="w-[9%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90">Status</TableHead>
<TableHead className="w-[10%] py-2.5" />
<TableHead className="w-[23%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground border-l border-border pl-4">
<TableHead className="w-[23%] py-2.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/90 border-l border-border/80 pl-4">
Notes
</TableHead>
</TableRow>
@ -2378,7 +2378,7 @@ export default function TrackerPage() {
</div>
</div>
<div className="rounded-xl border border-border bg-card p-4 space-y-3">
<div className="rounded-xl border border-border/80 bg-card/95 p-4 shadow-sm shadow-black/15 space-y-3">
<div className="grid gap-3 lg:grid-cols-[minmax(220px,1fr)_220px_180px_auto] lg:items-center">
<label className="relative">
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />