feat: Changes icons to lucide icons

package.json

@@ -18,6 +18,7 @@
     "html-to-image": "^1.11.13",
     "jspdf": "^4.2.1",
     "jspdf-autotable": "^5.0.7",
+    "lucide-react": "^0.475.0",
     "next": "^14.2.35",
     "next-auth": "^4.24.7",
     "react": "^18",

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..."

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;

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>
       )}
     </>

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>

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",
           },
         ];
@@ -128,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>

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>
       ) : (
         <>

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-[var(--success)]" aria-hidden="true" />
           <span>Copied!</span>
         </>
       ) : (
         <>
-          <span>🔗</span>
+          <Link size={16} aria-hidden="true" />
           <span>Copy link</span>
         </>
       )}

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>