feat: added icons to the event details displayed in event modal

Author: akshith312

src/components/CommunityPortal/Calendar/CommunityCalendar.jsx

@@ -4,6 +4,17 @@ import ReactCalendar from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
 import CalendarActivitySection from './CalendarActivitySection';
 import styles from './CommunityCalendar.module.css';
+import {
+  FaCalendarAlt,
+  FaClock,
+  FaMapMarkerAlt,
+  FaTag,
+  FaAlignLeft,
+  FaVideo,
+  FaUsers,
+  FaGlassCheers,
+} from 'react-icons/fa';
+import { GrWorkshop } from 'react-icons/gr';
 
 const STATUSES = ['New', 'Needs Attendees', 'Filling Fast', 'Full Event'];
 const EVENT_TYPES = ['Workshop', 'Webinar', 'Meeting', 'Social Gathering'];
@@ -261,6 +272,21 @@ function CommunityCalendar() {
     [darkMode],
   );
 
+  const getTypeIcon = type => {
+    switch (type) {
+      case 'Workshop':
+        return <GrWorkshop />;
+      case 'Webinar':
+        return <FaVideo />;
+      case 'Meeting':
+        return <FaUsers />;
+      case 'Social Gathering':
+        return <FaGlassCheers />;
+      default:
+        return null;
+    }
+  };
+
   return (
     <div className={calendarClasses.container}>
       {/* Inline styles to ensure selected date number is visible in dark mode - force dark background */}
@@ -478,20 +504,28 @@ function CommunityCalendar() {
 
               <div className={styles.eventDetailsGrid}>
                 {[
-                  ['Type', selectedEvent.type],
-                  ['Location', selectedEvent.location],
-                  ['Date', selectedEvent.date.toLocaleDateString()],
-                  ['Time', selectedEvent.time],
-                ].map(([label, value]) => (
+                  [FaTag, 'Type', selectedEvent.type],
+                  [FaMapMarkerAlt, 'Location', selectedEvent.location],
+                  [FaCalendarAlt, 'Date', selectedEvent.date.toLocaleDateString()],
+                  [FaClock, 'Time', selectedEvent.time],
+                ].map(([Icon, label, value]) => (
                   <div key={label} className={styles.detailItem}>
-                    <span className={styles.detailLabel}>{label}:</span>
-                    <span>{value}</span>
+                    <span className={styles.detailLabel}>
+                      <Icon className={styles.detailIcon} />
+                      {label}:
+                    </span>
+                    <span>
+                      {label === 'Type' ? getTypeIcon(selectedEvent.type) : null} {value}
+                    </span>
                   </div>
                 ))}
               </div>
 
               <div className={styles.eventDescription}>
-                <span className={styles.detailLabel}>Description:</span>
+                <span className={styles.detailLabel}>
+                  <FaAlignLeft className={styles.detailIcon} />
+                  Description:
+                </span>
                 <p>{selectedEvent.description}</p>
               </div>
             </div>

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

@@ -1083,3 +1083,13 @@
   letter-spacing: 0.5px;
   display: block;
 }
+.detailIcon {
+  margin-right: 8px;
+  vertical-align: middle;
+  color: #718096;
+  font-size: 1rem;
+}
+
+.eventModalDark .detailIcon {
+  color: #cbd5e0;
+}