From 38fdf8753f9fa606b21236e3c14033dceed6b0b6 Mon Sep 17 00:00:00 2001
From: Samudyatha K Bhat <samudyathakb.bca24@chanakyauniversity.edu.in>
Date: Wed, 20 May 2026 23:16:17 +0530
Subject: [PATCH 1/2] Changes icons to lucide icons

---
 package-lock.json                     |  11 +-
 package.json                          |   1 +
 src/components/BackToTopButton.tsx    |  17 +---
 src/components/CommitTimeChart.tsx    |  22 ++--
 src/components/CopyLinkButton.tsx     |   5 +-
 src/components/Icons.tsx              | 141 ++++++++++++++++++++++++++
 src/components/PersonalRecords.tsx    |  15 +--
 src/components/PinnedRepos.tsx        |  11 +-
 src/components/StatsCard.tsx          |  29 ++----
 src/components/StreakAtRiskBanner.tsx |   7 +-
 src/components/StreakTracker.tsx      |  31 +++---
 src/components/ThemeToggle.tsx        |   3 +-
 12 files changed, 223 insertions(+), 70 deletions(-)
 create mode 100644 src/components/Icons.tsx

diff --git a/package-lock.json b/package-lock.json
index 251af664..4d5c1512 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "html-to-image": "^1.11.13",
         "jspdf": "^4.2.1",
         "jspdf-autotable": "^5.0.7",
+        "lucide-react": "^1.16.0",
         "next": "^14.2.35",
         "next-auth": "^4.24.7",
         "react": "^18",
@@ -4370,6 +4371,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.16.0.tgz",
+      "integrity": "sha512-dYwyPzb4MEKpGUmNYk3WKWPnMrHs3FKM+q94kAnJrcDIqqn1hq2xY8scaS2ovsOCM5D51ey2gaRG3PBb1vgoYQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -5062,7 +5072,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
diff --git a/package.json b/package.json
index fd2359d8..945454db 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "html-to-image": "^1.11.13",
     "jspdf": "^4.2.1",
     "jspdf-autotable": "^5.0.7",
+    "lucide-react": "^1.16.0",
     "next": "^14.2.35",
     "next-auth": "^4.24.7",
     "react": "^18",
diff --git a/src/components/BackToTopButton.tsx b/src/components/BackToTopButton.tsx
index b71c8e87..136bc911 100644
--- a/src/components/BackToTopButton.tsx
+++ b/src/components/BackToTopButton.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { ArrowUp } from "lucide-react";
 
 export default function BackToTopButton() {
   const [isVisible, setIsVisible] = useState(false);
@@ -40,21 +41,7 @@ export default function BackToTopButton() {
           aria-label="Scroll to top"
           className="fixed bottom-8 right-8 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-[var(--accent)] text-[var(--accent-foreground)] shadow-lg transition-all duration-300 hover:scale-110 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-[var(--accent)] focus:ring-offset-2 focus:ring-offset-[var(--background)]"
         >
-          {/* Up Arrow SVG */}
-          <svg
-            className="h-6 w-6"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M5 15l7-7 7 7"
-            />
-          </svg>
+          <ArrowUp size={24} aria-hidden="true" />
         </button>
       )}
     </>
diff --git a/src/components/CommitTimeChart.tsx b/src/components/CommitTimeChart.tsx
index 5076ccaa..57601cc0 100644
--- a/src/components/CommitTimeChart.tsx
+++ b/src/components/CommitTimeChart.tsx
@@ -10,6 +10,7 @@ import {
   Tooltip,
   ResponsiveContainer,
 } from "recharts";
