From c7f8f4b709ef8c5f3477240ecc808125928e1c90 Mon Sep 17 00:00:00 2001
From: Yusuf Suleman <yusuf@quadjourney.com>
Date: Mon, 30 Mar 2026 21:22:55 -0500
Subject: [PATCH] =?UTF-8?q?style:=20refine=20tasks=20page=20=E2=80=94=20ti?=
 =?UTF-8?q?ghter=20spacing,=20matching=20tab/modal/row=20styles?=
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>
---
 .../src/routes/(app)/tasks/+page.svelte       | 87 ++++++++++++-------
 1 file changed, 54 insertions(+), 33 deletions(-)

diff --git a/frontend-v2/src/routes/(app)/tasks/+page.svelte b/frontend-v2/src/routes/(app)/tasks/+page.svelte
index 79df3d6..6a8efeb 100644
--- a/frontend-v2/src/routes/(app)/tasks/+page.svelte
+++ b/frontend-v2/src/routes/(app)/tasks/+page.svelte
@@ -549,6 +549,8 @@
 {/if}
 
 <style>
+	/* ═══ Tasks page — Zinc/Emerald design ═══ */
+
 	.page-header {
 		display: flex;
 		align-items: center;
@@ -557,41 +559,52 @@
 
 	.header-actions {
 		display: flex;
-		gap: var(--sp-2);
+		gap: 8px;
 	}
 
+	/* ── Tab bar ── */
 	.tasks-tabs {
 		overflow-x: auto;
 		-webkit-overflow-scrolling: touch;
 		scrollbar-width: none;
-		padding-bottom: var(--sp-2);
-		margin-bottom: var(--sp-3);
-		gap: var(--sp-2);
+		padding-bottom: 8px;
+		margin-bottom: 12px;
+		gap: 6px;
 	}
 	.tasks-tabs::-webkit-scrollbar { display: none; }
 	.tasks-tabs > :global(.tab) {
 		white-space: nowrap;
 		flex-shrink: 0;
-		padding: var(--sp-1.5) var(--sp-3);
-		font-size: var(--text-sm);
+		padding: 4px 12px;
+		font-size: 13px;
+		font-weight: 500;
+		color: var(--text-4);
 		border: 1px solid var(--border);
+		border-radius: 6px;
+		transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
+	}
+	.tasks-tabs > :global(.tab:hover) {
+		color: var(--text-2);
+		background: rgba(0,0,0,0.03);
 	}
 	.tasks-tabs > :global(.tab.active) {
 		background: var(--accent);
 		color: white;
 		border-color: var(--accent);
+		font-weight: 600;
 	}
 
+	/* ── Add form ── */
 	.add-form {
 		display: flex;
 		flex-direction: column;
-		gap: var(--sp-3);
-		margin-bottom: var(--section-gap);
+		gap: 12px;
+		margin-bottom: 24px;
 	}
 
 	.add-row {
 		display: flex;
-		gap: var(--sp-2);
+		gap: 8px;
 		flex-wrap: wrap;
 		align-items: center;
 	}
@@ -602,22 +615,23 @@
 	.add-priority { width: 130px; }
 	.add-repeat { width: 150px; }
 	.add-toggle {
-		font-size: var(--text-sm);
-		color: var(--text-2);
+		font-size: 13px;
+		color: var(--text-3);
 		display: flex;
 		align-items: center;
-		gap: var(--sp-1);
+		gap: 4px;
 		cursor: pointer;
 	}
 
+	/* ── Task rows ── */
 	.task-item {
 		display: flex;
 		align-items: flex-start;
-		gap: var(--sp-3);
+		gap: 12px;
 		transition: opacity 0.3s;
 	}
 
-	.task-item.fading { opacity: 0.2; }
+	.task-item.fading { opacity: 0.15; }
 
 	.task-check {
 		flex-shrink: 0;
@@ -626,7 +640,10 @@
 		background: none;
 		border: none;
 		cursor: pointer;
+		opacity: 0.5;
+		transition: opacity 0.15s;
 	}
+	.task-item:hover .task-check { opacity: 1; }
 
 	.task-check:hover svg rect {
 		stroke: var(--accent);
@@ -640,26 +657,28 @@
 	}
 
 	.task-name {
-		font-size: var(--text-base);
+		font-size: 14px;
+		font-weight: 500;
 		color: var(--text-1);
-		line-height: var(--leading-snug);
+		line-height: 1.35;
 	}
 
 	.task-name.overdue-text { color: var(--error); }
 	.task-name.completed-name {
 		text-decoration: line-through;
-		color: var(--text-3);
+		color: var(--text-4);
+		font-weight: 400;
 	}
 
-	.completed-item { opacity: 0.7; }
+	.completed-item { opacity: 0.6; }
 
 	.task-sub {
-		font-size: var(--text-sm);
-		color: var(--text-3);
+		font-size: 12px;
+		color: var(--text-4);
 		margin-top: 2px;
 		display: flex;
 		align-items: center;
-		gap: var(--sp-2);
+		gap: 6px;
 		flex-wrap: wrap;
 	}
 
@@ -668,7 +687,7 @@
 		opacity: 0;
 		transition: opacity 0.15s;
 		color: var(--text-4);
-		font-size: var(--text-lg);
+		font-size: 16px;
 	}
 
 	.task-item:hover .task-delete { opacity: 1; }
@@ -676,12 +695,13 @@
 	.overdue-label { color: var(--error) !important; }
 
 	.empty-state {
-		padding: var(--sp-8);
+		padding: 48px 16px;
 		text-align: center;
-		color: var(--text-3);
-		font-size: var(--text-base);
+		color: var(--text-4);
+		font-size: 13px;
 	}
 
+	/* ── Modal ── */
 	.modal-overlay {
 		position: fixed;
 		inset: 0;
@@ -694,7 +714,7 @@
 
 	.modal {
 		background: var(--card);
-		border-radius: var(--radius);
+		border-radius: 16px;
 		box-shadow: var(--shadow-xl);
 		width: 90%;
 		max-width: 420px;
@@ -705,26 +725,27 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: var(--card-pad) var(--card-pad) 0;
+		padding: 22px 24px 0;
 	}
 
 	.modal-title {
-		font-size: var(--text-lg);
-		font-weight: 600;
+		font-size: 17px;
+		font-weight: 700;
 		color: var(--text-1);
+		letter-spacing: -0.02em;
 	}
 
 	.modal-body {
-		padding: var(--sp-4) var(--card-pad);
+		padding: 16px 24px;
 		display: flex;
 		flex-direction: column;
-		gap: var(--sp-3);
+		gap: 12px;
 	}
 
 	.modal-actions {
 		display: flex;
-		gap: var(--sp-2);
+		gap: 8px;
 		justify-content: flex-end;
-		padding: 0 var(--card-pad) var(--card-pad);
+		padding: 0 24px 22px;
 	}
 </style>