Shashank madan intermediate tasks dark mode

src/components/EductionPortal/IntermediateTasks/IntermediateTaskForm.jsx

@@ -80,11 +80,11 @@ const IntermediateTaskForm = ({ task, onSubmit, onCancel }) => {
   };
 
   return (
-    <Modal isOpen={true} toggle={onCancel} size="lg" className={styles.formModal}>
+    <Modal isOpen={true} toggle={onCancel} size="lg">
       <ModalHeader toggle={onCancel}>
         {task ? 'Edit Intermediate Task' : 'Add Intermediate Task'}
       </ModalHeader>
-      <Form onSubmit={handleSubmit}>
+      <Form onSubmit={handleSubmit} className={styles.formModal}>
         <ModalBody>
           <FormGroup>
             <Label for="title">Title *</Label>

src/components/EductionPortal/IntermediateTasks/IntermediateTaskList.jsx

@@ -17,6 +17,7 @@ const IntermediateTaskList = () => {
   const dispatch = useDispatch();
   const authUser = useSelector(state => state.auth.user);
   const { taskItems: parentTasks } = useSelector(state => state.studentTasks);
+  const darkMode = useSelector(state => state.theme.darkMode);
 
   const [expandedTasks, setExpandedTasks] = useState({});
   const [intermediateTasks, setIntermediateTasks] = useState({});

src/components/EductionPortal/IntermediateTasks/IntermediateTaskList.module.css

@@ -364,3 +364,283 @@
   }
 }
 