+import { Sun, Cloud, Sunset, Moon } from "lucide-react";
   
 interface TimeBlocks {
   morning: number;
@@ -18,10 +19,15 @@ interface TimeBlocks {
   night: number;
 }
 
+interface ChartData {
+  name: string;
+  commits: number;
+  icon: React.ComponentType<any>;
+  key: string;
+}
+
 export default function CommitTimeChart() {
-  const [data, setData] = useState<
-    { name: string; commits: number; icon: string }[]
-  >([]);
+  const [data, setData] = useState<ChartData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [days, setDays] = useState(30);
@@ -40,29 +46,29 @@ export default function CommitTimeChart() {
         }
 
         const blocks = res.timeBlocks;
-        const chartData = [
+        const chartData: ChartData[] = [
           {
             name: "Morning (6-12)",
             commits: blocks.morning,
-            icon: "Sun",
+            icon: Sun,
             key: "morning",
           },
           {
             name: "Afternoon (12-18)",
             commits: blocks.afternoon,
-            icon: "CloudSun",
+            icon: Cloud,
             key: "afternoon",
           },
           {
             name: "Evening (18-22)",
             commits: blocks.evening,
-            icon: "Sunset",
+            icon: Sunset,
             key: "evening",
           },
           {
             name: "Night (22-6)",
             commits: blocks.night,
-            icon: "Moon",
+            icon: Moon,
             key: "night",
           },
         ];
diff --git a/src/components/CopyLinkButton.tsx b/src/components/CopyLinkButton.tsx
index b4cd81ed..c15511ef 100644
--- a/src/components/CopyLinkButton.tsx
+++ b/src/components/CopyLinkButton.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { Link, CheckCircle } from "lucide-react";
 
 export default function CopyLinkButton() {
   const [copied, setCopied] = useState(false);
@@ -26,12 +27,12 @@ export default function CopyLinkButton() {
     >
       {copied ? (
         <>
-          <span className="text-green-500 font-semibold">✓</span>
+          <CheckCircle size={16} className="text-green-500" aria-hidden="true" />
           <span>Copied!</span>
         </>
       ) : (
         <>
-          <span>🔗</span>
+          <Link size={16} aria-hidden="true" />
           <span>Copy link</span>
         </>
       )}
diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
new file mode 100644
index 00000000..77a3a452
--- /dev/null
+++ b/src/components/Icons.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import {
+  Trophy,
+  Zap,
+  Flame,
+  Calendar,
+  Star,
+  Sun,
+  Cloud,
+  Sunset,
+  Moon,
+  Download,
+  ArrowUp,
+  ArrowDown,
+  TrendingUp,
+  Code,
+  GitBranch,
+  GitCommit,
+  GitPullRequest,
+  Clock,
+  AlertTriangle,
+  CheckCircle,
+  Settings,
+  LogOut,
+  Menu,
+  X,
+  Search,
+  Bell,
+  Heart,
+  Share2,
+  ChevronRight,
+  ChevronLeft,
+  ChevronDown,
+  ChevronUp,
+  MoreHorizontal,
+  Loader,
+} from "lucide-react";
+
+/**
+ * Centralized icon component for consistent icon usage across the app.
+ * Maps string-based icon names to Lucide icons.
+ * 
+ * Usage:
+ * <Icon name="trophy" size={24} className="text-accent" />
+ */
+
+interface IconProps {
+  name: string;
+  size?: number | string;
+  className?: string;
+  "aria-hidden"?: boolean;
+}
+
+const iconMap: Record<string, React.ComponentType<any>> = {
+  trophy: Trophy,
+  zap: Zap,
+  flame: Flame,
+  calendar: Calendar,
+  star: Star,
+  sun: Sun,
+  cloud: Cloud,
+  sunset: Sunset,
+  moon: Moon,
+  download: Download,
+  arrowUp: ArrowUp,
+  arrowDown: ArrowDown,
+  trendingUp: TrendingUp,
+  code: Code,
+  gitBranch: GitBranch,
+  gitCommit: GitCommit,
+  gitPullRequest: GitPullRequest,
+  clock: Clock,
+  alertTriangle: AlertTriangle,
+  checkCircle: CheckCircle,
+  settings: Settings,
+  logOut: LogOut,
+  menu: Menu,
+  close: X,
+  search: Search,
+  bell: Bell,
+  heart: Heart,
+  share: Share2,
+  chevronRight: ChevronRight,
+  chevronLeft: ChevronLeft,
+  chevronDown: ChevronDown,
+  chevronUp: ChevronUp,
+  moreHorizontal: MoreHorizontal,
+  loader: Loader,
+};
+
+export function Icon({ name, size = 24, className = "", ...props }: IconProps) {
+  const IconComponent = iconMap[name];
+
+  if (!IconComponent) {
+    console.warn(`Icon "${name}" not found in icon map`);
+    return null;
+  }
+
+  return <IconComponent size={size} className={className} {...props} />;
+}
+
+/**
+ * Export individual icons for direct usage
+ */
+export {
+  Trophy,
+  Zap,
+  Flame,
+  Calendar,
+  Star,
+  Sun,
+  Cloud,
+  Sunset,
+  Moon,
+  Download,
+  ArrowUp,
+  ArrowDown,
+  TrendingUp,
+  Code,
+  GitBranch,
+  GitCommit,
+  GitPullRequest,
+  Clock,
+  AlertTriangle,
+  CheckCircle,
+  Settings,
+  LogOut,
+  Menu,
+  X,
+  Search,
+  Bell,
+  Heart,
+  Share2,
+  ChevronRight,
+  ChevronLeft,
+  ChevronDown,
+  ChevronUp,
+  MoreHorizontal,
+  Loader,
+};
diff --git a/src/components/PersonalRecords.tsx b/src/components/PersonalRecords.tsx
index 3d916b12..7a68975c 100644
--- a/src/components/PersonalRecords.tsx
+++ b/src/components/PersonalRecords.tsx
@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { useAccount } from "@/components/AccountContext";
+import { Trophy, Zap, Flame, Calendar, Star } from "lucide-react";
 
 interface StreakData {
   current: number;
@@ -208,7 +209,7 @@ export default function PersonalRecords() {
       value: streak?.longest ?? 0,
       unit: "days",
       subtext: "All time",
-      icon: "🏆",
+      icon: Trophy,
       isRepo: false,
     },
     {
@@ -216,7 +217,7 @@ export default function PersonalRecords() {
       value: bestDay.count,
       unit: "commits",
       subtext: bestDay.dateLabel ?? "—",
-      icon: "⚡",
+      icon: Zap,
       isRepo: false,
     },
     {
@@ -224,7 +225,7 @@ export default function PersonalRecords() {
       value: bestWeek.count,
       unit: "commits",
       subtext: bestWeek.weekLabel ?? "—",
-      icon: "🔥",
+      icon: Flame,
       isRepo: false,
     },
     {
@@ -232,7 +233,7 @@ export default function PersonalRecords() {
       value: bestMonth.count,
       unit: "commits",
       subtext: bestMonth.monthLabel ?? "—",
-      icon: "📅",
+      icon: Calendar,
       isRepo: false,
     },
     {
@@ -240,7 +241,7 @@ export default function PersonalRecords() {
       value: busiestRepo.count,
       unit: "commits",
       subtext: busiestRepo.repoLabel ?? "—",
-      icon: "⭐",
+      icon: Star,
       isRepo: true,
     },
   ];
@@ -285,8 +286,8 @@ export default function PersonalRecords() {
               className="h-full rounded-lg bg-[var(--control)] p-4 text-center flex flex-col justify-between border border-transparent transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-[var(--accent)]/30"
             >
               <div>
-                <div className="text-xl mb-2" role="img" aria-label={rec.label}>
-                  {rec.icon}
+                <div className="text-xl mb-2 flex justify-center">
+                  <rec.icon size={28} className="text-[var(--accent)]" aria-hidden="true" />
                 </div>
                 <div className="text-3xl font-extrabold text-[var(--accent)] tracking-tight mb-1">
                   {rec.value}
diff --git a/src/components/PinnedRepos.tsx b/src/components/PinnedRepos.tsx
index 13243ad3..c6419f78 100644
--- a/src/components/PinnedRepos.tsx
+++ b/src/components/PinnedRepos.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
+import { Star, GitFork } from "lucide-react";
 
 interface PinnedRepo {
   name: string;
@@ -113,8 +114,14 @@ export default function PinnedRepos() {
                     {repo.primaryLanguage.name}
                   </span>
                 )}
-                <span>⭐ {repo.stargazerCount}</span>
-                <span>🍴 {repo.forkCount}</span>
+                <span className="flex items-center gap-1">
+                  <Star size={14} className="fill-yellow-400 text-yellow-400" aria-hidden="true" />
+                  {repo.stargazerCount}
+                </span>
+                <span className="flex items-center gap-1">
+                  <GitFork size={14} aria-hidden="true" />
+                  {repo.forkCount}
+                </span>
               </div>
             </a>
           ))}
diff --git a/src/components/StatsCard.tsx b/src/components/StatsCard.tsx
index 7fd52f8e..ab575f6b 100644
--- a/src/components/StatsCard.tsx
+++ b/src/components/StatsCard.tsx
@@ -2,6 +2,7 @@
 
 import { useRef, useState } from "react";
 import { toPng } from "html-to-image";
+import { Flame, Trophy, Zap, Package, Download } from "lucide-react";
 
 interface StatsCardProps {
   username: string;
@@ -67,17 +68,7 @@ export default function StatsCard({
           </>
         ) : (
           <>
-            {/* Download icon */}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-              className="w-4 h-4"
-              aria-hidden="true"
-            >
-              <path d="M10.75 2.75a.75.75 0 00-1.5 0v8.614L6.295 8.235a.75.75 0 10-1.09 1.03l4.25 4.5a.75.75 0 001.09 0l4.25-4.5a.75.75 0 00-1.09-1.03l-2.955 3.129V2.75z" />
-              <path d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z" />
-            </svg>
+            <Download size={16} />
             Download stats card
           </>
         )}
@@ -212,7 +203,7 @@ export default function StatsCard({
           >
             {/* Current Streak */}
             <StatBox
-              icon="🔥"
+              icon={Flame}
               label="Current Streak"
               value={String(currentStreak)}
               unit="days"
@@ -220,21 +211,21 @@ export default function StatsCard({
             />
             {/* Longest Streak */}
             <StatBox
-              icon="🏆"
+              icon={Trophy}
               label="Longest Streak"
               value={String(longestStreak)}
               unit="days"
             />
             {/* Total Commits */}
             <StatBox
-              icon="⚡"
+              icon={Zap}
               label="Total Commits"
               value={totalCommits >= 1000 ? `${(totalCommits / 1000).toFixed(1)}k` : String(totalCommits)}
               unit="commits"
             />
             {/* Top Repo */}
             <StatBox
-              icon="📦"
+              icon={Package}
               label="Top Repository"
               value={topRepo.split("/")[1] ?? topRepo}
               unit=""
@@ -277,14 +268,14 @@ export default function StatsCard({
 
 /** Individual stat box inside the card */
 function StatBox({
-  icon,
+  icon: Icon,
   label,
   value,
   unit,
   accent = false,
   small = false,
 }: {
-  icon: string;
+  icon: React.ComponentType<any>;
   label: string;
   value: string;
   unit: string;
@@ -308,7 +299,9 @@ function StatBox({
         backdropFilter: "blur(8px)",
       }}
     >
-      <div style={{ fontSize: 28, lineHeight: 1 }}>{icon}</div>
+      <div style={{ lineHeight: 1 }}>
+        <Icon size={28} strokeWidth={1.5} className={accent ? "text-blue-300" : "text-slate-100"} />
+      </div>
       <div>
         <div
           style={{
diff --git a/src/components/StreakAtRiskBanner.tsx b/src/components/StreakAtRiskBanner.tsx
index 28ed513c..a5925737 100644
--- a/src/components/StreakAtRiskBanner.tsx
+++ b/src/components/StreakAtRiskBanner.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { useAccount } from "@/components/AccountContext";
+import { AlertTriangle, X } from "lucide-react";
 
 interface StreakAtRiskBannerProps {
   lastCommitDate?: string | null;
@@ -76,9 +77,7 @@ export default function StreakAtRiskBanner({
   return (
     <div className="mb-6 flex items-center justify-between rounded-lg border border-amber-500/30 bg-amber-500/10 p-4 text-amber-500 shadow-sm transition-all animate-in fade-in slide-in-from-top-4">
       <div className="flex items-center gap-3">
-        <span className="text-xl" role="img" aria-label="Warning">
-          ⚠️
-        </span>
+        <AlertTriangle size={20} className="flex-shrink-0" aria-hidden="true" />
         <div>
           <p className="font-semibold">
             No commit yet today — your streak is at risk!
@@ -93,7 +92,7 @@ export default function StreakAtRiskBanner({
         className="ml-4 rounded-md p-1.5 opacity-70 hover:bg-amber-500/20 hover:opacity-100 transition-all"
         aria-label="Dismiss banner"
       >
-        ✕
+        <X size={18} aria-hidden="true" />
       </button>
     </div>
   );
diff --git a/src/components/StreakTracker.tsx b/src/components/StreakTracker.tsx
index 52189113..82a08bc9 100644
--- a/src/components/StreakTracker.tsx
+++ b/src/components/StreakTracker.tsx
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from "react";
 import { useAccount } from "@/components/AccountContext";
 import { useCountUp } from "@/hooks/useCountUp";
 import { useHeatmapTheme } from "@/hooks/useHeatmapTheme";
+import { Flame, Trophy, Calendar, Zap, Copy, CheckCircle, Medal, Star, Sparkles } from "lucide-react";
 
 interface StreakData {
   current: number;
@@ -172,10 +173,10 @@ export default function StreakTracker() {
   }
 
   const MILESTONES = [
-    { days: 30, label: "30-day streak!", emoji: "🏅" },
-    { days: 14, label: "2-week streak!", emoji: "⭐" },
-    { days: 7, label: "7-day streak!", emoji: "🔥" },
-    { days: 3, label: "3-day streak!", emoji: "✨" },
+    { days: 30, label: "30-day streak!", icon: Medal },
+    { days: 14, label: "2-week streak!", icon: Star },
+    { days: 7, label: "7-day streak!", icon: Flame },
+    { days: 3, label: "3-day streak!", icon: Sparkles },
   ];
 
   const badge = MILESTONES.find((m) => (data?.current ?? 0) >= m.days);
@@ -189,7 +190,7 @@ export default function StreakTracker() {
           value: animatedCurrent,
           unit: "days",
           highlight: data.current > 0,
-          icon: "🔥",
+          icon: Flame,
           tooltip: "Current consecutive coding days",
         },
         {
@@ -197,7 +198,7 @@ export default function StreakTracker() {
           value: animatedLongest,
           unit: "days",
           highlight: false,
-          icon: "🏆",
+          icon: Trophy,
           tooltip: "Your longest streak ever",
         },
         {
@@ -205,7 +206,7 @@ export default function StreakTracker() {
           value: animatedActiveDays,
           unit: "days",
           highlight: false,
-          icon: "📅",
+          icon: Calendar,
           tooltip: "Days you made commits in the last 90 days",
         },
         {
@@ -218,7 +219,7 @@ export default function StreakTracker() {
             : "—",
           unit: "",
           highlight: false,
-          icon: "⚡",
+          icon: Zap,
           tooltip: "Your most recent commit",
         },
       ]
@@ -259,7 +260,7 @@ export default function StreakTracker() {
             {copied ? (
               <span className="text-xs font-medium text-green-500">Copied!</span>
             ) : (
-              <span className="text-base opacity-80 hover:opacity-100">📋</span>
+              <Copy size={16} className="opacity-80 hover:opacity-100" />
             )}
           </button>
         )}
@@ -273,8 +274,11 @@ export default function StreakTracker() {
                 ? "border border-[var(--accent)]/40 bg-[var(--accent-soft)]"
                 : "bg-[var(--control)]"
             }`}
+            title={stat.tooltip}
           >
-            <div className="text-xl mb-1" title={stat.tooltip} aria-label={stat.tooltip} role="img">{stat.icon}</div>
+            <div className="flex justify-center mb-1">
+              <stat.icon size={24} className="text-[var(--accent)]" aria-hidden="true" />
+            </div>
             <div
               className={`text-2xl font-bold ${
                 stat.highlight ? "text-[var(--accent)]" : "text-[var(--accent)]"
@@ -303,7 +307,7 @@ export default function StreakTracker() {
       )}
       {badge && (
         <div className="mt-3 flex items-center justify-center gap-2 rounded-lg border border-[var(--accent)]/30 bg-[var(--accent)]/10 px-3 py-2">
-          <span>{badge.emoji}</span>
+          <badge.icon size={18} className="text-[var(--accent)]" aria-hidden="true" />
           <span className="text-sm font-medium text-[var(--accent)]">{badge.label}</span>
         </div>
       )}
@@ -361,7 +365,10 @@ export default function StreakTracker() {
 
       {!freezeLoading && freeze?.hasFreeze && (
         <div className="mt-4 flex items-center justify-between rounded-lg border border-[var(--accent)]/30 bg-[var(--accent-soft)] px-4 py-3">
-          <span className="text-sm font-medium text-[var(--accent)]">✓ Freeze active today</span>
+          <div className="flex items-center gap-2">
+            <CheckCircle size={18} className="text-[var(--accent)]" aria-hidden="true" />
+            <span className="text-sm font-medium text-[var(--accent)]">Freeze active today</span>
+          </div>
           {confirmCancel ? (
             <div className="flex items-center gap-2">
               <span className="text-xs text-[var(--muted-foreground)]">Remove freeze?</span>
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index 5f441997..0a652bd1 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { useTheme } from "./ThemeContext";
+import { Sun, Moon } from "lucide-react";
 
 export default function ThemeToggle() {
   const { theme, toggleTheme } = useTheme();
@@ -27,7 +28,7 @@ export default function ThemeToggle() {
       aria-label="Toggle theme"
       aria-pressed={isDark}
     >
-      <span aria-hidden="true">{isDark ? "☀️" : "🌙"}</span>
+      {isDark ? <Sun size={18} aria-hidden="true" /> : <Moon size={18} aria-hidden="true" />}
       <span>{isDark ? "Light" : "Dark"}</span>
     </button>
   );

From 3e4aa36feb63fffac085a936dcae6b826a548754 Mon Sep 17 00:00:00 2001
From: Samudyatha K Bhat <samudyathakb.bca24@chanakyauniversity.edu.in>
Date: Thu, 21 May 2026 21:28:23 +0530
Subject: [PATCH 2/2] Fixed issues in the PR

---
 package.json                           |   2 +-
 src/app/dashboard/settings/page.tsx    |   8 +-
 src/app/globals.css                    |   2 +
 src/components/CIAnalytics.tsx         |   6 +-
 src/components/CommitTimeChart.tsx     |   6 +-
 src/components/ContributionHeatmap.tsx |   4 +-
 src/components/CopyLinkButton.tsx      |   2 +-
 src/components/FriendComparison.tsx    |   4 +-
 src/components/GoalTracker.tsx         | 856 ++++++++++++-------------
 src/components/Icons.tsx               | 141 ----
 src/components/IssueMetrics.tsx        |   6 +-
 src/components/PRBreakdownChart.tsx    |   4 +-
 src/components/PRMetrics.tsx           |   4 +-
 src/components/PersonalRecords.tsx     |   4 +-
 src/components/PinnedRepos.tsx         |   6 +-
 src/components/SignOutButton.tsx       |   2 +-
 src/components/StatsCard.tsx           |   2 +-
 src/components/StreakTracker.tsx       |  14 +-
 src/components/TopRepos.tsx            |   8 +-
 src/components/WeeklySummaryCard.tsx   |   6 +-
 20 files changed, 474 insertions(+), 613 deletions(-)
 delete mode 100644 src/components/Icons.tsx

diff --git a/package.json b/package.json
index 945454db..40f98119 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "html-to-image": "^1.11.13",
     "jspdf": "^4.2.1",
     "jspdf-autotable": "^5.0.7",
-    "lucide-react": "^1.16.0",
+    "lucide-react": "^0.475.0",
     "next": "^14.2.35",
     "next-auth": "^4.24.7",
     "react": "^18",
diff --git a/src/app/dashboard/settings/page.tsx b/src/app/dashboard/settings/page.tsx
index ab68ccb5..509197bc 100644
--- a/src/app/dashboard/settings/page.tsx
+++ b/src/app/dashboard/settings/page.tsx
@@ -311,8 +311,8 @@ function SettingsPageContent() {
           <div
             className={`mb-6 rounded-xl border p-4 text-sm ${
               statusMessage.kind === "success"
-                ? "border-green-500/30 bg-green-500/10 text-green-400"
-                : "border-red-500/30 bg-red-500/10 text-red-400"
+                ? "border-[var(--success)]/30 bg-[var(--success)]/10 text-[var(--success)]"
+                : "border-[var(--error)]/30 bg-[var(--error)]/10 text-[var(--error)]"
             }`}
           >
             {statusMessage.message}
@@ -491,7 +491,7 @@ function SettingsPageContent() {
           </div>
 
           {removeError && (
-            <div className="mt-4 rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-sm text-red-400">
+            <div className="mt-4 rounded-lg border border-[var(--error)]/30 bg-[var(--error)]/10 p-3 text-sm text-[var(--error)]">
               {removeError}
             </div>
           )}
@@ -531,7 +531,7 @@ function SettingsPageContent() {
                       onClick={() => handleRemoveAccount(account.githubId)}
                       aria-label={`Remove ${account.githubLogin}`}
                       disabled={removingAccountId === account.githubId}
-                      className="rounded-lg border border-[var(--border)] px-4 py-2 text-sm font-medium text-[var(--card-foreground)] transition-colors hover:bg-red-500/10 hover:text-red-400 disabled:opacity-60"
+                      className="rounded-lg border border-[var(--border)] px-4 py-2 text-sm font-medium text-[var(--card-foreground)] transition-colors hover:bg-[var(--error)]/10 hover:text-[var(--error)] disabled:opacity-60"
                     >
                       {removingAccountId === account.githubId
                         ? "Removing..."
diff --git a/src/app/globals.css b/src/app/globals.css
index d1d9f210..f6f2d58d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -13,6 +13,7 @@
   --border: #cbd5e1;
   --accent: #6366f1;
   --success: #10b981;
+  --error: #ef4444;
   --accent-soft: rgba(99, 102, 241, 0.15);
   --accent-foreground: #ffffff;
   --control: #e2e8f0;
@@ -32,6 +33,7 @@
   --border: #334155;
   --accent: #818cf8;
   --success: #10b981;
+  --error: #ef4444;
   --accent-soft: rgba(99, 102, 241, 0.2);
   --accent-foreground: #ffffff;
   --control: #334155;
diff --git a/src/components/CIAnalytics.tsx b/src/components/CIAnalytics.tsx
index c75de512..320f7048 100644
--- a/src/components/CIAnalytics.tsx
+++ b/src/components/CIAnalytics.tsx
@@ -90,12 +90,12 @@ export default function CIAnalytics() {
           ))}
         </div>
       ) : error ? (
-        <div className="rounded-lg border border-red-500/20 bg-red-500/10 p-4 text-sm text-red-400">
+        <div className="rounded-lg border border-[var(--error)]/20 bg-[var(--error)]/10 p-4 text-sm text-[var(--error)]">
           <p>{error}</p>
           <button
             type="button"
-            onClick={fetchCIAnalytics}
-            className="mt-3 rounded-md border border-red-500/30 px-3 py-1.5 text-xs font-medium text-red-300 transition-colors hover:bg-red-500/10"
+            onClick={fetchCIMetrics}
+            className="mt-3 rounded-md border border-[var(--error)]/30 px-3 py-1.5 text-xs font-medium text-[var(--error)] transition-colors hover:bg-[var(--error)]/10"
           >
             Try again
           </button>
diff --git a/src/components/CommitTimeChart.tsx b/src/components/CommitTimeChart.tsx
index 57601cc0..3b2ecf00 100644
--- a/src/components/CommitTimeChart.tsx
+++ b/src/components/CommitTimeChart.tsx
@@ -134,12 +134,12 @@ export default function CommitTimeChart() {
           </div>
         ) : error ? (
           <div className="flex h-full items-center justify-center">
-            <div className="rounded-lg border border-red-500/20 bg-red-500/10 p-4 text-sm text-red-400 text-center">
+            <div className="rounded-lg border border-[var(--error)]/20 bg-[var(--error)]/10 p-4 text-sm text-[var(--error)] text-center">
               <p>{error}</p>
               <button
                 type="button"
-                onClick={fetchContributions}
-                className="mt-3 rounded-md border border-red-500/30 px-3 py-1.5 text-xs font-medium text-red-300 transition-colors hover:bg-red-500/10"
+                onClick={fetchData}
+                className="mt-3 rounded-md border border-[var(--error)]/30 px-3 py-1.5 text-xs font-medium text-[var(--error)] transition-colors hover:bg-[var(--error)]/10"
               >
                 Try again
               </button>
diff --git a/src/components/ContributionHeatmap.tsx b/src/components/ContributionHeatmap.tsx
index 8c81db44..e06b0606 100644
--- a/src/components/ContributionHeatmap.tsx
+++ b/src/components/ContributionHeatmap.tsx
@@ -219,8 +219,8 @@ export default function ContributionHeatmap({
       {loading ? (
         <div className="h-[180px] animate-pulse rounded-lg bg-[var(--card-muted)]" />
       ) : error ? (
-        <div className="flex h-[180px] items-center rounded-lg border border-red-500/30 bg-red-500/10 px-4">
-          <p className="text-sm text-red-400">{error} Please try refreshing.</p>
+        <div className="flex h-[180px] items-center rounded-lg border border-[var(--error)]/30 bg-[var(--error)]/10 px-4">
+          <p className="text-sm text-[var(--error)]">{error} Please try refreshing.</p>
         </div>
       ) : (
         <>
diff --git a/src/components/CopyLinkButton.tsx b/src/components/CopyLinkButton.tsx
index c15511ef..cea4c559 100644
--- a/src/components/CopyLinkButton.tsx
+++ b/src/components/CopyLinkButton.tsx
@@ -27,7 +27,7 @@ export default function CopyLinkButton() {
     >
       {copied ? (
         <>
-          <CheckCircle size={16} className="text-green-500" aria-hidden="true" />
+          <CheckCircle size={16} className="text-[var(--success)]" aria-hidden="true" />
           <span>Copied!</span>
         </>
       ) : (
diff --git a/src/components/FriendComparison.tsx b/src/components/FriendComparison.tsx
index d0859bd0..3901f9ee 100644
--- a/src/components/FriendComparison.tsx
+++ b/src/components/FriendComparison.tsx
@@ -116,7 +116,7 @@ export default function FriendComparison() {
     </div>
 
       {error && (
-        <div className="p-4 mb-4 rounded-md border border-red-500/30 bg-red-500/10 text-red-500 text-sm flex justify-between items-center">
+        <div className="p-4 mb-4 rounded-md border border-[var(--error)]/30 bg-[var(--error)]/10 text-[var(--error)] text-sm flex justify-between items-center">
           <span>{error}</span>
           <button onClick={() => setError("")} className="hover:underline">Dismiss</button>
         </div>
@@ -165,7 +165,7 @@ export default function FriendComparison() {
             </a>
             <button
               onClick={clearComparison}
-              className="rounded-full bg-[var(--control)] px-4 py-2 text-sm text-[var(--foreground)] transition-colors hover:bg-red-500/10 hover:text-red-500"
+              className="rounded-full bg-[var(--control)] px-4 py-2 text-sm text-[var(--foreground)] transition-colors hover:bg-[var(--error)]/10 hover:text-[var(--error)]"
             >
               Clear Comparison
             </button>
diff --git a/src/components/GoalTracker.tsx b/src/components/GoalTracker.tsx
index ad8407a4..d41cc92e 100644
--- a/src/components/GoalTracker.tsx
+++ b/src/components/GoalTracker.tsx
@@ -1,428 +1,428 @@
-"use client";
-
-import { useCallback, useEffect, useState, useRef } from "react";
-
-type Recurrence = "none" | "weekly" | "monthly";
-
-interface Goal {
-  id: string;
-  title: string;
-  target: number;
-  current: number;
-  unit: string;
-  recurrence: Recurrence;
-  period_start: string;
-}
-
-const RECURRENCE_LABELS: Record<Recurrence, string> = {
-  none: "One-time",
-  weekly: "Weekly",
-  monthly: "Monthly",
-};
-
-export default function GoalTracker() {
-  const [goals, setGoals] = useState<Goal[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
-  const [minutesAgo, setMinutesAgo] = useState(0);
-  const [title, setTitle] = useState("");
-  const [target, setTarget] = useState(7);
-  const [unit, setUnit] = useState("commits");
-  const [recurrence, setRecurrence] = useState<Recurrence>("none");
-  const [creating, setCreating] = useState(false);
-  const [createError, setCreateError] = useState<string | null>(null);
-  const [confirmingId, setConfirmingId] = useState<string | null>(null);
-  const [deletingId, setDeletingId] = useState<string | null>(null);
-
-  const [activeConfettiGoalId, setActiveConfettiGoalId] = useState<string | null>(null);
-  const prevGoalsRef = useRef<Map<string, boolean>>(new Map());
-  const initialLoadDoneRef = useRef<boolean>(false);
-
-  const loadGoals = useCallback(async () => {
-    const response = await fetch("/api/goals");
-    const data: { goals: Goal[] } = await response.json();
-    setGoals(data.goals ?? []);
-  }, []);
-
-  useEffect(() => {
-    loadGoals()
-      .catch(() => {})
-      .finally(() => {
-        setLoading(false);
-        setLastUpdated(new Date());
-        setMinutesAgo(0);
-      });
-  }, [loadGoals]);
-
-  async function handleCreate(e: React.FormEvent) {
-    e.preventDefault();
-    setCreating(true);
-    setCreateError(null);
-
-    try {
-      const response = await fetch("/api/goals", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ title, target, unit, recurrence }),
-      });
-
-      if (!response.ok) {
-        throw new Error("Failed to create goal");
-      }
-    } catch {
-      setCreateError("Failed to create goal. Please try again.");
-      setCreating(false);
-      return;
-    }
-
-    setTitle("");
-    setTarget(7);
-    setUnit("commits");
-    setRecurrence("none");
-    await loadGoals().catch(() => {});
-    setCreating(false);
-  }
-
-  async function handleDelete(id: string) {
-    const previousGoals = goals;
-    setGoals((prev) => prev.filter((g) => g.id !== id));
-    setConfirmingId(null);
-    setDeletingId(id);
-
-    try {
-      const res = await fetch(`/api/goals/${id}`, { method: "DELETE" });
-      if (!res.ok) {
-        setGoals(previousGoals);
-      }
-    } catch {
-      setGoals(previousGoals);
-    } finally {
-      setDeletingId(null);
-    }
-  }
-
-  function getCompletionLabel(goal: Goal): string {
-    if (goal.current >= goal.target) {
-      if (goal.recurrence === "weekly") return "Completed this week ✓";
-      if (goal.recurrence === "monthly") return "Completed this month ✓";
-      return "Completed ✓";
-    }
-    return "";
-  }
-
-  useEffect(() => {
-    if (goals.length === 0) return;
-
-    if (!initialLoadDoneRef.current) {
-      const map = new Map<string, boolean>();
-      for (const g of goals) {
-        map.set(g.id, g.current >= g.target);
-      }
-      prevGoalsRef.current = map;
-      initialLoadDoneRef.current = true;
-      return;
-    }
-
-    for (const g of goals) {
-      const isCompleted = g.current >= g.target;
-      const wasCompleted = prevGoalsRef.current.get(g.id);
-
-      if (wasCompleted === false && isCompleted) {
-        if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
-          setActiveConfettiGoalId(g.id);
-          setTimeout(() => {
-            setActiveConfettiGoalId((curr) => (curr === g.id ? null : curr));
-          }, 2500);
-        }
-      }
-
-      prevGoalsRef.current.set(g.id, isCompleted);
-    }
-  }, [goals]);
-
-  useEffect(() => {
-    if (!lastUpdated) return;
-    const interval = setInterval(() => {
-      const diff = Math.floor((Date.now() - lastUpdated.getTime()) / 60000);
-      setMinutesAgo(diff);
-    }, 60000);
-    return () => clearInterval(interval);
-  }, [lastUpdated]);
-
-  if (loading) {
-    return (
-      <div className="h-full rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
-        <div role="status" aria-live="polite" aria-busy="true">
-          <span className="sr-only">Loading weekly goals</span>
-          <div
-            aria-hidden="true"
-            className="mb-4 h-5 w-32 rounded bg-[var(--card-muted)] animate-pulse"
-          />
-          {[1, 2, 3].map((i) => (
-            <div key={i} aria-hidden="true" className="mb-4">
-              <div className="h-4 bg-[var(--card-muted)] rounded animate-pulse mb-2" />
-              <div className="h-2 bg-[var(--card-muted)] rounded animate-pulse" />
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-full rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
-      <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)]">Weekly Goals</h2>
-
-      {goals.length === 0 ? (
-        <p className="text-sm text-[var(--muted-foreground)]">
-          No goals yet. Create one below.
-        </p>
-      ) : (
-        <ul className="space-y-4">
-          {goals.map((goal) => {
-            const pct = Math.min((goal.current / goal.target) * 100, 100);
-            const isConfirming = confirmingId === goal.id;
-            const isDeleting = deletingId === goal.id;
-            const completed = goal.current >= goal.target;
-            const completionLabel = getCompletionLabel(goal);
-
-            return (
-              <li key={goal.id} className="relative">
-                {activeConfettiGoalId === goal.id && <ConfettiBurst />}
-                <div className="flex justify-between items-center text-sm mb-1">
-                  <div className="flex flex-col gap-0.5">
-                    <div className="flex items-center gap-2">
-                      <span className="text-[var(--card-foreground)]">{goal.title}</span>
-                      {goal.recurrence !== "none" && (
-                        <span className={`text-xs font-medium px-2 py-0.5 rounded-full border ${
-                          goal.recurrence === "weekly"
-                            ? "bg-[var(--accent)]/10 text-[var(--accent)] border-[var(--accent)]/30"
-                            : "bg-[var(--card-muted)] text-[var(--muted-foreground)] border-[var(--border)]"
-                        }`}>
-                          {RECURRENCE_LABELS[goal.recurrence]}
-                        </span>
-                      )}
-                    </div>
-                    {completed && (
-                      <span className="text-xs font-medium text-emerald-500">
-                        {completionLabel}
-                      </span>
-                    )}
-                  </div>
-
-                  <div className="flex items-center gap-2">
-                    <span className="text-[var(--muted-foreground)]">
-                      {goal.current}/{goal.target} {goal.unit}
-                    </span>
-
-                    {isConfirming ? (
-                      <span className="flex items-center gap-1 text-xs">
-                        <span className="text-[var(--muted-foreground)]">Delete?</span>
-                        <button
-                          onClick={() => handleDelete(goal.id)}
-                          disabled={isDeleting}
-                          className="text-red-400 hover:text-red-300 font-semibold transition-colors disabled:opacity-50"
-                          aria-label={`Confirm delete goal: ${goal.title}`}
-                        >
-                          Yes
-                        </button>
-                        <span className="text-[var(--muted-foreground)]">/</span>
-                        <button
-                          onClick={() => setConfirmingId(null)}
-                          className="text-[var(--muted-foreground)] hover:text-[var(--card-foreground)] transition-colors"
-                          aria-label="Cancel delete"
-                        >
-                          No
-                        </button>
-                      </span>
-                    ) : (
-                      <button
-                        onClick={() => setConfirmingId(goal.id)}
-                        disabled={isDeleting}
-                        className="text-[var(--muted-foreground)] hover:text-red-400 transition-colors disabled:opacity-50"
-                        aria-label={`Delete goal: ${goal.title}`}
-                        title="Delete goal"
-                      >
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4">
-                          <path fillRule="evenodd" d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z" clipRule="evenodd" />
-                        </svg>
-                      </button>
-                    )}
-                  </div>
-                </div>
-
-                <div className="h-2 overflow-hidden rounded-full bg-[var(--control)]">
-                  <div
-                    className={`h-full rounded-full transition-all ${completed ? "bg-emerald-500" : "bg-[var(--accent)]"}`}
-                    style={{ width: `${pct}%` }}
-                  />
-                </div>
-              </li>
-            );
-          })}
-        </ul>
-      )}
-
-      {lastUpdated && (
-        <p className="text-xs text-[var(--muted-foreground)] mt-2 text-right">
-          {minutesAgo === 0 ? "Updated just now" : `Updated ${minutesAgo} min ago`}
-        </p>
-      )}
-
-      {/* Goal Creation Form */}
-      <form onSubmit={handleCreate} className="mt-6 space-y-3 border-t border-[var(--border)] pt-4">
-        <div>
-          <label htmlFor="goal-title" className="mb-1 block text-xs font-medium uppercase tracking-wide text-[var(--muted-foreground)]">
-            Goal title
-          </label>
-          <input
-            id="goal-title"
-            type="text"
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-            placeholder="Make 10 commits"
-            required
-            disabled={creating}
-            className="w-full rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-2 text-sm text-[var(--foreground)] outline-none transition placeholder:text-[var(--muted-foreground)] focus:border-[var(--accent)]"
-          />
-        </div>
-
-        <div className="flex gap-3">
-          <div className="flex-1">
-            <label htmlFor="goal-target" className="mb-1 block text-xs font-medium uppercase tracking-wide text-[var(--muted-foreground)]">
-              Target
-            </label>
-            <input
-              id="goal-target"
-              type="number"
-              min={1}
-              value={target}
-              onChange={(e) => setTarget(Number(e.target.value))}
-              disabled={creating}
-              className="w-full rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-2 text-sm text-[var(--foreground)] outline-none transition focus:border-[var(--accent)]"
-            />
-          </div>
-          <div className="flex-1">
-            <label htmlFor="goal-unit" className="mb-1 block text-xs font-medium uppercase tracking-wide text-[var(--muted-foreground)]">
-              Unit
-            </label>
-            <input
-              id="goal-unit"
-              type="text"
-              value={unit}
-              onChange={(e) => setUnit(e.target.value)}
-              placeholder="commits"
-              disabled={creating}
-              className="w-full rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-2 text-sm text-[var(--foreground)] outline-none transition focus:border-[var(--accent)]"
-            />
-          </div>
-        </div>
-
-        {/* Recurrence Picker */}
-        <div>
-          <label className="mb-1 block text-xs font-medium uppercase tracking-wide text-[var(--muted-foreground)]">
-            Recurrence
-          </label>
-          <div className="flex gap-2">
-            {(["none", "weekly", "monthly"] as Recurrence[]).map((r) => (
-              <button
-                key={r}
-                type="button"
-                onClick={() => setRecurrence(r)}
-                disabled={creating}
-                className={`flex-1 py-1.5 px-2 rounded-lg text-xs font-medium border transition-all ${
-                  recurrence === r
-                    ? "border-[var(--accent)] bg-[var(--accent)] text-white"
-                    : "border-[var(--border)] text-[var(--muted-foreground)] hover:border-[var(--accent)]"
-                }`}
-              >
-                {RECURRENCE_LABELS[r]}
-              </button>
-            ))}
-          </div>
-          {recurrence !== "none" && (
-            <p className="mt-1 text-xs text-[var(--muted-foreground)]">
-              {recurrence === "weekly" ? "Resets every Monday." : "Resets on the 1st of each month."}
-            </p>
-          )}
-        </div>
-
-        <button
-          type="submit"
-          disabled={creating || !title.trim()}
-          className="inline-flex items-center gap-2 rounded-lg bg-[var(--accent)] px-4 py-2 text-sm font-medium text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
-        >
-          {creating ? (
-            <>
-              <span className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-              Creating...
-            </>
-          ) : (
-            "Add goal"
-          )}
-        </button>
-
-        {createError && (
-          <p className="text-sm text-red-500">{createError}</p>
-        )}
-      </form>
-    </div>
-  );
-}
-
-function ConfettiBurst() {
-  const [particles, setParticles] = useState<Array<{ id: number; x: number; y: number; color: string; rot: number; scale: number; speed: number }>>([]);
-
-  useEffect(() => {
-    const colors = ["var(--accent)", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6", "#EC4899"];
-    const newParticles = [];
-    for (let i = 0; i < 35; i++) {
-      const angle = Math.random() * Math.PI * 2;
-      const distance = 30 + Math.random() * 140;
-      newParticles.push({
-        id: i,
-        x: Math.cos(angle) * distance,
-        y: Math.sin(angle) * distance - 20,
-        color: colors[Math.random() * colors.length | 0],
-        rot: Math.random() * 360 + 180,
-        scale: 0.5 + Math.random() * 0.7,
-        speed: 0.8 + Math.random() * 0.6,
-      });
-    }
-    setParticles(newParticles);
-  }, []);
-
-  return (
-    <div className="absolute inset-0 pointer-events-none z-50 flex items-center justify-center overflow-visible">
-      <style>{`
-        @keyframes confettiBurstAnim {
-          0% {
-            transform: translate(0, 0) rotate(0deg) scale(0);
-            opacity: 1;
-          }
-          50% {
-            opacity: 1;
-          }
-          100% {
-            transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(var(--scale));
-            opacity: 0;
-          }
-        }
-      `}</style>
-      {particles.map((p) => (
-        <div
-          key={p.id}
-          className="absolute w-2.5 h-2.5 rounded-sm"
-          style={{
-            backgroundColor: p.color,
-            ["--tx" as string]: `${p.x}px`,
-            ["--ty" as string]: `${p.y}px`,
-            ["--rot" as string]: `${p.rot}deg`,
-            ["--scale" as string]: p.scale,
-            animation: `confettiBurstAnim ${p.speed}s cubic-bezier(0.25, 1, 0.5, 1) forwards`,
-          }}
-        />
-      ))}
-    </div>
-  );
-}
\ No newline at end of file
+"use client";
+
+import { useCallback, useEffect, useState, useRef } from "react";
+
+type Recurrence = "none" | "weekly" | "monthly";
+
+interface Goal {
+  id: string;
+  title: string;
+  target: number;
+  current: number;
+  unit: string;
+  recurrence: Recurrence;
+  period_start: string;
+}
+
+const RECURRENCE_LABELS: Record<Recurrence, string> = {
+  none: "One-time",
+  weekly: "Weekly",
+  monthly: "Monthly",
+};
+
+export default function GoalTracker() {
+  const [goals, setGoals] = useState<Goal[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
+  const [minutesAgo, setMinutesAgo] = useState(0);
+  const [title, setTitle] = useState("");
+  const [target, setTarget] = useState(7);
+  const [unit, setUnit] = useState("commits");
+  const [recurrence, setRecurrence] = useState<Recurrence>("none");
+  const [creating, setCreating] = useState(false);
+  const [createError, setCreateError] = useState<string | null>(null);
+  const [confirmingId, setConfirmingId] = useState<string | null>(null);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+
+  const [activeConfettiGoalId, setActiveConfettiGoalId] = useState<string | null>(null);
+  const prevGoalsRef = useRef<Map<string, boolean>>(new Map());
+  const initialLoadDoneRef = useRef<boolean>(false);
+
+  const loadGoals = useCallback(async () => {
+    const response = await fetch("/api/goals");
+    const data: { goals: Goal[] } = await response.json();
+    setGoals(data.goals ?? []);
+  }, []);
+
+  useEffect(() => {
+    loadGoals()
+      .catch(() => {})
+      .finally(() => {
+        setLoading(false);
+        setLastUpdated(new Date());
+        setMinutesAgo(0);
+      });
+  }, [loadGoals]);
+
+  async function handleCreate(e: React.FormEvent) {
+    e.preventDefault();
+    setCreating(true);
+    setCreateError(null);
+
+    try {
+      const response = await fetch("/api/goals", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ title, target, unit, recurrence }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to create goal");
+      }
+    } catch {
+      setCreateError("Failed to create goal. Please try again.");
+      setCreating(false);
+      return;
+    }
+
+    setTitle("");
+    setTarget(7);
+    setUnit("commits");
+    setRecurrence("none");
+    await loadGoals().catch(() => {});
+    setCreating(false);
+  }
+
+  async function handleDelete(id: string) {
+    const previousGoals = goals;
+    setGoals((prev) => prev.filter((g) => g.id !== id));
+    setConfirmingId(null);
+    setDeletingId(id);
+
+    try {
+      const res = await fetch(`/api/goals/${id}`, { method: "DELETE" });
+      if (!res.ok) {
+        setGoals(previousGoals);
+      }
+    } catch {
+      setGoals(previousGoals);
+    } finally {
+      setDeletingId(null);
+    }
+  }
+
+  function getCompletionLabel(goal: Goal): string {
+    if (goal.current >= goal.target) {
+      if (goal.recurrence === "weekly") return "Completed this week ✓";
+      if (goal.recurrence === "monthly") return "Completed this month ✓";
+      return "Completed ✓";
+    }
+    return "";
+  }
+
+  useEffect(() => {
+    if (goals.length === 0) return;
+
+    if (!initialLoadDoneRef.current) {
+      const map = new Map<string, boolean>();
+      for (const g of goals) {
+        map.set(g.id, g.current >= g.target);
+      }
+      prevGoalsRef.current = map;
+      initialLoadDoneRef.current = true;
+      return;
+    }
+
+    for (const g of goals) {
+      const isCompleted = g.current >= g.target;
+      const wasCompleted = prevGoalsRef.current.get(g.id);
+
+      if (wasCompleted === false && isCompleted) {
+        if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+          setActiveConfettiGoalId(g.id);
+          setTimeout(() => {
+            setActiveConfettiGoalId((curr) => (curr === g.id ? null : curr));
+          }, 2500);
+        }
+      }
+
+      prevGoalsRef.current.set(g.id, isCompleted);
+    }
+  }, [goals]);
+
+  useEffect(() => {
+    if (!lastUpdated) return;
+    const interval = setInterval(() => {
+      const diff = Math.floor((Date.now() - lastUpdated.getTime()) / 60000);
+      setMinutesAgo(diff);
+    }, 60000);
+    return () => clearInterval(interval);
+  }, [lastUpdated]);
+
+  if (loading) {
+    return (
+      <div className="h-full rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+        <div role="status" aria-live="polite" aria-busy="true">
+          <span className="sr-only">Loading weekly goals</span>
+          <div
+            aria-hidden="true"
+            className="mb-4 h-5 w-32 rounded bg-[var(--card-muted)] animate-pulse"
+          />
+          {[1, 2, 3].map((i) => (
+            <div key={i} aria-hidden="true" className="mb-4">
+              <div className="h-4 bg-[var(--card-muted)] rounded animate-pulse mb-2" />
+              <div className="h-2 bg-[var(--card-muted)] rounded animate-pulse" />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+      <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)]">Weekly Goals</h2>
+
+      {goals.length === 0 ? (
+        <p className="text-sm text-[var(--muted-foreground)]">
+          No goals yet. Create one below.
+        </p>
+      ) : (
+        <ul className="space-y-4">
+          {goals.map((goal) => {
+            const pct = Math.min((goal.current / goal.target) * 100, 100);
+            const isConfirming = confirmingId === goal.id;
+            const isDeleting = deletingId === goal.id;
+            const completed = goal.current >= goal.target;
+            const completionLabel = getCompletionLabel(goal);
+
+            return (
+              <li key={goal.id} className="relative">
+                {activeConfettiGoalId === goal.id && <ConfettiBurst />}
+                <div className="flex justify-between items-center text-sm mb-1">
+                  <div className="flex flex-col gap-0.5">
+                    <div className="flex items-center gap-2">
+                      <span className="text-[var(--card-foreground)]">{goal.title}</span>
+                      {goal.recurrence !== "none" && (
+                        <span className={`text-xs font-medium px-2 py-0.5 rounded-full border ${
+                          goal.recurrence === "weekly"
+                            ? "bg-[var(--accent)]/10 text-[var(--accent)] border-[var(--accent)]/30"
+                            : "bg-[var(--card-muted)] text-[var(--muted-foreground)] border-[var(--border)]"
+                        }`}>
+                          {RECURRENCE_LABELS[goal.recurrence]}
+                        </span>
+                      )}
+                    </div>
+                    {completed && (
+                      <span className="text-xs font-medium text-emerald-500">
+                        {completionLabel}
+                      </span>
+                    )}
+                  </div>
+
+                  <div className="flex items-center gap-2">
+                    <span className="text-[var(--muted-foreground)]">
+                      {goal.current}/{goal.target} {goal.unit}
+                    </span>
+
+                    {isConfirming ? (
+                      <span className="flex items-center gap-1 text-xs">
+                        <span className="text-[var(--muted-foreground)]">Delete?</span>
+                        <button
+                          onClick={() => handleDelete(goal.id)}
+                          disabled={isDeleting}
+                          className="text-[var(--error)] hover:text-[var(--error)] font-semibold transition-colors disabled:opacity-50"
+                          aria-label={`Confirm delete goal: ${goal.title}`}
+                        >
+                          Yes
+                        </button>
+                        <span className="text-[var(--muted-foreground)]">/</span>
+                        <button
+                          onClick={() => setConfirmingId(null)}
+                          className="text-[var(--muted-foreground)] hover:text-[var(--card-foreground)] transition-colors"
+                          aria-label="Cancel delete"
+                        >
+                          No
+                        </button>
+                      </span>
+                    ) : (
+                      <button
+                        onClick={() => setConfirmingId(goal.id)}
+                        disabled={isDeleting}
+                        className="text-[var(--muted-foreground)] hover:text-[var(--error)] transition-colors disabled:opacity-50"
+                        aria-label={`Delete goal: ${goal.title}`}
+                        title="Delete goal"
+                      >
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4">
+                          <path fillRule="evenodd" d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z" clipRule="evenodd" />
+                        </svg>
+                      </button>
+                    )}
+                  </div>
+                </div>
+
+                <div className="h-2 overflow-hidden rounded-full bg-[var(--control)]">
+                  <div
+                    className={`h-full rounded-full transition-all ${completed ? "bg-emerald-500" : "bg-[var(--accent)]"}`}
+                    style={{ width: `${pct}%` }}
+                  />
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+
+      {lastUpdated && (
+        <p className="text-xs text-[var(--muted-foreground)] mt-2 text-right">
+          {minutesAgo === 0 ? "Updated just now" : `Updated ${minutesAgo} min ago`}
+        </p>
+      )}
+
+      {/* Goal Creation Form */}
+      <form onSubmit={handleCreate} className="mt-6 space-y-3 border-t border-[var(--border)] pt-4">
+        <div>
+          <label htmlFor="goal-title" className="mb-1 block text-xs font-medium uppercase tracking-wide text-[var(--muted-foreground)]">
+            Goal title
+          </label>
+          <input
+            id="goal-title"
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="Make 10 commits"
+            required
+            disabled={creating}
+            className="w-full rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-2 text-sm text-[var(--foreground)] outline-none transition placeholder:text-[var(--muted-foreground)] focus:border-[var(--accent)]"
+          />
+        </div>
+
+        <div className="flex gap-3">
+          <div className="flex-1">
+            <label htmlFor="goal-target" className="mb-1 block text-xs font-medium uppercase tracking-wide text-[var(--muted-foreground)]">
+              Target
+            </label>
+            <input
+              id="goal-target"
+              type="number"
+              min={1}
+              value={target}
+              onChange={(e) => setTarget(Number(e.target.value))}
+              disabled={creating}
+              className="w-full rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-2 text-sm text-[var(--foreground)] outline-none transition focus:border-[var(--accent)]"
+            />
+          </div>
+          <div className="flex-1">
+            <label htmlFor="goal-unit" className="mb-1 block text-xs font-medium uppercase tracking-wide text-[var(--muted-foreground)]">
+              Unit
+            </label>
+            <input
+              id="goal-unit"
+              type="text"
+              value={unit}
+              onChange={(e) => setUnit(e.target.value)}
+              placeholder="commits"
+              disabled={creating}
+              className="w-full rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-2 text-sm text-[var(--foreground)] outline-none transition focus:border-[var(--accent)]"
+            />
+          </div>
+        </div>
+
+        {/* Recurrence Picker */}
+        <div>
+          <label className="mb-1 block text-xs font-medium uppercase tracking-wide text-[var(--muted-foreground)]">
+            Recurrence
+          </label>
+          <div className="flex gap-2">
+            {(["none", "weekly", "monthly"] as Recurrence[]).map((r) => (
+              <button
+                key={r}
+                type="button"
+                onClick={() => setRecurrence(r)}
+                disabled={creating}
+                className={`flex-1 py-1.5 px-2 rounded-lg text-xs font-medium border transition-all ${
+                  recurrence === r
+                    ? "border-[var(--accent)] bg-[var(--accent)] text-white"
+                    : "border-[var(--border)] text-[var(--muted-foreground)] hover:border-[var(--accent)]"
+                }`}
+              >
+                {RECURRENCE_LABELS[r]}
+              </button>
+            ))}
+          </div>
+          {recurrence !== "none" && (
+            <p className="mt-1 text-xs text-[var(--muted-foreground)]">
+              {recurrence === "weekly" ? "Resets every Monday." : "Resets on the 1st of each month."}
+            </p>
+          )}
+        </div>
+
+        <button
+          type="submit"
+          disabled={creating || !title.trim()}
+          className="inline-flex items-center gap-2 rounded-lg bg-[var(--accent)] px-4 py-2 text-sm font-medium text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          {creating ? (
+            <>
+              <span className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+              Creating...
+            </>
+          ) : (
+            "Add goal"
+          )}
+        </button>
+
+        {createError && (
+          <p className="text-sm text-[var(--error)]">{createError}</p>
+        )}
+      </form>
+    </div>
+  );
+}
+
+function ConfettiBurst() {
+  const [particles, setParticles] = useState<Array<{ id: number; x: number; y: number; color: string; rot: number; scale: number; speed: number }>>([]);
+
+  useEffect(() => {
+    const colors = ["var(--accent)", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6", "#EC4899"];
+    const newParticles = [];
+    for (let i = 0; i < 35; i++) {
+      const angle = Math.random() * Math.PI * 2;
+      const distance = 30 + Math.random() * 140;
+      newParticles.push({
+        id: i,
+        x: Math.cos(angle) * distance,
+        y: Math.sin(angle) * distance - 20,
+        color: colors[Math.random() * colors.length | 0],
+        rot: Math.random() * 360 + 180,
+        scale: 0.5 + Math.random() * 0.7,
+        speed: 0.8 + Math.random() * 0.6,
+      });
+    }
+    setParticles(newParticles);
+  }, []);
+
+  return (
+    <div className="absolute inset-0 pointer-events-none z-50 flex items-center justify-center overflow-visible">
+      <style>{`
+        @keyframes confettiBurstAnim {
+          0% {
+            transform: translate(0, 0) rotate(0deg) scale(0);
+            opacity: 1;
+          }
+          50% {
+            opacity: 1;
+          }
+          100% {
+            transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(var(--scale));
+            opacity: 0;
+          }
+        }
+      `}</style>
+      {particles.map((p) => (
+        <div
+          key={p.id}
+          className="absolute w-2.5 h-2.5 rounded-sm"
+          style={{
+            backgroundColor: p.color,
+            ["--tx" as string]: `${p.x}px`,
+            ["--ty" as string]: `${p.y}px`,
+            ["--rot" as string]: `${p.rot}deg`,
+            ["--scale" as string]: p.scale,
+            animation: `confettiBurstAnim ${p.speed}s cubic-bezier(0.25, 1, 0.5, 1) forwards`,
+          }}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
deleted file mode 100644
index 77a3a452..00000000
--- a/src/components/Icons.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-"use client";
-
-import {
-  Trophy,
-  Zap,
-  Flame,
-  Calendar,
-  Star,
-  Sun,
-  Cloud,
-  Sunset,
-  Moon,
-  Download,
-  ArrowUp,
-  ArrowDown,
-  TrendingUp,
-  Code,
-  GitBranch,
-  GitCommit,
-  GitPullRequest,
-  Clock,
-  AlertTriangle,
-  CheckCircle,
-  Settings,
-  LogOut,
-  Menu,
-  X,
-  Search,
-  Bell,
-  Heart,
-  Share2,
-  ChevronRight,
-  ChevronLeft,
-  ChevronDown,
-  ChevronUp,
-  MoreHorizontal,
-  Loader,
-} from "lucide-react";
-
-/**
- * Centralized icon component for consistent icon usage across the app.
- * Maps string-based icon names to Lucide icons.
- * 
- * Usage:
- * <Icon name="trophy" size={24} className="text-accent" />
- */
-
-interface IconProps {
-  name: string;
-  size?: number | string;
-  className?: string;
-  "aria-hidden"?: boolean;
-}
-
-const iconMap: Record<string, React.ComponentType<any>> = {
-  trophy: Trophy,
-  zap: Zap,
-  flame: Flame,
-  calendar: Calendar,
-  star: Star,
-  sun: Sun,
-  cloud: Cloud,
-  sunset: Sunset,
-  moon: Moon,
-  download: Download,
-  arrowUp: ArrowUp,
-  arrowDown: ArrowDown,
-  trendingUp: TrendingUp,
-  code: Code,
-  gitBranch: GitBranch,
-  gitCommit: GitCommit,
-  gitPullRequest: GitPullRequest,
-  clock: Clock,
-  alertTriangle: AlertTriangle,
-  checkCircle: CheckCircle,
-  settings: Settings,
-  logOut: LogOut,
-  menu: Menu,
-  close: X,
-  search: Search,
-  bell: Bell,
-  heart: Heart,
-  share: Share2,
-  chevronRight: ChevronRight,
-  chevronLeft: ChevronLeft,
-  chevronDown: ChevronDown,
-  chevronUp: ChevronUp,
-  moreHorizontal: MoreHorizontal,
-  loader: Loader,
-};
-
-export function Icon({ name, size = 24, className = "", ...props }: IconProps) {
-  const IconComponent = iconMap[name];
-
-  if (!IconComponent) {
-    console.warn(`Icon "${name}" not found in icon map`);
-    return null;
-  }
-
-  return <IconComponent size={size} className={className} {...props} />;
-}
-
-/**
- * Export individual icons for direct usage
- */
-export {
-  Trophy,
-  Zap,
-  Flame,
-  Calendar,
-  Star,
-  Sun,
-  Cloud,
-  Sunset,
-  Moon,
-  Download,
-  ArrowUp,
-  ArrowDown,
-  TrendingUp,
-  Code,
-  GitBranch,
-  GitCommit,
-  GitPullRequest,
-  Clock,
-  AlertTriangle,
-  CheckCircle,
-  Settings,
-  LogOut,
-  Menu,
-  X,
-  Search,
-  Bell,
-  Heart,
-  Share2,
-  ChevronRight,
-  ChevronLeft,
-  ChevronDown,
-  ChevronUp,
-  MoreHorizontal,
-  Loader,
-};
diff --git a/src/components/IssueMetrics.tsx b/src/components/IssueMetrics.tsx
index 5eaa0dd4..fc3599e0 100644
--- a/src/components/IssueMetrics.tsx
+++ b/src/components/IssueMetrics.tsx
@@ -53,7 +53,7 @@ export default function IssueMetrics() {
       : null;
 
   const trendColor =
-    metrics && metrics.trend > 0 ? "text-green-400" : "text-red-400";
+    metrics && metrics.trend > 0 ? "text-[var(--success)]" : "text-[var(--error)]";
 
   return (
     <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
@@ -77,12 +77,12 @@ export default function IssueMetrics() {
           ))}
         </div>
       ) : error ? (
-        <div className="rounded-lg border border-red-500/20 bg-red-500/10 p-4 text-sm text-red-400">
+        <div className="rounded-lg border border-[var(--error)]/20 bg-[var(--error)]/10 p-4 text-sm text-[var(--error)]">
           <p>{error}</p>
           <button
             type="button"
             onClick={fetchMetrics}
-            className="mt-3 rounded-md border border-red-500/30 px-3 py-1.5 text-xs font-medium text-red-300 transition-colors hover:bg-red-500/10"
+            className="mt-3 rounded-md border border-[var(--error)]/30 px-3 py-1.5 text-xs font-medium text-[var(--error)] transition-colors hover:bg-[var(--error)]/10"
           >
             Try again
           </button>
diff --git a/src/components/PRBreakdownChart.tsx b/src/components/PRBreakdownChart.tsx
index af903cce..4e1b4357 100644
--- a/src/components/PRBreakdownChart.tsx
+++ b/src/components/PRBreakdownChart.tsx
@@ -68,12 +68,12 @@ export default function PRBreakdownChart() {
     return (
       <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
         <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)]">PR Breakdown</h2>
-        <div className="rounded-lg border border-red-500/20 bg-red-500/10 p-4 text-sm text-red-400">
+        <div className="rounded-lg border border-[var(--error)]/20 bg-[var(--error)]/10 p-4 text-sm text-[var(--error)]">
           <p>{error}</p>
           <button
             type="button"
             onClick={fetchBreakdown}
-            className="mt-3 rounded-md border border-red-500/30 px-3 py-1.5 text-xs font-medium text-red-300 transition-colors hover:bg-red-500/10"
+            className="mt-3 rounded-md border border-[var(--error)]/30 px-3 py-1.5 text-xs font-medium text-[var(--error)] transition-colors hover:bg-[var(--error)]/10"
           >
             Try again
           </button>
diff --git a/src/components/PRMetrics.tsx b/src/components/PRMetrics.tsx
index 3a7e4a3c..a3b57bcf 100644
--- a/src/components/PRMetrics.tsx
+++ b/src/components/PRMetrics.tsx
@@ -91,12 +91,12 @@ export default function PRMetrics() {
           <div className="h-[270px] rounded-lg bg-[var(--card-muted)] animate-pulse" aria-hidden="true" />
         </div>
       ) : error ? (
-        <div className="rounded-lg border border-red-500/20 bg-red-500/10 p-4 text-sm text-red-400">
+        <div className="rounded-lg border border-[var(--error)]/20 bg-[var(--error)]/10 p-4 text-sm text-[var(--error)]">
           <p>{error}</p>
           <button
             type="button"
             onClick={fetchMetrics}
-            className="mt-3 rounded-md border border-red-500/30 px-3 py-1.5 text-xs font-medium text-red-300 transition-colors hover:bg-red-500/10"
+            className="mt-3 rounded-md border border-[var(--error)]/30 px-3 py-1.5 text-xs font-medium text-[var(--error)] transition-colors hover:bg-[var(--error)]/10"
           >
             Try again
           </button>
diff --git a/src/components/PersonalRecords.tsx b/src/components/PersonalRecords.tsx
index 7a68975c..f9608a95 100644
--- a/src/components/PersonalRecords.tsx
+++ b/src/components/PersonalRecords.tsx
@@ -268,12 +268,12 @@ export default function PersonalRecords() {
           ))}
         </div>
       ) : error ? (
-        <div className="rounded-lg border border-red-500/20 bg-red-500/10 p-4 text-sm text-red-400">
+        <div className="rounded-lg border border-[var(--error)]/20 bg-[var(--error)]/10 p-4 text-sm text-[var(--error)]">
           <p>{error}</p>
           <button
             type="button"
             onClick={fetchRecords}
-            className="mt-3 rounded-md border border-red-500/30 px-3 py-1.5 text-xs font-medium text-red-300 transition-colors hover:bg-red-500/10"
+            className="mt-3 rounded-md border border-[var(--error)]/30 px-3 py-1.5 text-xs font-medium text-[var(--error)] transition-colors hover:bg-[var(--error)]/10"
           >
             Try again
           </button>
diff --git a/src/components/PinnedRepos.tsx b/src/components/PinnedRepos.tsx
index c6419f78..cc73a92c 100644
--- a/src/components/PinnedRepos.tsx
+++ b/src/components/PinnedRepos.tsx
@@ -61,12 +61,12 @@ export default function PinnedRepos() {
           ))}
         </div>
       ) : error ? (
-        <div className="rounded-lg border border-red-500/20 bg-red-500/10 p-4 text-sm text-red-400">
+        <div className="rounded-lg border border-[var(--error)]/20 bg-[var(--error)]/10 p-4 text-sm text-[var(--error)]">
           <p>{error}</p>
           <button
             type="button"
             onClick={fetchPinnedRepos}
-            className="mt-3 rounded-md border border-red-500/30 px-3 py-1.5 text-xs font-medium text-red-300 transition-colors hover:bg-red-500/10"
+            className="mt-3 rounded-md border border-[var(--error)]/30 px-3 py-1.5 text-xs font-medium text-[var(--error)] transition-colors hover:bg-[var(--error)]/10"
           >
             Try again
           </button>
@@ -115,7 +115,7 @@ export default function PinnedRepos() {
                   </span>
                 )}
                 <span className="flex items-center gap-1">
-                  <Star size={14} className="fill-yellow-400 text-yellow-400" aria-hidden="true" />
+                  <Star size={14} className="fill-[var(--accent)] text-[var(--accent)]" aria-hidden="true" />
                   {repo.stargazerCount}
                 </span>
                 <span className="flex items-center gap-1">
diff --git a/src/components/SignOutButton.tsx b/src/components/SignOutButton.tsx
index 5055fdda..f84db94c 100644
--- a/src/components/SignOutButton.tsx
+++ b/src/components/SignOutButton.tsx
@@ -21,7 +21,7 @@ export default function SignOutButton() {
             type="button"
             disabled={signingOut}
             onClick={handleSignOut}
-            className="inline-flex h-10 items-center gap-2 rounded-full border border-red-600/50 bg-red-600/80 px-4 text-sm font-semibold text-white transition-colors hover:bg-red-600 disabled:cursor-not-allowed disabled:opacity-70">
+            className="inline-flex h-10 items-center gap-2 rounded-full border border-[var(--error)]/50 bg-[var(--error)]/80 px-4 text-sm font-semibold text-white transition-colors hover:bg-[var(--error)] disabled:cursor-not-allowed disabled:opacity-70">
             {signingOut && (
                 <svg className="h-4 w-4 animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                     <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
diff --git a/src/components/StatsCard.tsx b/src/components/StatsCard.tsx
index ab575f6b..9497b8b0 100644
--- a/src/components/StatsCard.tsx
+++ b/src/components/StatsCard.tsx
@@ -300,7 +300,7 @@ function StatBox({
       }}
     >
       <div style={{ lineHeight: 1 }}>
-        <Icon size={28} strokeWidth={1.5} className={accent ? "text-blue-300" : "text-slate-100"} />
+        <Icon size={28} strokeWidth={1.5} className={accent ? "text-[var(--accent)]" : "text-[var(--muted-foreground)]"} />
       </div>
       <div>
         <div
diff --git a/src/components/StreakTracker.tsx b/src/components/StreakTracker.tsx
index 82a08bc9..587cb390 100644
--- a/src/components/StreakTracker.tsx
+++ b/src/components/StreakTracker.tsx
@@ -158,12 +158,12 @@ export default function StreakTracker() {
     return (
       <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
         <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)]">Commit Streaks</h2>
-        <div className="rounded-lg border border-red-500/20 bg-red-500/10 p-4 text-sm text-red-400">
+        <div className="rounded-lg border border-[var(--error)]/20 bg-[var(--error)]/10 p-4 text-sm text-[var(--error)]">
           <p>{error}</p>
           <button
             type="button"
-            onClick={fetchStreak}
-            className="mt-3 rounded-md border border-red-500/30 px-3 py-1.5 text-xs font-medium text-red-300 transition-colors hover:bg-red-500/10"
+            onClick={fetchStreaks}
+            className="mt-3 rounded-md border border-[var(--error)]/30 px-3 py-1.5 text-xs font-medium text-[var(--error)] transition-colors hover:bg-[var(--error)]/10"
           >
             Try again
           </button>
@@ -258,7 +258,7 @@ export default function StreakTracker() {
             aria-label="Copy streak stats to clipboard"
           >
             {copied ? (
-              <span className="text-xs font-medium text-green-500">Copied!</span>
+              <span className="text-xs font-medium text-[var(--success)]">Copied!</span>
             ) : (
               <Copy size={16} className="opacity-80 hover:opacity-100" />
             )}
@@ -376,7 +376,7 @@ export default function StreakTracker() {
                 type="button"
                 onClick={handleCancelFreeze}
                 disabled={cancelling}
-                className="rounded-md bg-red-500/10 px-2.5 py-1 text-xs font-medium text-red-400 transition hover:bg-red-500/20 disabled:opacity-60"
+                className="rounded-md bg-[var(--error)]/10 px-2.5 py-1 text-xs font-medium text-[var(--error)] transition hover:bg-[var(--error)]/20 disabled:opacity-60"
               >
                 {cancelling ? "Removing..." : "Yes, remove"}
               </button>
@@ -669,10 +669,10 @@ function calculateMonthlyTrend(contrib: ContributionData | undefined | null): Mo
 
     if (deltaCalc > 0) {
       text = `↑${formatted}% vs last month`;
-      colorClass = "text-green-500 font-medium";
+      colorClass = "text-[var(--success)] font-medium";
     } else if (deltaCalc < 0) {
       text = `↓${Math.abs(deltaCalc).toFixed(0)}% vs last month`;
-      colorClass = "text-red-500 font-medium";
+      colorClass = "text-[var(--error)] font-medium";
     } else {
       text = `=0% vs last month`;
       colorClass = "text-[var(--muted-foreground)] font-medium";
diff --git a/src/components/TopRepos.tsx b/src/components/TopRepos.tsx
index 3dc9a4be..25ccc449 100644
--- a/src/components/TopRepos.tsx
+++ b/src/components/TopRepos.tsx
@@ -130,12 +130,12 @@ export default function TopRepos() {
           ))}
         </div>
       ) : error ? (
-        <div className="rounded-lg border border-red-500/20 bg-red-500/10 p-4 text-sm text-red-400">
+        <div className="rounded-lg border border-[var(--error)]/20 bg-[var(--error)]/10 p-4 text-sm text-[var(--error)]">
           <p>{error}</p>
           <button
             type="button"
             onClick={fetchRepos}
-            className="mt-3 rounded-md border border-red-500/30 px-3 py-1.5 text-xs font-medium text-red-300 transition-colors hover:bg-red-500/10"
+            className="mt-3 rounded-md border border-[var(--error)]/30 px-3 py-1.5 text-xs font-medium text-[var(--error)] transition-colors hover:bg-[var(--error)]/10"
           >
             Try again
           </button>
@@ -187,10 +187,10 @@ export default function TopRepos() {
               : undefined;
             const badgeClass =
               health?.grade === "green"
-                ? "bg-green-500/15 text-green-300 border border-green-500/25"
+                ? "bg-[var(--success)]/15 text-[var(--success)] border border-[var(--success)]/25"
                 : health?.grade === "yellow"
                   ? "bg-yellow-500/15 text-yellow-300 border border-yellow-500/25"
-                  : "bg-red-500/15 text-red-300 border border-red-500/25";
+                  : "bg-[var(--error)]/15 text-[var(--error)] border border-[var(--error)]/25";
             return (
               <li key={repo.name}>
                 <div className="flex items-center justify-between text-sm mb-1">
diff --git a/src/components/WeeklySummaryCard.tsx b/src/components/WeeklySummaryCard.tsx
index ab0fc567..f6c51011 100644
--- a/src/components/WeeklySummaryCard.tsx
+++ b/src/components/WeeklySummaryCard.tsx
@@ -79,7 +79,7 @@ export default function WeeklySummaryCard() {
             ))}
           </div>
         ) : error ? (
-          <div className="mt-4 rounded-lg border border-red-500/20 bg-red-500/10 p-4 text-sm text-red-400">
+          <div className="mt-4 rounded-lg border border-[var(--error)]/20 bg-[var(--error)]/10 p-4 text-sm text-[var(--error)]">
             {error}
           </div>
         ) : summary ? (
@@ -93,12 +93,12 @@ export default function WeeklySummaryCard() {
                   {summary.commits.current}
                 </span>
                 {summary.commits.trend === "up" && (
-                  <span className="text-sm font-medium text-green-400">
+                  <span className="text-sm font-medium text-[var(--success)]">
                     + {summary.commits.delta}
                   </span>
                 )}
                 {summary.commits.trend === "down" && (
-                  <span className="text-sm font-medium text-red-400">
+                  <span className="text-sm font-medium text-[var(--error)]">
                     - {Math.abs(summary.commits.delta)}
                   </span>
                 )}