From ecb46992d77e788c2119831a288ba1c195906b8d Mon Sep 17 00:00:00 2001
From: Jez <jez@jezweb.com.au>
Date: Sat, 8 Nov 2025 15:53:34 +1100
Subject: [PATCH] refactor: replace hard-coded colors with semantic theme
 colors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes:
- todo-card.tsx:
  - text-gray-500/400/600 → text-muted-foreground (with opacity variants)
  - text-blue-600 → text-primary (image badge)
  - text-red-600 → text-destructive (overdue indicators)

- todo-list.page.tsx:
  - text-gray-600/500/400 → text-muted-foreground (with opacity variants)

Benefits:
- Theme-aware: Colors adapt to light/dark mode automatically
- Consistent: Uses shadcn/ui semantic color system
- Maintainable: Change theme by editing CSS variables
- Professional: Avoids arbitrary hard-coded colors

Note: Priority/status badge colors (green/yellow/red/etc) kept as-is
since they're functional semantic indicators, not UI colors.
---
 src/modules/todos/components/todo-card.tsx | 10 +++++-----
 src/modules/todos/todo-list.page.tsx       |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/modules/todos/components/todo-card.tsx b/src/modules/todos/components/todo-card.tsx
index 561ba94..db45442 100644
--- a/src/modules/todos/components/todo-card.tsx
+++ b/src/modules/todos/components/todo-card.tsx
@@ -68,13 +68,13 @@ export function TodoCard({ todo }: TodoCardProps) {
                         </div>
                         <div className="flex-1 min-w-0">
                             <h3
-                                className={`font-semibold text-lg leading-tight ${todo.completed ? "line-through text-gray-500" : ""}`}
+                                className={`font-semibold text-lg leading-tight ${todo.completed ? "line-through text-muted-foreground" : ""}`}
                             >
                                 {todo.title}
                             </h3>
                             {todo.description && (
                                 <p
-                                    className={`text-sm mt-1 ${todo.completed ? "text-gray-400" : "text-gray-600"}`}
+                                    className={`text-sm mt-1 ${todo.completed ? "text-muted-foreground/70" : "text-muted-foreground"}`}
                                 >
                                     {todo.description}
                                 </p>
@@ -120,7 +120,7 @@ export function TodoCard({ todo }: TodoCardProps) {
                         <Badge variant="secondary">{todo.categoryName}</Badge>
                     )}
                     {todo.imageUrl && (
-                        <Badge variant="outline" className="text-blue-600">
+                        <Badge variant="outline" className="text-primary">
                             <ImageIcon className="h-3 w-3 mr-1" />
                             Image
                         </Badge>
@@ -129,12 +129,12 @@ export function TodoCard({ todo }: TodoCardProps) {
 
                 {todo.dueDate && (
                     <div
-                        className={`flex items-center text-sm ${isOverdue ? "text-red-600" : "text-gray-500"}`}
+                        className={`flex items-center text-sm ${isOverdue ? "text-destructive" : "text-muted-foreground"}`}
                     >
                         <Calendar className="h-4 w-4 mr-1" />
                         Due: {formatDate(todo.dueDate)}
                         {isOverdue && (
-                            <span className="ml-2 text-red-600 font-semibold">
+                            <span className="ml-2 text-destructive font-semibold">
                                 (Overdue)
                             </span>
                         )}
diff --git a/src/modules/todos/todo-list.page.tsx b/src/modules/todos/todo-list.page.tsx
index 0939b82..e852a33 100644
--- a/src/modules/todos/todo-list.page.tsx
+++ b/src/modules/todos/todo-list.page.tsx
@@ -13,7 +13,7 @@ export default async function TodoListPage() {
             <div className="flex justify-between items-center mb-8 w-full">
                 <div>
                     <h1 className="text-3xl font-bold">Todos</h1>
-                    <p className="text-gray-600 mt-1">
+                    <p className="text-muted-foreground mt-1">
                         Manage your tasks and stay organized
                     </p>
                 </div>
@@ -27,11 +27,11 @@ export default async function TodoListPage() {
 
             {todos.length === 0 ? (
                 <div className="text-center py-12 w-full">
-                    <div className="text-gray-400 text-6xl mb-4">📝</div>
-                    <h3 className="text-xl font-semibold text-gray-600 mb-2">
+                    <div className="text-muted-foreground/40 text-6xl mb-4">📝</div>
+                    <h3 className="text-xl font-semibold text-muted-foreground mb-2">
                         No todos yet
                     </h3>
-                    <p className="text-gray-500 mb-6">
+                    <p className="text-muted-foreground/80 mb-6">
                         Create your first todo to get started
                     </p>
                     <Link href={todosRoutes.new}>