rory
/
MyKindlebox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated dashboard tiles

This commit is contained in:
fireshaper 2026-07-02 16:56:58 -04:00
parent 2a0e347a19
commit 9d45911934
1 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
mykindlebox/client/src/pages/Dashboard.jsx
View File

@ -47,14 +47,21 @@ function StatsBar() {
<Card key={card.key} className="h-20 animate-pulse bg-surface-sunken" /> <Card key={card.key} className="h-20 animate-pulse bg-surface-sunken" />
) : ( ) : (
<Link key={card.key} to={card.href}> <Link key={card.key} to={card.href}>
<Card className={`flex flex-col gap-1 p-4 transition-colors ${card.tile}`}> {/* Deliberately NOT <Card>: Card hardcodes bg-surface-raised, which
lands *after* the arbitrary-value bg-[var(--stat-N)] in the
compiled CSS and overrides it — the carnival tile colors then
only showed on hover. The tile's own var already defaults to
surface-raised, so plain themes look identical. */}
<div
className={`rounded-lg border border-border shadow-sm flex flex-col gap-1 p-4 transition-colors ${card.tile}`}
>
<span className="font-body text-xs font-medium uppercase tracking-wide text-[var(--stat-fg-muted)]"> <span className="font-body text-xs font-medium uppercase tracking-wide text-[var(--stat-fg-muted)]">
{card.label} {card.label}
</span> </span>
<span className="font-display text-2xl text-[var(--stat-fg)]"> <span className="font-display text-2xl text-[var(--stat-fg)]">
{data[card.key]} {data[card.key]}
</span> </span>
</Card> </div>
</Link> </Link>
) )
)} )}