Improved Tag-Based Filtering & Discoverability in Lesson List

Author: aryanrachala54

src/components/BMDashboard/LessonList/LessonCard.jsx

@@ -150,7 +150,7 @@ function LessonCard({ filteredLessons, onEditLessonSummary, onDeliteLessonCard,
                   </>
                 ) : (
                   <span>
-                    {parse(
+                    {ReactHtmlParser(
                       (lesson?.content || '').length > maxSummaryLength
                         ? `${lesson.content.slice(0, maxSummaryLength)}...`
                         : lesson.content || '',
@@ -235,10 +235,18 @@ function LessonCard({ filteredLessons, onEditLessonSummary, onDeliteLessonCard,
   return (
     <div>
       <div style={{ textAlign: 'right' }}>
-        <button type="submit" onClick={() => expandAll()} className={`${styles.expandLessons}`}>
+        <button
+          type="submit"
+          onClick={() => expandAll()}
+          className={`${styles.expandLessons} ${darkMode ? styles.darkExpandLessons : ''}`}
+        >
           Expand All
         </button>
-        <button type="submit" onClick={() => collapseAll()} className={`${styles.expandLessons}`}>
+        <button
+          type="submit"
+          onClick={() => collapseAll()}
+          className={`${styles.expandLessons} ${darkMode ? styles.darkExpandLessons : ''}`}
+        >
           Collapse All
         </button>
       </div>

src/components/BMDashboard/LessonList/LessonCard.module.css

@@ -5,71 +5,24 @@
   overflow: hidden;
 }
 
-.darkCard {
-  background-color: #1e1e1e !important;
-  color: #f5f5f5 !important;
-  border-color: #333 !important;
-}
-
-.darkCard .lessonCardHeader {
-  background-color: #2a2a2a !important;
-  color: #ffffff !important;
-  border-bottom: 1px solid #333 !important;
-}
-
-.darkCard .scrollableCardBody {
-  background-color: #1e1e1e !important;
-  color: #e6e6e6 !important;
-}
-
-.darkCard span,
-.darkCard p,
-.darkCard div {
-  color: #e6e6e6 !important;
-}
-
-.darkCard .tagItem {
-  color: #bfbfbf !important;
-}
-
-.darkCard .lessonCardFooter {
-  background-color: #2a2a2a !important;
-  color: #cccccc !important;
-  border-top: 1px solid #333 !important;
-}
-
-.darkCard textarea.editable-lesson-summary {
-  background-color: #2a2a2a !important;
-  color: #ffffff !important;
-  border: 1px solid #555 !important;
-}
+/* ================= BASE STYLES FIRST ================= */
 
 .lessonCardHeader {
   background-color: #78bdda !important;
   padding: 0.3rem 1.25rem !important;
 }
 
+.lessonCardHeader:first-child {
+  border-radius: 0 !important;
+}
+
 .lessonCardBody {
   min-height: 20vh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
-.cardTagAndFile {
-  font-size: small;
-  color: #78bdda;
-}
-
-.cardTagAndFile .tagItem {
-  display: inline-block;
-  margin-right: 5px;
-}
-
-.lessonCardHeader:first-child {
-  border-radius: 0 !important;
-}
-
 .lessonCardFooter {
   background-color: #e8f4f9 !important;
   display: flex;
@@ -83,6 +36,26 @@
   border-radius: 0 !important;
 }
 
+.scrollableCardBody {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.tagItem {
+  font-size: small;
+  white-space: nowrap;
+}
+
+.cardTagAndFile {
+  font-size: small;
+  color: #78bdda;
+}
+
+.cardTagAndFile .tagItem {
+  display: inline-block;
+  margin-right: 5px;
+}
+
 .lessonCardTag {
   display: flex;
   flex-direction: row;
@@ -92,11 +65,6 @@
   overflow-x: auto;
 }
 
-.scrollableCardBody {
-  max-height: 400px;
-  overflow-y: auto;
-}
-
 .footerItemsAuthorAndFrom {
   margin-right: 5px;
 }
@@ -136,11 +104,6 @@
   overflow-y: auto;
 }
 
-.tagItem {
-  font-size: small;
-  white-space: nowrap;
-}
-
 .lessonFile {
   font-size: small;
 }
@@ -179,6 +142,12 @@
   color: #495057;
   margin-right: 5px;
   border-radius: 5px;
+  transition: all 0.2s ease-in-out;
+}
+
+.expandLessons:hover {
+  background-color: #e2e2e2 !important;
+  color: #212529;
 }
 
 .validationError {
@@ -194,24 +163,85 @@
   color: #a00;
 }
 
-@media (max-width: 768px) {
+/* ================= DARK MODE (AFTER BASE) ================= */
+
+.darkCard {
+  background-color: #1e1e1e !important;
+  color: #f5f5f5 !important;
+  border-color: #333 !important;
+}
+
+.darkCard .lessonCardHeader {
+  background-color: #2a2a2a !important;
+  color: #fff !important;
+  border-bottom: 1px solid #333 !important;
+}
+
+.darkCard .scrollableCardBody {
+  background-color: #1e1e1e !important;
+  color: #e6e6e6 !important;
+}
+
+.darkCard span,
+.darkCard p,
+.darkCard div {
+  color: #e6e6e6 !important;
+}
+
+.darkCard .tagItem {
+  color: #bfbfbf !important;
+}
+
+.darkCard .lessonCardFooter {
+  background-color: #2a2a2a !important;
+  color: #ccc !important;
+  border-top: 1px solid #333 !important;
+}
+
+.darkCard textarea.editable-lesson-summary {
+  background-color: #2a2a2a !important;
+  color: #fff !important;
+  border: 1px solid #555 !important;
+}
+
+.darkExpandLessons {
+  background-color: #2c3e50 !important;
+  color: #e9ecef !important;
+  border: 1px solid #495057 !important;
+}
+
+.darkExpandLessons:hover {
+  background-color: #34495e !important;
+  color: #f8f9fa !important;
+}
+
+/* ================= RESPONSIVE ================= */
+
+@media (width <= 768px) {
   .lessonCardFooter {
     flex-direction: column;
     align-items: flex-start;
   }
 
   .lessonCardNav {
     height: auto;
-    display: flex;
-    flex-direction: column;
   }
 
   .lessonCardFooterItems {
     justify-content: flex-start;
   }
+
+  .lessonFooter {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .footerItemsActions {
+    justify-content: flex-start;
+  }
 }
 
-@media (max-width: 570px) {
+@media (width <= 570px) {
   .formSelectContainer {
     flex-direction: column;
   }
@@ -221,21 +251,21 @@
   }
 }
 
-@media (max-width: 767px) {
+@media (width <= 767px) {
   .cardText {
     padding: 10px;
     font-size: small;
   }
 }
 
-@media (max-width: 859px) {
+@media (width <= 859px) {
   .navTitleAndDate {
     flex-direction: column;
     align-items: flex-start;
   }
 }
 
-@media only screen and (max-width: 600px) {
+@media (width <= 600px) {
   .nav {
     height: auto;
   }
@@ -244,15 +274,4 @@
     display: block;
     margin-top: 5px;
   }
-}
-
-@media (max-width: 768px) {
-  .lessonFooter {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .footerItemsActions {
-    justify-content: flex-start;
-  }
-}
+}