From c6c189ccd2b6daaf2569069e453dbdeb1dce314f Mon Sep 17 00:00:00 2001 From: ChiragBellara Date: Tue, 3 Mar 2026 16:22:40 -0800 Subject: [PATCH] fixed past event registration condition and stylint errors --- .../Calendar/CommunityCalendar.jsx | 24 +- .../Calendar/CommunityCalendar.module.css | 493 +++++++++--------- 2 files changed, 269 insertions(+), 248 deletions(-) diff --git a/src/components/CommunityPortal/Calendar/CommunityCalendar.jsx b/src/components/CommunityPortal/Calendar/CommunityCalendar.jsx index ebd19e7180..94edd7b8eb 100644 --- a/src/components/CommunityPortal/Calendar/CommunityCalendar.jsx +++ b/src/components/CommunityPortal/Calendar/CommunityCalendar.jsx @@ -36,7 +36,6 @@ export default function CommunityCalendar() { setEvents(response.data.events || []); } catch (err) { setError('Failed to load events'); - console.error('Error fetching calendar events:', err); } finally { setIsLoading(false); } @@ -58,6 +57,7 @@ export default function CommunityCalendar() { description: event.description || `Join us for ${event.title}`, // Ensure location is present or default location: event.location || 'Online', + isOver: eventDate < new Date(), }; }); }, [events]); @@ -634,7 +634,6 @@ export default function CommunityCalendar() { {selectedEvent.status} -
{[ ['Type', selectedEvent.type], @@ -656,12 +655,21 @@ export default function CommunityCalendar() {
- - + {selectedEvent.isOver ? ( + + ) : ( + <> + + + + + )}
diff --git a/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css b/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css index dfe3b9b385..02a3be2641 100644 --- a/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css +++ b/src/components/CommunityPortal/Calendar/CommunityCalendar.module.css @@ -70,7 +70,7 @@ .reactCalendarDarkMode { background-color: #1b2a41; - color: #ffffff; + color: #fff; border: 1px solid #444; } @@ -140,7 +140,7 @@ .reactCalendar :global(.react-calendar__month-view__days__day) { height: 80px; - border: 1px solid #000000; + border: 1px solid #000; vertical-align: top; padding: 2px; } @@ -148,7 +148,7 @@ .reactCalendar :global(.react-calendar__navigation) { background-color: #f9f9f9; border-bottom: 1px solid #ddd; - margin-bottom: 0px !important; + margin-bottom: 0 !important; } .reactCalendar :global(.react-calendar__tile) { @@ -165,7 +165,7 @@ .reactCalendarDarkMode :global(.react-calendar__tile) { background: transparent; - color: #ffffff; + color: #fff; } .reactCalendar :global(.react-calendar__tile):hover { @@ -190,16 +190,16 @@ .reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover { background-color: #1a2332 !important; border-color: #4a9eff; - color: #ffffff !important; + color: #fff !important; } .reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover :global(abbr), .reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover :global(span) { - color: #ffffff !important; + color: #fff !important; font-weight: 900 !important; font-size: 1.2em !important; - text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 0.9), - 0 2px 4px rgba(0, 0, 0, 1), 0 4px 8px rgba(0, 0, 0, 0.9) !important; + text-shadow: 0 0 8px rgb(255 255 255 / 100%), 0 0 10px rgb(255 255 255 / 90%), + 0 2px 4px rgb(0 0 0 / 100%), 0 4px 8px rgb(0 0 0 / 90%) !important; filter: brightness(1.8) contrast(1.5) !important; } @@ -219,17 +219,17 @@ line-height: 1.1; } +.reactCalendarDarkMode :global(.react-calendar__tile) .tileEvents { + color: #e2e8f0; +} + /* Ensure tileEvents text is readable on selected date */ .reactCalendar :global(.react-calendar__tile.selectedDate) .tileEvents { color: #1a202c; } -.reactCalendarDarkMode :global(.react-calendar__tile) .tileEvents { - color: #e2e8f0; -} - .reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) .tileEvents { - color: #ffffff; + color: #fff; } .reactCalendar .eventItem { @@ -255,7 +255,7 @@ /* Ensure event items are readable in dark mode */ .reactCalendarDarkMode .eventItem { - color: #ffffff; + color: #fff; font-weight: 600; } @@ -300,6 +300,17 @@ color: #ffcdd2; } +.overflowPopup .eventItem { + margin-bottom: 8px; + font-size: 0.9rem; + padding: 6px 10px; + border-radius: 6px; + color: #fff; + font-weight: 600; + cursor: pointer; + transition: transform 0.2s ease; +} + .reactCalendar .eventItem:hover { transform: scale(1.03); } @@ -375,11 +386,11 @@ } .reactCalendarDarkMode :global(.react-calendar__tile.hasEvents.selectedDate) :global(abbr) { - color: #ffffff !important; + color: #fff !important; font-weight: 900 !important; font-size: 1.1em !important; - text-shadow: 0 0 6px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 255, 255, 0.8), - 0 2px 4px rgba(0, 0, 0, 1), 0 4px 8px rgba(0, 0, 0, 0.8) !important; + text-shadow: 0 0 6px rgb(255 255 255 / 100%), 0 0 8px rgb(255 255 255 / 80%), + 0 2px 4px rgb(0 0 0 / 100%), 0 4px 8px rgb(0 0 0 / 80%) !important; filter: brightness(1.5) contrast(1.3) !important; } @@ -410,6 +421,18 @@ align-items: flex-start; } +.modalHeader h2 { + margin: 0; + font-size: 1.5rem; + font-weight: 600; + color: #2d3748; +} + +.calendarActivitySectionDarkMode h2 { + color: #fff; + margin-bottom: 10px; +} + .selectedDatePanelDarkMode .selectedDateHeader h2 { color: #f7fafc; } @@ -436,9 +459,9 @@ .selectedEventCard { border: 1px solid #e2e8f0; border-radius: 12px; - background-color: #ffffff; + background-color: #fff; padding: 16px 20px; - box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06); + box-shadow: 0 4px 16px rgb(15 23 42 / 6%); transition: border-color 0.2s ease, box-shadow 0.2s ease; } @@ -446,12 +469,12 @@ background-color: #1f2937; border-color: #374151; color: #f9fafb; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); + box-shadow: 0 4px 16px rgb(0 0 0 / 40%); } .selectedEventCardActive { border-color: #3182ce; - box-shadow: 0 6px 20px rgba(49, 130, 206, 0.2); + box-shadow: 0 6px 20px rgb(49 130 206 / 20%); } .selectedEventHeader { @@ -486,7 +509,7 @@ .eventDetailButton { border: none; background-color: #1e40af; - color: #ffffff; + color: #fff; padding: 8px 14px; border-radius: 6px; font-size: 0.85rem; @@ -532,22 +555,20 @@ .eventModalOverlay { position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); + inset: 0; + background-color: rgb(0 0 0 / 50%); display: flex; justify-content: center; align-items: center; z-index: 1000; - animation: fadeIn 0.2s ease-out; + animation: fade-in 0.2s ease-out; } -@keyframes fadeIn { +@keyframes fade-in { from { opacity: 0; } + to { opacity: 1; } @@ -556,21 +577,22 @@ .eventModal { background: white; border-radius: 12px; - box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); + box-shadow: 0 10px 40px rgb(0 0 0 / 20%); max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; - animation: slideIn 0.3s ease-out; + animation: slide-in 0.3s ease-out; position: relative; z-index: 2; } -@keyframes slideIn { +@keyframes slide-in { from { opacity: 0; transform: translateY(-20px) scale(0.95); } + to { opacity: 1; transform: translateY(0) scale(1); @@ -581,7 +603,7 @@ background: #1a202c; color: #e2e8f0; border: 1px solid #4a5568; - box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); + box-shadow: 0 10px 40px rgb(0 0 0 / 60%); } .modalHeader { @@ -598,15 +620,8 @@ border-radius: 12px 12px 0 0; } -.modalHeader h2 { - margin: 0; - font-size: 1.5rem; - font-weight: 600; - color: #2d3748; -} - .eventModalDark .modalHeader h2 { - color: #ffffff; + color: #fff; } .modalClose { @@ -636,12 +651,13 @@ .eventModalDark .modalClose:hover { background-color: #4a5568; - color: #ffffff; + color: #fff; } .modalContent { padding: 20px 24px; } + .eventModalDark .modalContent { background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); } @@ -667,6 +683,20 @@ margin-bottom: 20px; } +.eventDescription { + margin-bottom: 24px; +} + +.eventDescription label { + display: block; + font-size: 0.8rem; + font-weight: 600; + color: #718096; + margin-bottom: 8px; + text-transform: uppercase; + letter-spacing: 0.5px; +} + .detailItem { display: flex; flex-direction: column; @@ -692,21 +722,7 @@ } .eventModalDark .detailItem span { - color: #ffffff; -} - -.eventDescription { - margin-bottom: 24px; -} - -.eventDescription label { - display: block; - font-size: 0.8rem; - font-weight: 600; - color: #718096; - margin-bottom: 8px; - text-transform: uppercase; - letter-spacing: 0.5px; + color: #fff; } .eventModalDark .eventDescription label { @@ -720,6 +736,11 @@ color: #4a5568; } +.activityNoEventsMessage p { + margin: 0; + font-size: 1rem; +} + .eventModalDark .eventDescription p { color: #f7fafc; } @@ -738,7 +759,8 @@ } .btnPrimary, -.btnSecondary { +.btnSecondary, +.btnDisabled { padding: 10px 20px; border: none; border-radius: 8px; @@ -770,9 +792,15 @@ transform: translateY(-1px); } +.btnDisabled{ + background-color: #c0c0c0; + color: white; + cursor: not-allowed; +} + .eventModalDark .btnSecondary { background-color: #4a5568; - color: #ffffff; + color: #fff; border-color: #718096; } @@ -789,22 +817,25 @@ /* Better dark mode contrast for all text elements */ .eventModalDark * { - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + text-shadow: 0 1px 2px rgb(0 0 0 / 10%); } /* Responsive Design */ -@media (max-width: 768px) { +@media (width <= 768px) { .eventModal { width: 95%; max-height: 90vh; } + .eventDetailsGrid { grid-template-columns: 1fr; gap: 12px; } + .modalActions { flex-direction: column; } + .btnPrimary, .btnSecondary { width: 100%; @@ -821,11 +852,6 @@ color: #f7fafc; } -.calendarActivitySectionDarkMode h2 { - color: #fff; - margin-bottom: 10px; -} - .calendarActivityList { list-style: none; padding: 0; @@ -907,11 +933,6 @@ color: #666; } -.activityNoEventsMessage p { - margin: 0; - font-size: 1rem; -} - .calendarActivitySectionDarkMode .activityNoEventsMessage { color: #cbd5e0; } @@ -942,169 +963,19 @@ color: #fff !important; } -/* Override for selected date - must be pure white with maximum visibility */ -.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(abbr) { - color: #ffffff !important; - font-weight: 900 !important; - font-size: 1.1em !important; - text-shadow: 0 0 6px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 255, 255, 0.8), - 0 2px 4px rgba(0, 0, 0, 1), 0 4px 8px rgba(0, 0, 0, 0.8) !important; - -webkit-text-stroke: 0.5px rgba(255, 255, 255, 1); - filter: brightness(1.5) contrast(1.3) !important; - background-color: #0f172a !important; - padding: 2px 4px; - border-radius: 3px; -} - -.reactCalendarDarkMode :global(.react-calendar__tile--active) { - background: #444 !important; - color: #fff !important; -} - -.reactCalendarDarkMode :global(.react-calendar__tile--active) :global(abbr) { - color: #fff !important; -} - -/* CRITICAL: Override react-calendar's default active/selected styles in dark mode - NEVER allow light background */ -.reactCalendarDarkMode :global(.react-calendar__tile--active.selectedDate), -.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate.react-calendar__tile--active) { - background-color: #1a2332 !important; - color: #ffffff !important; -} - -.reactCalendarDarkMode :global(.react-calendar__tile--active.selectedDate) :global(abbr), -.reactCalendarDarkMode - :global(.react-calendar__tile.selectedDate.react-calendar__tile--active) - :global(abbr) { - color: #ffffff !important; - font-weight: 900 !important; - font-size: 1.2em !important; - text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 0.9), - 0 2px 4px rgba(0, 0, 0, 1), 0 4px 8px rgba(0, 0, 0, 0.9) !important; - filter: brightness(1.8) contrast(1.5) !important; -} - -.reactCalendarDarkMode :global(.react-calendar__tile--now) :global(abbr) { - color: #fff !important; -} -.reactCalendarDarkMode :global(.react-calendar__navigation__label) { - color: #fff; -} - -.reactCalendarDarkMode :global(.react-calendar__navigation__arrow) { - color: #fff; -} - -.reactCalendarDarkMode :global(.react-calendar__navigation) { - background-color: #1b2a41; - border-bottom: 1px solid #444; -} - -.reactCalendarDarkMode :global(.react-calendar__navigation button) { - color: #ffffff; -} - -.reactCalendarDarkMode :global(.react-calendar__navigation button:enabled:hover), -.reactCalendarDarkMode :global(.react-calendar__navigation button:enabled:focus) { - background-color: #2d3748; -} - -.reactCalendarDarkMode :global(.react-calendar__month-view__weekdays__weekday) { - color: #fff; -} - -.reactCalendarDarkMode :global(.react-calendar__month-view__weekdays__weekday) abbr { - color: #fff; - text-decoration: none; -} - -.selectedDate { - box-shadow: inset 0 0 0 2px #3182ce; - border-radius: 8px; - background-color: #e6f2ff !important; -} - -/* Override for dark mode - keep dark background, never light */ -.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) { - background-color: #1a2332 !important; - box-shadow: inset 0 0 0 2px #4a9eff !important; -} - -/* Force dark blue text on selected date number in light mode - target the abbr element specifically */ -.reactCalendar :global(.react-calendar__tile.selectedDate) :global(abbr) { - color: #0d47a1 !important; - font-weight: 700 !important; -} - -/* Also target any direct text content */ -.reactCalendar :global(.react-calendar__tile.selectedDate) { - color: #0d47a1 !important; -} - -/* But don't override event item colors */ -.reactCalendar :global(.react-calendar__tile.selectedDate) .eventItem { - color: inherit; -} - -/* Force bright white text on date number in dark mode - use maximum specificity with all variations */ -.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(abbr), -.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(span), -.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate), -.reactCalendarDarkMode.reactCalendar :global(.react-calendar__tile.selectedDate) :global(abbr), -.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate abbr), -.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate span) { - color: #ffffff !important; - font-weight: 900 !important; - font-size: 1.2em !important; - text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 0.9), - 0 2px 4px rgba(0, 0, 0, 1), 0 4px 8px rgba(0, 0, 0, 0.9) !important; - -webkit-text-stroke: 0.6px rgba(255, 255, 255, 1); - filter: brightness(1.8) contrast(1.5) !important; -} - -/* Target any nested elements with maximum brightness */ -.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(abbr), -.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(button), -.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(div) { - color: #ffffff !important; - font-weight: 900 !important; - font-size: 1.2em !important; - text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 0.9), - 0 2px 4px rgba(0, 0, 0, 1), 0 4px 8px rgba(0, 0, 0, 0.9) !important; - filter: brightness(1.8) contrast(1.5) !important; -} - -/* Ensure it works even with hover - make text even brighter */ -.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover :global(abbr), -.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover, -.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover :global(span), -.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover :global(*) { - color: #ffffff !important; - font-weight: 900 !important; - background-color: #0f1f3a !important; - text-shadow: 0 0 6px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 255, 255, 0.8), - 0 2px 4px rgba(0, 0, 0, 1), 0 4px 8px rgba(0, 0, 0, 0.8) !important; - filter: brightness(1.5) contrast(1.3) !important; -} - -/* But don't override event item colors in dark mode */ -.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) .eventItem { - color: inherit; -} - .overflowPopup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + box-shadow: 0 4px 20px rgb(0 0 0 / 30%); border-radius: 10px; z-index: 1500; width: 400px; max-height: 70vh; overflow-y: auto; - animation: fadeIn 0.2s ease-out; + animation: fade-in 0.2s ease-out; } .overflowPopupDark { @@ -1131,20 +1002,10 @@ border-bottom-color: #4a5568; } -.overflowPopup .eventItem { - margin-bottom: 8px; - font-size: 0.9rem; - padding: 6px 10px; - border-radius: 6px; - color: #fff; - font-weight: 600; - cursor: pointer; - transition: transform 0.2s ease; -} - .overflowPopup .eventItem:hover { transform: translateY(-1px); } + .detailLabel { font-size: 0.8rem; font-weight: 600; @@ -1159,7 +1020,7 @@ .weekGridContainer { display: flex; flex-direction: column; - background: #ffffff; + background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; height: 700px; @@ -1170,7 +1031,7 @@ .weekGridBody { flex: 1; overflow-y: scroll; - background: #ffffff; + background: #fff; } .weekGridHeader { @@ -1235,7 +1096,7 @@ padding: 6px; font-size: 0.75rem; cursor: pointer; - box-shadow: 0 1px 2px rgba(0,0,0,0.05); + box-shadow: 0 1px 2px rgb(0 0 0 / 5%); margin-bottom: 4px; } @@ -1267,7 +1128,7 @@ } .dateLabelDark { - color: #ffffff; + color: #fff; } .hourRowDark { @@ -1284,13 +1145,13 @@ } .gridCellDark:hover { - background-color: rgba(255, 255, 255, 0.03); + background-color: rgb(255 255 255 / 3%); } .gridEventDark { background: #064e3b; border-left: 4px solid #10b981; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 4px rgb(0 0 0 / 30%); } .gridEventTitleDark { @@ -1299,4 +1160,156 @@ .gridEventTimeDark { color: #a7f3d0; +} + + +/* Override for selected date - must be pure white with maximum visibility */ +.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(abbr) { + color: #fff !important; + font-weight: 900 !important; + font-size: 1.1em !important; + text-shadow: 0 0 6px rgb(255 255 255 / 100%), 0 0 8px rgb(255 255 255 / 80%), + 0 2px 4px rgb(0 0 0 / 100%), 0 4px 8px rgb(0 0 0 / 80%) !important; + -webkit-text-stroke: 0.5px rgb(255 255 255 / 100%); + filter: brightness(1.5) contrast(1.3) !important; + background-color: #0f172a !important; + padding: 2px 4px; + border-radius: 3px; +} + +.reactCalendarDarkMode :global(.react-calendar__tile--active) { + background: #444 !important; + color: #fff !important; +} + +.reactCalendarDarkMode :global(.react-calendar__tile--active) :global(abbr) { + color: #fff !important; +} + +/* CRITICAL: Override react-calendar's default active/selected styles in dark mode - NEVER allow light background */ +.reactCalendarDarkMode :global(.react-calendar__tile--active.selectedDate), +.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate.react-calendar__tile--active) { + background-color: #1a2332 !important; + color: #fff !important; +} + +.reactCalendarDarkMode :global(.react-calendar__tile--active.selectedDate) :global(abbr), +.reactCalendarDarkMode + :global(.react-calendar__tile.selectedDate.react-calendar__tile--active) + :global(abbr) { + color: #fff !important; + font-weight: 900 !important; + font-size: 1.2em !important; + text-shadow: 0 0 8px rgb(255 255 255 / 100%), 0 0 10px rgb(255 255 255 / 90%), + 0 2px 4px rgb(0 0 0 / 100%), 0 4px 8px rgb(0 0 0 / 90%) !important; + filter: brightness(1.8) contrast(1.5) !important; +} + +.reactCalendarDarkMode :global(.react-calendar__tile--now) :global(abbr) { + color: #fff !important; +} + +.reactCalendarDarkMode :global(.react-calendar__navigation__label) { + color: #fff; +} + +.reactCalendarDarkMode :global(.react-calendar__navigation__arrow) { + color: #fff; +} + +.reactCalendarDarkMode :global(.react-calendar__navigation) { + background-color: #1b2a41; + border-bottom: 1px solid #444; +} + +.reactCalendarDarkMode :global(.react-calendar__navigation button) { + color: #fff; +} + +.reactCalendarDarkMode :global(.react-calendar__navigation button:enabled:hover), +.reactCalendarDarkMode :global(.react-calendar__navigation button:enabled:focus) { + background-color: #2d3748; +} + +.reactCalendarDarkMode :global(.react-calendar__month-view__weekdays__weekday) { + color: #fff; +} + +.reactCalendarDarkMode :global(.react-calendar__month-view__weekdays__weekday) abbr { + color: #fff; + text-decoration: none; +} + +.selectedDate { + box-shadow: inset 0 0 0 2px #3182ce; + border-radius: 8px; + background-color: #e6f2ff !important; +} + +/* Override for dark mode - keep dark background, never light */ +.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) { + background-color: #1a2332 !important; + box-shadow: inset 0 0 0 2px #4a9eff !important; +} + +/* Force dark blue text on selected date number in light mode - target the abbr element specifically */ +.reactCalendar :global(.react-calendar__tile.selectedDate) :global(abbr) { + color: #0d47a1 !important; + font-weight: 700 !important; +} + +/* Also target any direct text content */ +.reactCalendar :global(.react-calendar__tile.selectedDate) { + color: #0d47a1 !important; +} + +/* But don't override event item colors */ +.reactCalendar :global(.react-calendar__tile.selectedDate) .eventItem { + color: inherit; +} + +/* Force bright white text on date number in dark mode - use maximum specificity with all variations */ +.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(abbr), +.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(span), +.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate), +.reactCalendarDarkMode.reactCalendar :global(.react-calendar__tile.selectedDate) :global(abbr), +.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate abbr), +.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate span) { + color: #fff !important; + font-weight: 900 !important; + font-size: 1.2em !important; + text-shadow: 0 0 8px rgb(255 255 255 / 100%), 0 0 10px rgb(255 255 255 / 90%), + 0 2px 4px rgb(0 0 0 / 100%), 0 4px 8px rgb(0 0 0 / 90%) !important; + -webkit-text-stroke: 0.6px rgb(255 255 255 / 100%); + filter: brightness(1.8) contrast(1.5) !important; +} + +/* Target any nested elements with maximum brightness */ +.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(abbr), +.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(button), +.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) :global(div) { + color: #fff !important; + font-weight: 900 !important; + font-size: 1.2em !important; + text-shadow: 0 0 8px rgb(255 255 255 / 100%), 0 0 10px rgb(255 255 255 / 90%), + 0 2px 4px rgb(0 0 0 / 100%), 0 4px 8px rgb(0 0 0 / 90%) !important; + filter: brightness(1.8) contrast(1.5) !important; +} + +/* Ensure it works even with hover - make text even brighter */ +.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover :global(abbr), +.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover, +.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover :global(span), +.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate):hover :global(*) { + color: #fff !important; + font-weight: 900 !important; + background-color: #0f1f3a !important; + text-shadow: 0 0 6px rgb(255 255 255 / 100%), 0 0 8px rgb(255 255 255 / 80%), + 0 2px 4px rgb(0 0 0 / 100%), 0 4px 8px rgb(0 0 0 / 80%) !important; + filter: brightness(1.5) contrast(1.3) !important; +} + +/* But don't override event item colors in dark mode */ +.reactCalendarDarkMode :global(.react-calendar__tile.selectedDate) .eventItem { + color: inherit; } \ No newline at end of file