From 3956140662407b9fcd28d8b8016e4a95ac56c7ce Mon Sep 17 00:00:00 2001
From: Yusuf Suleman <yusuf@quadjourney.com>
Date: Mon, 30 Mar 2026 16:10:06 -0500
Subject: [PATCH] =?UTF-8?q?style:=20UI=20refinements=20=E2=80=94=20navbar?=
 =?UTF-8?q?=20active=20state,=20card=20shadows,=20action=20card=20borders?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend-v2/src/app.css                       | 18 +++++++++++++--
 .../dashboard/DashboardActionCard.svelte      | 12 ++++++----
 .../src/lib/components/layout/Navbar.svelte   | 23 +++++++++++--------
 frontend-v2/src/routes/(app)/+page.svelte     |  2 +-
 4 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/frontend-v2/src/app.css b/frontend-v2/src/app.css
index 14731be..3974661 100644
--- a/frontend-v2/src/app.css
+++ b/frontend-v2/src/app.css
@@ -304,11 +304,18 @@
   background: var(--card);
   border-radius: var(--radius);
   border: 1px solid var(--border);
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--shadow-sm);
   padding: var(--card-pad);
+  transition: box-shadow 0.2s ease;
+}
+.module:hover {
+  box-shadow: var(--shadow-md);
 }
 .module.primary {
   padding: var(--card-pad-primary);
+  box-shadow: var(--shadow-md);
+}
+.module.primary:hover {
   box-shadow: var(--shadow-lg);
 }
 .module.flush { padding: 0; }
@@ -389,7 +396,7 @@
   gap: var(--sp-1.5);
 }
 .tab:hover { color: var(--text-1); background: var(--card-hover); }
-.tab.active { color: var(--text-1); background: var(--card); box-shadow: var(--shadow-xs); }
+.tab.active { color: var(--accent); background: var(--accent-dim); font-weight: 600; }
 
 .tab-badge {
   font-size: var(--text-xs);
@@ -417,6 +424,13 @@
 .page { padding: var(--sp-8) 0 var(--sp-20); }
 .page-header { margin-bottom: var(--section-gap); }
 .page-title {
+  font-size: var(--text-xl);
+  font-weight: 600;
+  color: var(--text-1);
+  letter-spacing: -0.01em;
+  line-height: var(--leading-tight);
+}
+.page-subtitle {
   font-size: var(--text-sm);
   font-weight: 500;
   color: var(--text-3);
diff --git a/frontend-v2/src/lib/components/dashboard/DashboardActionCard.svelte b/frontend-v2/src/lib/components/dashboard/DashboardActionCard.svelte
index ca00ec8..6309176 100644
--- a/frontend-v2/src/lib/components/dashboard/DashboardActionCard.svelte
+++ b/frontend-v2/src/lib/components/dashboard/DashboardActionCard.svelte
@@ -16,7 +16,7 @@
 	} = $props();
 </script>
 
-<a {href} class="action-card {size}">
+<a {href} class="action-card {size} {variant}">
 	<div class="action-card-left">
 		<div class="action-card-icon {variant}">
 			{#if variant === 'budget'}
@@ -44,14 +44,18 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: var(--sp-5) var(--sp-5);
-		border-radius: var(--radius-lg);
+		border-radius: var(--radius);
 		background: var(--card);
 		border: 1px solid var(--border);
-		box-shadow: var(--shadow-md);
-		transition: all var(--transition);
+		border-left: 3px solid var(--border);
+		box-shadow: var(--shadow-sm);
+		transition: all 0.2s ease;
 		cursor: pointer;
 		text-decoration: none;
 	}
+	.action-card.budget { border-left-color: var(--accent); }
+	.action-card.inventory { border-left-color: var(--error); }
+	.action-card.fitness { border-left-color: var(--success); }
 
 	.action-card:hover {
 		transform: translateY(-2px);
diff --git a/frontend-v2/src/lib/components/layout/Navbar.svelte b/frontend-v2/src/lib/components/layout/Navbar.svelte
index 1fc7e17..7112eef 100644
--- a/frontend-v2/src/lib/components/layout/Navbar.svelte
+++ b/frontend-v2/src/lib/components/layout/Navbar.svelte
@@ -97,13 +97,13 @@
 		-webkit-backdrop-filter: blur(16px);
 	}
 	.navbar-inner {
-		max-width: 1200px;
+		max-width: 1400px;
 		margin: 0 auto;
 		display: flex;
 		align-items: center;
-		height: 56px;
+		height: 52px;
 		padding: 0 var(--sp-6);
-		gap: var(--sp-6);
+		gap: var(--sp-5);
 	}
 	.navbar-logo {
 		font-weight: 600;
@@ -123,19 +123,24 @@
 		flex: 1;
 	}
 	.navbar-link {
-		padding: 6px var(--sp-3);
-		border-radius: var(--radius-sm);
-		font-size: var(--text-base);
+		padding: 5px var(--sp-3);
+		border-radius: var(--radius-md);
+		font-size: var(--text-sm);
 		font-weight: 500;
 		color: var(--text-3);
-		transition: all var(--transition);
+		transition: all 0.15s ease;
 		background: none;
 		border: none;
 		position: relative;
 		text-decoration: none;
+		letter-spacing: 0.01em;
+	}
+	.navbar-link:hover { color: var(--text-1); background: var(--card-hover); }
+	.navbar-link.active {
+		color: var(--accent);
+		background: var(--accent-dim);
+		font-weight: 600;
 	}
-	.navbar-link:hover { color: var(--text-1); background: var(--accent-dim); }
-	.navbar-link.active { color: var(--text-1); background: var(--accent-dim); }
 
 	.nav-dropdown { position: relative; }
 	.nav-dropdown-menu {
diff --git a/frontend-v2/src/routes/(app)/+page.svelte b/frontend-v2/src/routes/(app)/+page.svelte
index 2def7b0..e287b3c 100644
--- a/frontend-v2/src/routes/(app)/+page.svelte
+++ b/frontend-v2/src/routes/(app)/+page.svelte
@@ -67,7 +67,7 @@
 		</aside>
 		<div class="app-surface">
 		<div class="page-header">
-			<div class="page-title">Dashboard</div>
+			<div class="page-subtitle">Dashboard</div>
 			<div class="page-greeting">Good to see you, <strong>{userName}</strong></div>
 		</div>