Merge pull request #4484 from OneCommunityGlobal/kristin-add-dark-mode-support-for-log-attendance-page

Sai Sandeep taking over for Kristin - Add Dark Mode Support for Log Attendance Page

Author: one-community

src/components/AttendanceSystem/AttendanceNoShowCharts.jsx

@@ -10,7 +10,7 @@ import { ENDPOINTS } from '~/utils/URL';
 import { events as mockEvents } from './mockData';
 import styles from './AttendanceNoShowCharts.module.css';
 
-const attendanceColors = ['#0088FE', '#FF8042'];
+const attendanceColors = ['#0088FE', '#FF8042', '#FFBB28'];
 const noShowColors = ['#00C49F', '#FF0000'];
 
 // Status color mapping
@@ -133,12 +133,13 @@ const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, per
     <text
       x={x}
       y={y}
-      fill="black"
-      textAnchor={x > cx ? 'start' : 'end'}
+      fill="white"
+      textAnchor="middle"
       dominantBaseline="central"
       fontSize="12"
+      fontWeight="bold"
     >
-      {`${(percent * 100).toFixed(1)}%`}
+      {percent > 0 ? `${(percent * 100).toFixed(0)}%` : ''}
     </text>
   );
 };

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)} />}
 

src/components/Header/Header.module.css

@@ -187,6 +187,7 @@
   }
 }
 
+
 @media screen and (max-width: 1151px) and (min-width: 992px) {
   .dropdownMenu {
       width: auto !important;
@@ -302,6 +303,7 @@
 }
 
 /* Responsive behavior - prevent icon overlap on smaller screens */
+
 @media (max-width: 1200px) {
   .left-section,
   .center-section,
@@ -351,4 +353,5 @@
     width: 100% !important;
     justify-content: center !important;
   }
-}
+}
+

src/components/UserManagement/ActiveInactiveConfirmationPopup.jsx

@@ -9,7 +9,7 @@ import {
   ModalFooter,
 } from 'reactstrap';
 import '../Header/index.css';
-import { InactiveReason } from '../../utils/enums';
+import { InactiveReason } from '../../utils/enums.js';
 
 const ActiveInactiveConfirmationPopup = React.memo((props) => {
   const darkMode = useSelector(state => state.theme.darkMode);