harivansh-afk/Habit-Tracker
1
0
Fork 0
mirror of https://github.com/harivansh-afk/Habit-Tracker.git synced 2026-04-19 23:01:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixed calendar current date highlighter

Browse source
This commit is contained in:
Harivansh Rathi 2024-11-21 15:39:07 -05:00
parent da9bd83f32
commit 36126e6a65
2 changed files with 26 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/components/Calendar.tsx
View file

@ -126,34 +126,37 @@ export const Calendar: React.FC<CalendarProps> = ({
border rounded-lg p-3 min-h-[80px] relative
${theme.border}
${isCurrentMonth ? theme.calendar.day.default : theme.calendar.day.otherMonth}
${isToday ? `
border-2
${theme.calendar.day.today}
ring-2 ring-offset-2 ring-blue-500 dark:ring-blue-400
bg-blue-50 dark:bg-blue-900/20
shadow-sm
` : ''}
${isToday ? theme.calendar.day.today : ''}
`}
>
<span className={`font-medium ${isCurrentMonth ? theme.text : theme.calendar.day.otherMonth}`}>
<span className={`
font-medium
${isCurrentMonth ? theme.text : theme.calendar.day.otherMonth}
${isToday ? 'relative' : ''}
`}>
{dayNumber}
</span>
{habits.length > 0 && (
<div className="absolute bottom-3 left-1/2 transform -translate-x-1/2">
<div className="group relative inline-block">
<div
className={`
h-5 px-2 rounded-full cursor-pointer
transition-colors duration-200 flex items-center justify-center
${completedHabits.length > 0
? 'bg-[#2ecc71] dark:bg-[#2ecc71] shadow-sm shadow-[#2ecc7150]'
: `bg-[#e9e9e8] dark:bg-[#393939]`
}
`}
>
<span className="text-[8px] font-medium text-black/70 dark:text-white/70">
{completedHabits.length}/{habits.length}
</span>
<div className="flex items-center gap-1.5">
{isToday && (
<div className="w-2 h-2 rounded-full bg-blue-500 dark:bg-blue-400" />
)}
<div
className={`
h-5 px-2 rounded-full cursor-pointer
transition-colors duration-200 flex items-center justify-center
${completedHabits.length > 0
? 'bg-[#2ecc71] dark:bg-[#2ecc71] shadow-sm shadow-[#2ecc7150]'
: `bg-[#e9e9e8] dark:bg-[#393939]`
}
`}
>
<span className="text-[8px] font-medium text-black/70 dark:text-white/70">
{completedHabits.length}/{habits.length}
</span>
</div>
</div>
<div
className={`