App-wide retheme done at the token layer: Tailwind's zinc scale is remapped to warm ink/paper neutrals and indigo to copper in globals.css, so every page inherits the palette. Fraunces (serif display) added for page titles and hero figures; all figures now render in mono with tabular numerals. Analytics page redesigned around a month spine — twelve clickable columns scaled to each month's spend that act as hero, context, and period navigation. Adds a 'What changed' top-movers panel vs the previous month, replaces the 8-line category trend chart with per-category sparkline small multiples, heat-tints the six-month ledger table, and restyles the Pareto, pace chart, and cashflow strip. Kept: Pareto, cumulative-vs-typical pace, drill-downs, regular/occasional split. Insights and Merchants restyled to the same kit; chart tokens centralised in category-colors.ts (CHART). Cleared the pre-existing lint errors in insights (typed tooltip, removed any-casts).
This commit is contained in:
@@ -92,7 +92,7 @@ export function Sidebar() {
|
||||
const navContent = (
|
||||
<>
|
||||
<div className="p-4 border-b border-zinc-800 flex items-center justify-between">
|
||||
<h1 className="text-lg font-semibold text-white">Finance</h1>
|
||||
<h1 className="text-xl text-zinc-100 font-display tracking-tight">Finance<span className="text-indigo-400">.</span></h1>
|
||||
<button
|
||||
onClick={() => setOpen(false)}
|
||||
className="md:hidden p-1 rounded text-zinc-400 hover:text-white hover:bg-zinc-800"
|
||||
@@ -110,10 +110,10 @@ export function Sidebar() {
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-md text-sm mb-0.5 transition-colors ${
|
||||
className={`relative flex items-center gap-3 px-3 py-2 rounded-md text-sm mb-0.5 transition-colors ${
|
||||
active
|
||||
? "bg-zinc-800 text-white"
|
||||
: "text-zinc-400 hover:text-white hover:bg-zinc-800/50"
|
||||
? "bg-zinc-800 text-zinc-50 before:absolute before:left-0 before:top-1.5 before:bottom-1.5 before:w-0.5 before:rounded-full before:bg-indigo-400"
|
||||
: "text-zinc-400 hover:text-zinc-100 hover:bg-zinc-800/50"
|
||||
}`}
|
||||
>
|
||||
{ICONS[item.icon]}
|
||||
@@ -138,7 +138,7 @@ export function Sidebar() {
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<span className="ml-3 text-base font-semibold text-white">Finance</span>
|
||||
<span className="ml-3 text-lg text-zinc-100 font-display tracking-tight">Finance<span className="text-indigo-400">.</span></span>
|
||||
</div>
|
||||
|
||||
{/* Mobile drawer overlay */}
|
||||
|
||||
Reference in New Issue
Block a user