From 35e29df43d7e702418e5941c810b035eccc11f0b Mon Sep 17 00:00:00 2001
From: Akshith <33996844+akshith312@users.noreply.github.com>
Date: Tue, 3 Feb 2026 18:08:08 -0800
Subject: [PATCH] feat: Added icons to the events in activity list

---
 .../Activities/ActivityList.jsx               | 46 ++++++++++++++-
 .../Activities/ActivityList.module.css        | 57 +++++++++++++++++++
 2 files changed, 101 insertions(+), 2 deletions(-)

diff --git a/src/components/CommunityPortal/Activities/ActivityList.jsx b/src/components/CommunityPortal/Activities/ActivityList.jsx
index 802ab26a4a..a146efa597 100644
--- a/src/components/CommunityPortal/Activities/ActivityList.jsx
+++ b/src/components/CommunityPortal/Activities/ActivityList.jsx
@@ -4,6 +4,15 @@ import { useSelector } from 'react-redux';
 import styles from './ActivityList.module.css';
 import { mockActivities } from './mockActivities';
 // import { useHistory } from 'react-router-dom';
+import {
+  FaTag,
+  FaCalendarAlt,
+  FaMapMarkerAlt,
+  FaDumbbell,
+  FaUsers,
+  FaGraduationCap,
+  FaPalette,
+} from 'react-icons/fa';
 
 function ActivityList() {
   const [activities, setActivities] = useState([]);
@@ -102,6 +111,21 @@ function ActivityList() {
     setShowSuggestions(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} />;
+    }
+  };
+
   return (
     <div className={`${styles.body} ${darkMode ? styles.darkBody : ''}`}>
       <h1 className={styles.h1}>Activity List</h1>
@@ -193,8 +217,26 @@ function ActivityList() {
           <ul>
             {filteredActivities.map(activity => (
               <li key={activity.id}>
-                <strong>{activity.name}</strong> - {activity.type} - {activity.date} -{' '}
-                {activity.location}
+                <strong>{activity.name}</strong>
+
+                {/* 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>
             ))}
           </ul>
diff --git a/src/components/CommunityPortal/Activities/ActivityList.module.css b/src/components/CommunityPortal/Activities/ActivityList.module.css
index 7b7c977def..be983e6bec 100644
--- a/src/components/CommunityPortal/Activities/ActivityList.module.css
+++ b/src/components/CommunityPortal/Activities/ActivityList.module.css
@@ -231,3 +231,60 @@
     padding: 10px;
   }
 }
+
+.alactivityIcon {
+  color: #2c3e50;
+  margin-top: 2px;
+  flex-shrink: 0;
+  font-size: 1rem;
+  margin-right: 4px; 
+}
+
+.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 {
+  font-style: italic;
+  color: #6b7280;
+  margin-top: 4px;
+}
+
+.allocationDateRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.allocation,
+.aldate {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+