## Summary Refactored all places using TrendingUp/TrendingDown icons directly to use the shared `AmountTrendIndicator` and `PercentageTrendIndicator` components. <img width="1113" height="799" alt="image" src="https://github.com/user-attachments/assets/8a635d23-3c14-48b6-80d0-b5641af93024" /> ## Changes - **AmountTrendIndicator**: Now shows percentage diff on hover via tooltip - **PercentageTrendIndicator**: Now shows amount diff on hover via tooltip - Added `invertColors` prop to `PercentageTrendIndicator` for spending categories (where spending less is good) - Added `className` prop to both components for flexibility ## Files refactored - `account-list-card.tsx` - Now uses `AmountTrendIndicator` - `top-categories-card.tsx` - Now uses `PercentageTrendIndicator` - `account-balance-chart.tsx` - Removed local `TrendIndicator` function, now uses shared `PercentageTrendIndicator` - `account-balance-card.tsx` - Updated to pass new props - `net-worth-chart.tsx` - Updated to pass new props ## Testing - All existing tests pass - Hover over any trend indicator to see the alternate metric (percentage or amount) |
||
|---|---|---|
| .. | ||
| account-balance-card.tsx | ||
| account-type-icon.tsx | ||
| amount-trend-indicator.tsx | ||
| net-worth-chart.tsx | ||
| percentage-trend-indicator.tsx | ||
| stat-card.tsx | ||
| top-categories-card.tsx | ||