Namitha: Fix calendar visibility, booked date indicators, and dark mode implementation

src/components/CommunityPortal/Activities/Register/DescriptionSection.css → src/components/CommunityPortal/Activities/Register/DescriptionSection.module.css

@@ -39,4 +39,34 @@
 .description-paragraph {
   padding-left: 5%;
   margin-bottom: 8px;
-}
+}
+
+/* Class-based Dark Mode Support */
+.description-section.dark-mode {
+  background-color: #1e2a3a;
+}
+
+.description-section.dark-mode .tabs {
+  border-bottom-color: #3a4a5c;
+}
+
+.description-section.dark-mode .tab-button {
+  color: #b0b0b0;
+}
+
+.description-section.dark-mode .tab-button.active {
+  color: #4a9eff;
+  border-bottom-color: #4a9eff;
+}
+
+.description-section.dark-mode .tab-button:hover {
+  background-color: #2a3a4a;
+}
+
+.description-section.dark-mode .tab-content {
+  color: #e0e0e0;
+}
+
+.description-section.dark-mode .description-paragraph {
+  color: #b0b0b0;
+}

src/components/CommunityPortal/Activities/Register/EventDescription.jsx

@@ -53,9 +53,9 @@
 // export default DescriptionSection;
 
 import { useState } from 'react';
-import './DescriptionSection.css'; // Import external CSS file
+import styles from './DescriptionSection.module.css'; // Import external CSS file
 
-function DescriptionSection() {
+function DescriptionSection({ darkMode }) {
   const [activeTab, setActiveTab] = useState('Description');
 
   const tabContent = {
@@ -71,23 +71,23 @@
   };
 
   return (
-    <div className="description-section">
-      <div className="tabs">
+    <div className={`${styles['description-section']} ${darkMode ? styles['dark-mode'] : ''}`}>
+      <div className={styles.tabs}>
         {Object.keys(tabContent).map(tab => (
           <button
             key={tab}
             type="button"
             onClick={() => setActiveTab(tab)}
-            className={`tab-button ${activeTab === tab ? 'active' : ''}`}
+            className={`${styles['tab-button']} ${activeTab === tab ? styles.active : ''}`}
           >
             {tab}
           </button>
         ))}
       </div>
 
-      <div className="tab-content">
+      <div className={styles['tab-content']}>
         {tabContent[activeTab]?.map(item => (
-          <p key={`${activeTab}-${item}`} className="description-paragraph">
+          <p key={`${activeTab}-${item}`} className={styles['description-paragraph']}>
             {item}
           </p>
         ))}