Skip to content

Commit d7cb4f0

Browse files
one-communityone-community
authored
Merge pull request #4560 from OneCommunityGlobal/shashank-madan-intermediate-tasks-dark-mode
Shashank madan intermediate tasks dark mode
2 parents 26d9871 + 5803622 commit d7cb4f0

17 files changed

Lines changed: 764 additions & 6 deletions

‎src/components/EductionPortal/IntermediateTasks/IntermediateTaskForm.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,11 @@ const IntermediateTaskForm = ({ task, onSubmit, onCancel }) => {
8080
};
8181

8282
return (
83-
<Modal isOpen={true} toggle={onCancel} size="lg" className={styles.formModal}>
83+
<Modal isOpen={true} toggle={onCancel} size="lg">
8484
<ModalHeader toggle={onCancel}>
8585
{task ? 'Edit Intermediate Task' : 'Add Intermediate Task'}
8686
</ModalHeader>
87-
<Form onSubmit={handleSubmit}>
87+
<Form onSubmit={handleSubmit} className={styles.formModal}>
8888
<ModalBody>
8989
<FormGroup>
9090
<Label for="title">Title *</Label>

‎src/components/EductionPortal/IntermediateTasks/IntermediateTaskList.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const IntermediateTaskList = () => {
1717
const dispatch = useDispatch();
1818
const authUser = useSelector(state => state.auth.user);
1919
const { taskItems: parentTasks } = useSelector(state => state.studentTasks);
20+
const darkMode = useSelector(state => state.theme.darkMode);
2021

2122
const [expandedTasks, setExpandedTasks] = useState({});
2223
const [intermediateTasks, setIntermediateTasks] = useState({});

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

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -364,3 +364,283 @@
364364
}
365365
}
366366

