From 62507872e88e47790b705905fb37d142af6f8da9 Mon Sep 17 00:00:00 2001
From: sircarmart <carmartu7@gmail.com>
Date: Sat, 16 Aug 2025 11:07:54 -0700
Subject: [PATCH 1/7] add dark mode backgrounds

---
 .../LBDashboard/Messaging/LBMessaging.jsx     | 78 ++++++++++++++-----
 .../Messaging/LBMessaging.module.css          | 21 +++++
 2 files changed, 79 insertions(+), 20 deletions(-)

diff --git a/src/components/LBDashboard/Messaging/LBMessaging.jsx b/src/components/LBDashboard/Messaging/LBMessaging.jsx
index 20c5d84b16..294f093d9e 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.jsx
+++ b/src/components/LBDashboard/Messaging/LBMessaging.jsx
@@ -42,6 +42,8 @@ export default function LBMessaging() {
   const existingChats = useSelector(state => state.messages.existingChats);
   const { messages, loading: messagesLoading } = messagesState;
 
+  const darkMode = useSelector(state => state.theme.darkMode);
+
   useEffect(() => {
     if (messageEndRef.current) {
       messageEndRef.current.scrollIntoView({ behavior: 'smooth' });
@@ -220,7 +222,7 @@ export default function LBMessaging() {
       <button
         key={user.userId}
         type="button"
-        className={`${styles.lbMessagingContact}`}
+        className={`${`${styles.lbMessagingContact} ${darkMode ? styles.bgYinMnBlue : ''}`}`}
         onClick={() => {
           updateSelection(user);
           setMobileHamMenu(false);
@@ -289,12 +291,12 @@ export default function LBMessaging() {
 
   return (
     users.userProfilesBasicInfo.length !== 0 && (
-      <div className={styles.mainContainer}>
-        <div className={styles.logoContainer}>
+      <div className={`${styles.mainContainer} ${darkMode ? styles.bgOxfordBlue : ''}`}>
+        <div className={`${styles.logoContainer} ${darkMode ? styles.bgOxfordBlue : ''}`}>
           <img src={logo} alt="One Community Logo" />
         </div>
-        <div className={styles.contentContainer}>
-          <div className={`${styles.containerTop} ${styles.msg}`}>
+        <div className={`${styles.contentContainer} ${darkMode ? styles.bgYinMnBlue : ''}`}>
+          <div className={`${styles.containerTop} ${styles.msg} ${darkMode ? styles.bgAzure : ''}`}>
             {mobileView && (
               <div className={styles.lbMobileMessagingMenu}>
                 <div className={styles.lbMobileHeader}>
@@ -309,11 +311,17 @@ export default function LBMessaging() {
                     <div className={styles.lbMobileHamMenu} ref={menuRef}>
                       <div className={styles.lbMobileHamMenuHeader}>
                         {showContacts ? (
-                          <div className={styles.lbMessagingContactsHeaderMobile}>
+                          <div
+                            className={`${styles.lbMessagingContactsHeaderMobile} ${
+                              darkMode ? styles.bgSpaceCadet : ''
+                            }`}
+                          >
                             <input
                               type="text"
                               placeholder={placeholder}
-                              className={styles.lbSearchInput}
+                              className={`${styles.lbSearchInput} ${
+                                darkMode ? styles.bgYinMnBlue : ''
+                              }`}
                               value={searchQuery}
                               onChange={e => {
                                 const query = e.target.value;
@@ -338,7 +346,11 @@ export default function LBMessaging() {
                             </button>
                           </div>
                         ) : (
-                          <div className={styles.lbMessagingContactsHeaderMobile}>
+                          <div
+                            className={`${styles.lbMessagingContactsHeaderMobile} ${
+                              darkMode ? styles.bgSpaceCadet : ''
+                            }`}
+                          >
                             <h3 className={styles.lbContactMsgs}>Messages</h3>
                             <div className={styles.lbMessagingSearchIconsMobile}>
                               <FontAwesomeIcon
@@ -350,14 +362,18 @@ export default function LBMessaging() {
                           </div>
                         )}
                         <div
-                          className={`${styles.lbMessagingContactsBody} ${styles.activeInlbMessagingContactsBody}`}
+                          className={`${styles.lbMessagingContactsBody} ${
+                            styles.activeInlbMessagingContactsBody
+                          } ${darkMode ? styles.bgOxfordBlue : ''}`}
                         >
                           {showContacts
                             ? searchResults.map(user => (
                                 <button
                                   key={user.userId}
                                   type="button"
-                                  className={styles.lbMessagingContact}
+                                  className={`${styles.lbMessagingContact} ${
+                                    darkMode ? styles.bgYinMnBlue : ''
+                                  }`}
                                   onClick={() => {
                                     updateSelection(user);
                                     setMobileHamMenu(false);
@@ -391,16 +407,20 @@ export default function LBMessaging() {
               </div>
             )}
           </div>
-          <div className={styles.containerMainMsg}>
+          <div className={`${styles.containerMainMsg} ${darkMode ? styles.bgOxfordBlue : ''}`}>
             {/* Contacts Section */}
             {!mobileView && (
               <div className={styles.lbMessagingContacts}>
                 {showContacts ? (
-                  <div className={styles.lbMessagingContactsHeader}>
+                  <div
+                    className={`${styles.lbMessagingContactsHeader} ${
+                      darkMode ? styles.bgSpaceCadet : ''
+                    }`}
+                  >
                     <input
                       type="text"
                       placeholder={placeholder}
-                      className={styles.lbSearchInput}
+                      className={`${styles.lbSearchInput} ${darkMode ? styles.bgYinMnBlue : ''}`}
                       value={searchQuery}
                       onChange={e => {
                         const query = e.target.value;
@@ -425,7 +445,11 @@ export default function LBMessaging() {
                     </button>
                   </div>
                 ) : (
-                  <div className={styles.lbMessagingContactsHeader}>
+                  <div
+                    className={`${styles.lbMessagingContactsHeader} ${
+                      darkMode ? styles.bgSpaceCadet : ''
+                    }`}
+                  >
                     <h3 className={styles.lbContactMsgs}>Messages</h3>
                     <div className={styles.lbMessagingSearchIcons}>
                       <FontAwesomeIcon
@@ -444,7 +468,9 @@ export default function LBMessaging() {
                         <button
                           key={user._id}
                           type="button"
-                          className={styles.lbMessagingContact}
+                          className={`${styles.lbMessagingContact} ${
+                            darkMode ? styles.bgYinMnBlue : ''
+                          }`}
                           onClick={() => updateSelection(user)}
                         >
                           <img
@@ -469,7 +495,11 @@ export default function LBMessaging() {
 
             {/* Chat Window Section */}
             <div className={styles.lbMessagingMessageWindow}>
-              <div className={styles.lbMessagingMessageWindowHeader}>
+              <div
+                className={`${styles.lbMessagingMessageWindowHeader} ${
+                  darkMode ? styles.bgOxfordBlue : ''
+                }`}
+              >
                 <div>
                   <img
                     src={selectedUser.profilePic || '/pfp-default-header.png'}
@@ -497,7 +527,7 @@ export default function LBMessaging() {
                       <div
                         className={`${styles.lgMessagingBellSelectDropdown} ${
                           bellDropdownActive ? styles.activeInlgMessagingBellSelectDropdown : ''
-                        }`}
+                        } ${darkMode ? styles.bgYinMnBlue : ''}`}
                       >
                         <label>
                           <input
@@ -539,14 +569,22 @@ export default function LBMessaging() {
                   </div>
                 )}
               </div>
-              <div className={styles.lbMessagingMessageWindowBody}>
+              <div
+                className={`${styles.lbMessagingMessageWindowBody} ${
+                  darkMode ? styles.bgYinMnBlue : ''
+                }`}
+              >
                 {selectedUser.userId ? (
                   renderChatMessages()
                 ) : (
                   <p className={styles.startMsg}>Select a user to start chatting</p>
                 )}
               </div>
-              <div className={styles.lbMessaingMessageWindowFooter}>
+              <div
+                className={`${styles.lbMessaingMessageWindowFooter} ${
+                  darkMode ? styles.bgOxfordBlue : ''
+                }`}
+              >
                 <textarea
                   type="text"
                   placeholder="Type a message..."
@@ -558,7 +596,7 @@ export default function LBMessaging() {
                       handleSendMessage();
                     }
                   }}
-                  className={styles.lbMessagingTextarea}
+                  className={`${styles.lbMessagingTextarea} ${darkMode ? styles.bgYinMnBlue : ''}`}
                   disabled={!selectedUser.userId}
                 />
                 <FontAwesomeIcon
diff --git a/src/components/LBDashboard/Messaging/LBMessaging.module.css b/src/components/LBDashboard/Messaging/LBMessaging.module.css
index c8992afc6d..9971126743 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.module.css
+++ b/src/components/LBDashboard/Messaging/LBMessaging.module.css
@@ -437,3 +437,24 @@
 .lbMsgIcon {
   cursor: pointer;
 }
+
+/* Dark Mode Styles */
+.bgOxfordBlue {
+  background-color: #1b2a41;
+}
+
+.bgSpaceCadet {
+  background-color: #1C2541;
+}
+
+.bgYinMnBlue {
+  background-color: #3A506B;
+}
+
+.bgAzure {
+  background-color: #007FFF;
+}
+
+.lbMessagingContact.bgYinMnBlue:hover {
+  background-color: #1C2541; /* Space Cadet for hover effect */
+}

From 794d93587b805eafede6d85516d6cd00d022b337 Mon Sep 17 00:00:00 2001
From: sircarmart <carmartu7@gmail.com>
Date: Sat, 16 Aug 2025 12:50:42 -0700
Subject: [PATCH 2/7] add dark mode borders to components

---
 .../LBDashboard/Messaging/LBMessaging.jsx          | 14 ++++++++++----
 .../LBDashboard/Messaging/LBMessaging.module.css   |  4 ++++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/LBDashboard/Messaging/LBMessaging.jsx b/src/components/LBDashboard/Messaging/LBMessaging.jsx
index 294f093d9e..6ae3d0fad4 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.jsx
+++ b/src/components/LBDashboard/Messaging/LBMessaging.jsx
@@ -222,7 +222,9 @@ export default function LBMessaging() {
       <button
         key={user.userId}
         type="button"
-        className={`${`${styles.lbMessagingContact} ${darkMode ? styles.bgYinMnBlue : ''}`}`}
+        className={`${`${styles.lbMessagingContact} ${
+          darkMode ? `${styles.bgYinMnBlue} ${styles.darkModeBorder}` : ''
+        }`}`}
         onClick={() => {
           updateSelection(user);
           setMobileHamMenu(false);
@@ -295,7 +297,11 @@ export default function LBMessaging() {
         <div className={`${styles.logoContainer} ${darkMode ? styles.bgOxfordBlue : ''}`}>
           <img src={logo} alt="One Community Logo" />
         </div>
-        <div className={`${styles.contentContainer} ${darkMode ? styles.bgYinMnBlue : ''}`}>
+        <div
+          className={`${styles.contentContainer} ${
+            darkMode ? `${styles.bgYinMnBlue} ${styles.darkModeBorder}` : ''
+          }`}
+        >
           <div className={`${styles.containerTop} ${styles.msg} ${darkMode ? styles.bgAzure : ''}`}>
             {mobileView && (
               <div className={styles.lbMobileMessagingMenu}>
@@ -372,7 +378,7 @@ export default function LBMessaging() {
                                   key={user.userId}
                                   type="button"
                                   className={`${styles.lbMessagingContact} ${
-                                    darkMode ? styles.bgYinMnBlue : ''
+                                    darkMode ? `${styles.bgYinMnBlue} ${styles.darkModeBorder}` : ''
                                   }`}
                                   onClick={() => {
                                     updateSelection(user);
@@ -469,7 +475,7 @@ export default function LBMessaging() {
                           key={user._id}
                           type="button"
                           className={`${styles.lbMessagingContact} ${
-                            darkMode ? styles.bgYinMnBlue : ''
+                            darkMode ? `${styles.bgYinMnBlue} ${styles.darkModeBorder}` : ''
                           }`}
                           onClick={() => updateSelection(user)}
                         >
diff --git a/src/components/LBDashboard/Messaging/LBMessaging.module.css b/src/components/LBDashboard/Messaging/LBMessaging.module.css
index 9971126743..72cd8af6b6 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.module.css
+++ b/src/components/LBDashboard/Messaging/LBMessaging.module.css
@@ -458,3 +458,7 @@
 .lbMessagingContact.bgYinMnBlue:hover {
   background-color: #1C2541; /* Space Cadet for hover effect */
 }
+
+.darkModeBorder {
+  border-color: black;
+}

From c5bff102c9b21bef30f5fa5ea94a1d37948f1226 Mon Sep 17 00:00:00 2001
From: sircarmart <carmartu7@gmail.com>
Date: Sat, 16 Aug 2025 14:22:29 -0700
Subject: [PATCH 3/7] add bootstrap light text class in dark mode

---
 .../LBDashboard/Messaging/LBMessaging.jsx     | 62 ++++++++++++++-----
 .../Messaging/LBMessaging.module.css          |  4 ++
 2 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/src/components/LBDashboard/Messaging/LBMessaging.jsx b/src/components/LBDashboard/Messaging/LBMessaging.jsx
index 6ae3d0fad4..274e39aa17 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.jsx
+++ b/src/components/LBDashboard/Messaging/LBMessaging.jsx
@@ -239,7 +239,11 @@ export default function LBMessaging() {
           }}
         />
         <div className={styles.lbMessagingContactInfo}>
-          <div className={`${styles.lbMessagingContactName} ${mobileView ? styles.black : ''}`}>
+          <div
+            className={`${styles.lbMessagingContactName} ${mobileView ? styles.black : ''} ${
+              darkMode ? 'text-light' : ''
+            }`}
+          >
             {user.firstName} {user.lastName}
           </div>
         </div>
@@ -249,11 +253,19 @@ export default function LBMessaging() {
 
   const renderChatMessages = () => {
     if (messagesLoading) {
-      return <p className={styles.lbNoMsgText}>Loading messages...</p>;
+      return (
+        <p className={`${styles.lbNoMsgText} ${darkMode ? 'text-light' : ''}`}>
+          Loading messages...
+        </p>
+      );
     }
 
     if (messages.length === 0) {
-      return <p className={styles.lbNoMsgText}>No messages to display.</p>;
+      return (
+        <p className={`${styles.lbNoMsgText} ${darkMode ? 'text-light' : ''}`}>
+          No messages to display.
+        </p>
+      );
     }
 
     const filteredMessages = messages.filter(
@@ -263,7 +275,11 @@ export default function LBMessaging() {
     );
 
     if (filteredMessages.length === 0) {
-      return <p className={styles.lbNoMsgText}>No messages to display.</p>;
+      return (
+        <p className={`${styles.lbNoMsgText} ${darkMode ? 'text-light' : ''}`}>
+          No messages to display.
+        </p>
+      );
     }
 
     return (
@@ -276,7 +292,9 @@ export default function LBMessaging() {
               message.sender === auth.userid ? styles.sent : styles.received
             }`}
           >
-            <p className={styles.messageText}>
+            <p
+              className={`${styles.messageText} ${darkMode ? `${styles.bgAzure} text-light` : ''}`}
+            >
               {message.content.split('\n').map(line => (
                 <span key={message._id + line}>
                   {line}
@@ -326,7 +344,7 @@ export default function LBMessaging() {
                               type="text"
                               placeholder={placeholder}
                               className={`${styles.lbSearchInput} ${
-                                darkMode ? styles.bgYinMnBlue : ''
+                                darkMode ? `${styles.bgYinMnBlue} text-light` : ''
                               }`}
                               value={searchQuery}
                               onChange={e => {
@@ -357,7 +375,11 @@ export default function LBMessaging() {
                               darkMode ? styles.bgSpaceCadet : ''
                             }`}
                           >
-                            <h3 className={styles.lbContactMsgs}>Messages</h3>
+                            <h3
+                              className={`${styles.lbContactMsgs} ${darkMode ? 'text-light' : ''}`}
+                            >
+                              Messages
+                            </h3>
                             <div className={styles.lbMessagingSearchIconsMobile}>
                               <FontAwesomeIcon
                                 icon={faSearch}
@@ -397,7 +419,7 @@ export default function LBMessaging() {
                                     <div
                                       className={`${styles.lbMessagingContactName} ${
                                         mobileView ? styles.black : ''
-                                      }`}
+                                      } ${darkMode ? 'text-light' : ''}`}
                                     >
                                       {user.firstName} {user.lastName}
                                     </div>
@@ -426,7 +448,9 @@ export default function LBMessaging() {
                     <input
                       type="text"
                       placeholder={placeholder}
-                      className={`${styles.lbSearchInput} ${darkMode ? styles.bgYinMnBlue : ''}`}
+                      className={`${styles.lbSearchInput} ${
+                        darkMode ? `${styles.bgYinMnBlue} text-light` : ''
+                      }`}
                       value={searchQuery}
                       onChange={e => {
                         const query = e.target.value;
@@ -456,7 +480,9 @@ export default function LBMessaging() {
                       darkMode ? styles.bgSpaceCadet : ''
                     }`}
                   >
-                    <h3 className={styles.lbContactMsgs}>Messages</h3>
+                    <h3 className={`${styles.lbContactMsgs} ${darkMode ? 'text-light' : ''}`}>
+                      Messages
+                    </h3>
                     <div className={styles.lbMessagingSearchIcons}>
                       <FontAwesomeIcon
                         icon={faSearch}
@@ -488,7 +514,11 @@ export default function LBMessaging() {
                             }}
                           />
                           <div className={styles.lbMessagingContactInfo}>
-                            <div className={styles.lbMessagingContactName}>
+                            <div
+                              className={`${styles.lbMessagingContactName} ${
+                                darkMode ? 'text-light' : ''
+                              }`}
+                            >
                               {user.firstName} {user.lastName}
                             </div>
                           </div>
@@ -506,7 +536,7 @@ export default function LBMessaging() {
                   darkMode ? styles.bgOxfordBlue : ''
                 }`}
               >
-                <div>
+                <div className={darkMode ? 'text-light' : ''}>
                   <img
                     src={selectedUser.profilePic || '/pfp-default-header.png'}
                     onError={e => {
@@ -535,7 +565,7 @@ export default function LBMessaging() {
                           bellDropdownActive ? styles.activeInlgMessagingBellSelectDropdown : ''
                         } ${darkMode ? styles.bgYinMnBlue : ''}`}
                       >
-                        <label>
+                        <label className={darkMode ? 'text-light' : ''}>
                           <input
                             type="checkbox"
                             checked={selectedOption.notifyInApp || false}
@@ -549,7 +579,7 @@ export default function LBMessaging() {
                           />
                           In App
                         </label>
-                        <label>
+                        <label className={darkMode ? 'text-light' : ''}>
                           <input
                             type="checkbox"
                             checked={selectedOption.notifyEmail || false}
@@ -602,7 +632,9 @@ export default function LBMessaging() {
                       handleSendMessage();
                     }
                   }}
-                  className={`${styles.lbMessagingTextarea} ${darkMode ? styles.bgYinMnBlue : ''}`}
+                  className={`${styles.lbMessagingTextarea} ${
+                    darkMode ? `${styles.bgYinMnBlue} text-light` : ''
+                  }`}
                   disabled={!selectedUser.userId}
                 />
                 <FontAwesomeIcon
diff --git a/src/components/LBDashboard/Messaging/LBMessaging.module.css b/src/components/LBDashboard/Messaging/LBMessaging.module.css
index 72cd8af6b6..e80f129c3d 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.module.css
+++ b/src/components/LBDashboard/Messaging/LBMessaging.module.css
@@ -462,3 +462,7 @@
 .darkModeBorder {
   border-color: black;
 }
+
+.darkModeColor {
+  color: black;
+}

From 80359118197ebe29ae27600768a7a9b9fae6e727 Mon Sep 17 00:00:00 2001
From: sircarmart <carmartu7@gmail.com>
Date: Thu, 21 Aug 2025 11:00:23 -0700
Subject: [PATCH 4/7] add dark mode icon support

---
 .../LBDashboard/Messaging/LBMessaging.jsx     | 28 ++++++++++++++-----
 .../Messaging/LBMessaging.module.css          |  6 ++--
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/LBDashboard/Messaging/LBMessaging.jsx b/src/components/LBDashboard/Messaging/LBMessaging.jsx
index 274e39aa17..9165962f71 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.jsx
+++ b/src/components/LBDashboard/Messaging/LBMessaging.jsx
@@ -363,7 +363,11 @@ export default function LBMessaging() {
                               className={styles.lbMsgIconBtn} // you can reuse or define styles here
                             >
                               <img
-                                src="https://img.icons8.com/metro/26/multiply.png"
+                                src={
+                                  darkMode
+                                    ? 'https://img.icons8.com/?size=26&id=1510&format=png&color=ffffff'
+                                    : 'https://img.icons8.com/metro/26/multiply.png'
+                                }
                                 alt="Close"
                                 className={styles.lbMsgIcon}
                               />
@@ -383,7 +387,9 @@ export default function LBMessaging() {
                             <div className={styles.lbMessagingSearchIconsMobile}>
                               <FontAwesomeIcon
                                 icon={faSearch}
-                                className={styles.lbMsgIconMobile}
+                                className={`${styles.lbMsgIconMobile} ${
+                                  darkMode ? styles.darkModeIcon : ''
+                                }`}
                                 onClick={() => setShowContacts(prev => !prev)}
                               />
                             </div>
@@ -465,10 +471,14 @@ export default function LBMessaging() {
                     <button
                       type="button"
                       onClick={() => setShowContacts(prev => !prev)}
-                      className={styles.lbMsgIconBtn} // you can reuse or define styles here
+                      className={`${styles.lbMsgIconBtn} ${darkMode ? styles.darkModeIcon : ''}`} // you can reuse or define styles here
                     >
                       <img
-                        src="https://img.icons8.com/metro/26/multiply.png"
+                        src={
+                          darkMode
+                            ? 'https://img.icons8.com/?size=26&id=1510&format=png&color=ffffff'
+                            : 'https://img.icons8.com/metro/26/multiply.png'
+                        }
                         alt="Close"
                         className={styles.lbMsgIcon}
                       />
@@ -486,14 +496,16 @@ export default function LBMessaging() {
                     <div className={styles.lbMessagingSearchIcons}>
                       <FontAwesomeIcon
                         icon={faSearch}
-                        className={styles.lbMsgIcon}
+                        className={`${styles.lbMsgIcon} ${darkMode ? styles.darkModeIcon : ''}`}
                         onClick={() => setShowContacts(prev => !prev)}
                       />
                     </div>
                   </div>
                 )}
                 <div
-                  className={`${styles.lbMessagingContactsBody} ${styles.activeInlbMessagingContactsBody}`}
+                  className={`${styles.lbMessagingContactsBody} ${
+                    styles.activeInlbMessagingContactsBody
+                  } ${darkMode ? styles.bgOxfordBlue : ''}`}
                 >
                   {showContacts
                     ? searchResults.map(user => (
@@ -557,7 +569,9 @@ export default function LBMessaging() {
                       onClick={() => {
                         setBellDropdownActive(prev => !prev);
                       }}
-                      className={styles.lgMessagingNotificationBell}
+                      className={`${styles.lgMessagingNotificationBell} ${
+                        darkMode ? styles.darkModeIcon : ''
+                      }`}
                     />
                     {bellDropdownActive && (
                       <div
diff --git a/src/components/LBDashboard/Messaging/LBMessaging.module.css b/src/components/LBDashboard/Messaging/LBMessaging.module.css
index e80f129c3d..72c8cc01cd 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.module.css
+++ b/src/components/LBDashboard/Messaging/LBMessaging.module.css
@@ -120,7 +120,7 @@
 .lbMsgIconMobile {
   height: 100%;
   width: auto !important;
-  color: black !important;
+  color: black
 }
 
 .lbMobileHamMenuHeader {
@@ -463,6 +463,6 @@
   border-color: black;
 }
 
-.darkModeColor {
-  color: black;
+.darkModeIcon {
+  color: white;
 }

From 0747f6a931ca6aea5d1b97fc5e9dbadcc0c25bfc Mon Sep 17 00:00:00 2001
From: sircarmart <carmartu7@gmail.com>
Date: Fri, 22 Aug 2025 08:59:37 -0700
Subject: [PATCH 5/7] add text-light class to start message

---
 src/components/LBDashboard/Messaging/LBMessaging.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/LBDashboard/Messaging/LBMessaging.jsx b/src/components/LBDashboard/Messaging/LBMessaging.jsx
index 9165962f71..430c314c52 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.jsx
+++ b/src/components/LBDashboard/Messaging/LBMessaging.jsx
@@ -627,7 +627,9 @@ export default function LBMessaging() {
                 {selectedUser.userId ? (
                   renderChatMessages()
                 ) : (
-                  <p className={styles.startMsg}>Select a user to start chatting</p>
+                  <p className={`${styles.startMsg} ${darkMode ? 'text-light' : ''}`}>
+                    Select a user to start chatting
+                  </p>
                 )}
               </div>
               <div

From a6dafc0eb2b01e295b5dffce392664c7bb5c3dbd Mon Sep 17 00:00:00 2001
From: sircarmart <carmartu7@gmail.com>
Date: Fri, 22 Aug 2025 09:56:52 -0700
Subject: [PATCH 6/7] fix: improve dark mode visibility if no contacts
 available

---
 src/components/LBDashboard/Messaging/LBMessaging.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LBDashboard/Messaging/LBMessaging.jsx b/src/components/LBDashboard/Messaging/LBMessaging.jsx
index 430c314c52..d4e27aa930 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.jsx
+++ b/src/components/LBDashboard/Messaging/LBMessaging.jsx
@@ -215,7 +215,7 @@ export default function LBMessaging() {
 
   const renderContacts = () => {
     if (existingChats.length === 0) {
-      return <p>No chats available.</p>;
+      return <p className={`${darkMode ? 'text-light' : ''}`}>No chats available.</p>;
     }
 
     return existingChats.map(user => (

From 60a7fe84d93a286f9618971e844a47fac1cdc284 Mon Sep 17 00:00:00 2001
From: sircarmart <carmartu7@gmail.com>
Date: Fri, 22 Aug 2025 20:17:56 -0700
Subject: [PATCH 7/7] refactored code to use App.css classes in most elements

---
 .../LBDashboard/Messaging/LBMessaging.jsx     | 50 ++++++++++---------
 .../Messaging/LBMessaging.module.css          | 19 ++-----
 2 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/src/components/LBDashboard/Messaging/LBMessaging.jsx b/src/components/LBDashboard/Messaging/LBMessaging.jsx
index d4e27aa930..82dac7f8e7 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.jsx
+++ b/src/components/LBDashboard/Messaging/LBMessaging.jsx
@@ -223,7 +223,7 @@ export default function LBMessaging() {
         key={user.userId}
         type="button"
         className={`${`${styles.lbMessagingContact} ${
-          darkMode ? `${styles.bgYinMnBlue} ${styles.darkModeBorder}` : ''
+          darkMode ? ` bg-yinmn-blue ${styles.contactYinmBlue} ${styles.darkModeBorder}` : ''
         }`}`}
         onClick={() => {
           updateSelection(user);
@@ -292,9 +292,7 @@ export default function LBMessaging() {
               message.sender === auth.userid ? styles.sent : styles.received
             }`}
           >
-            <p
-              className={`${styles.messageText} ${darkMode ? `${styles.bgAzure} text-light` : ''}`}
-            >
+            <p className={`${styles.messageText} ${darkMode ? ` bg-azure text-light` : ''}`}>
               {message.content.split('\n').map(line => (
                 <span key={message._id + line}>
                   {line}
@@ -311,16 +309,16 @@ export default function LBMessaging() {
 
   return (
     users.userProfilesBasicInfo.length !== 0 && (
-      <div className={`${styles.mainContainer} ${darkMode ? styles.bgOxfordBlue : ''}`}>
-        <div className={`${styles.logoContainer} ${darkMode ? styles.bgOxfordBlue : ''}`}>
+      <div className={`${styles.mainContainer} ${darkMode ? ' bg-oxford-blue' : ''}`}>
+        <div className={`${styles.logoContainer} ${darkMode ? ' bg-oxford-blue' : ''}`}>
           <img src={logo} alt="One Community Logo" />
         </div>
         <div
           className={`${styles.contentContainer} ${
-            darkMode ? `${styles.bgYinMnBlue} ${styles.darkModeBorder}` : ''
+            darkMode ? ` bg-yinmn-blue ${styles.darkModeBorder}` : ''
           }`}
         >
-          <div className={`${styles.containerTop} ${styles.msg} ${darkMode ? styles.bgAzure : ''}`}>
+          <div className={`${styles.containerTop} ${styles.msg} ${darkMode ? ' bg-azure' : ''}`}>
             {mobileView && (
               <div className={styles.lbMobileMessagingMenu}>
                 <div className={styles.lbMobileHeader}>
@@ -337,14 +335,14 @@ export default function LBMessaging() {
                         {showContacts ? (
                           <div
                             className={`${styles.lbMessagingContactsHeaderMobile} ${
-                              darkMode ? styles.bgSpaceCadet : ''
+                              darkMode ? ' bg-space-cadet' : ''
                             }`}
                           >
                             <input
                               type="text"
                               placeholder={placeholder}
                               className={`${styles.lbSearchInput} ${
-                                darkMode ? `${styles.bgYinMnBlue} text-light` : ''
+                                darkMode ? ` bg-yinmn-blue text-light` : ''
                               }`}
                               value={searchQuery}
                               onChange={e => {
@@ -376,7 +374,7 @@ export default function LBMessaging() {
                         ) : (
                           <div
                             className={`${styles.lbMessagingContactsHeaderMobile} ${
-                              darkMode ? styles.bgSpaceCadet : ''
+                              darkMode ? ' bg-space-cadet' : ''
                             }`}
                           >
                             <h3
@@ -398,7 +396,7 @@ export default function LBMessaging() {
                         <div
                           className={`${styles.lbMessagingContactsBody} ${
                             styles.activeInlbMessagingContactsBody
-                          } ${darkMode ? styles.bgOxfordBlue : ''}`}
+                          } ${darkMode ? ' bg-oxford-blue' : ''}`}
                         >
                           {showContacts
                             ? searchResults.map(user => (
@@ -406,7 +404,9 @@ export default function LBMessaging() {
                                   key={user.userId}
                                   type="button"
                                   className={`${styles.lbMessagingContact} ${
-                                    darkMode ? `${styles.bgYinMnBlue} ${styles.darkModeBorder}` : ''
+                                    darkMode
+                                      ? ` bg-yinmn-blue ${styles.contactYinmBlue} ${styles.darkModeBorder}`
+                                      : ''
                                   }`}
                                   onClick={() => {
                                     updateSelection(user);
@@ -441,21 +441,21 @@ export default function LBMessaging() {
               </div>
             )}
           </div>
-          <div className={`${styles.containerMainMsg} ${darkMode ? styles.bgOxfordBlue : ''}`}>
+          <div className={`${styles.containerMainMsg} ${darkMode ? ' bg-oxford-blue' : ''}`}>
             {/* Contacts Section */}
             {!mobileView && (
               <div className={styles.lbMessagingContacts}>
                 {showContacts ? (
                   <div
                     className={`${styles.lbMessagingContactsHeader} ${
-                      darkMode ? styles.bgSpaceCadet : ''
+                      darkMode ? ' bg-space-cadet' : ''
                     }`}
                   >
                     <input
                       type="text"
                       placeholder={placeholder}
                       className={`${styles.lbSearchInput} ${
-                        darkMode ? `${styles.bgYinMnBlue} text-light` : ''
+                        darkMode ? ` bg-yinmn-blue text-light` : ''
                       }`}
                       value={searchQuery}
                       onChange={e => {
@@ -487,7 +487,7 @@ export default function LBMessaging() {
                 ) : (
                   <div
                     className={`${styles.lbMessagingContactsHeader} ${
-                      darkMode ? styles.bgSpaceCadet : ''
+                      darkMode ? ' bg-space-cadet' : ''
                     }`}
                   >
                     <h3 className={`${styles.lbContactMsgs} ${darkMode ? 'text-light' : ''}`}>
@@ -505,7 +505,7 @@ export default function LBMessaging() {
                 <div
                   className={`${styles.lbMessagingContactsBody} ${
                     styles.activeInlbMessagingContactsBody
-                  } ${darkMode ? styles.bgOxfordBlue : ''}`}
+                  } ${darkMode ? ' bg-oxford-blue' : ''}`}
                 >
                   {showContacts
                     ? searchResults.map(user => (
@@ -513,7 +513,9 @@ export default function LBMessaging() {
                           key={user._id}
                           type="button"
                           className={`${styles.lbMessagingContact} ${
-                            darkMode ? `${styles.bgYinMnBlue} ${styles.darkModeBorder}` : ''
+                            darkMode
+                              ? ` bg-yinmn-blue  ${styles.contactYinmBlue} ${styles.darkModeBorder}`
+                              : ''
                           }`}
                           onClick={() => updateSelection(user)}
                         >
@@ -545,7 +547,7 @@ export default function LBMessaging() {
             <div className={styles.lbMessagingMessageWindow}>
               <div
                 className={`${styles.lbMessagingMessageWindowHeader} ${
-                  darkMode ? styles.bgOxfordBlue : ''
+                  darkMode ? ' bg-oxford-blue' : ''
                 }`}
               >
                 <div className={darkMode ? 'text-light' : ''}>
@@ -577,7 +579,7 @@ export default function LBMessaging() {
                       <div
                         className={`${styles.lgMessagingBellSelectDropdown} ${
                           bellDropdownActive ? styles.activeInlgMessagingBellSelectDropdown : ''
-                        } ${darkMode ? styles.bgYinMnBlue : ''}`}
+                        } ${darkMode ? ' bg-yinmn-blue' : ''}`}
                       >
                         <label className={darkMode ? 'text-light' : ''}>
                           <input
@@ -621,7 +623,7 @@ export default function LBMessaging() {
               </div>
               <div
                 className={`${styles.lbMessagingMessageWindowBody} ${
-                  darkMode ? styles.bgYinMnBlue : ''
+                  darkMode ? ' bg-yinmn-blue' : ''
                 }`}
               >
                 {selectedUser.userId ? (
@@ -634,7 +636,7 @@ export default function LBMessaging() {
               </div>
               <div
                 className={`${styles.lbMessaingMessageWindowFooter} ${
-                  darkMode ? styles.bgOxfordBlue : ''
+                  darkMode ? ' bg-oxford-blue' : ''
                 }`}
               >
                 <textarea
@@ -649,7 +651,7 @@ export default function LBMessaging() {
                     }
                   }}
                   className={`${styles.lbMessagingTextarea} ${
-                    darkMode ? `${styles.bgYinMnBlue} text-light` : ''
+                    darkMode ? ` bg-yinmn-blue text-light` : ''
                   }`}
                   disabled={!selectedUser.userId}
                 />
diff --git a/src/components/LBDashboard/Messaging/LBMessaging.module.css b/src/components/LBDashboard/Messaging/LBMessaging.module.css
index 72c8cc01cd..5fcf7b1366 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.module.css
+++ b/src/components/LBDashboard/Messaging/LBMessaging.module.css
@@ -439,24 +439,13 @@
 }
 
 /* Dark Mode Styles */
-.bgOxfordBlue {
-  background-color: #1b2a41;
-}
-
-.bgSpaceCadet {
-  background-color: #1C2541;
-}
-
-.bgYinMnBlue {
-  background-color: #3A506B;
-}
 
-.bgAzure {
-  background-color: #007FFF;
+.contactYinmBlue {
+   /* empty class to provide hovering capabilty to contacts in dark mode  */
 }
 
-.lbMessagingContact.bgYinMnBlue:hover {
-  background-color: #1C2541; /* Space Cadet for hover effect */
+.contactYinmBlue:hover {
+  background-color: #1c2541 !important; /* Space Cadet for hover effect */
 }
 
 .darkModeBorder {