averyfelts/Stop_smoking_website_ver2
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Moved calendar legend to top of card for better visibility

Browse Source
This commit is contained in:
Avery Felts 2026-01-28 00:35:34 -07:00
parent b90686fac0
commit 9963db2465
1 changed files with 24 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/UsageCalendar.tsx
View File

@ -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"> <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"> <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"> <div className="flex flex-col lg:flex-row gap-4">
{/* Calendar */} {/* Calendar */}
<div className="w-full lg:w-auto block"> <div className="w-full lg:w-auto block">
@ -263,31 +287,6 @@ export function UsageCalendar({ usageData, onDataUpdate, religion, onReligionUpd
/> />
</div> </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> </CardContent>
</Card> </Card>