harivansh-afk/Habit-Tracker
1
0
Fork 0
mirror of https://github.com/harivansh-afk/Habit-Tracker.git synced 2026-04-15 09:01:16 +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={`

4
src/styles/theme.ts
View file

@ -37,7 +37,7 @@ export const lightTheme = {
day: {
default: 'bg-[#ffffff] hover:bg-[#f1f1ef] text-[#37352f] shadow-sm',
selected: 'bg-[#37352f] text-white',
today: 'border border-black/20 bg-blue-50/10',
today: 'ring-1 ring-inset ring-black/5 dark:ring-white/5',
otherMonth: 'text-[#787774] bg-[#fafafa]'
},
navigation: {
@ -97,7 +97,7 @@ export const darkTheme = {
day: {
default: 'bg-[#2f2f2f] hover:bg-[#363636] text-[#ffffff] shadow-md shadow-[#00000030]',
selected: 'bg-[#ffffff] text-[#191919]',
today: 'border border-white/20 bg-blue-900/5',
today: 'ring-1 ring-inset ring-white/10',
otherMonth: 'text-[#666666] bg-[#242424]'
},
navigation: {