From 36126e6a6575c48b0f1b04bc3ab86dd2626954be Mon Sep 17 00:00:00 2001
From: rathi <rathiharivansh@gmail.com>
Date: Thu, 21 Nov 2024 15:39:07 -0500
Subject: [PATCH] fixed calendar current date highlighter

---
 src/components/Calendar.tsx | 45 ++++++++++++++++++++-----------------
 src/styles/theme.ts         |  4 ++--
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
index da8f95d..f4d114d 100644
--- a/src/components/Calendar.tsx
+++ b/src/components/Calendar.tsx
@@ -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={`
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index 2579188..2a856fa 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -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: {