From 6f887fbcda12347a0dea105f1a3b3086ba8dcefb Mon Sep 17 00:00:00 2001
From: Avery Felts <averyfelts@Averys-MacBook-Air.local>
Date: Sat, 24 Jan 2026 01:28:41 -0700
Subject: [PATCH] Update calendar colors: light blue for no usage, gold for
 today

- Days with no tracking now show light blue gradient
- Current day (today) shows light gold gradient when no usage
- Gold ring around today for visibility
- Today shows substance colors if usage is logged
- Updated legend to include Today indicator

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/UsageCalendar.tsx | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/UsageCalendar.tsx b/src/components/UsageCalendar.tsx
index dc019a5..d90fa91 100644
--- a/src/components/UsageCalendar.tsx
+++ b/src/components/UsageCalendar.tsx
@@ -89,14 +89,22 @@ export function UsageCalendar({ usageData, onDataUpdate }: UsageCalendarProps) {
     setEditWeedCount('');
   };
 
-  const getColorStyle = useCallback((nicotineCount: number, weedCount: number): React.CSSProperties => {
+  const getColorStyle = useCallback((nicotineCount: number, weedCount: number, isToday: boolean): React.CSSProperties => {
     const hasNicotine = nicotineCount > 0;
     const hasWeed = weedCount > 0;
 
-    if (!hasNicotine && !hasWeed) {
-      // No usage - neutral gray
+    // Current day - light gold hue (takes priority for styling the base)
+    if (isToday && !hasNicotine && !hasWeed) {
       return {
-        background: 'linear-gradient(135deg, rgba(100, 100, 100, 0.3) 0%, rgba(80, 80, 80, 0.3) 100%)',
+        background: 'linear-gradient(135deg, rgba(251, 191, 36, 0.6) 0%, rgba(245, 158, 11, 0.7) 100%)',
+        color: 'white',
+      };
+    }
+
+    if (!hasNicotine && !hasWeed) {
+      // No usage - light blue hue
+      return {
+        background: 'linear-gradient(135deg, rgba(96, 165, 250, 0.5) 0%, rgba(59, 130, 246, 0.6) 100%)',
         color: 'white',
       };
     }
@@ -133,10 +141,11 @@ export function UsageCalendar({ usageData, onDataUpdate }: UsageCalendarProps) {
     const dateToCheck = new Date(date);
     dateToCheck.setHours(0, 0, 0, 0);
     const isFuture = dateToCheck > today;
+    const isToday = dateToCheck.getTime() === today.getTime();
 
     const nicotineCount = isFuture ? 0 : getUsageForDate(date, 'nicotine');
     const weedCount = isFuture ? 0 : getUsageForDate(date, 'weed');
-    const colorStyle = !isFuture ? getColorStyle(nicotineCount, weedCount) : {};
+    const colorStyle = !isFuture ? getColorStyle(nicotineCount, weedCount, isToday) : {};
 
     return (
       <button
@@ -144,7 +153,7 @@ export function UsageCalendar({ usageData, onDataUpdate }: UsageCalendarProps) {
         style={!isFuture ? colorStyle : undefined}
         className={`relative w-full h-full p-2 text-sm rounded-md transition-all hover:opacity-80 ${
           isFuture ? 'text-muted-foreground opacity-30 cursor-not-allowed' : 'cursor-pointer shadow-sm'
-        } ${modifiers.today ? 'ring-2 ring-white ring-offset-2 ring-offset-background' : ''}`}
+        } ${isToday ? 'ring-2 ring-amber-400 ring-offset-2 ring-offset-background' : ''}`}
         onClick={() => !isFuture && handleDateSelect(date)}
         disabled={isFuture}
       >
@@ -190,9 +199,13 @@ export function UsageCalendar({ usageData, onDataUpdate }: UsageCalendarProps) {
           />
           <div className="mt-4 flex flex-wrap gap-4 text-sm">
             <div className="flex items-center gap-2">
-              <div className="w-4 h-4 rounded" style={{ background: 'linear-gradient(135deg, rgba(100,100,100,0.3), rgba(80,80,80,0.3))' }} />
+              <div className="w-4 h-4 rounded" style={{ background: 'linear-gradient(135deg, rgba(96,165,250,0.5), rgba(59,130,246,0.6))' }} />
               <span>No usage</span>
             </div>
+            <div className="flex items-center gap-2">
+              <div className="w-4 h-4 rounded" style={{ background: 'linear-gradient(135deg, rgba(251,191,36,0.6), rgba(245,158,11,0.7))' }} />
+              <span>Today</span>
+            </div>
             <div className="flex items-center gap-2">
               <div className="w-4 h-4 rounded" style={{ background: 'linear-gradient(135deg, rgba(239,68,68,0.7), rgba(185,28,28,0.8))' }} />
               <span>Nicotine</span>