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:
parent
899ea6a939
commit
346e21ad4e
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue