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

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

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