Akshay - Add - Clear All button and darkMode to communityportal/Activities

src/components/CommunityPortal/Activities/ActivityList.jsx

@@ -1,10 +1,12 @@
 // Activity List Component
 import { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import styles from './ActivityList.module.css';
 // import { useHistory } from 'react-router-dom';
 
 function ActivityList() {
   const [activities, setActivities] = useState([]);
+  const darkMode = useSelector(state => state.theme.darkMode);
   const [filter, setFilter] = useState({
     type: '',
     date: '',
@@ -136,11 +138,19 @@ function ActivityList() {
     );
   });
 
+  const handleClearFilters = () => {
+    setFilter({
+      type: '',
+      date: '',
+      location: '',
+    });
+  };
+
   return (
-    <div className={styles.body}>
+    <div className={`${styles.body} ${darkMode ? styles.darkBody : ''}`}>
       <h1 className={styles.h1}>Activity List</h1>
 
-      <div className={styles.filters}>
+      <div className={`${styles.filters} ${darkMode ? styles.darkFilters : ''}`}>
         <label>
           Type:
           <input
@@ -167,8 +177,16 @@ function ActivityList() {
             placeholder="Enter location"
           />
         </label>
+        <button
+          type="button"
+          onClick={handleClearFilters}
+          disabled={!filter.type && !filter.date && !filter.location}
+        >
+          Clear All
+        </button>
       </div>
-      <div className={styles.activityList}>
+
+      <div className={`${styles.activityList} ${darkMode ? styles.darkActivityList : ''}`}>
         {filteredActivities.length > 0 ? (
           <ul>
             {filteredActivities.map(activity => (

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

@@ -8,6 +8,10 @@
   color: #333;
 }
 
+.darkBody {
+  background: #1B2A41;
+}
+
 .h1 {
   text-align: center;
   margin: 20px 0;
@@ -27,6 +31,10 @@
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
+.darkFilters {
+  background: #0f172a;
+}
+
 .filters label {
   display: flex;
   flex-direction: column;
@@ -49,6 +57,26 @@
   box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
 }
 
+.filters button {
+  margin: 30px 0;
+  border: 1px solid #000000;
+  border-radius: 6px;
+  padding: 10px;
+}
+
+.filters button:hover:not(:disabled) {
+  transform: scale(1.05);
+}
+
+.darkFilters button{
+  border: 1px solid #ffffff;
+}
+
+.darkFilters input{
+  background: #0f172a;
+  border: 1px solid #ffffff;
+}
+
 .activityList {
   max-width: 900px;
   margin: 0 auto;
@@ -58,6 +86,10 @@
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
 }
 
+.darkActivityList {
+  background: #2b3e59;
+}
+
 .activityList ul {
   list-style-type: none;
   padding: 0;
@@ -75,6 +107,10 @@
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
+.darkActivityList li {
+  background: #1B2A41;
+}
+
 .activityList li:hover {
   transform: translateY(-3px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);