Merge pull request #4566 from OneCommunityGlobal/SaiKrishna_DarkModeOptimisationForAddMaterialsPage

Sai krishna_DarkModeOptimisationForAddMaterialsPage

Author: one-community

src/components/BMDashboard/AddMaterial/AddMaterial.jsx

@@ -63,6 +63,7 @@ export default function AddMaterialForm() {
   // console.log(materialTypes);
   // console.log(units)
   const createdBy = useSelector(state => state.auth.user.email);
+  const darkMode = useSelector(state => state.theme?.darkMode);
 
   useEffect(() => {
     dispatch(fetchMaterialTypes());
@@ -534,31 +535,34 @@ export default function AddMaterialForm() {
       <Modal
         isOpen={showNavigationModal}
         toggle={() => setShowNavigationModal(false)}
-        className="navigation-modal"
+        className={`navigation-modal ${darkMode ? 'text-light dark-mode' : ''}`}
       >
-        <ModalHeader toggle={() => setShowNavigationModal(false)}>
+        <ModalHeader
+          toggle={() => setShowNavigationModal(false)}
+          className={darkMode ? 'bg-space-cadet' : ''}
+        >
           <p>{`Material Added Successfully - What's Next?`}</p>
         </ModalHeader>
-        <ModalBody>
+        <ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
           <div className={`${styles.navigationOptions}`}>
             <div className={`${styles.optionContainer}`}>
               <h5>View All Inventory Types</h5>
               <p>View your just added material, including all available inventory types</p>
-              <Button color="primary" onClick={handleViewInventory}>
+              <Button color="primary" onClick={handleViewInventory} style={boxStyle}>
                 View All Inventory Types
               </Button>
             </div>
             <div className={`${styles.optionContainer}`}>
               <h5>Start Material Purchase</h5>
               <p>Initiate a purchase request to be approved by project admin</p>
-              <Button color="success" onClick={handleStartPurchase}>
+              <Button color="success" onClick={handleStartPurchase} style={boxStyle}>
                 Start Purchase Request
               </Button>
             </div>
           </div>
         </ModalBody>
-        <ModalFooter>
-          <Button color="secondary" onClick={handleStayHere}>
+        <ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
+          <Button color="secondary" onClick={handleStayHere} style={boxStyle}>
             Stay on Current Page
           </Button>
         </ModalFooter>

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

@@ -28,6 +28,7 @@ font-size: .8em;
   font-weight: bolder;
   background-color: #f5e6e6;
   padding-left: 1em;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 .addMaterialTotalPrice div{
@@ -47,6 +48,7 @@ font-size: .8em;
   background-color: #add3ef;
   padding-left: 1em;
   margin-top: 1em;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 .addMaterialCreatedby div{
@@ -95,6 +97,8 @@ font-size: .8em;
   padding: 1rem 2rem;
   border: 1px solid #ccc;
   border-radius: 20px;
+  background-color: #ffffff;
+  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
 }
 
 .addMaterialHeader h2{
@@ -124,4 +128,144 @@ font-size: .8em;
 .navigationOptions p {
   margin-bottom: 15px;
   font-size: 0.9rem;
+}
+
+/* ================== DARK MODE STYLES ================== */
+/* Only styles for elements with hardcoded light colors not covered by global BMDashboard styles */
+
+/* Main container - has hardcoded white background */
+:global(.bm-dashboard-dark) .addMaterialContainer {
+  background-color: #1c2541;
+  border-color: #3a506b;
+}
+
+/* Total Price section - has hardcoded pink background (#f5e6e6) */
+:global(.bm-dashboard-dark) .addMaterialTotalPrice {
+  background-color: #2e5061;
+}
+
+:global(.bm-dashboard-dark) .totalPriceCalculated {
+  color: #6af1ea !important;
+}
+
+/* Created by section - has hardcoded light blue background (#add3ef) */
+:global(.bm-dashboard-dark) .addMaterialCreatedby {
+  background-color: #2e5061;
+}
+
+:global(.bm-dashboard-dark) .createdby {
+  color: #6af1ea !important;
+}
+
+/* Navigation modal options - has hardcoded hover color (#f8f9fa) */
+:global(.bm-dashboard-dark) .navigationOptions .optionContainer {
+  background-color: #2e5061;
+  border-color: #3a506b;
+}
+
+:global(.bm-dashboard-dark) .navigationOptions .optionContainer:hover {
+  background-color: #3a506b;
+}
+
+/* DragAndDrop - has hardcoded white background in DragAndDrop.css */
+:global(.bm-dashboard-dark) .addMaterialForm :global(#file-upload-form) :global(#file-upload-label) {
+  background-color: #2e5061 !important;
+  border-color: #5a7a9b !important;
+}
+
+:global(.bm-dashboard-dark) .addMaterialForm :global(#file-upload-form) :global(#file-upload-label.drag-active) {
+  background-color: #3a506b !important;
+}
+
+/* Error messages - red color in dark mode */
+:global(.bm-dashboard-dark) .materialFormError {
+  color: #ff6b6b !important;
+}
+
+:global(.bm-dashboard-dark) .fieldRequired {
+  color: #ff6b6b !important;
+}
+
+/* Select dropdown options - white background when selecting */
+:global(.bm-dashboard-dark) .addMaterialForm select option {
+  background-color: #2e5061 !important;
+  color: #ffffff !important;
+}
+
+/* Browser autocomplete suggestions - white background when selecting */
+:global(.bm-dashboard-dark) .addMaterialForm input:-webkit-autofill,
+:global(.bm-dashboard-dark) .addMaterialForm input:-webkit-autofill:hover,
+:global(.bm-dashboard-dark) .addMaterialForm input:-webkit-autofill:focus,
+:global(.bm-dashboard-dark) .addMaterialForm input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 30px #2e5061 inset !important;
+  -webkit-text-fill-color: #ffffff !important;
+  caret-color: #ffffff !important;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+/* Date input - calendar picker dark mode */
+:global(.bm-dashboard-dark) .addMaterialForm input[type="date"] {
+  color-scheme: dark;
+}
+
+:global(.bm-dashboard-dark) .addMaterialForm input[type="date"]::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+  cursor: pointer;
+}
+
+/* Number input spinner arrows dark mode */
+:global(.bm-dashboard-dark) .addMaterialForm input[type="number"]::-webkit-inner-spin-button,
+:global(.bm-dashboard-dark) .addMaterialForm input[type="number"]::-webkit-outer-spin-button {
+  filter: invert(1);
+}
+
+/* PhoneInput dark mode styling */
+:global(.bm-dashboard-dark) .addMaterialForm :global(.react-tel-input) :global(.form-control) {
+  background-color: #2e5061 !important;
+  color: #ffffff !important;
+  border-color: #3a506b !important;
+}
+
+:global(.bm-dashboard-dark) .addMaterialForm :global(.react-tel-input) :global(.flag-dropdown) {
+  background-color: #2e5061 !important;
+  border-color: #3a506b !important;
+}
+
+:global(.bm-dashboard-dark) .addMaterialForm :global(.react-tel-input) :global(.selected-flag) {
+  background-color: #2e5061 !important;
+}
+
+:global(.bm-dashboard-dark) .addMaterialForm :global(.react-tel-input) :global(.selected-flag):hover,
+:global(.bm-dashboard-dark) .addMaterialForm :global(.react-tel-input) :global(.selected-flag):focus,
+:global(.bm-dashboard-dark) .addMaterialForm :global(.react-tel-input) :global(.selected-flag.open) {
+  background-color: #3a506b !important;
+}
+
+:global(.bm-dashboard-dark) .addMaterialForm :global(.react-tel-input) :global(.country-list) {
+  background-color: #2e5061 !important;
+  color: #ffffff !important;
+  border-color: #3a506b !important;
+}
+
+:global(.bm-dashboard-dark) .addMaterialForm :global(.react-tel-input) :global(.country-list) :global(.country) {
+  background-color: #2e5061 !important;
+}
+
+:global(.bm-dashboard-dark) .addMaterialForm :global(.react-tel-input) :global(.country-list) :global(.country):hover,
+:global(.bm-dashboard-dark) .addMaterialForm :global(.react-tel-input) :global(.country-list) :global(.country.highlight) {
+  background-color: #3a506b !important;
+}
+
+:global(.bm-dashboard-dark) .addMaterialForm :global(.react-tel-input) :global(.country-list) :global(.country-name),
+:global(.bm-dashboard-dark) .addMaterialForm :global(.react-tel-input) :global(.country-list) :global(.dial-code) {
+  color: #ffffff !important;
+}
+
+:global(.bm-dashboard-dark) .addMaterialForm :global(.react-tel-input) :global(.arrow) {
+  border-top-color: #ffffff !important;
+}
+
+:global(.bm-dashboard-dark) .addMaterialForm :global(.react-tel-input) :global(.arrow.up) {
+  border-bottom-color: #ffffff !important;
+  border-top-color: transparent !important;
 }