From 0ea3fcfa6def194234928e4131e7e44b414b95fb Mon Sep 17 00:00:00 2001
From: AJ Isaacs <ajisaacs27@gmail.com>
Date: Fri, 27 Feb 2026 00:09:51 -0500
Subject: [PATCH] feat(ui): restyle filter bar and create task form with design
 tokens

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/CreateTaskForm.tsx         |  8 ++++----
 TaskTracker.Web/src/components/FilterBar.tsx  | 20 +++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/TaskTracker.Web/src/components/CreateTaskForm.tsx b/TaskTracker.Web/src/components/CreateTaskForm.tsx
index 4c63a16..bc74844 100644
--- a/TaskTracker.Web/src/components/CreateTaskForm.tsx
+++ b/TaskTracker.Web/src/components/CreateTaskForm.tsx
@@ -48,11 +48,11 @@ export default function CreateTaskForm({ onClose }: CreateTaskFormProps) {
   }
 
   const inputClass =
-    'w-full rounded-md bg-[#0f1117] text-white text-sm px-3 py-2 border border-white/10 placeholder-[#64748b] focus:outline-none focus:ring-2 focus:ring-indigo-500/60 focus:border-transparent transition-colors'
+    'w-full rounded-md bg-[var(--color-page)] text-white text-sm px-3 py-2 border border-[var(--color-border)] placeholder-[var(--color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent)]/60 focus:border-transparent transition-colors'
 
   return (
     <div
-      className="rounded-lg bg-[#1a1d27] p-3 space-y-3"
+      className="rounded-lg bg-[var(--color-surface)] p-3 space-y-3"
       onKeyDown={handleKeyDown}
     >
       {/* Title */}
@@ -104,7 +104,7 @@ export default function CreateTaskForm({ onClose }: CreateTaskFormProps) {
         <button
           type="button"
           onClick={onClose}
-          className="text-xs text-[#64748b] hover:text-white transition-colors px-2 py-1"
+          className="text-xs text-[var(--color-text-secondary)] hover:text-white transition-colors px-2 py-1"
         >
           Cancel
         </button>
@@ -112,7 +112,7 @@ export default function CreateTaskForm({ onClose }: CreateTaskFormProps) {
           type="button"
           onClick={handleSubmit}
           disabled={!title.trim() || createTask.isPending}
-          className="flex items-center gap-1.5 text-xs font-medium text-white bg-indigo-600 hover:bg-indigo-500
+          className="flex items-center gap-1.5 text-xs font-medium text-white bg-gradient-to-r from-[var(--color-accent)] to-[var(--color-accent-end)] hover:brightness-110
             disabled:opacity-40 disabled:cursor-not-allowed
             px-3 py-1.5 rounded-md transition-colors"
         >
diff --git a/TaskTracker.Web/src/components/FilterBar.tsx b/TaskTracker.Web/src/components/FilterBar.tsx
index c1d6127..ee2421f 100644
--- a/TaskTracker.Web/src/components/FilterBar.tsx
+++ b/TaskTracker.Web/src/components/FilterBar.tsx
@@ -62,17 +62,17 @@ export default function FilterBar({ tasks, filters, onFiltersChange }: FilterBar
       {/* "All" chip */}
       <button
         onClick={clearAll}
-        className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-medium transition-colors ${
+        className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-medium transition-colors ${
           !hasActiveFilters
-            ? 'bg-indigo-500 text-white'
-            : 'bg-[#2a2d37] text-[#94a3b8] hover:text-white'
+            ? 'bg-[var(--color-accent)] text-white'
+            : 'bg-white/[0.06] text-[var(--color-text-secondary)] hover:text-white'
         }`}
       >
         All
       </button>
 
       {/* Divider */}
-      <div className="w-px h-4 bg-white/10" />
+      <div className="w-px h-4 bg-white/[0.06]" />
 
       {/* Category chips */}
       {allCategories.map((cat) => {
@@ -83,8 +83,8 @@ export default function FilterBar({ tasks, filters, onFiltersChange }: FilterBar
           <button
             key={cat}
             onClick={() => toggleCategory(cat)}
-            className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-medium transition-colors ${
-              isActive ? 'text-white' : 'bg-[#2a2d37] text-[#94a3b8] hover:text-white'
+            className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-medium transition-colors ${
+              isActive ? 'text-white' : 'bg-white/[0.06] text-[var(--color-text-secondary)] hover:text-white'
             }`}
             style={
               isActive
@@ -108,15 +108,15 @@ export default function FilterBar({ tasks, filters, onFiltersChange }: FilterBar
       })}
 
       {/* Divider */}
-      <div className="w-px h-4 bg-white/10" />
+      <div className="w-px h-4 bg-white/[0.06]" />
 
       {/* Has subtasks chip */}
       <button
         onClick={toggleHasSubtasks}
-        className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-medium transition-colors ${
+        className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-medium transition-colors ${
           filters.hasSubtasks
-            ? 'bg-indigo-500 text-white'
-            : 'bg-[#2a2d37] text-[#94a3b8] hover:text-white'
+            ? 'bg-[var(--color-accent)] text-white'
+            : 'bg-white/[0.06] text-[var(--color-text-secondary)] hover:text-white'
         }`}
       >
         <ListTree size={12} />