Merge pull request #4793 from OneCommunityGlobal/Akshith-Add-Activity-list-icons

Akshith - Added icons to the event details in activity list

Author: one-community

src/components/CommunityPortal/Activities/ActivityList.jsx

@@ -3,7 +3,15 @@ import { useState, useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
 import styles from './ActivityList.module.css';
-// import { useHistory } from 'react-router-dom';
+import {
+  FaTag,
+  FaCalendarAlt,
+  FaMapMarkerAlt,
+  FaDumbbell,
+  FaUsers,
+  FaGraduationCap,
+  FaPalette,
+} from 'react-icons/fa';
 import { fuzzySearch } from '../../../utils/fuzzySearch';
 import { mockActivities } from './mockActivities';
 
@@ -126,6 +134,21 @@ function ActivityList() {
     setModalOpen(false);
   };
 
+  const getTypeIcon = type => {
+    switch (type) {
+      case 'Fitness':
+        return <FaDumbbell className={styles.activityIcon} />;
+      case 'Social':
+        return <FaUsers className={styles.activityIcon} />;
+      case 'Educational':
+        return <FaGraduationCap className={styles.activityIcon} />;
+      case 'Art':
+        return <FaPalette className={styles.activityIcon} />;
+      default:
+        return <FaTag className={styles.activityIcon} />;
+    }
+  };
+
   const startOfToday = useMemo(() => {
     const d = new Date();
     d.setHours(0, 0, 0, 0);
@@ -308,9 +331,25 @@ function ActivityList() {
               >
                 <li className={`${styles.activityItem} ${darkMode ? styles.darkModeItem : ''}`}>
                   <strong>{activity.name}</strong>
-                  <span>
-                    {activity.type} – {activity.date} – {activity.location}
-                  </span>
+
+                  {/* Type */}
+                  <div className={styles.altypeRow}>
+                    {getTypeIcon(activity.type)}
+                    <span className={styles.altypeText}>{activity.type}</span>
+                  </div>
+
+                  {/* Location + Date */}
+                  <div className={styles.allocationDateRow}>
+                    <div className={styles.allocation}>
+                      <FaMapMarkerAlt className={styles.alactivityIcon} />
+                      <span>{activity.location}</span>
+                    </div>
+
+                    <div className={styles.aldate}>
+                      <FaCalendarAlt className={styles.alactivityIcon} />
+                      <span>{activity.date}</span>
+                    </div>
+                  </div>
                 </li>
               </div>
             ))}

src/components/CommunityPortal/Activities/ActivityList.module.css

@@ -102,7 +102,7 @@
   color-scheme: dark;
 }
 
-.darkModeInput[type="date"]::-webkit-calendar-picker-indicator {
+.darkModeInput[type='date']::-webkit-calendar-picker-indicator {
   filter: invert(1);
   cursor: pointer;
 }
@@ -211,7 +211,9 @@
   border: 1px solid #e5e7eb;
   border-radius: 8px;
   background-color: #f9fafb;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 .activityItem:hover {
@@ -282,7 +284,10 @@
   font-size: 1rem;
   font-weight: 500;
   cursor: pointer;
-  transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
+  transition:
+    transform 0.2s ease,
+    background-color 0.2s ease,
+    opacity 0.2s ease;
 }
 
 .clearFiltersButton:disabled {
@@ -445,4 +450,61 @@
     flex-direction: column;
     padding: 10px;
   }
+}
+
+/* Activity Icons */
+.alactivityIcon {
+  color: #2c3e50;
+  margin-top: 2px;
+  margin-right: 4px;
+  flex-shrink: 0;
+  font-size: 1rem;
+}
+
+.activityRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+}
+
+.leftInfo {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.rightInfo {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.altypeRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.altypeText {
+  margin-top: 4px;
+  color: #6b7280;
+  font-style: italic;
+}
+
+.allocationDateRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.allocation,
+.aldate {
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }