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

Update calendar colors: light blue for no usage, gold for today

Browse Source 
- 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>
This commit is contained in:
Avery Felts 2026-01-24 01:28:41 -07:00
parent d07e1bc8fb
commit 6f887fbcda
1 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/UsageCalendar.tsx
View File

@ -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>