From 9963db2465d54ca0620ee0a83b91c58ea777b39c Mon Sep 17 00:00:00 2001
From: Avery Felts <averyfelts@Averys-MacBook-Air.local>
Date: Wed, 28 Jan 2026 00:35:34 -0700
Subject: [PATCH] UI: Moved calendar legend to top of card for better
 visibility

---
 src/components/UsageCalendar.tsx | 49 ++++++++++++++++----------------
 1 file changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/components/UsageCalendar.tsx b/src/components/UsageCalendar.tsx
index 1e84d8d..4a7bc71 100644
--- a/src/components/UsageCalendar.tsx
+++ b/src/components/UsageCalendar.tsx
@@ -219,6 +219,30 @@ export function UsageCalendar({ usageData, onDataUpdate, religion, onReligionUpd
     <>
       <Card className="bg-card/80 backdrop-blur-xl shadow-xl drop-shadow-lg transition-all duration-300 border-white/10 overflow-hidden">
         <CardContent className="p-2 sm:p-6">
+          {/* Legend - moved to top */}
+          <div className="mb-4 grid grid-cols-2 sm:grid-cols-3 md:flex md:flex-wrap gap-x-3 gap-y-2 text-[10px] sm:text-xs font-medium opacity-80">
+            <div className="flex items-center gap-1.5">
+              <div className="w-3 h-3 rounded-full shrink-0" 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-1.5">
+              <div className="w-3 h-3 rounded-full shrink-0" 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-1.5">
+              <div className="w-3 h-3 rounded-full shrink-0" style={{ background: 'linear-gradient(135deg, rgba(239,68,68,0.7), rgba(185,28,28,0.8))' }} />
+              <span>Nicotine</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <div className="w-3 h-3 rounded-full shrink-0" style={{ background: 'linear-gradient(135deg, rgba(34,197,94,0.7), rgba(22,163,74,0.8))' }} />
+              <span>Marijuana</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <div className="w-3 h-3 rounded-full shrink-0" style={{ background: 'linear-gradient(135deg, rgba(239,68,68,0.8) 50%, rgba(34,197,94,0.8) 50%)' }} />
+              <span>Both</span>
+            </div>
+          </div>
+
           <div className="flex flex-col lg:flex-row gap-4">
             {/* Calendar */}
             <div className="w-full lg:w-auto block">
@@ -263,31 +287,6 @@ export function UsageCalendar({ usageData, onDataUpdate, religion, onReligionUpd
             />
           </div>
 
-          <div className="mt-4 grid grid-cols-2 sm:grid-cols-3 md:flex md:flex-wrap gap-3 text-sm">
-            <div className="flex items-center gap-2">
-              <div className="w-4 h-4 rounded shrink-0" 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 shrink-0" 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 shrink-0" style={{ background: 'linear-gradient(135deg, rgba(239,68,68,0.7), rgba(185,28,28,0.8))' }} />
-              <span>Nicotine</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <div className="w-4 h-4 rounded shrink-0" style={{ background: 'linear-gradient(135deg, rgba(34,197,94,0.7), rgba(22,163,74,0.8))' }} />
-              <span>Marijuana</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <div className="w-4 h-4 rounded shrink-0" style={{ background: 'linear-gradient(135deg, rgba(239,68,68,0.8) 50%, rgba(34,197,94,0.8) 50%)' }} />
-              <span>Both</span>
-            </div>
-          </div>
-          <p className="mt-2 text-xs text-muted-foreground">
-            Click any day to edit the count
-          </p>
         </CardContent>
       </Card>