harivansh-afk/Habit-Tracker
1
0
Fork 0
mirror of https://github.com/harivansh-afk/Habit-Tracker.git synced 2026-04-17 10:02:25 +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 border rounded-lg p-3 min-h-[80px] relative
${theme.border} ${theme.border}
${isCurrentMonth ? theme.calendar.day.default : theme.calendar.day.otherMonth} ${isCurrentMonth ? theme.calendar.day.default : theme.calendar.day.otherMonth}
${isToday ? ` ${isToday ? theme.calendar.day.today : ''}
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
` : ''}
`} `}
> >
<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} {dayNumber}
</span> </span>
{habits.length > 0 && ( {habits.length > 0 && (
<div className="absolute bottom-3 left-1/2 transform -translate-x-1/2"> <div className="absolute bottom-3 left-1/2 transform -translate-x-1/2">
<div className="group relative inline-block"> <div className="group relative inline-block">
<div <div className="flex items-center gap-1.5">
className={` {isToday && (
h-5 px-2 rounded-full cursor-pointer <div className="w-2 h-2 rounded-full bg-blue-500 dark:bg-blue-400" />
transition-colors duration-200 flex items-center justify-center )}
${completedHabits.length > 0 <div
? 'bg-[#2ecc71] dark:bg-[#2ecc71] shadow-sm shadow-[#2ecc7150]' className={`
: `bg-[#e9e9e8] dark:bg-[#393939]` 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]'
<span className="text-[8px] font-medium text-black/70 dark:text-white/70"> : `bg-[#e9e9e8] dark:bg-[#393939]`
{completedHabits.length}/{habits.length} }
</span> `}
>
<span className="text-[8px] font-medium text-black/70 dark:text-white/70">
{completedHabits.length}/{habits.length}
</span>
</div>
</div> </div>
<div <div
className={` className={`

4
src/styles/theme.ts
View file

@ -37,7 +37,7 @@ export const lightTheme = {
day: { day: {
default: 'bg-[#ffffff] hover:bg-[#f1f1ef] text-[#37352f] shadow-sm', default: 'bg-[#ffffff] hover:bg-[#f1f1ef] text-[#37352f] shadow-sm',
selected: 'bg-[#37352f] text-white', 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]' otherMonth: 'text-[#787774] bg-[#fafafa]'
}, },
navigation: { navigation: {
@ -97,7 +97,7 @@ export const darkTheme = {
day: { day: {
default: 'bg-[#2f2f2f] hover:bg-[#363636] text-[#ffffff] shadow-md shadow-[#00000030]', default: 'bg-[#2f2f2f] hover:bg-[#363636] text-[#ffffff] shadow-md shadow-[#00000030]',
selected: 'bg-[#ffffff] text-[#191919]', 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]' otherMonth: 'text-[#666666] bg-[#242424]'
}, },
navigation: { navigation: {