+/* Dark Mode Styles - Using global dark-mode class for consistency across builds */
+:global(.dark-mode) .dashboard {
+  background-color: #1a1a1a;
+}
+
+:global(.dark-mode) .title {
+  color: #ffffff;
+}
+
+:global(.dark-mode) .subtitle {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .taskCard {
+  background-color: #2d2d2d;
+  border-color: #404040;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+:global(.dark-mode) .taskCard:hover {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+}
+
+:global(.dark-mode) .taskTitle {
+  color: #ffffff;
+}
+
+:global(.dark-mode) .taskSubtitle {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .taskMeta {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .taskStatus {
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .progressInfo {
+  color: #60a5fa;
+}
+
+:global(.dark-mode) .expandButton {
+  background-color: #2d2d2d;
+  border-color: #404040;
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .expandButton:hover {
+  background-color: #363636;
+  border-color: #525252;
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .subTasksContainer {
+  border-top-color: #404040;
+}
+
+:global(.dark-mode) .loadingState {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .spinner {
+  border-color: #404040;
+  border-top-color: #60a5fa;
+}
+
+:global(.dark-mode) .emptySubTasks {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .subTaskItem {
+  background-color: #252525;
+  border-color: #404040;
+}
+
+:global(.dark-mode) .subTaskItem:hover {
+  background-color: #2a2a2a;
+  border-color: #525252;
+}
+
+:global(.dark-mode) .subTaskTitle {
+  color: #ffffff;
+}
+
+:global(.dark-mode) .subTaskDescription {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .subTaskMeta {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .subTaskHours {
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .subTaskDueDate {
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .statuspending {
+  background-color: #404040;
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .statusin_progress {
+  background-color: #1e3a5f;
+  color: #93c5fd;
+}
+
+:global(.dark-mode) .statuscompleted {
+  background-color: #1a4d2e;
+  color: #86efac;
+}
+
+:global(.dark-mode) .editButton,
+:global(.dark-mode) .deleteButton {
+  background-color: #2d2d2d;
+  border-color: #404040;
+  color: #9ca3af;
+}
+
+:global(.dark-mode) .editButton:hover {
+  background-color: #1e3a5f;
+  border-color: #60a5fa;
+  color: #60a5fa;
+}
+
+:global(.dark-mode) .deleteButton:hover {
+  background-color: #4a1a1a;
+  border-color: #ef4444;
+  color: #ef4444;
+}
+
+:global(.dark-mode) .markDoneButton {
+  background-color: #2563eb;
+  color: #ffffff;
+}
+
+:global(.dark-mode) .markDoneButton:hover {
+  background-color: #1d4ed8;
+}
+
+:global(.dark-mode) .completedBadge {
+  background-color: #1a4d2e;
+  color: #86efac;
+}
+
+:global(.dark-mode) .emptyState {
+  color: #9ca3af;
+  background-color: #2d2d2d;
+  border-color: #404040;
+}
+
+/* Form Modal Dark Mode Styles - Using global selectors for reactstrap Modal */
+:global(.dark-mode .modal-content) {
+  background-color: #2d2d2d !important;
+  border-color: #404040 !important;
+}
+
+:global(.dark-mode .modal-header) {
+  background-color: #2d2d2d !important;
+  border-bottom-color: #404040 !important;
+  color: #ffffff !important;
+}
+
+:global(.dark-mode .modal-header .close) {
+  color: #ffffff !important;
+  opacity: 0.8;
+}
+
+:global(.dark-mode .modal-header .close:hover) {
+  opacity: 1;
+}
+
+:global(.dark-mode .modal-body) {
+  background-color: #2d2d2d !important;
+  color: #ffffff !important;
+}
+
+:global(.dark-mode .modal-footer) {
+  background-color: #2d2d2d !important;
+  border-top-color: #404040 !important;
+}
+
+:global(.dark-mode .form-control) {
+  background-color: #1a1a1a !important;
+  border-color: #404040 !important;
+  color: #ffffff !important;
+}
+
+:global(.dark-mode .form-control:focus) {
+  background-color: #1a1a1a !important;
+  border-color: #60a5fa !important;
+  color: #ffffff !important;
+  box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25) !important;
+}
+
+:global(.dark-mode .form-control::placeholder) {
+  color: #6b7280 !important;
+}
+
+:global(.dark-mode label) {
+  color: #d1d5db !important;
+}
+
+:global(.dark-mode .btn-secondary) {
+  background-color: #404040 !important;
+  border-color: #525252 !important;
+  color: #ffffff !important;
+}
+
+:global(.dark-mode .btn-secondary:hover) {
+  background-color: #525252 !important;
+  border-color: #636363 !important;
+}
+
+:global(.dark-mode .btn-primary) {
+  background-color: #2563eb !important;
+  border-color: #2563eb !important;
+  color: #ffffff !important;
+}
+
+:global(.dark-mode .btn-primary:hover) {
+  background-color: #1d4ed8 !important;
+  border-color: #1d4ed8 !important;
+}
+
+:global(.dark-mode select.form-control) {
+  background-color: #1a1a1a !important;
+  border-color: #404040 !important;
+  color: #ffffff !important;
+}
+
+:global(.dark-mode select.form-control option) {
+  background-color: #1a1a1a !important;
+  color: #ffffff !important;
+}
+
+/* Additional styles for form inputs when using bg-yinmn-blue and bg-space-cadet */
+:global(.bg-yinmn-blue .form-control),
+:global(.bg-space-cadet .form-control) {
+  background-color: #1a1a1a !important;
+  border-color: #404040 !important;
+  color: #ffffff !important;
+}
+
+:global(.bg-yinmn-blue .form-control:focus),
+:global(.bg-space-cadet .form-control:focus) {
+  background-color: #1a1a1a !important;
+  border-color: #60a5fa !important;
+  color: #ffffff !important;
+  box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25) !important;
+}
+
+:global(.bg-yinmn-blue .form-control::placeholder),
+:global(.bg-space-cadet .form-control::placeholder) {
+  color: #6b7280 !important;
+}
+
+:global(.bg-yinmn-blue label),
+:global(.bg-space-cadet label) {
+  color: #d1d5db !important;
+}
+
+:global(.bg-yinmn-blue select.form-control),
+:global(.bg-space-cadet select.form-control) {
+  background-color: #1a1a1a !important;
+  border-color: #404040 !important;
+  color: #ffffff !important;
+}
+
+:global(.bg-yinmn-blue select.form-control option),
+:global(.bg-space-cadet select.form-control option) {
+  background-color: #1a1a1a !important;
+  color: #ffffff !important;
+}
+

src/components/EductionPortal/StudentDashboard/NavigationBar.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import styles from './NavigationBar.module.css';
 
-const NavigationBar = () => {
+const NavigationBar = ({ darkMode = false }) => {
   const [activeDropdown, setActiveDropdown] = useState(null);
 
   const toggleDropdown = dropdown => {

src/components/EductionPortal/StudentDashboard/NavigationBar.module.css

@@ -103,3 +103,22 @@
     display: none;
   }
 }
+
+/* Dark Mode Styles - Using global dark-mode class for consistency across builds */
+:global(.dark-mode) .navigationBar {
+  background-color: #1e3a5f;
+}
+
+:global(.dark-mode) .dropdownContent {
+  background-color: #2d2d2d;
+  border-color: #404040;
+}
+
+:global(.dark-mode) .dropdownItem {
+  color: #d1d5db;
+}
+
+:global(.dark-mode) .dropdownItem:hover {
+  background-color: #363636;
+  color: #ffffff;
+}

src/components/EductionPortal/StudentDashboard/StudentDashboard.jsx

@@ -24,6 +24,7 @@ const StudentDashboard = () => {
   const dispatch = useDispatch();
   const authUser = useSelector(state => state.auth.user);
   const { taskItems: tasks, fetching: loading, error } = useSelector(state => state.studentTasks);
+  const darkMode = useSelector(state => state.theme.darkMode);
 
   // Fetch tasks from API
   useEffect(() => {
@@ -150,7 +151,7 @@ const StudentDashboard = () => {
 
   return (
     <div className={styles.dashboard}>
-      <NavigationBar />
+      <NavigationBar darkMode={darkMode} />
 
       <Container className={styles.mainContainer}>
         {/* Header */}
@@ -160,7 +161,7 @@ const StudentDashboard = () => {
         </div>
 
         {/* Summary Cards */}
-        <SummaryCards data={summaryData} />
+        <SummaryCards data={summaryData} darkMode={darkMode} />
 
         {/* Recent Time Logs Section */}
         <div className={styles.timeLogsSection}>
@@ -219,6 +220,7 @@ const StudentDashboard = () => {
               expandedTasks={expandedTasks}
               onToggleIntermediateTasks={toggleIntermediateTasks}
               onMarkIntermediateAsDone={handleMarkIntermediateAsDone}
+              darkMode={darkMode}
             />
           ) : (
             <TaskListView
@@ -228,6 +230,7 @@ const StudentDashboard = () => {
               expandedTasks={expandedTasks}
               onToggleIntermediateTasks={toggleIntermediateTasks}
               onMarkIntermediateAsDone={handleMarkIntermediateAsDone}
+              darkMode={darkMode}
             />
           )}
         </div>