367+
/* Dark Mode Styles - Using global dark-mode class for consistency across builds */
368+
:global(.dark-mode) .dashboard {
369+
background-color: #1a1a1a;
370+
}
371+
372+
:global(.dark-mode) .title {
373+
color: #ffffff;
374+
}
375+
376+
:global(.dark-mode) .subtitle {
377+
color: #9ca3af;
378+
}
379+
380+
:global(.dark-mode) .taskCard {
381+
background-color: #2d2d2d;
382+
border-color: #404040;
383+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
384+
}
385+
386+
:global(.dark-mode) .taskCard:hover {
387+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
388+
}
389+
390+
:global(.dark-mode) .taskTitle {
391+
color: #ffffff;
392+
}
393+
394+
:global(.dark-mode) .taskSubtitle {
395+
color: #9ca3af;
396+
}
397+
398+
:global(.dark-mode) .taskMeta {
399+
color: #9ca3af;
400+
}
401+
402+
:global(.dark-mode) .taskStatus {
403+
color: #d1d5db;
404+
}
405+
406+
:global(.dark-mode) .progressInfo {
407+
color: #60a5fa;
408+
}
409+
410+
:global(.dark-mode) .expandButton {
411+
background-color: #2d2d2d;
412+
border-color: #404040;
413+
color: #9ca3af;
414+
}
415+
416+
:global(.dark-mode) .expandButton:hover {
417+
background-color: #363636;
418+
border-color: #525252;
419+
color: #d1d5db;
420+
}
421+
422+
:global(.dark-mode) .subTasksContainer {
423+
border-top-color: #404040;
424+
}
425+
426+
:global(.dark-mode) .loadingState {
427+
color: #9ca3af;
428+
}
429+
430+
:global(.dark-mode) .spinner {
431+
border-color: #404040;
432+
border-top-color: #60a5fa;
433+
}
434+
435+
:global(.dark-mode) .emptySubTasks {
436+
color: #9ca3af;
437+
}
438+
439+
:global(.dark-mode) .subTaskItem {
440+
background-color: #252525;
441+
border-color: #404040;
442+
}
443+
444+
:global(.dark-mode) .subTaskItem:hover {
445+
background-color: #2a2a2a;
446+
border-color: #525252;
447+
}
448+
449+
:global(.dark-mode) .subTaskTitle {
450+
color: #ffffff;
451+
}
452+
453+
:global(.dark-mode) .subTaskDescription {
454+
color: #9ca3af;
455+
}
456+
457+
:global(.dark-mode) .subTaskMeta {
458+
color: #9ca3af;
459+
}
460+
461+
:global(.dark-mode) .subTaskHours {
462+
color: #d1d5db;
463+
}
464+
465+
:global(.dark-mode) .subTaskDueDate {
466+
color: #9ca3af;
467+
}
468+
469+
:global(.dark-mode) .statuspending {
470+
background-color: #404040;
471+
color: #d1d5db;
472+
}
473+
474+
:global(.dark-mode) .statusin_progress {
475+
background-color: #1e3a5f;
476+
color: #93c5fd;
477+
}
478+
479+
:global(.dark-mode) .statuscompleted {
480+
background-color: #1a4d2e;
481+
color: #86efac;
482+
}
483+
484+
:global(.dark-mode) .editButton,
485+
:global(.dark-mode) .deleteButton {
486+
background-color: #2d2d2d;
487+
border-color: #404040;
488+
color: #9ca3af;
489+
}
490+
491+
:global(.dark-mode) .editButton:hover {
492+
background-color: #1e3a5f;
493+
border-color: #60a5fa;
494+
color: #60a5fa;
495+
}
496+
497+
:global(.dark-mode) .deleteButton:hover {
498+
background-color: #4a1a1a;
499+
border-color: #ef4444;
500+
color: #ef4444;
501+
}
502+
503+
:global(.dark-mode) .markDoneButton {
504+
background-color: #2563eb;
505+
color: #ffffff;
506+
}
507+
508+
:global(.dark-mode) .markDoneButton:hover {
509+
background-color: #1d4ed8;
510+
}
511+
512+
:global(.dark-mode) .completedBadge {
513+
background-color: #1a4d2e;
514+
color: #86efac;
515+
}
516+
517+
:global(.dark-mode) .emptyState {
518+
color: #9ca3af;
519+
background-color: #2d2d2d;
520+
border-color: #404040;
521+
}
522+
523+
/* Form Modal Dark Mode Styles - Using global selectors for reactstrap Modal */
524+
:global(.dark-mode .modal-content) {
525+
background-color: #2d2d2d !important;
526+
border-color: #404040 !important;
527+
}
528+
529+
:global(.dark-mode .modal-header) {
530+
background-color: #2d2d2d !important;
531+
border-bottom-color: #404040 !important;
532+
color: #ffffff !important;
533+
}
534+
535+
:global(.dark-mode .modal-header .close) {
536+
color: #ffffff !important;
537+
opacity: 0.8;
538+
}
539+
540+
:global(.dark-mode .modal-header .close:hover) {
541+
opacity: 1;
542+
}
543+
544+
:global(.dark-mode .modal-body) {
545+
background-color: #2d2d2d !important;
546+
color: #ffffff !important;
547+
}
548+
549+
:global(.dark-mode .modal-footer) {
550+
background-color: #2d2d2d !important;
551+
border-top-color: #404040 !important;
552+
}
553+
554+
:global(.dark-mode .form-control) {
555+
background-color: #1a1a1a !important;
556+
border-color: #404040 !important;
557+
color: #ffffff !important;
558+
}
559+
560+
:global(.dark-mode .form-control:focus) {
561+
background-color: #1a1a1a !important;
562+
border-color: #60a5fa !important;
563+
color: #ffffff !important;
564+
box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25) !important;
565+
}
566+
567+
:global(.dark-mode .form-control::placeholder) {
568+
color: #6b7280 !important;
569+
}
570+
571+
:global(.dark-mode label) {
572+
color: #d1d5db !important;
573+
}
574+
575+
:global(.dark-mode .btn-secondary) {
576+
background-color: #404040 !important;
577+
border-color: #525252 !important;
578+
color: #ffffff !important;
579+
}
580+
581+
:global(.dark-mode .btn-secondary:hover) {
582+
background-color: #525252 !important;
583+
border-color: #636363 !important;
584+
}
585+
586+
:global(.dark-mode .btn-primary) {
587+
background-color: #2563eb !important;
588+
border-color: #2563eb !important;
589+
color: #ffffff !important;
590+
}
591+
592+
:global(.dark-mode .btn-primary:hover) {
593+
background-color: #1d4ed8 !important;
594+
border-color: #1d4ed8 !important;
595+
}
596+
597+
:global(.dark-mode select.form-control) {
598+
background-color: #1a1a1a !important;
599+
border-color: #404040 !important;
600+
color: #ffffff !important;
601+
}
602+
603+
:global(.dark-mode select.form-control option) {
604+
background-color: #1a1a1a !important;
605+
color: #ffffff !important;
606+
}
607+
608+
/* Additional styles for form inputs when using bg-yinmn-blue and bg-space-cadet */
609+
:global(.bg-yinmn-blue .form-control),
610+
:global(.bg-space-cadet .form-control) {
611+
background-color: #1a1a1a !important;
612+
border-color: #404040 !important;
613+
color: #ffffff !important;
614+
}
615+
616+
:global(.bg-yinmn-blue .form-control:focus),
617+
:global(.bg-space-cadet .form-control:focus) {
618+
background-color: #1a1a1a !important;
619+
border-color: #60a5fa !important;
620+
color: #ffffff !important;
621+
box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25) !important;
622+
}
623+
624+
:global(.bg-yinmn-blue .form-control::placeholder),
625+
:global(.bg-space-cadet .form-control::placeholder) {
626+
color: #6b7280 !important;
627+
}
628+
629+
:global(.bg-yinmn-blue label),
630+
:global(.bg-space-cadet label) {
631+
color: #d1d5db !important;
632+
}
633+
634+
:global(.bg-yinmn-blue select.form-control),
635+
:global(.bg-space-cadet select.form-control) {
636+
background-color: #1a1a1a !important;
637+
border-color: #404040 !important;
638+
color: #ffffff !important;
639+
}
640+
641+
:global(.bg-yinmn-blue select.form-control option),
642+
:global(.bg-space-cadet select.form-control option) {
643+
background-color: #1a1a1a !important;
644+
color: #ffffff !important;
645+
}
646+

