From ec9b32249e12f58b50c8c36b0e77ba2399c7c04e Mon Sep 17 00:00:00 2001
From: Avery Felts <averyfelts@Averys-MacBook-Air.local>
Date: Tue, 27 Jan 2026 20:28:27 -0700
Subject: [PATCH] Enhance MoodTracker for light mode visibility

---
 src/components/MoodTracker.tsx | 147 +++++++++++++++++++++++++--------
 1 file changed, 113 insertions(+), 34 deletions(-)

diff --git a/src/components/MoodTracker.tsx b/src/components/MoodTracker.tsx
index e5e3c20..5f25803 100644
--- a/src/components/MoodTracker.tsx
+++ b/src/components/MoodTracker.tsx
@@ -9,7 +9,10 @@ import { ResponsiveContainer, BarChart, Bar, XAxis, Tooltip, Cell } from 'rechar
 import { format, subDays, startOfWeek, endOfWeek, eachDayOfInterval } from 'date-fns';
 import { cn } from '@/lib/utils';
 
+import { useTheme } from '@/lib/theme-context';
+
 export function MoodTracker() {
+    const { theme } = useTheme();
     const [entries, setEntries] = useState<MoodEntry[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [isSaving, setIsSaving] = useState(false);
@@ -104,6 +107,19 @@ export function MoodTracker() {
     }, [weekOffset]);
 
     const getGradient = () => {
+        if (theme === 'light') {
+            switch (activeMood) {
+                case 'good':
+                    return 'from-emerald-100 via-teal-50 to-emerald-100 border-emerald-200 shadow-emerald-500/5';
+                case 'neutral':
+                    return 'from-amber-100 via-orange-50 to-amber-100 border-amber-200 shadow-amber-500/5';
+                case 'bad':
+                    return 'from-rose-100 via-red-50 to-rose-100 border-rose-200 shadow-rose-500/5';
+                default:
+                    return 'from-indigo-50 via-white to-indigo-50 border-indigo-100 shadow-indigo-500/5';
+            }
+        }
+
         switch (activeMood) {
             case 'good':
                 return 'from-emerald-500/10 via-teal-500/5 to-emerald-500/10 border-emerald-500/20 shadow-emerald-500/10';
@@ -124,34 +140,55 @@ export function MoodTracker() {
         )}>
             <CardHeader className="pb-4">
                 <div className="flex items-center justify-between">
-                    <CardTitle className="text-base sm:text-lg font-medium flex items-center gap-2 text-white/90">
+                    <CardTitle className={cn(
+                        "text-base sm:text-lg font-medium flex items-center gap-2",
+                        theme === 'light' ? "text-slate-700" : "text-white/90"
+                    )}>
                         <div className={cn("p-1.5 rounded-lg transition-colors duration-500",
-                            activeMood === 'good' ? "bg-emerald-500/20 text-emerald-400" :
-                                activeMood === 'neutral' ? "bg-amber-500/20 text-amber-400" :
-                                    activeMood === 'bad' ? "bg-rose-500/20 text-rose-400" :
-                                        "bg-white/10 text-white/70"
+                            activeMood === 'good' ? (theme === 'light' ? "bg-emerald-100 text-emerald-600" : "bg-emerald-500/20 text-emerald-400") :
+                                activeMood === 'neutral' ? (theme === 'light' ? "bg-amber-100 text-amber-600" : "bg-amber-500/20 text-amber-400") :
+                                    activeMood === 'bad' ? (theme === 'light' ? "bg-rose-100 text-rose-600" : "bg-rose-500/20 text-rose-400") :
+                                        (theme === 'light' ? "bg-indigo-100 text-indigo-500" : "bg-white/10 text-white/70")
                         )}>
                             <Sparkles className="w-4 h-4" />
                         </div>
                         How are you feeling?
                     </CardTitle>
 
-                    <div className="flex items-center gap-1 bg-black/20 rounded-full p-0.5 border border-white/5">
+                    <div className={cn(
+                        "flex items-center gap-1 rounded-full p-0.5 border",
+                        theme === 'light'
+                            ? "bg-slate-100 border-slate-200"
+                            : "bg-black/20 border-white/5"
+                    )}>
                         <Button
                             variant="ghost"
                             size="icon"
-                            className="h-6 w-6 rounded-full text-white/50 hover:text-white hover:bg-white/10"
+                            className={cn(
+                                "h-6 w-6 rounded-full",
+                                theme === 'light'
+                                    ? "text-slate-400 hover:text-slate-700 hover:bg-white"
+                                    : "text-white/50 hover:text-white hover:bg-white/10"
+                            )}
                             onClick={() => setWeekOffset(prev => prev + 1)}
                         >
                             <ChevronLeft className="w-3 h-3" />
                         </Button>
-                        <span className="text-[10px] font-medium px-2 text-white/60 uppercase tracking-wider min-w-[60px] text-center">
+                        <span className={cn(
+                            "text-[10px] font-medium px-2 uppercase tracking-wider min-w-[60px] text-center",
+                            theme === 'light' ? "text-slate-500" : "text-white/60"
+                        )}>
                             {weekLabel}
                         </span>
                         <Button
                             variant="ghost"
                             size="icon"
-                            className="h-6 w-6 rounded-full text-white/50 hover:text-white hover:bg-white/10 disabled:opacity-20"
+                            className={cn(
+                                "h-6 w-6 rounded-full disabled:opacity-20",
+                                theme === 'light'
+                                    ? "text-slate-400 hover:text-slate-700 hover:bg-white"
+                                    : "text-white/50 hover:text-white hover:bg-white/10"
+                            )}
                             disabled={weekOffset === 0}
                             onClick={() => setWeekOffset(prev => prev - 1)}
                         >
@@ -181,19 +218,29 @@ export function MoodTracker() {
                                     "group relative flex flex-col items-center justify-center gap-3 p-4 rounded-2xl transition-all duration-300",
                                     "border",
                                     isSelected
-                                        ? `bg-${item.color}-500/20 border-${item.color}-500/50 shadow-[0_0_20px_-5px_var(--color-${item.color}-500)]`
-                                        : "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20 hover:-translate-y-1"
+                                        ? (theme === 'light'
+                                            ? `bg-${item.color}-100 border-${item.color}-200 shadow-sm`
+                                            : `bg-${item.color}-500/20 border-${item.color}-500/50 shadow-[0_0_20px_-5px_var(--color-${item.color}-500)]`)
+                                        : (theme === 'light'
+                                            ? "bg-white border-slate-200 hover:bg-slate-50 hover:border-slate-300 hover:-translate-y-1 shadow-sm"
+                                            : "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20 hover:-translate-y-1")
                                 )}
                             >
                                 <div className={cn(
                                     "p-3 rounded-xl transition-all duration-300",
-                                    isSelected ? `bg-${item.color}-500 text-white shadow-lg scale-110` : `bg-white/5 text-white/60 group-hover:text-${item.color}-400 group-hover:scale-110`
+                                    isSelected
+                                        ? `bg-${item.color}-500 text-white shadow-lg scale-110`
+                                        : (theme === 'light'
+                                            ? `bg-slate-100 text-slate-400 group-hover:text-${item.color}-500 group-hover:scale-110`
+                                            : `bg-white/5 text-white/60 group-hover:text-${item.color}-400 group-hover:scale-110`)
                                 )}>
                                     <Icon className={cn("w-6 h-6", isSelected && "animate-pulse-subtle")} />
                                 </div>
                                 <span className={cn(
                                     "text-xs font-semibold tracking-wide uppercase transition-colors",
-                                    isSelected ? "text-white" : "text-white/40 group-hover:text-white/80"
+                                    isSelected
+                                        ? (theme === 'light' ? `text-${item.color}-700` : "text-white")
+                                        : (theme === 'light' ? "text-slate-400 group-hover:text-slate-600" : "text-white/40 group-hover:text-white/80")
                                 )}>
                                     {item.label}
                                 </span>
@@ -207,11 +254,22 @@ export function MoodTracker() {
                     "relative overflow-hidden transition-all duration-500 ease-out",
                     affirmation ? "opacity-100 max-h-32 translate-y-0" : "opacity-0 max-h-0 translate-y-4"
                 )}>
