From 78fc982adcf078483a40dafc0a18eb9f6615004e Mon Sep 17 00:00:00 2001
From: Spencer Twaddle <7374698+stwaddle@users.noreply.github.com>
Date: Sun, 3 May 2026 07:36:04 -0500
Subject: [PATCH] Fixed styling of NWS columns and summary graph

---
 src/Budget.Client/src/index.css             | 6 +++---
 src/Budget.Client/src/pages/OutgoPage.tsx   | 3 ++-
 src/Budget.Client/src/pages/SummaryPage.tsx | 4 ++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/Budget.Client/src/index.css b/src/Budget.Client/src/index.css
index e66a746..ea1b2c2 100644
--- a/src/Budget.Client/src/index.css
+++ b/src/Budget.Client/src/index.css
@@ -472,9 +472,9 @@ td select { min-width: 80px; }
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
-.badge-need { background: var(--amber-100);  color: #92400e; }
-.badge-want { background: #ede9fe;           color: #5b21b6; }
-.badge-save { background: var(--green-100);  color: var(--green-800); }
+.badge-need { background: var(--red-100);   color: var(--red-600); }
+.badge-want { background: var(--amber-100); color: #92400e; }
+.badge-save { background: var(--green-100); color: var(--green-800); }
 
 /* ---- Auth landing ---- */
 .auth-landing {
diff --git a/src/Budget.Client/src/pages/OutgoPage.tsx b/src/Budget.Client/src/pages/OutgoPage.tsx
index 9b3ed5f..7c38b2e 100644
--- a/src/Budget.Client/src/pages/OutgoPage.tsx
+++ b/src/Budget.Client/src/pages/OutgoPage.tsx
@@ -35,6 +35,7 @@ import type { SortState } from '../components/SortableHeader';
 
 const fmt = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
 const OUTGO_TYPES = ['Need', 'Want', 'Save'] as const;
+const TYPE_ORDER: Record<string, number> = { Need: 0, Want: 1, Save: 2 };
 
 const TYPE_BADGE: Record<string, string> = {
   Need: 'badge badge-need',
@@ -335,7 +336,7 @@ export function OutgoPage() {
       switch (sort.column) {
         case 'name':          cmp = a.name.localeCompare(b.name); break;
         case 'category':      cmp = (a.category ?? '').localeCompare(b.category ?? ''); break;
-        case 'type':          cmp = a.type.localeCompare(b.type); break;
+        case 'type':          cmp = (TYPE_ORDER[a.type] ?? 0) - (TYPE_ORDER[b.type] ?? 0); break;
         case 'frequency':     cmp = a.frequency.localeCompare(b.frequency); break;
         case 'amount':        cmp = a.amount - b.amount; break;
         case 'monthly':       cmp = a.monthly - b.monthly; break;
diff --git a/src/Budget.Client/src/pages/SummaryPage.tsx b/src/Budget.Client/src/pages/SummaryPage.tsx
index 519cca3..8079076 100644
--- a/src/Budget.Client/src/pages/SummaryPage.tsx
+++ b/src/Budget.Client/src/pages/SummaryPage.tsx
@@ -7,8 +7,8 @@ import { useSummary } from '../api/summary';
 const fmt = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
 
 const SEGMENT_COLORS: Record<string, string> = {
-  Need:    '#f59e0b',
-  Want:    '#8b5cf6',
+  Need:    '#ef4444',
+  Want:    '#f59e0b',
   Save:    '#16a34a',
   Unspent: '#9ca3af',
 };