Sphurthy-added dark mode

src/App.module.css

@@ -26,9 +26,13 @@ button {
 
 
 
-/* Dark mode override for #root */
-body.dark-mode #root,
-body.bm-dashboard-dark #root {
+/* Dark mode override for #root (wrapped in :global so the scoped CSS module
+   does not hash the body class / #root id and break the real-DOM match).
+   body is darkened too so no white shows below #root when content is short. */
+:global(body.dark-mode),
+:global(body.bm-dashboard-dark),
+:global(body.dark-mode #root),
+:global(body.bm-dashboard-dark #root) {
   background-color: #1a1d23 !important;
 }
 

src/components/BMDashboard/AddConsumable/AddConsumable.jsx

@@ -150,9 +150,12 @@ function AddConsumable({ toggle }) {
   }
 
   return (
-    <Container fluid className={`${styles.consumableContainer}`}>
+    <Container
+      fluid
+      className={`${styles.consumableContainer} ${darkMode ? styles.consumableContainerDark : ''}`}
+    >
       <div className={`${styles.consumablePage} ${darkMode ? styles.darkBg : ''}`}>
-        <div className={`${styles.consumable} ${darkMode ? styles.lightBg : ''}`}>
+        <div className={`${styles.consumable} ${darkMode ? styles.consumableCardDark : ''}`}>
           <div className={`${styles.consumableTitle}`}>ADD CONSUMABLES FORM</div>
           <Card>
             <CardBody>

src/components/BMDashboard/AddConsumable/AddConsumable.module.css

@@ -62,13 +62,55 @@
 }
 
 .darkBg{
-  background-color: #2E5061;
+  background-color: #1b2a41;
 }
 
 .lightBg{
   background-color: #607D8B;
 }
 
+.consumableContainerDark {
+  background-color: #1b2a41;
+}
+
+.consumableCardDark {
+  background-color: #2e5061;
+  color: #fff;
+}
+
+.consumableCardDark .consumableTitle {
+  color: #fff;
+}
+
+.consumableCardDark :global(.card) {
+  background-color: #2e5061;
+  border-color: #3a506b;
+}
+
+.consumableCardDark :global(.card-body) {
+  background-color: #2e5061;
+  color: #fff;
+}
+
+.consumableCardDark :global(.form-control) {
+  background-color: #2a3f5f;
+  border-color: #3a506b;
+  color: #fff;
+}
+
+.consumableCardDark :global(.form-control):disabled {
+  background-color: #14233a;
+  color: #b0b8c4;
+}
+
+.consumableCardDark :global(.form-control)::placeholder {
+  color: #b0b8c4;
+}
+
+.consumableCardDark :global(.form-check-label) {
+  color: #fff;
+}
+
 .select :global(.rs__control) {
  background-color: #2a3f5f !important;
  border: none;

src/components/BMDashboard/AddMaterial/AddMaterial.module.css

@@ -67,7 +67,18 @@ font-size: .8em;
   gap: 0.5rem;
   width: 100%;
   margin-top: 1rem;
-
+
+}
+
+/* The uploaded-image preview had no bounds and rendered at full natural size;
+   cap it to a thumbnail. (.file-preview is a plain global class on each item.) */
+.filePreviewContainer :global(.file-preview) img {
+  width: auto;
+  height: auto;
+  max-width: 120px;
+  max-height: 120px;
+  object-fit: contain;
+  border-radius: 4px;
 }
 
 .materialFormError {

src/components/BMDashboard/AddTeamMember/AddTeamMember.jsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useSelector } from 'react-redux';
 import Select from 'react-select';
 import { MdOutlinePersonAddAlt1 } from 'react-icons/md';
 import { toast } from 'react-toastify';
@@ -7,6 +8,7 @@ import { ENDPOINTS } from '~/utils/URL';
 import styles from './AddTeamMember.module.css';
 
 function AddTeamMember() {
+  const darkMode = useSelector(state => state.theme.darkMode);
   const initialState = {
     firstName: '',
     lastName: '',
@@ -22,6 +24,42 @@ function AddTeamMember() {
 
   const [formData, setFormData] = useState(initialState);
 
+  const darkSelectStyles = darkMode
+    ? {
+        control: base => ({
+          ...base,
+          backgroundColor: '#2a3f5f',
+          borderColor: '#3a506b',
+          color: '#fff',
+        }),
+        menu: base => ({
+          ...base,
+          backgroundColor: '#2a3f5f',
+        }),
+        menuList: base => ({
+          ...base,
+          backgroundColor: '#2a3f5f',
+        }),
+        option: (base, state) => ({
+          ...base,
+          backgroundColor: state.isSelected || state.isFocused ? '#3a506b' : '#2a3f5f',
+          color: '#fff',
+        }),
+        singleValue: base => ({
+          ...base,
+          color: '#fff',
+        }),
+        input: base => ({
+          ...base,
+          color: '#fff',
+        }),
+        placeholder: base => ({
+          ...base,
+          color: '#b0b8c4',
+        }),
+      }
+    : undefined;
+
   const optionsRole = [
     { value: 'carpenter', label: 'Carpenter' },
     { value: 'volunteer', label: 'Volunteer' },
@@ -138,7 +176,7 @@ function AddTeamMember() {
   };
 
   return (
-    <div className={`${styles.containerAdd}`}>
+    <div className={`${styles.containerAdd} ${darkMode ? styles.containerAddDark : ''}`}>
       <div className={`${styles.iconAddPerson}`}>
         <MdOutlinePersonAddAlt1 size={90} />
         <h1 className={`${styles.titleMember}`}>Create new team member</h1>
@@ -192,6 +230,7 @@ function AddTeamMember() {
               value={formData.role}
               onChange={option => handleSelectChange(option, 'role')}
               className={formData.errors.role ? 'error' : ''}
+              styles={darkSelectStyles}
             />
             Roles
           </label>
@@ -231,6 +270,7 @@ function AddTeamMember() {
               value={formData.team}
               onChange={option => handleSelectChange(option, 'team')}
               className={formData.errors.team ? 'error' : ''}
+              styles={darkSelectStyles}
             />
             Teams
           </label>
@@ -280,6 +320,7 @@ function AddTeamMember() {
             value={countryCodes.find(code => code.value === formData.countryCode)}
             onChange={option => handleSelectChange(option, 'countryCode')}
             className={`${styles.countryCodeSelect}`}
+            styles={darkSelectStyles}
           />
           <input
             type="tel"

src/components/BMDashboard/AddTeamMember/AddTeamMember.module.css

@@ -163,4 +163,35 @@
     color: red;
     font-size: 12px;
     margin-top: 5px;
+}
+
+/* Dark Mode */
+.containerAddDark {
+    background-color: #1b2a41;
+    color: #fff;
+}
+
+.containerAddDark .iconAddPerson,
+.containerAddDark label,
+.containerAddDark .inputName label,
+.containerAddDark .roleInput label,
+.containerAddDark .teamInput label,
+.containerAddDark .contactInfo label {
+    color: #fff;
+}
+
+.containerAddDark input {
+    background-color: #2a3f5f;
+    border: 1px solid #3a506b;
+    color: #fff;
+}
+
+.containerAddDark input::placeholder {
+    color: #b0b8c4;
+}
+
+.containerAddDark .cancelButton {
+    background-color: #2e5061;
+    border-color: #3a506b;
+    color: #fff;
 }

src/components/BMDashboard/BMTimeLogger/BMTimeLogCard.jsx

@@ -1,12 +1,15 @@
 import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import { Container, Row, Col, InputGroup, Input } from 'reactstrap';
 import { useSelector, useDispatch } from 'react-redux';
 import BMError from '../shared/BMError';
 import { fetchBMProjectMembers } from '../../../actions/bmdashboard/projectMemberAction';
 import BMTimeLogDisplayMember from './BMTimeLogDisplayMember';
 import BMTimeLogSummary from './BMTimeLogSummary';
+import styles from './BMTimeLogCard.module.css';
 
 function BMTimeLogCard(props) {
+  const darkMode = props.darkMode ?? false;
   const [isError, setIsError] = useState(false);
   const [memberList, setMemberList] = useState([]);
   const [isMemberFetched, setIsMemberFetched] = useState(false);
@@ -87,9 +90,9 @@ function BMTimeLogCard(props) {
   };
 
   return (
-    <Container fluid>
+    <Container fluid className={darkMode ? styles.darkMode : ''}>
       {/* Time Log Summary Section */}
-      <BMTimeLogSummary projectId={props.selectedProject} />
+      <BMTimeLogSummary projectId={props.selectedProject} darkMode={darkMode} />
 
       {isMemberFetched && (
         <>
@@ -144,4 +147,14 @@ function BMTimeLogCard(props) {
   );
 }
 
+BMTimeLogCard.propTypes = {
+  darkMode: PropTypes.bool,
+  selectedProject: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+BMTimeLogCard.defaultProps = {
+  darkMode: false,
+  selectedProject: null,
+};
+
 export default BMTimeLogCard;

src/components/BMDashboard/BMTimeLogger/BMTimeLogCard.module.css

@@ -213,3 +213,95 @@
 font-size: 0.875em;
 margin-top:3px;
 }
+
+/* Dark mode via Redux-driven conditional class on the card container */
+.darkMode {
+  background-color: #1b2a41;
+  color: #fff;
+}
+
+/* Search input inside the card in dark mode */
+.darkMode :global(input.form-control) {
+  background-color: #2a3f5f;
+  border-color: #3a506b;
+  color: #fff;
+}
+
+.darkMode :global(input.form-control)::placeholder {
+  color: #b7c4d4;
+}
+
+/* Muted helper text (e.g. "Found X out of Y members") on the dark container */
+.darkMode :global(.text-muted) {
+  color: #b7c4d4 !important;
+}
+
+/* Member card in dark mode (header keeps its role color; body goes dark) */
+.memberCardDark {
+  background-color: #2e5061;
+  color: #fff;
+}
+
+.memberCardDark :global(.card-body) {
+  background-color: #2e5061;
+  color: #fff;
+}
+
+/* "Start at:" time text (default gray) needs lightening on dark card */
+.memberCardDark .fontColorGray {
+  color: #cdd8e6;
+}
+
+/* Time Log Summary card + table in dark mode */
+.summaryCardDark {
+  background-color: #2e5061;
+  color: #fff;
+  border-color: #3a506b;
+}
+
+.summaryCardDark :global(.card-body) {
+  background-color: #2e5061;
+  color: #fff;
+}
+
+.summaryCardDark :global(table) {
+  color: #e0eaf5;
+}
+
+.summaryCardDark :global(table) th,
+.summaryCardDark :global(table) td {
+  color: #e0eaf5;
+  border-color: #3a506b;
+}
+
+/* Table header row: dark background + light text so the column labels
+   ("Member, Role, Start Time, ...") stay readable in dark mode.
+   Override bootstrap's --bs-table-color which otherwise forces dark header text. */
+.summaryCardDark :global(table) thead th {
+  background-color: #2f4157;
+  color: #e8edf4;
+  border-color: #3a506b;
+
+  --bs-table-color: #e8edf4;
+  --bs-table-bg: #2f4157;
+}
+
+/* Override bootstrap striped row background so rows stay dark */
+.summaryCardDark :global(.table-striped) > tbody > tr:nth-of-type(odd) > * {
+  background-color: #355a6e;
+  color: #e0eaf5;
+}
+
+.summaryCardDark :global(.table-striped) > tbody > tr:nth-of-type(even) > * {
+  background-color: #2e5061;
+  color: #e0eaf5;
+}
+
+.summaryCardDark :global(.table-hover) > tbody > tr:hover > * {
+  background-color: #3d6479;
+  color: #fff;
+}
+
+.summaryCardDark :global(.text-muted) {
+  color: #b7c4d4 !important;
+}

src/components/BMDashboard/BMTimeLogger/BMTimeLogDisplayMember.jsx

@@ -1,9 +1,11 @@
+import { useSelector } from 'react-redux';
 import { CardHeader, Card } from 'reactstrap';
 import BMTimeLogStopWatch from './BMTimeLogStopWatch';
 import styles from './BMTimeLogCard.module.css';
 
 // function BMTimeLogCard({ selectedProject }) {
 function BMTimeLogDisplayMember({ firstName, lastName, role, memberId, projectId }) {
+  const darkMode = useSelector(state => state.theme.darkMode);
   const roleColors = {
     volunteer: '#78bdda', // light blue
     core: '#ecb16c', // light orange
@@ -19,7 +21,9 @@ function BMTimeLogDisplayMember({ firstName, lastName, role, memberId, projectId
   return (
     <div>
       <Card
-        className={`${styles.memberCard} rounded-8 mr-3 my-3`}
+        className={`${styles.memberCard} ${
+          darkMode ? styles.memberCardDark : ''
+        } rounded-8 mr-3 my-3`}
         style={{ border: borderProperty }}
       >
         <CardHeader className={`${styles.memberCardHeader}`} style={{ backgroundColor: cardColor }}>