-                    <div className="bg-gradient-to-r from-indigo-500/10 to-purple-500/10 border border-indigo-500/20 rounded-xl p-4 flex gap-4 items-center">
-                        <div className="p-2 bg-indigo-500/20 rounded-full shrink-0">
-                            <Quote className="w-4 h-4 text-indigo-400" />
+                    <div className={cn(
+                        "rounded-xl p-4 flex gap-4 items-center border",
+                        theme === 'light'
+                            ? "bg-indigo-50 border-indigo-100"
+                            : "bg-gradient-to-r from-indigo-500/10 to-purple-500/10 border-indigo-500/20"
+                    )}>
+                        <div className={cn(
+                            "p-2 rounded-full shrink-0",
+                            theme === 'light' ? "bg-indigo-100 text-indigo-500" : "bg-indigo-500/20"
+                        )}>
+                            <Quote className={cn("w-4 h-4", theme === 'light' ? "text-indigo-500" : "text-indigo-400")} />
                         </div>
-                        <p className="text-sm font-medium text-indigo-100/90 leading-relaxed">
+                        <p className={cn(
+                            "text-sm font-medium leading-relaxed",
+                            theme === 'light' ? "text-indigo-900" : "text-indigo-100/90"
+                        )}>
                             {affirmation}
                         </p>
                     </div>