‎src/components/EductionPortal/StudentDashboard/NavigationBar.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from 'react';
22
import styles from './NavigationBar.module.css';
33

4-
const NavigationBar = () => {
4+
const NavigationBar = ({ darkMode = false }) => {
55
const [activeDropdown, setActiveDropdown] = useState(null);
66

77
const toggleDropdown = dropdown => {

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,3 +103,22 @@
103103
display: none;
104104
}
105105
}
106+
107+
/* Dark Mode Styles - Using global dark-mode class for consistency across builds */
108+
:global(.dark-mode) .navigationBar {
109+
background-color: #1e3a5f;
110+
}
111+
112+
:global(.dark-mode) .dropdownContent {
113+
background-color: #2d2d2d;
114+
border-color: #404040;
115+
}
116+
117+
:global(.dark-mode) .dropdownItem {
118+
color: #d1d5db;
119+
}
120+
121+
:global(.dark-mode) .dropdownItem:hover {
122+
background-color: #363636;
123+
color: #ffffff;
124+
}

‎src/components/EductionPortal/StudentDashboard/StudentDashboard.jsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const StudentDashboard = () => {
2424
const dispatch = useDispatch();
2525
const authUser = useSelector(state => state.auth.user);
2626
const { taskItems: tasks, fetching: loading, error } = useSelector(state => state.studentTasks);
27+
const darkMode = useSelector(state => state.theme.darkMode);
2728

2829
// Fetch tasks from API
2930
useEffect(() => {
@@ -150,7 +151,7 @@ const StudentDashboard = () => {
150151

151152
return (
152153
<div className={styles.dashboard}>
153-
<NavigationBar />
154+
<NavigationBar darkMode={darkMode} />
154155

155156
<Container className={styles.mainContainer}>
156157
{/* Header */}
@@ -160,7 +161,7 @@ const StudentDashboard = () => {
160161
</div>
161162

162163
{/* Summary Cards */}
163-
<SummaryCards data={summaryData} />
164+
<SummaryCards data={summaryData} darkMode={darkMode} />
164165

165166
{/* Recent Time Logs Section */}
166167
<div className={styles.timeLogsSection}>
@@ -219,6 +220,7 @@ const StudentDashboard = () => {
219220
expandedTasks={expandedTasks}
220221
onToggleIntermediateTasks={toggleIntermediateTasks}
221222
onMarkIntermediateAsDone={handleMarkIntermediateAsDone}
223+
darkMode={darkMode}
222224
/>
223225
) : (
224226
<TaskListView
@@ -228,6 +230,7 @@ const StudentDashboard = () => {
228230
expandedTasks={expandedTasks}
229231
onToggleIntermediateTasks={toggleIntermediateTasks}
230232
onMarkIntermediateAsDone={handleMarkIntermediateAsDone}
233+
darkMode={darkMode}
231234
/>
232235
)}
233236
</div>

0 commit comments

Comments
 (0)