feat(cashflow): enlarge and color-code net cashflow and saved cards (#505)

## What

Enlarge and color-code the headline numbers in the first two cash-flow
cards so users can spot a weak savings net or low allocation at a
glance.

- **Net Cashflow**: headline number bumped to `4xl`; green when net ≥ 0,
red when negative.
- **Saved & Invested**: headline number bumped to `4xl`; colored by
allocation rate — green ≥50%, yellow ≥25%, orange ≥0%, red below.

## Why

The numbers were uniformly black, making it hard to tell at a glance
when net cashflow is negative or when only a little is being set aside.

## Testing

- `vitest run` on `net-cashflow-card.test.tsx` 
- `bun run format` / `bun run lint` clean
This commit is contained in:
Víctor Falcón 2026-06-08 09:23:57 +02:00 committed by GitHub
parent 899ea6a939
commit 346e21ad4e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 2 deletions

View File

@ -103,10 +103,15 @@ export function NetCashflowCard({
<AmountDisplay
amountInCents={current.net}
currencyCode={currency}
size="2xl"
size="4xl"
weight="bold"
minimumFractionDigits={0}
maximumFractionDigits={0}
className={
current.net >= 0
? 'text-green-600 dark:text-green-400'
: 'text-red-600 dark:text-red-400'
}
highlightPositive
/>
</div>

View File

@ -167,10 +167,11 @@ export function SavedInvestedCard({
<AmountDisplay
amountInCents={allocated}
currencyCode={currency}
size="2xl"
size="4xl"
weight="bold"
minimumFractionDigits={0}
maximumFractionDigits={0}
className={rateColor}
highlightPositive
/>
<span