add dark mode support for weekly grid

Author: KH07

src/components/CommunityPortal/Calendar/CommunityCalendar.jsx

@@ -174,15 +174,12 @@ function CommunityCalendar() {
   function WeeklyTimeGrid({ events, selectedDate, onEventClick, darkMode }) {
     const hours = Array.from({ length: 24 }, (_, i) => i);
 
-    // Find the Sunday of the currently selected week
     const startOfWeek = useMemo(() => {
       const d = new Date(selectedDate);
-      const day = d.getDay(); // 0 (Sun) to 6 (Sat)
-      d.setDate(d.getDate() - day);
+      d.setDate(d.getDate() - d.getDay());
       return d;
     }, [selectedDate]);
 
-    // Create an array of 7 Date objects for the header
     const weekDays = useMemo(() => {
       return Array.from({ length: 7 }, (_, i) => {
         const day = new Date(startOfWeek);
@@ -192,25 +189,27 @@ function CommunityCalendar() {
     }, [startOfWeek]);
 
     return (
-      <div className={`${styles.weekGridContainer} ${darkMode ? styles.weekGridDark : ''}`}>
-        {/* HEADER: Day Names and Numbers */}
-        <div className={styles.weekGridHeader}>
-          <div className={styles.timeGutter}></div>
+      <div
+        className={`${styles.weekGridContainer} ${darkMode ? styles.weekGridContainerDark : ''}`}
+      >
+        <div className={`${styles.weekGridHeader} ${darkMode ? styles.weekGridHeaderDark : ''}`}>
+          <div className={styles.timeGutter} />
           {weekDays.map(date => (
             <div key={date.toString()} className={styles.dayColumnHeader}>
-              <div className={styles.dayLabel}>
+              <div className={`${styles.dayLabel} ${darkMode ? styles.dayLabelDark : ''}`}>
                 {date.toLocaleDateString('en-US', { weekday: 'short' })}
               </div>
-              <div className={styles.dateLabel}>{date.getDate()}</div>
+              <div className={`${styles.dateLabel} ${darkMode ? styles.dateLabelDark : ''}`}>
+                {date.getDate()}
+              </div>
             </div>
           ))}
         </div>
 
-        {/* BODY: Time Rows */}
         <div className={styles.weekGridBody}>
           {hours.map(hour => (
-            <div key={hour} className={styles.hourRow}>
-              <div className={styles.timeLabel}>
+            <div key={hour} className={`${styles.hourRow} ${darkMode ? styles.hourRowDark : ''}`}>
+              <div className={`${styles.timeLabel} ${darkMode ? styles.timeLabelDark : ''}`}>
                 {hour === 0
                   ? '12 AM'
                   : hour > 12
@@ -219,36 +218,47 @@ function CommunityCalendar() {
                   ? '12 PM'
                   : `${hour} AM`}
               </div>
+
               {weekDays.map(date => {
-                // Filter events that happen on THIS day at THIS hour
                 const cellEvents = events.filter(e => {
                   const eventDate = new Date(e.date);
-                  // Check if date matches and if the hour in "10:00 AM" matches our current row
-                  const eventHour = parseInt(e.time.split(':')[0]);
+                  const [hStr] = e.time.split(':');
+                  let h = parseInt(hStr, 10);
                   const isPM = e.time.toLowerCase().includes('pm');
-                  const normalizedEventHour =
-                    isPM && eventHour !== 12
-                      ? eventHour + 12
-                      : !isPM && eventHour === 12
-                      ? 0
-                      : eventHour;
-
-                  return (
-                    eventDate.toDateString() === date.toDateString() && normalizedEventHour === hour
-                  );
+                  const isAM = e.time.toLowerCase().includes('am');
+                  if (isPM && h !== 12) h += 12;
+                  if (isAM && h === 12) h = 0;
+
+                  return eventDate.toDateString() === date.toDateString() && h === hour;
                 });
 
                 return (
-                  <div key={date.toString()} className={styles.gridCell}>
-                    {cellEvents.map(event => (
+                  <div
+                    key={date.toString()}
+                    className={`${styles.gridCell} ${darkMode ? styles.gridCellDark : ''}`}
+                  >
+                    {cellEvents.map(ev => (
                       <button
-                        key={event.id}
+                        key={ev.id}
                         type="button"
-                        className={styles.gridEvent}
-                        onClick={() => onEventClick(event)}
+                        className={`${styles.gridEvent} ${darkMode ? styles.gridEventDark : ''}`}
+                        onClick={() => onEventClick(ev)}
+                        aria-label={`Open event ${ev.title} at ${ev.time}`}
                       >
-                        <div className={styles.gridEventTime}>{event.time}</div>
-                        <div className={styles.gridEventTitle}>{event.title}</div>
+                        <div
+                          className={`${styles.gridEventTime} ${
+                            darkMode ? styles.gridEventTimeDark : ''
+                          }`}
+                        >
+                          {ev.time}
+                        </div>
+                        <div
+                          className={`${styles.gridEventTitle} ${
+                            darkMode ? styles.gridEventTitleDark : ''
+                          }`}
+                        >
+                          {ev.title}
+                        </div>
                       </button>
                     ))}
                   </div>

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

@@ -1096,6 +1096,12 @@
   margin-bottom: 20px;
 }
 
+.weekGridBody {
+  flex: 1;
+  overflow-y: scroll;
+  background: #ffffff;
+}
+
 .weekGridHeader {
   display: grid;
   grid-template-columns: 80px repeat(7, 1fr);
@@ -1123,12 +1129,6 @@
   color: #1e293b;
 }
 
-.weekGridBody {
-  flex: 1;
-  overflow-y: scroll;
-  background-color: #fff;
-}
-
 .hourRow {
   display: grid;
   grid-template-columns: 80px repeat(7, 1fr);
@@ -1176,11 +1176,56 @@
   text-overflow: ellipsis;
 }
 
-.weekGridDark {
+/* Dark Mode Support */
+.weekGridContainerDark {
+  background: #1a2332;
+  border-color: #2d3748;
+}
+
+.weekGridContainerDark .weekGridBody {
   background: #0f172a;
-  border-color: #1e293b;
 }
-.weekGridDark .weekGridHeader { background: #1e293b; border-bottom-color: #334155; }
-.weekGridDark .dateLabel { color: #f1f5f9; }
-.weekGridDark .hourRow { border-bottom-color: #1e293b; }
-.weekGridDark .timeLabel { border-right-color: #334155; }
+
+.weekGridHeaderDark {
+  background: #232d3f;
+  border-bottom-color: #2d3748;
+}
+
+.dayLabelDark {
+  color: #a0aec0;
+}
+
+.dateLabelDark {
+  color: #ffffff;
+}
+
+.hourRowDark {
+  border-bottom-color: #2d3748;
+}
+
+.timeLabelDark {
+  color: #718096;
+  border-right-color: #2d3748;
+}
+
+.gridCellDark {
+  border-left-color: #2d3748;
+}
+
+.gridCellDark:hover {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+.gridEventDark {
+  background: #064e3b;
+  border-left: 4px solid #10b981;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.gridEventTitleDark {
+  color: #d1fae5;
+}
+
+.gridEventTimeDark {
+  color: #a7f3d0;
+}