From 1711993a297153710c4489075f9f2dae80619537 Mon Sep 17 00:00:00 2001
From: mrdeyroy <shibamdeyroy02@gmail.com>
Date: Thu, 21 May 2026 16:42:17 +0530
Subject: [PATCH 1/2] fix(ui): handle errors on goal deletion and show user
 feedback

---
 src/components/GoalTracker.tsx | 35 ++++++++--------------------------
 1 file changed, 8 insertions(+), 27 deletions(-)

diff --git a/src/components/GoalTracker.tsx b/src/components/GoalTracker.tsx
index 36633792..cabaf067 100644
--- a/src/components/GoalTracker.tsx
+++ b/src/components/GoalTracker.tsx
@@ -96,16 +96,10 @@ export default function GoalTracker() {
       if (!res.ok) {
         setGoals(previousGoals);
         setDeleteError("Failed to delete goal. Please try again.");
-        setTimeout(() => {
-          setDeleteError(null);
-        }, 5000);
       }
     } catch {
       setGoals(previousGoals);
-      setDeleteError("Failed to delete goal. Please try again.");
-      setTimeout(() => {
-        setDeleteError(null);
-      }, 5000);
+      setDeleteError("Failed to delete goal. Please check your connection.");
     } finally {
       setDeletingId(null);
     }
@@ -184,22 +178,9 @@ export default function GoalTracker() {
       <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)]">Weekly Goals</h2>
 
       {deleteError && (
-        <div
-          role="alert"
-          className="mb-4 rounded-lg border border-[var(--destructive)]/30 bg-[var(--destructive)]/10 p-3 text-xs text-[var(--destructive)] flex items-center justify-between animate-in fade-in duration-200"
-        >
-          <div className="flex items-center gap-2">
-            <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-            </svg>
-            <span>{deleteError}</span>
-          </div>
-          <button
-            onClick={() => setDeleteError(null)}
-            className="text-[var(--destructive)] hover:opacity-80 font-semibold text-xs ml-2"
-          >
-            Dismiss
-          </button>
+        <div className="mb-4 rounded-lg border border-red-500/20 bg-red-500/10 p-3 text-sm text-red-400 flex justify-between items-center">
+          <p>{deleteError}</p>
+          <button onClick={() => setDeleteError(null)} className="text-red-400 hover:text-red-300 ml-2" aria-label="Dismiss error">✕</button>
         </div>
       )}
 
@@ -234,7 +215,7 @@ export default function GoalTracker() {
                       )}
                     </div>
                     {completed && (
-                      <span className="text-xs font-medium text-[var(--success)]">
+                      <span className="text-xs font-medium text-emerald-500">
                         {completionLabel}
                       </span>
                     )}
@@ -283,7 +264,7 @@ export default function GoalTracker() {
                         <button
                           onClick={() => handleDelete(goal.id)}
                           disabled={isDeleting}
-                          className="text-[var(--destructive)] hover:text-[var(--destructive)] font-semibold transition-colors disabled:opacity-50"
+                          className="text-red-400 hover:text-red-300 font-semibold transition-colors disabled:opacity-50"
                           aria-label={`Confirm delete goal: ${goal.title}`}
                         >
                           Yes
@@ -301,7 +282,7 @@ export default function GoalTracker() {
                       <button
                         onClick={() => setConfirmingId(goal.id)}
                         disabled={isDeleting}
-                        className="text-[var(--muted-foreground)] hover:text-[var(--destructive)] transition-colors disabled:opacity-50"
+                        className="text-[var(--muted-foreground)] hover:text-red-400 transition-colors disabled:opacity-50"
                         aria-label={`Delete goal: ${goal.title}`}
                         title="Delete goal"
                       >
@@ -315,7 +296,7 @@ export default function GoalTracker() {
 
                 <div className="h-2 overflow-hidden rounded-full bg-[var(--control)]">
                   <div
-                    className={`h-full rounded-full transition-all ${completed ? "bg-[var(--success)]" : "bg-[var(--accent)]"}`}
+                    className={`h-full rounded-full transition-all ${completed ? "bg-emerald-500" : "bg-[var(--accent)]"}`}
                     style={{ width: `${pct}%` }}
                   />
                 </div>

From 0f856b92744041d7e943199ec0e87d20a6d9f676 Mon Sep 17 00:00:00 2001
From: mrdeyroy <shibamdeyroy02@gmail.com>
Date: Fri, 22 May 2026 18:42:10 +0530
Subject: [PATCH 2/2] style: replace hardcoded red classes with css variables

---
 src/components/GoalTracker.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/GoalTracker.tsx b/src/components/GoalTracker.tsx
index cabaf067..5aedb15f 100644
--- a/src/components/GoalTracker.tsx
+++ b/src/components/GoalTracker.tsx
@@ -178,9 +178,9 @@ export default function GoalTracker() {
       <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)]">Weekly Goals</h2>
 
       {deleteError && (
-        <div className="mb-4 rounded-lg border border-red-500/20 bg-red-500/10 p-3 text-sm text-red-400 flex justify-between items-center">
+        <div className="mb-4 rounded-lg border border-[var(--destructive)]/20 bg-[var(--destructive)]/10 p-3 text-sm text-[var(--destructive)] flex justify-between items-center">
           <p>{deleteError}</p>
-          <button onClick={() => setDeleteError(null)} className="text-red-400 hover:text-red-300 ml-2" aria-label="Dismiss error">✕</button>
+          <button onClick={() => setDeleteError(null)} className="text-[var(--destructive)] hover:opacity-80 ml-2" aria-label="Dismiss error">✕</button>
         </div>
       )}
 
@@ -264,7 +264,7 @@ export default function GoalTracker() {
                         <button
                           onClick={() => handleDelete(goal.id)}
                           disabled={isDeleting}
-                          className="text-red-400 hover:text-red-300 font-semibold transition-colors disabled:opacity-50"
+                          className="text-[var(--destructive)] hover:opacity-80 font-semibold transition-colors disabled:opacity-50"
                           aria-label={`Confirm delete goal: ${goal.title}`}
                         >
                           Yes
@@ -282,7 +282,7 @@ export default function GoalTracker() {
                       <button
                         onClick={() => setConfirmingId(goal.id)}
                         disabled={isDeleting}
-                        className="text-[var(--muted-foreground)] hover:text-red-400 transition-colors disabled:opacity-50"
+                        className="text-[var(--muted-foreground)] hover:text-[var(--destructive)] transition-colors disabled:opacity-50"
                         aria-label={`Delete goal: ${goal.title}`}
                         title="Delete goal"
                       >