rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Compact stat cards: ~50% shorter, recede as informational strip

Browse Source 
- Padding: p-4 → px-3 py-2
- Number: text-3xl → text-xl
- Icons: p-2 h-5 w-5 → p-1.5 h-4 w-4
- Label/number gap: space-y-2 → space-y-0.5
- Weather: description + city inline with temp on one line
- Grid gap tightened from gap-3 to gap-2.5

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-02-20 14:48:54 +08:00
parent bdae07fb7d
commit fa7b50233e
1 changed files with 25 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/src/components/dashboard/StatsWidget.tsx
View File

@ -36,21 +36,21 @@ export default function StatsWidget({ projectStats, totalIncompleteTodos, weathe
];
return (
<div className="grid gap-3 grid-cols-2 lg:grid-cols-4">
<div className="grid gap-2.5 grid-cols-2 lg:grid-cols-4">
{statCards.map((stat) => (
<Card key={stat.label} className="bg-gradient-to-br from-accent/[0.03] to-transparent">
<CardContent className="p-4">
<div className="flex items-start justify-between">
<div className="space-y-2">
<p className="text-[11px] font-medium tracking-wider text-muted-foreground">
<CardContent className="px-3 py-2">
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<p className="text-[10px] font-medium tracking-wider text-muted-foreground">
{stat.label}
</p>
<p className="font-heading text-3xl font-bold tabular-nums leading-none">
<p className="font-heading text-xl font-bold tabular-nums leading-none">
{stat.value}
</p>
</div>
<div className={`p-2 rounded-lg ${stat.glowBg}`}>
<stat.icon className={`h-5 w-5 ${stat.color}`} />
<div className={`p-1.5 rounded-md ${stat.glowBg}`}>
<stat.icon className={`h-4 w-4 ${stat.color}`} />
</div>
</div>
</CardContent>
@ -59,39 +59,32 @@ export default function StatsWidget({ projectStats, totalIncompleteTodos, weathe
{/* Weather card */}
<Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
<CardContent className="p-4">
<div className="flex items-start justify-between">
<div className="space-y-2">
<p className="text-[11px] font-medium tracking-wider text-muted-foreground">
<CardContent className="px-3 py-2">
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<p className="text-[10px] font-medium tracking-wider text-muted-foreground">
WEATHER
</p>
{weatherData ? (
<>
<p className="font-heading text-3xl font-bold tabular-nums leading-none">
<div className="flex items-baseline gap-1.5">
<p className="font-heading text-xl font-bold tabular-nums leading-none">
{weatherData.temp}°
</p>
<p className="text-[11px] text-muted-foreground capitalize leading-tight">
<span className="text-[10px] text-muted-foreground capitalize">
{weatherData.description}
</p>
{weatherData.city && (
<p className="text-[10px] text-muted-foreground/60 leading-tight">
{weatherData.city}
</p>
)}
</>
{weatherData.city && (
<span className="text-muted-foreground/50"> · {weatherData.city}</span>
)}
</span>
</div>
) : (
<>
<p className="font-heading text-3xl font-bold tabular-nums leading-none text-muted-foreground/50">
—
</p>
<p className="text-[11px] text-muted-foreground/50 leading-tight">
No city set
</p>
</>
<p className="font-heading text-xl font-bold tabular-nums leading-none text-muted-foreground/50">
—
</p>
)}
</div>
<div className="p-2 rounded-lg bg-amber-500/10">
<CloudSun className="h-5 w-5 text-amber-400" />
<div className="p-1.5 rounded-md bg-amber-500/10">
<CloudSun className="h-4 w-4 text-amber-400" />
</div>
</div>
</CardContent>