fixed styling in dark mode when hovering

Author: saisandeepkoritala

src/components/CommunityPortal/Calendar/CommunityCalendar.module.css

@@ -157,9 +157,13 @@
 }
 
 .reactCalendarDarkMode :global(.react-calendar__navigation button) {
-  color: #ffffff;
+  color: #ffffff !important;
+  background: none !important;
+  min-width: 44px;
+  transition: all 0.2s ease;
 }
 
+
 .reactCalendar :global(.react-calendar__tile) {
   display: grid;
   height: 100px;
@@ -170,6 +174,9 @@
   overflow: hidden;
   padding: 4px;
   color: #1a202c;
+  /* color: #ffffff !important; */
+  background: none !important;
+  transition: background 0.2s ease;
 }
 
 .reactCalendarDarkMode :global(.react-calendar__tile) {
@@ -301,6 +308,9 @@
   color: #b71c1c;
 }
 
+
+
+
 /* Dark mode event item colors - use darker backgrounds with white text for better contrast */
 .reactCalendarDarkMode .eventItem.statusNew {
   background-color: #2d5016;
@@ -322,6 +332,10 @@
   color: #ffcdd2;
 }
 
+
+
+
+
 .reactCalendar .eventItem:hover {
   transform: scale(1.03);
 }
@@ -344,6 +358,8 @@
   transform: scale(1.05);
 }
 
+
+
 .reactCalendarDarkMode .moreEvents {
   background-color: #4a5568;
   color: #e2e8f0;
@@ -353,6 +369,8 @@
   background-color: #718096;
 }
 
+
+
 .react-calendar__tile--active,
 .react-calendar__tile--now {
   background-color: transparent !important;
@@ -383,6 +401,11 @@
   background: #e6f2ff !important;
 }
 
+
+
+
+
+
 .reactCalendarDarkMode :global(.react-calendar__tile.hasEvents) {
   background: #1e3a5f;
 }
@@ -400,6 +423,10 @@
   filter: brightness(1.5) contrast(1.3) !important;
 }
 
+
+
+
+
 .selectedDatePanel {
   margin-top: 16px;
   padding: 20px;
@@ -934,18 +961,25 @@
   color: #fff;
 }
 
+
 .reactCalendarDarkMode :global(.react-calendar__tile--active) {
-  background: #444;
-  color: #fff;
+  background-color: #2563eb !important;
+  color: #ffffff !important;
 }
 .reactCalendarDarkMode :global(.react-calendar__tile--now) {
-  background: #666;
-  color: #fff;
+  background-color: #4a5568 !important; 
+  border: 2px solid #60a5fa !important;
+  border-radius: 8px;
 }
 .reactCalendarDarkMode :global(.react-calendar__navigation__label) {
-  color: #fff;
+  background-color: #1e293b; /* Dark Blue-Gray */
+  border: 1px solid #334155;
+  font-family: Arial, Helvetica, sans-serif;
+  padding: 8px;
 }
 
+
+
 .overflowPopupDark {
   background: #1a202c !important;
   border: 1px solid #4a5568 !important;
@@ -993,3 +1027,78 @@
   letter-spacing: 0.5px;
   display: block;
 }
+
+
+/* Dark mode for react-calendar */
+/* Navigation Buttons - Base */
+/* .reactCalendarDarkMode :global(.react-calendar__navigation button) {
+  color: #ffffff !important;
+  background: none !important;
+  min-width: 44px;
+  transition: all 0.2s ease;
+} */
+
+/* Arrow Buttons - Hover & Focus (White Highlight) */
+.reactCalendarDarkMode :global(.react-calendar__navigation__prev2-button:enabled:hover),
+.reactCalendarDarkMode :global(.react-calendar__navigation__prev-button:enabled:hover),
+.reactCalendarDarkMode :global(.react-calendar__navigation__next-button:enabled:hover),
+.reactCalendarDarkMode :global(.react-calendar__navigation__next2-button:enabled:hover),
+.reactCalendarDarkMode :global(.react-calendar__navigation__prev2-button:enabled:focus),
+.reactCalendarDarkMode :global(.react-calendar__navigation__prev-button:enabled:focus),
+.reactCalendarDarkMode :global(.react-calendar__navigation__next-button:enabled:focus),
+.reactCalendarDarkMode :global(.react-calendar__navigation__next2-button:enabled:focus) {
+  background-color: #ffffff !important;
+  color: #000000 !important;
+}
+
+/* Month/Year Label - Hover, Focus & Active (Blue Highlight) */
+.reactCalendarDarkMode :global(.react-calendar__navigation__label:enabled:hover),
+.reactCalendarDarkMode :global(.react-calendar__navigation__label:enabled:focus),
+.reactCalendarDarkMode :global(.react-calendar__navigation__label:enabled:active) {
+  background-color: #3a506b !important;
+  color: #60a5fa !important;
+}
+
+/* Calendar Tiles - Base & Views */
+/* .reactCalendarDarkMode :global(.react-calendar__tile) {
+  color: #ffffff !important;
+  background: none !important;
+  transition: background 0.2s ease;
+} */
+
+/* Calendar Tiles - Hover & Focus */
+.reactCalendarDarkMode :global(.react-calendar__tile:enabled:hover),
+.reactCalendarDarkMode :global(.react-calendar__tile:enabled:focus) {
+  background-color: #3a506b !important;
+  color: #ffffff !important;
+}
+
+/* Active/Selected Day */
+/* .reactCalendarDarkMode :global(.react-calendar__tile--active) {
+  background-color: #2563eb !important;
+  color: #ffffff !important;
+} */
+
+/* Today's Date Highlight */
+/* .reactCalendarDarkMode :global(.react-calendar__tile--now) {
+  background-color: #4a5568 !important; 
+  border: 2px solid #60a5fa !important;
+  border-radius: 8px;
+} */
+
+.reactCalendarDarkMode :global(.react-calendar__tile--now abbr) {
+  color: #60a5fa !important;
+  font-weight: 900 !important;
+  text-decoration: underline;
+}
+
+/* Neighboring Months & View Consistency */
+.reactCalendarDarkMode :global(.react-calendar__month-view__days__day--neighboringMonth) {
+  color: #5a6b82 !important;
+}
+
+.reactCalendarDarkMode :global(.react-calendar__year-view .react-calendar__tile),
+.reactCalendarDarkMode :global(.react-calendar__decade-view .react-calendar__tile),
+.reactCalendarDarkMode :global(.react-calendar__century-view .react-calendar__tile) {
+  color: #ffffff !important;
+}