@@ -219,32 +277,50 @@ export function MoodTracker() {
 
                 {/* Mini Graph */}
                 <div className="space-y-4 pt-2">
-                    <div className="flex items-center gap-2 text-xs font-medium text-white/40 uppercase tracking-widest px-1">
+                    <div className={cn(
+                        "flex items-center gap-2 text-xs font-medium uppercase tracking-widest px-1",
+                        theme === 'light' ? "text-slate-400" : "text-white/40"
+                    )}>
                         <TrendingUp className="w-3 h-3" />
                         <span>Mood Tracking</span>
                     </div>
 
-                    <div className="h-32 w-full bg-white/5 rounded-xl border border-white/5 p-4 relative group">
+                    <div className={cn(
+                        "h-32 w-full rounded-xl border p-4 relative group",
+                        theme === 'light'
+                            ? "bg-white/50 border-slate-200"
+                            : "bg-white/5 border-white/5"
+                    )}>
                         {/* Grid lines background effect */}
-                        <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:14px_14px] mask-image-linear-gradient(to_bottom,transparent,black)] pointer-events-none" />
+                        <div className={cn(
+                            "absolute inset-0 bg-[size:14px_14px] pointer-events-none",
+                            theme === 'light'
+                                ? "bg-[linear-gradient(to_right,rgba(0,0,0,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,0,0,0.03)_1px,transparent_1px)] mask-image-linear-gradient(to_bottom,transparent,black)]"
+                                : "bg-[linear-gradient(to_right,rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.03)_1px,transparent_1px)] mask-image-linear-gradient(to_bottom,transparent,black)]"
+                        )} />
 
                         <ResponsiveContainer width="100%" height="100%">
                             <BarChart data={weeklyData} barSize={36}>
                                 <Tooltip
-                                    cursor={{ fill: 'rgba(255,255,255,0.05)', radius: 4 }}
+                                    cursor={{ fill: theme === 'light' ? 'rgba(0,0,0,0.03)' : 'rgba(255,255,255,0.05)', radius: 4 }}
                                     content={({ active, payload }) => {
                                         if (active && payload && payload.length) {
                                             const data = payload[0].payload;
                                             if (data.isPlaceholder) return null;
 
                                             return (
-                                                <div className="bg-slate-900/90 border border-white/10 p-2 rounded-lg shadow-xl backdrop-blur-md">
-                                                    <p className="text-xs font-medium text-white mb-1">{data.fullDate}</p>
+                                                <div className={cn(
+                                                    "p-2 rounded-lg shadow-xl backdrop-blur-md border",
+                                                    theme === 'light'
+                                                        ? "bg-white/95 border-slate-200 text-slate-900"
+                                                        : "bg-slate-900/90 border-white/10 text-white"
+                                                )}>
+                                                    <p className={cn("text-xs font-medium mb-1", theme === 'light' ? "text-slate-600" : "text-white")}>{data.fullDate}</p>
                                                     <p className={cn(
                                                         "text-xs font-bold capitalize",
-                                                        data.mood === 'good' ? "text-emerald-400" :
-                                                            data.mood === 'neutral' ? "text-amber-400" :
-                                                                "text-rose-400"
+                                                        data.mood === 'good' ? (theme === 'light' ? "text-emerald-600" : "text-emerald-400") :
+                                                            data.mood === 'neutral' ? (theme === 'light' ? "text-amber-600" : "text-amber-400") :
+                                                                (theme === 'light' ? "text-rose-600" : "text-rose-400")
                                                     )}>
                                                         {data.mood}
                                                     </p>
@@ -258,22 +334,25 @@ export function MoodTracker() {
                                     dataKey="name"
                                     axisLine={false}
                                     tickLine={false}
-                                    tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 10, dy: 10 }}
+                                    tick={{ fill: theme === 'light' ? 'rgba(0,0,0,0.4)' : 'rgba(255,255,255,0.4)', fontSize: 10, dy: 10 }}
                                 />
                                 <Bar dataKey="value" radius={[4, 4, 4, 4]}>
                                     {weeklyData.map((entry, index) => {
-                                        let color = 'rgba(255,255,255,0.05)'; // Placeholder color
-
-                                        if (!entry.isPlaceholder) {
-                                            if (entry.mood === 'good') color = '#10b981'; // emerald-500
-                                            else if (entry.mood === 'neutral') color = '#f59e0b'; // amber-500
-                                            else if (entry.mood === 'bad') color = '#f43f5e'; // rose-500
+                                        let fillColor;
+                                        if (entry.isPlaceholder) {
+                                            fillColor = theme === 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.05)';
+                                        } else if (entry.mood === 'good') {
+                                            fillColor = theme === 'light' ? '#10b981' : '#34d399'; // emerald-500 : emerald-400
+                                        } else if (entry.mood === 'neutral') {
+                                            fillColor = theme === 'light' ? '#f59e0b' : '#fbbf24'; // amber-500 : amber-400
+                                        } else {
+                                            fillColor = theme === 'light' ? '#f43f5e' : '#fb7185'; // rose-500 : rose-400
                                         }
 
                                         return (
                                             <Cell
                                                 key={`cell-${index}`}
-                                                fill={color}
+                                                fill={fillColor}
                                                 className="transition-all duration-300 hover:opacity-80"
                                             />
                                         );