Sai Sandeep taking over for Kristin Fix Calendar Selected Date Dark Mode Style in Community Portal Page

src/components/CommunityPortal/Calendar/CommunityCalendar.jsx

@@ -199,14 +199,20 @@ function CommunityCalendar() {
           {visible.map(event => (
             <div
               key={event.id}
-              className={`${styles.eventItem} ${styles.clickable}`}
+              className={`${styles.eventItem} ${styles.clickable} ${styles[
+                statusMap[event.status]
+              ] || ''}`}
               onClick={() => handleEventClick(event)}
               onKeyDown={e => handleEventKeyPress(e, event)}
               onMouseEnter={() => setHoveredEventId(event.id)}
               onMouseLeave={() => setHoveredEventId(null)}
               role="button"
               tabIndex={0}
               aria-label={`Click to view details for ${event.title}`}
+              style={{
+                borderRadius: '4px',
+                padding: '2px 6px',
+              }}
             >
               {event.title}
 
@@ -277,6 +283,7 @@ function CommunityCalendar() {
       container: `${styles.communityCalendar} ${darkMode ? styles.communityCalendarDarkMode : ''}`,
       header: `${styles.calendarHeader} ${darkMode ? styles.calendarHeaderDarkMode : ''}`,
       filters: `${styles.calendarFilters} ${darkMode ? styles.calendarFiltersDarkMode : ''}`,
+      select: `${styles.filterSelect} ${darkMode ? styles.filterSelectDarkMode : ''}`,
       main: styles.calendarMain,
       calendarContainer: `${styles.calendarContainer} ${
         darkMode ? styles.calendarContainerDarkMode : ''
@@ -372,21 +379,33 @@ function CommunityCalendar() {
       <header className={calendarClasses.header}>
         <h1>Community Calendar</h1>
         <div className={calendarClasses.filters}>
-          <select value={filter.type} onChange={handleFilterChange('type')}>
+          <select
+            className={calendarClasses.select}
+            value={filter.type}
+            onChange={handleFilterChange('type')}
+          >
             <option value="all">All Types</option>
             {uniqueFilterValues.types.map(t => (
               <option key={t}>{t}</option>
             ))}
           </select>
 
-          <select value={filter.location} onChange={handleFilterChange('location')}>
+          <select
+            className={calendarClasses.select}
+            value={filter.location}
+            onChange={handleFilterChange('location')}
+          >
             <option value="all">All Locations</option>
             {uniqueFilterValues.locations.map(l => (
               <option key={l}>{l}</option>
             ))}
           </select>
 
-          <select value={filter.status} onChange={handleFilterChange('status')}>
+          <select
+            className={calendarClasses.select}
+            value={filter.status}
+            onChange={handleFilterChange('status')}
+          >
             <option value="all">All Statuses</option>
             {uniqueFilterValues.statuses.map(s => (
               <option key={s}>{s}</option>

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

@@ -488,6 +488,13 @@
   color: #cbd5e0;
 }
 
+.selectedEventMeta .metaItem{
+  list-style-type: none;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
 .eventDetailButton {
   border: none;
   background-color: #1e40af;
@@ -1143,3 +1150,4 @@
   }
 
 }
+