Fix CSS module enforcement for lessons form

Author: SharadhaKasiviswanathan

src/components/BMDashboard/Lessons/AddLessons.jsx

@@ -4,8 +4,8 @@ import { Form, Button, DropdownButton, Dropdown } from 'react-bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import './AddLessons.css';
 import { useSelector } from 'react-redux';
+import styles from './AddLessons.module.css';
 
 function AddLessons() {
   const darkMode = useSelector(state => state.theme.darkMode);
@@ -88,8 +88,8 @@ function AddLessons() {
   };
 
   return (
-    <div className={darkMode ? 'dark-page-wrapper' : ''}>
-      <div className={`add-lesson-form-container ${darkMode ? 'bg-dark text-light' : ''}`}>
+    <div className={darkMode ? styles.darkPageWrapper : ''}>
+      <div className={`${styles.formContainer} ${darkMode ? 'bg-dark text-light' : ''}`}>
         <h5 className="mb-4">Write a Lesson</h5>
 
         <Form.Group controlId="lessonContent" className="mb-3">
@@ -115,11 +115,11 @@ function AddLessons() {
           />
           <div className="mt-2 d-flex flex-wrap">
             {tags.map(tag => (
-              <span key={tag} className="badge bg-secondary add-tag-badge">
+              <span key={tag} className={`badge bg-secondary ${styles.tagBadge}`}>
                 {tag}
                 <button
                   type="button"
-                  className="tag-delete-btn ms-2"
+                  className={`${styles.tagDeleteButton} ms-2`}
                   onClick={() => handleDeleteTag(tag)}
                 >
                   &times;
@@ -177,7 +177,7 @@ function AddLessons() {
               const droppedFile = e.dataTransfer.files[0];
               setFile(droppedFile);
             }}
-            className={`add-lesson-file-upload-box ${
+            className={`${styles.fileUploadBox} ${
               darkMode ? 'bg-dark text-light border-secondary' : ''
             }`}
             onClick={() => document.getElementById('fileInput').click()}

…nents/BMDashboard/Lessons/AddLessons.css …MDashboard/Lessons/AddLessons.module.csssrc/components/BMDashboard/Lessons/AddLessons.css renamed to src/components/BMDashboard/Lessons/AddLessons.module.css src/components/BMDashboard/Lessons/AddLessons.css renamed to src/components/BMDashboard/Lessons/AddLessons.module.css

@@ -1,12 +1,12 @@
-.add-lesson-form-container {
+.formContainer {
   max-width: 600px;
   margin: auto;
   background: #f7f9fc;
   border-radius: 10px;
   padding: 1.5rem;
 }
 
-.add-tag-badge {
+.tagBadge {
   padding: 4px 10px;
   font-size: 0.85rem;
   border-radius: 12px;
@@ -18,8 +18,7 @@
   line-height: 1;
 }
 
-
-.add-lesson-file-upload-box {
+.fileUploadBox {
   border: 2px dashed #6c757d;
   border-radius: 10px;
   padding: 30px;
@@ -29,7 +28,7 @@
   cursor: pointer;
 }
 
-.tag-delete-btn {
+.tagDeleteButton {
   background: none;
   border: none;
   color: #fff;
@@ -44,42 +43,41 @@
   justify-content: center;
 }
 
-.tag-delete-btn:hover {
+.tagDeleteButton:hover {
   color: black;
   background-color: #6c757d;
 }
 
-
-.dark-page-wrapper {
+.darkPageWrapper {
   background-color: #1B2A41;
   min-height: 100vh;
   padding: 2rem 0;
 }
-.dark-page-wrapper .add-lesson-form-container {
+
+.darkPageWrapper .formContainer {
   background-color: #162e4a;
   color: #f0f0f0;
   border-radius: 10px;
   padding: 1.5rem;
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
 }
 
-.dark-page-wrapper .form-control,
-.dark-page-wrapper .dropdown-menu {
+.darkPageWrapper :global(.form-control),
+.darkPageWrapper :global(.dropdown-menu) {
   background-color: #1B2A41;
   color: #fff;
   border-color: #555;
 }
 
-.dark-page-wrapper .form-label,
-.dark-page-wrapper .text {
+.darkPageWrapper :global(.form-label),
+.darkPageWrapper :global(.text) {
   color: #ccc;
 }
 
-.dark-page-wrapper .dropdown-item {
+.darkPageWrapper :global(.dropdown-item) {
   color: #fff;
 }
 
-.dark-page-wrapper .dropdown-item:hover {
+.darkPageWrapper :global(.dropdown-item:hover) {
   background-color: #444;
 }
-