resolving dark mode errors

Author: saisandeepkoritala

src/components/Header/DarkMode.module.css

@@ -1,243 +1,81 @@
-/* Dark mode button styles */
-.dark-mode-button {
-  cursor: pointer;
-  padding: 0;
+/* --- Root Wrapper --- */
+.darkModeButton {
+  display: inline-block;
+  background: transparent !important;
 }
 
-.red-asterisk {
-  color: #e00000;
-  font-weight: bold;
+/* Neutralize menu/row hover effects */
+.isDarkState, .isDarkState:hover {
+  background-color: transparent !important;
 }
 
-.dark-mode .close {
-  color: white;
-  opacity: 1; 
-}
-
-.dark-mode .close:hover {
-  color: #f0f0f0;
-  opacity: 1; 
-}
-/* Custom styles for datepicker in darkMode */
-.dark-mode .react-datepicker {
-  background-color: #3A506B;
-  color: #ffffff;
-}
-.dark-mode .react-datepicker__header {
-  background-color: #1C2541;
-  border-bottom: 1px solid #555555;
-}
-.dark-mode .react-datepicker__current-month {
-  color: #ffffff;
-}
-.dark-mode .react-datepicker__navigation--previous::before,
-.dark-mode .react-datepicker__navigation--next::before {
-  border-color: #ffffff;
-}
-.dark-mode .react-datepicker__month-container {
-  background-color: #3A506B;
-}
-.dark-mode .react-datepicker__day,
-.dark-mode .react-datepicker__time-name {
-  color: #ffffff;
-}
-.dark-mode .react-datepicker__day-name {
-  background-color: #1C2541;
-  color: #ffffff;
-}
-.dark-mode .react-datepicker__day--selected,
-.dark-mode .react-datepicker__day--in-selecting-range,
-.dark-mode .react-datepicker__day--in-range,
-.dark-mode .react-datepicker__day:hover {
-  background-color: #1C2541;
-  color: #ffffff;
-}
-.dark-mode .react-datepicker__navigation {
-  background: none;
-}
-.dark-mode .react-datepicker__navigation::before {
-  border-color: #ffffff;
-}
-
-.no-hover tr:hover {
-  background-color: inherit !important;
-  color: inherit !important;
-}
-
-.hover-effect-reports-page-dark-mode:hover {
-  background-color: #1C2541; 
-  color: #ffffff; 
-}
-
-/* Dark mode for DayPicker (AddTaskModal) */
-.dark-mode .DayPicker {
-  background-color: #3A506B;
-  color: #ffffff;
-}
-/* .dark-mode .DayPicker-wrapper {
-  background-color: #1C2541;
-} */
-.dark-mode .DayPicker-Caption {
-  color: #ffffff;
-}
-.dark-mode .DayPicker-NavButton {
-  /* background: none; */
-}
-.dark-mode .DayPicker-Month {
-  background-color: #3A506B;
-}
-.dark-mode .DayPicker-NavButton--prev::before,
-.dark-mode .DayPicker-NavButton--next::before {
-  border-color: #ffffff;
-}
-.dark-mode .DayPicker-Day {
-  color: #ffffff;
-}
-.dark-mode .DayPicker-Weekday {
-  color: #ffffff;
-}
-.dark-mode .DayPicker-Day:hover {
-  background-color: #1C2541 !important; /* Remove background color on hover */
-  color: #ffffff !important; /* Ensure text color remains white */
-}
-.dark-mode tr:hover{
-  background-color: #2f4157;
-}
-
-/* DARK MODE BUTTON */
-
-.darkModeSliderContainer {
+/* --- Shared Slider Logic --- */
+.sliderContainerDark, .sliderContainerLight {
   width: 120px;
   height: 30px;
   border-radius: 20px;
   display: flex;
-  justify-content: flex-start;
   align-items: center;
-  background-color: #1C2541;
   position: relative;
-  transition: background-color 1000ms ease-in-out;
+  transition: background-color 0.4s ease;
+}
+
+.sliderContainerDark { background-color: #1C2541; }
+.sliderContainerLight { 
+  background-color: #e3e3e3; 
+  border: 1px solid #d4d4d4; 
 }
 
-.sunHoverIcon, .nightIcon {
+/* --- Icons --- */
+.iconSun, .iconSunHover, .iconNight, .iconNightHover {
   height: 25px;
   padding: 2px;
   border-radius: 50%;
-  margin: 0 4px 0 3px;
   background: white;
   position: absolute;
-  transition: opacity 1000ms ease-in-out, margin-left 1000ms ease-in-out;
+  transition: all 500ms ease-in-out;
 }
 
-.nightIcon {
-  opacity: 0;
+/* --- Text Visibility Logic --- */
+.labelDark, .labelLight, .labelDarkHover, .labelLightHover {
+  font-size: 13px;
+  font-weight: 500;
+  transition: opacity 500ms ease, color 0.2s ease;
 }
 
-.darkModeText {
-  margin-left: 32px;
-  color: #f0f0f0;
-  opacity: 1;
-  transition: color 500ms ease-in-out, opacity 200ms linear 800ms;
-}
+.labelDark { margin-left: 32px; color: #f0f0f0; opacity: 1; }
+.labelLight { margin-left: 6px; color: #151515; opacity: 1; }
 
-.lightModeHoverText {
-  opacity: 0;
-  color: #151515;
+.labelLightHover, .labelDarkHover {
   position: absolute;
-  margin-left: 6px;
-  transition: opacity 100ms linear, transition-delay 300ms linear;
-}
-
-.darkModeSliderContainer:hover {
-  background-color: white;
-}
-
-.darkModeSliderContainer:hover .darkModeText {
-  color: black;
   opacity: 0;
-  transition: color 500ms ease-in-out, opacity 0s linear;
-}
-
-.darkModeSliderContainer:hover .sunHoverIcon {
-  opacity: 0;
-  margin-left: 75%;
-}
-
-.darkModeSliderContainer:hover .nightIcon {
-  opacity: 1;
-  margin-left: 75%;
-}
-
-.darkModeSliderContainer:hover .lightModeHoverText {
-  opacity: 1;
-  transition: opacity 200ms linear 800ms;
-}
-
-/* LIGHT MODE BUTTON */
-
-.lightModeSliderContainer {
-  width: 120px;
-  height: 30px;
-  border: 1px solid rgb(212, 212, 212);
-  border-radius: 20px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  background-color: #e3e3e3;
-  position: relative;
-  transition: background-color 1000ms ease-in-out;
 }
 
-.sunIcon, .nightHoverIcon {
-  height: 25px;
-  padding: 2px;
-  border-radius: 50%;
-  margin: 0 4px 0 3px;
-  background: white;
-  position: absolute;
-  margin-left: 75%;
-  box-shadow: 1px -1px 1px black;
-  transition: opacity 1000ms ease-in-out, margin-left 1000ms ease-in-out;
-}
+.labelLightHover { margin-left: 6px; color: #151515; }
+.labelDarkHover { margin-left: 32px; color: #ffffff; }
 
-.nightHoverIcon {
-  opacity: 0;
-}
+/* --- Hover States (Dark) --- */
+.sliderContainerDark:hover { background-color: #ffffff; }
 
-.lightModeText {
-  margin-left: 6px;
-  color: #151515;
-  opacity: 1;
-  transition: opacity 100ms linear 800ms;
-}
+.sliderContainerDark:hover .labelDark { opacity: 0; }
+.sliderContainerDark:hover .labelLightHover { opacity: 1; }
 
-.darkModeHoverText {
-  color: white;
-  opacity: 0;
-  position: absolute;
-  margin-left: 32px;
-  transition: opacity 100ms linear, transition-delay 300ms linear;
-}
+.sliderContainerDark:hover .iconSunHover { opacity: 0; left: 90px; }
+.sliderContainerDark:hover .iconNight { opacity: 1; left: 90px; }
 
-.lightModeSliderContainer:hover {
-  background-color: #1C2541;
-}
+/* --- Hover States (Light) --- */
+.sliderContainerLight:hover { background-color: #1C2541; }
 
-.lightModeSliderContainer:hover .lightModeText {
-  opacity: 0;
-  transition: opacity 200ms linear 0s;
-}
+.sliderContainerLight:hover .labelLight { opacity: 0; }
+.sliderContainerLight:hover .labelDarkHover { opacity: 1; }
 
-.lightModeSliderContainer:hover .sunIcon {
-  opacity: 0;
-  margin-left: 2px;
-}
+.sliderContainerLight:hover .iconSun { opacity: 0; left: 4px; }
+.sliderContainerLight:hover .iconNightHover { opacity: 1; left: 4px; }
 
-.lightModeSliderContainer:hover .nightHoverIcon {
-  opacity: 1;
-  margin-left: 2px;
-}
+/* Initialization positions */
+.iconSun, .iconNightHover { left: 90px; }
+.iconNight, .iconSunHover { left: 4px; }
 
-.lightModeSliderContainer:hover .darkModeHoverText {
-  opacity: 1;
-  transition: opacity 200ms linear 800ms;
-}
+.sliderContainerDark:hover .labelLightHover{
+  color: #151515 !important;
+}

src/components/Header/DarkModeButton.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import './index.css';
+import styles from './DarkMode.module.css'; // Access classes via 'styles'
 import { Tooltip } from 'reactstrap';
 import sunIcon from './images/sunIcon.png';
 import nightIcon from './images/nightIcon.png';
@@ -15,7 +15,6 @@ function DarkModeButton() {
     dispatch({ type: 'TOGGLE_THEME' });
   };
 
-  // Listen for localStorage changes from other tabs
   useEffect(() => {
     const handleStorageChange = event => {
       if (event.key === 'darkMode' && !updatingTheme) {
@@ -27,23 +26,17 @@ function DarkModeButton() {
     };
 
     window.addEventListener('storage', handleStorageChange);
-    return () => {
-      window.removeEventListener('storage', handleStorageChange);
-    };
-  }, [darkMode, dispatch]);
+    return () => window.removeEventListener('storage', handleStorageChange);
+  }, [darkMode, dispatch, updatingTheme]);
 
   useEffect(() => {
     setUpdatingTheme(true);
     localStorage.setItem('darkMode', darkMode);
-    // Reset the flag after a small delay (to ensure the storage event won't fire in the same tab)
-    setTimeout(() => {
-      setUpdatingTheme(false);
-    }, 100);
+    const timer = setTimeout(() => setUpdatingTheme(false), 100);
+    return () => clearTimeout(timer);
   }, [darkMode]);
 
-  const toggleTooltip = () => {
-    setTooltipOpen(!tooltipOpen);
-  };
+  const toggleTooltip = () => setTooltipOpen(!tooltipOpen);
 
   return (
     <>
@@ -58,7 +51,7 @@ function DarkModeButton() {
       <div
         role="button"
         tabIndex={0}
-        className={`dark-mode-button ${darkMode ? 'dark-mode' : ''}`}
+        className={`${styles.darkModeButton} ${darkMode ? styles.isDarkState : ''}`}
         onClick={toggleDarkMode}
         onKeyDown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') {
@@ -70,23 +63,23 @@ function DarkModeButton() {
         style={{ cursor: 'pointer', border: 'none', background: 'none', padding: 0 }}
       >
         {darkMode ? (
-          <div className="darkModeSliderContainer">
-            <img src={nightIcon} alt="Night Icon" className="nightIcon" />
-            <img src={sunIcon} alt="Sun Icon" className="sunHoverIcon" />
-            <span className="darkModeText">Dark Mode</span>
-            <span className="lightModeHoverText">Light Mode</span>
+          <div className={styles.sliderContainerDark}>
+            <img src={nightIcon} alt="Night" className={styles.iconNight} />
+            <img src={sunIcon} alt="Sun" className={styles.iconSunHover} />
+            <span className={styles.labelDark}>Dark Mode</span>
+            <span className={styles.labelLightHover}>Light Mode</span>
           </div>
         ) : (
-          <div className="lightModeSliderContainer">
-            <img src={sunIcon} alt="Sun Icon" className="sunIcon" />
-            <img src={nightIcon} alt="Night Icon" className="nightHoverIcon" />
-            <span className="lightModeText">Light Mode</span>
-            <span className="darkModeHoverText">Dark Mode</span>
+          <div className={styles.sliderContainerLight}>
+            <img src={sunIcon} alt="Sun" className={styles.iconSun} />
+            <img src={nightIcon} alt="Night" className={styles.iconNightHover} />
+            <span className={styles.labelLight}>Light Mode</span>
+            <span className={styles.labelDarkHover}>Dark Mode</span>
           </div>
         )}
       </div>
     </>
   );
 }
 
-export default DarkModeButton;
+export default DarkModeButton;

src/components/Header/Header.jsx

@@ -406,7 +406,7 @@ export function Header(props) {
   const viewingUser = JSON.parse(window.sessionStorage.getItem('viewingUser'));
   return (
     <div className={`${styles.headerWrapper}`} data-testid="header">
-      <Navbar className={`py-3 ${styles.navbar}`} color="dark" dark expand="xl">
+      <Navbar className={`py-3 ${styles.navbar}`} color="dark" dark expand={true}>
         {logoutPopup && <Logout open={logoutPopup} setLogoutPopup={setLogoutPopup} />}
         {showPromotionsPopup && <DisplayBox onClose={() => setShowPromotionsPopup(false)} />}