From cdb64db0f31535df8add2e222aef05c879183d36 Mon Sep 17 00:00:00 2001
From: shravan0627 <neelamsetty.s@northeastern.edu>
Date: Mon, 8 Jun 2026 10:25:10 -0400
Subject: [PATCH 1/6] fix: resolve merge conflicts and add dark mode support
 for LB messaging page

---
 .../LBDashboard/Messaging/LBMessaging.jsx     | 229 +++++++++++++-----
 1 file changed, 165 insertions(+), 64 deletions(-)

diff --git a/src/components/LBDashboard/Messaging/LBMessaging.jsx b/src/components/LBDashboard/Messaging/LBMessaging.jsx
index 7dcf80469d..912bd1b4b4 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.jsx
+++ b/src/components/LBDashboard/Messaging/LBMessaging.jsx
@@ -20,6 +20,7 @@ import {
   markMessagesAsReadViaSocket,
 } from '../../../utils/messagingSocket';
 import logo from '../../../assets/images/logo2.png';
+import Header from '../../Header/Header';
 
 export default function LBMessaging() {
   const dispatch = useDispatch();
@@ -152,7 +153,7 @@ export default function LBMessaging() {
   useEffect(() => {
     const handleClickOutside = event => {
       if (menuRef.current && !menuRef.current.contains(event.target)) {
-        setMobileHamMenu(false); // Close the menu if clicked outside
+        setMobileHamMenu(false);
       }
     };
 
@@ -259,7 +260,6 @@ export default function LBMessaging() {
         toast.success('Preferences updated successfully!');
         setBellDropdownActive(false);
 
-        // Refresh preferences after saving
         dispatch(fetchUserPreferences(currentUserId, selectedUser.userId)).then(response => {
           if (response?.payload) {
             setSelectedOption({
@@ -316,7 +316,9 @@ export default function LBMessaging() {
   const renderContacts = () => {
     if (sidebarContacts.length === 0) {
       return (
-        <p className={styles.sidebarHint}>No contacts yet. Use the search icon to find someone.</p>
+        <p className={`${styles.sidebarHint} ${darkMode ? 'text-light' : ''}`}>
+          No contacts yet. Use the search icon to find someone.
+        </p>
       );
     }
 
@@ -324,7 +326,9 @@ export default function LBMessaging() {
       <button
         key={user.userId || user._id}
         type="button"
-        className={`${styles.lbMessagingContact}`}
+        className={`${styles.lbMessagingContact} ${
+          darkMode ? `bg-yinmn-blue ${styles.contactYinmBlue} ${styles.darkModeBorder}` : ''
+        }`}
         onClick={() => {
           updateSelection(user);
           setMobileHamMenu(false);
@@ -338,8 +342,12 @@ export default function LBMessaging() {
             e.target.src = '/pfp-default-header.png';
           }}
         />
-        <div className={`${styles.lbMessagingContactInfo}`}>
-          <div className={`${styles.lbMessagingContactName} ${mobileView ? styles.black : ''}`}>
+        <div className={styles.lbMessagingContactInfo}>
+          <div
+            className={`${styles.lbMessagingContactName} ${mobileView ? styles.black : ''} ${
+              darkMode ? 'text-light' : ''
+            }`}
+          >
             {user.firstName} {user.lastName}
           </div>
         </div>
@@ -349,11 +357,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(
@@ -363,12 +379,16 @@ 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 (
-      <div className={`${styles.messageList}`}>
-        <div className={`${styles.messageSpacer}`} />
+      <div className={styles.messageList}>
+        <div className={styles.messageSpacer} />
         {filteredMessages.map(message => (
           <div
             key={message._id || message.timestamp}
@@ -376,7 +396,7 @@ export default function LBMessaging() {
               message.sender === currentUserId ? styles.sent : styles.received
             }`}
           >
-            <p className={`${styles.messageText}`}>
+            <p className={`${styles.messageText} ${darkMode ? 'bg-azure text-light' : ''}`}>
               {String(message.content ?? '')
                 .split('\n')
                 .map((line, lineIdx) => (
@@ -396,31 +416,42 @@ export default function LBMessaging() {
   return (
     (users?.userProfilesBasicInfo?.length ?? 0) !== 0 && (
       <div className={`${darkMode ? styles.darkMode : ''}`}>
-        <div className={`${styles.mainContainer}`}>
-          <div className={`${styles.logoContainer}`}>
+        <Header />
+        <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}`}>
+          <div
+            className={`${styles.contentContainer} ${
+              darkMode ? `bg-yinmn-blue ${styles.darkModeBorder}` : ''
+            }`}
+          >
             {mobileView ? (
-              <div className={`${styles.containerTop} ${styles.msg}`}>
-                <div className={`${styles.lbMobileMessagingMenu}`}>
-                  <div className={`${styles.lbMobileHeader}`}>
+              <div className={`${styles.containerTop} ${styles.msg} ${darkMode ? 'bg-azure' : ''}`}>
+                <div className={styles.lbMobileMessagingMenu}>
+                  <div className={styles.lbMobileHeader}>
                     <button
                       type="button"
-                      className={`${styles.lbHamBtn}`}
+                      className={styles.lbHamBtn}
                       onClick={() => setMobileHamMenu(prev => !prev)}
                     >
                       ☰
                     </button>
                     {mobileHamMenu && (
-                      <div className={`${styles.lbMobileHamMenu}`} ref={menuRef}>
-                        <div className={`${styles.lbMobileHamMenuHeader}`}>
+                      <div className={styles.lbMobileHamMenu} ref={menuRef}>
+                        <div className={styles.lbMobileHamMenuHeader}>
                           {showContacts ? (
-                            <div className={`${styles.lbMessagingContactsHeaderMobile}`}>
+                            <div
+                              className={`${styles.lbMessagingContactsHeaderMobile} ${
+                                darkMode ? 'bg-space-cadet' : ''
+                              }`}
+                            >
                               <input
                                 type="text"
                                 placeholder={placeholder}
-                                className={`${styles.lbSearchInput}`}
+                                className={`${styles.lbSearchInput} ${
+                                  darkMode ? 'bg-yinmn-blue text-light' : ''
+                                }`}
                                 value={searchQuery}
                                 onChange={e => {
                                   const query = e.target.value;
@@ -435,36 +466,58 @@ export default function LBMessaging() {
                               <button
                                 type="button"
                                 onClick={() => setShowContacts(prev => !prev)}
-                                className={`${styles.lbMsgIconBtn}`} // you can reuse or define styles here
+                                className={styles.lbMsgIconBtn}
                               >
                                 <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}`}
+                                  className={styles.lbMsgIcon}
                                 />
                               </button>
                             </div>
                           ) : (
-                            <div className={`${styles.lbMessagingContactsHeaderMobile}`}>
-                              <h3 className={`${styles.lbContactMsgs}`}>Messages</h3>
-                              <div className={`${styles.lbMessagingSearchIconsMobile}`}>
+                            <div
+                              className={`${styles.lbMessagingContactsHeaderMobile} ${
+                                darkMode ? 'bg-space-cadet' : ''
+                              }`}
+                            >
+                              <h3
+                                className={`${styles.lbContactMsgs} ${
+                                  darkMode ? 'text-light' : ''
+                                }`}
+                              >
+                                Messages
+                              </h3>
+                              <div className={styles.lbMessagingSearchIconsMobile}>
                                 <FontAwesomeIcon
                                   icon={faSearch}
-                                  className={`${styles.lbMsgIconMobile}`}
+                                  className={`${styles.lbMsgIconMobile} ${
+                                    darkMode ? styles.darkModeIcon : ''
+                                  }`}
                                   onClick={() => setShowContacts(prev => !prev)}
                                 />
                               </div>
                             </div>
                           )}
                           <div
-                            className={`${styles.lbMessagingContactsBody} ${styles.activeInlbMessagingContactsBody}`}
+                            className={`${styles.lbMessagingContactsBody} ${
+                              styles.activeInlbMessagingContactsBody
+                            } ${darkMode ? 'bg-oxford-blue' : ''}`}
                           >
                             {showContacts
                               ? safeSearchResults.map(user => (
                                   <button
                                     key={user.userId}
                                     type="button"
-                                    className={`${styles.lbMessagingContact}`}
+                                    className={`${styles.lbMessagingContact} ${
+                                      darkMode
+                                        ? `bg-yinmn-blue ${styles.contactYinmBlue} ${styles.darkModeBorder}`
+                                        : ''
+                                    }`}
                                     onClick={() => {
                                       updateSelection(user);
                                       setMobileHamMenu(false);
@@ -478,11 +531,11 @@ export default function LBMessaging() {
                                         e.target.src = '/pfp-default-header.png';
                                       }}
                                     />
-                                    <div className={`${styles.lbMessagingContactInfo}`}>
+                                    <div className={styles.lbMessagingContactInfo}>
                                       <div
                                         className={`${styles.lbMessagingContactName} ${
                                           mobileView ? styles.black : ''
-                                        }`}
+                                        } ${darkMode ? 'text-light' : ''}`}
                                       >
                                         {user.firstName} {user.lastName}
                                       </div>
@@ -498,16 +551,22 @@ export default function LBMessaging() {
                 </div>
               </div>
             ) : null}
-            <div className={`${styles.containerMainMsg}`}>
+            <div className={`${styles.containerMainMsg} ${darkMode ? 'bg-oxford-blue' : ''}`}>
               {/* Contacts Section */}
               {!mobileView && (
-                <div className={`${styles.lbMessagingContacts}`}>
+                <div className={styles.lbMessagingContacts}>
                   {showContacts ? (
-                    <div className={`${styles.lbMessagingContactsHeader}`}>
+                    <div
+                      className={`${styles.lbMessagingContactsHeader} ${
+                        darkMode ? 'bg-space-cadet' : ''
+                      }`}
+                    >
                       <input
                         type="text"
                         placeholder={placeholder}
-                        className={`${styles.lbSearchInput}`}
+                        className={`${styles.lbSearchInput} ${
+                          darkMode ? 'bg-yinmn-blue text-light' : ''
+                        }`}
                         value={searchQuery}
                         onChange={e => {
                           const query = e.target.value;
@@ -522,36 +581,52 @@ 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 : ''}`}
                       >
                         <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}`}
+                          className={styles.lbMsgIcon}
                         />
                       </button>
                     </div>
                   ) : (
-                    <div className={`${styles.lbMessagingContactsHeader}`}>
-                      <h3 className={`${styles.lbContactMsgs}`}>Messages</h3>
-                      <div className={`${styles.lbMessagingSearchIcons}`}>
+                    <div
+                      className={`${styles.lbMessagingContactsHeader} ${
+                        darkMode ? 'bg-space-cadet' : ''
+                      }`}
+                    >
+                      <h3 className={`${styles.lbContactMsgs} ${darkMode ? 'text-light' : ''}`}>
+                        Messages
+                      </h3>
+                      <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 ? 'bg-oxford-blue' : ''}`}
                   >
                     {showContacts
                       ? safeSearchResults.map(user => (
                           <button
                             key={user._id}
                             type="button"
-                            className={`${styles.lbMessagingContact}`}
+                            className={`${styles.lbMessagingContact} ${
+                              darkMode
+                                ? `bg-yinmn-blue ${styles.contactYinmBlue} ${styles.darkModeBorder}`
+                                : ''
+                            }`}
                             onClick={() => updateSelection(user)}
                           >
                             <img
@@ -562,8 +637,12 @@ export default function LBMessaging() {
                                 e.target.src = '/pfp-default-header.png';
                               }}
                             />
-                            <div className={`${styles.lbMessagingContactInfo}`}>
-                              <div className={`${styles.lbMessagingContactName}`}>
+                            <div className={styles.lbMessagingContactInfo}>
+                              <div
+                                className={`${styles.lbMessagingContactName} ${
+                                  darkMode ? 'text-light' : ''
+                                }`}
+                              >
                                 {user.firstName} {user.lastName}
                               </div>
                             </div>
@@ -575,9 +654,17 @@ export default function LBMessaging() {
               )}
 
               {/* Chat Window Section */}
-              <div className={`${styles.lbMessagingMessageWindow}`}>
-                <div className={`${styles.lbMessagingMessageWindowHeader}`}>
-                  <div className={`${styles.lbMessagingHeaderIdentity}`}>
+              <div className={styles.lbMessagingMessageWindow}>
+                <div
+                  className={`${styles.lbMessagingMessageWindowHeader} ${
+                    darkMode ? 'bg-oxford-blue' : ''
+                  }`}
+                >
+                  <div
+                    className={`${styles.lbMessagingHeaderIdentity} ${
+                      darkMode ? 'text-light' : ''
+                    }`}
+                  >
                     <img
                       src={selectedUser.profilePic || '/pfp-default-header.png'}
                       onError={e => {
@@ -586,28 +673,30 @@ export default function LBMessaging() {
                       }}
                       alt="Profile"
                     />
-                    <span className={`${styles.lbMessagingHeaderTitle}`}>
+                    <span className={styles.lbMessagingHeaderTitle}>
                       {selectedUser.firstName
                         ? `${selectedUser.firstName} ${selectedUser.lastName}`
                         : 'Select a user to chat'}
                     </span>
                   </div>
                   {selectedUser.userId && (
-                    <div className={`${styles.lbMessagingHeaderIcons}`}>
+                    <div className={styles.lbMessagingHeaderIcons}>
                       <FontAwesomeIcon
                         icon={faBell}
                         onClick={() => {
                           setBellDropdownActive(prev => !prev);
                         }}
-                        className={`${styles.lgMessagingNotificationBell}`}
+                        className={`${styles.lgMessagingNotificationBell} ${
+                          darkMode ? styles.darkModeIcon : ''
+                        }`}
                       />
                       {bellDropdownActive && (
                         <div
                           className={`${styles.lgMessagingBellSelectDropdown} ${
                             bellDropdownActive ? styles.activeInlgMessagingBellSelectDropdown : ''
-                          }`}
+                          } ${darkMode ? 'bg-yinmn-blue' : ''}`}
                         >
-                          <label>
+                          <label className={darkMode ? 'text-light' : ''}>
                             <input
                               type="checkbox"
                               checked={selectedOption.notifyInApp || false}
@@ -621,7 +710,7 @@ export default function LBMessaging() {
                             />
                             In App
                           </label>
-                          <label>
+                          <label className={darkMode ? 'text-light' : ''}>
                             <input
                               type="checkbox"
                               checked={selectedOption.notifyEmail || false}
@@ -637,7 +726,7 @@ export default function LBMessaging() {
                           </label>
                           <button
                             type="button"
-                            className={`${styles.lgMessagingSaveBtn}`}
+                            className={styles.lgMessagingSaveBtn}
                             onClick={saveUserPreferences}
                           >
                             Save
@@ -647,14 +736,24 @@ export default function LBMessaging() {
                     </div>
                   )}
                 </div>
-                <div className={`${styles.lbMessagingMessageWindowBody}`}>
+                <div
+                  className={`${styles.lbMessagingMessageWindowBody} ${
+                    darkMode ? 'bg-yinmn-blue' : ''
+                  }`}
+                >
                   {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 className={`${styles.lbMessaingMessageWindowFooter}`}>
+                <div
+                  className={`${styles.lbMessaingMessageWindowFooter} ${
+                    darkMode ? 'bg-oxford-blue' : ''
+                  }`}
+                >
                   <textarea
                     type="text"
                     placeholder="Type a message..."
@@ -666,12 +765,14 @@ export default function LBMessaging() {
                         handleSendMessage();
                       }
                     }}
-                    className={`${styles.lbMessagingTextarea}`}
+                    className={`${styles.lbMessagingTextarea} ${
+                      darkMode ? 'bg-yinmn-blue text-light' : ''
+                    }`}
                     disabled={!selectedUser.userId}
                   />
                   <FontAwesomeIcon
                     icon={faLocationArrow}
-                    className={`${styles.sendButton}`}
+                    className={styles.sendButton}
                     onClick={handleSendMessage}
                   />
                 </div>

From c0ca59751e9057930406e18d24563d0083c610da Mon Sep 17 00:00:00 2001
From: shravan0627 <neelamsetty.s@northeastern.edu>
Date: Mon, 8 Jun 2026 11:54:13 -0400
Subject: [PATCH 2/6] fix: fix footer layout, send button position, and dark
 mode CSS

---
 .../LBDashboard/Messaging/LBMessaging.jsx     | 182 ++++--------------
 .../Messaging/LBMessaging.module.css          |  41 ++--
 2 files changed, 68 insertions(+), 155 deletions(-)

diff --git a/src/components/LBDashboard/Messaging/LBMessaging.jsx b/src/components/LBDashboard/Messaging/LBMessaging.jsx
index 912bd1b4b4..88f0106ba8 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.jsx
+++ b/src/components/LBDashboard/Messaging/LBMessaging.jsx
@@ -316,9 +316,7 @@ export default function LBMessaging() {
   const renderContacts = () => {
     if (sidebarContacts.length === 0) {
       return (
-        <p className={`${styles.sidebarHint} ${darkMode ? 'text-light' : ''}`}>
-          No contacts yet. Use the search icon to find someone.
-        </p>
+        <p className={styles.sidebarHint}>No contacts yet. Use the search icon to find someone.</p>
       );
     }
 
@@ -326,9 +324,7 @@ export default function LBMessaging() {
       <button
         key={user.userId || user._id}
         type="button"
-        className={`${styles.lbMessagingContact} ${
-          darkMode ? `bg-yinmn-blue ${styles.contactYinmBlue} ${styles.darkModeBorder}` : ''
-        }`}
+        className={styles.lbMessagingContact}
         onClick={() => {
           updateSelection(user);
           setMobileHamMenu(false);
@@ -343,11 +339,7 @@ export default function LBMessaging() {
           }}
         />
         <div className={styles.lbMessagingContactInfo}>
-          <div
-            className={`${styles.lbMessagingContactName} ${mobileView ? styles.black : ''} ${
-              darkMode ? 'text-light' : ''
-            }`}
-          >
+          <div className={`${styles.lbMessagingContactName} ${mobileView ? styles.black : ''}`}>
             {user.firstName} {user.lastName}
           </div>
         </div>
@@ -357,19 +349,11 @@ export default function LBMessaging() {
 
   const renderChatMessages = () => {
     if (messagesLoading) {
-      return (
-        <p className={`${styles.lbNoMsgText} ${darkMode ? 'text-light' : ''}`}>
-          Loading messages...
-        </p>
-      );
+      return <p className={styles.lbNoMsgText}>Loading messages...</p>;
     }
 
     if (messages.length === 0) {
-      return (
-        <p className={`${styles.lbNoMsgText} ${darkMode ? 'text-light' : ''}`}>
-          No messages to display.
-        </p>
-      );
+      return <p className={styles.lbNoMsgText}>No messages to display.</p>;
     }
 
     const filteredMessages = messages.filter(
@@ -379,11 +363,7 @@ export default function LBMessaging() {
     );
 
     if (filteredMessages.length === 0) {
-      return (
-        <p className={`${styles.lbNoMsgText} ${darkMode ? 'text-light' : ''}`}>
-          No messages to display.
-        </p>
-      );
+      return <p className={styles.lbNoMsgText}>No messages to display.</p>;
     }
 
     return (
@@ -396,7 +376,7 @@ export default function LBMessaging() {
               message.sender === currentUserId ? styles.sent : styles.received
             }`}
           >
-            <p className={`${styles.messageText} ${darkMode ? 'bg-azure text-light' : ''}`}>
+            <p className={styles.messageText}>
               {String(message.content ?? '')
                 .split('\n')
                 .map((line, lineIdx) => (
@@ -417,17 +397,13 @@ export default function LBMessaging() {
     (users?.userProfilesBasicInfo?.length ?? 0) !== 0 && (
       <div className={`${darkMode ? styles.darkMode : ''}`}>
         <Header />
-        <div className={`${styles.mainContainer} ${darkMode ? 'bg-oxford-blue' : ''}`}>
-          <div className={`${styles.logoContainer} ${darkMode ? 'bg-oxford-blue' : ''}`}>
+        <div className={styles.mainContainer}>
+          <div className={styles.logoContainer}>
             <img src={logo} alt="One Community Logo" />
           </div>
-          <div
-            className={`${styles.contentContainer} ${
-              darkMode ? `bg-yinmn-blue ${styles.darkModeBorder}` : ''
-            }`}
-          >
+          <div className={styles.contentContainer}>
             {mobileView ? (
-              <div className={`${styles.containerTop} ${styles.msg} ${darkMode ? 'bg-azure' : ''}`}>
+              <div className={`${styles.containerTop} ${styles.msg}`}>
                 <div className={styles.lbMobileMessagingMenu}>
                   <div className={styles.lbMobileHeader}>
                     <button
@@ -441,17 +417,11 @@ export default function LBMessaging() {
                       <div className={styles.lbMobileHamMenu} ref={menuRef}>
                         <div className={styles.lbMobileHamMenuHeader}>
                           {showContacts ? (
-                            <div
-                              className={`${styles.lbMessagingContactsHeaderMobile} ${
-                                darkMode ? 'bg-space-cadet' : ''
-                              }`}
-                            >
+                            <div className={styles.lbMessagingContactsHeaderMobile}>
                               <input
                                 type="text"
                                 placeholder={placeholder}
-                                className={`${styles.lbSearchInput} ${
-                                  darkMode ? 'bg-yinmn-blue text-light' : ''
-                                }`}
+                                className={styles.lbSearchInput}
                                 value={searchQuery}
                                 onChange={e => {
                                   const query = e.target.value;
@@ -469,55 +439,33 @@ export default function LBMessaging() {
                                 className={styles.lbMsgIconBtn}
                               >
                                 <img
-                                  src={
-                                    darkMode
-                                      ? 'https://img.icons8.com/?size=26&id=1510&format=png&color=ffffff'
-                                      : 'https://img.icons8.com/metro/26/multiply.png'
-                                  }
+                                  src="https://img.icons8.com/metro/26/multiply.png"
                                   alt="Close"
                                   className={styles.lbMsgIcon}
                                 />
                               </button>
                             </div>
                           ) : (
-                            <div
-                              className={`${styles.lbMessagingContactsHeaderMobile} ${
-                                darkMode ? 'bg-space-cadet' : ''
-                              }`}
-                            >
-                              <h3
-                                className={`${styles.lbContactMsgs} ${
-                                  darkMode ? 'text-light' : ''
-                                }`}
-                              >
-                                Messages
-                              </h3>
+                            <div className={styles.lbMessagingContactsHeaderMobile}>
+                              <h3 className={styles.lbContactMsgs}>Messages</h3>
                               <div className={styles.lbMessagingSearchIconsMobile}>
                                 <FontAwesomeIcon
                                   icon={faSearch}
-                                  className={`${styles.lbMsgIconMobile} ${
-                                    darkMode ? styles.darkModeIcon : ''
-                                  }`}
+                                  className={styles.lbMsgIconMobile}
                                   onClick={() => setShowContacts(prev => !prev)}
                                 />
                               </div>
                             </div>
                           )}
                           <div
-                            className={`${styles.lbMessagingContactsBody} ${
-                              styles.activeInlbMessagingContactsBody
-                            } ${darkMode ? 'bg-oxford-blue' : ''}`}
+                            className={`${styles.lbMessagingContactsBody} ${styles.activeInlbMessagingContactsBody}`}
                           >
                             {showContacts
                               ? safeSearchResults.map(user => (
                                   <button
                                     key={user.userId}
                                     type="button"
-                                    className={`${styles.lbMessagingContact} ${
-                                      darkMode
-                                        ? `bg-yinmn-blue ${styles.contactYinmBlue} ${styles.darkModeBorder}`
-                                        : ''
-                                    }`}
+                                    className={styles.lbMessagingContact}
                                     onClick={() => {
                                       updateSelection(user);
                                       setMobileHamMenu(false);
@@ -535,7 +483,7 @@ export default function LBMessaging() {
                                       <div
                                         className={`${styles.lbMessagingContactName} ${
                                           mobileView ? styles.black : ''
-                                        } ${darkMode ? 'text-light' : ''}`}
+                                        }`}
                                       >
                                         {user.firstName} {user.lastName}
                                       </div>
@@ -551,22 +499,16 @@ export default function LBMessaging() {
                 </div>
               </div>
             ) : null}
-            <div className={`${styles.containerMainMsg} ${darkMode ? 'bg-oxford-blue' : ''}`}>
+            <div className={styles.containerMainMsg}>
               {/* Contacts Section */}
               {!mobileView && (
                 <div className={styles.lbMessagingContacts}>
                   {showContacts ? (
-                    <div
-                      className={`${styles.lbMessagingContactsHeader} ${
-                        darkMode ? 'bg-space-cadet' : ''
-                      }`}
-                    >
+                    <div className={styles.lbMessagingContactsHeader}>
                       <input
                         type="text"
                         placeholder={placeholder}
-                        className={`${styles.lbSearchInput} ${
-                          darkMode ? 'bg-yinmn-blue text-light' : ''
-                        }`}
+                        className={styles.lbSearchInput}
                         value={searchQuery}
                         onChange={e => {
                           const query = e.target.value;
@@ -581,52 +523,36 @@ export default function LBMessaging() {
                       <button
                         type="button"
                         onClick={() => setShowContacts(prev => !prev)}
-                        className={`${styles.lbMsgIconBtn} ${darkMode ? styles.darkModeIcon : ''}`}
+                        className={styles.lbMsgIconBtn}
                       >
                         <img
-                          src={
-                            darkMode
-                              ? 'https://img.icons8.com/?size=26&id=1510&format=png&color=ffffff'
-                              : 'https://img.icons8.com/metro/26/multiply.png'
-                          }
+                          src="https://img.icons8.com/metro/26/multiply.png"
                           alt="Close"
                           className={styles.lbMsgIcon}
                         />
                       </button>
                     </div>
                   ) : (
-                    <div
-                      className={`${styles.lbMessagingContactsHeader} ${
-                        darkMode ? 'bg-space-cadet' : ''
-                      }`}
-                    >
-                      <h3 className={`${styles.lbContactMsgs} ${darkMode ? 'text-light' : ''}`}>
-                        Messages
-                      </h3>
+                    <div className={styles.lbMessagingContactsHeader}>
+                      <h3 className={styles.lbContactMsgs}>Messages</h3>
                       <div className={styles.lbMessagingSearchIcons}>
                         <FontAwesomeIcon
                           icon={faSearch}
-                          className={`${styles.lbMsgIcon} ${darkMode ? styles.darkModeIcon : ''}`}
+                          className={styles.lbMsgIcon}
                           onClick={() => setShowContacts(prev => !prev)}
                         />
                       </div>
                     </div>
                   )}
                   <div
-                    className={`${styles.lbMessagingContactsBody} ${
-                      styles.activeInlbMessagingContactsBody
-                    } ${darkMode ? 'bg-oxford-blue' : ''}`}
+                    className={`${styles.lbMessagingContactsBody} ${styles.activeInlbMessagingContactsBody}`}
                   >
                     {showContacts
                       ? safeSearchResults.map(user => (
                           <button
                             key={user._id}
                             type="button"
-                            className={`${styles.lbMessagingContact} ${
-                              darkMode
-                                ? `bg-yinmn-blue ${styles.contactYinmBlue} ${styles.darkModeBorder}`
-                                : ''
-                            }`}
+                            className={styles.lbMessagingContact}
                             onClick={() => updateSelection(user)}
                           >
                             <img
@@ -638,11 +564,7 @@ export default function LBMessaging() {
                               }}
                             />
                             <div className={styles.lbMessagingContactInfo}>
-                              <div
-                                className={`${styles.lbMessagingContactName} ${
-                                  darkMode ? 'text-light' : ''
-                                }`}
-                              >
+                              <div className={styles.lbMessagingContactName}>
                                 {user.firstName} {user.lastName}
                               </div>
                             </div>
@@ -655,16 +577,8 @@ export default function LBMessaging() {
 
               {/* Chat Window Section */}
               <div className={styles.lbMessagingMessageWindow}>
-                <div
-                  className={`${styles.lbMessagingMessageWindowHeader} ${
-                    darkMode ? 'bg-oxford-blue' : ''
-                  }`}
-                >
-                  <div
-                    className={`${styles.lbMessagingHeaderIdentity} ${
-                      darkMode ? 'text-light' : ''
-                    }`}
-                  >
+                <div className={styles.lbMessagingMessageWindowHeader}>
+                  <div className={styles.lbMessagingHeaderIdentity}>
                     <img
                       src={selectedUser.profilePic || '/pfp-default-header.png'}
                       onError={e => {
@@ -686,17 +600,15 @@ export default function LBMessaging() {
                         onClick={() => {
                           setBellDropdownActive(prev => !prev);
                         }}
-                        className={`${styles.lgMessagingNotificationBell} ${
-                          darkMode ? styles.darkModeIcon : ''
-                        }`}
+                        className={styles.lgMessagingNotificationBell}
                       />
                       {bellDropdownActive && (
                         <div
                           className={`${styles.lgMessagingBellSelectDropdown} ${
                             bellDropdownActive ? styles.activeInlgMessagingBellSelectDropdown : ''
-                          } ${darkMode ? 'bg-yinmn-blue' : ''}`}
+                          }`}
                         >
-                          <label className={darkMode ? 'text-light' : ''}>
+                          <label>
                             <input
                               type="checkbox"
                               checked={selectedOption.notifyInApp || false}
@@ -710,7 +622,7 @@ export default function LBMessaging() {
                             />
                             In App
                           </label>
-                          <label className={darkMode ? 'text-light' : ''}>
+                          <label>
                             <input
                               type="checkbox"
                               checked={selectedOption.notifyEmail || false}
@@ -736,24 +648,14 @@ export default function LBMessaging() {
                     </div>
                   )}
                 </div>
-                <div
-                  className={`${styles.lbMessagingMessageWindowBody} ${
-                    darkMode ? 'bg-yinmn-blue' : ''
-                  }`}
-                >
+                <div className={styles.lbMessagingMessageWindowBody}>
                   {selectedUser.userId ? (
                     renderChatMessages()
                   ) : (
-                    <p className={`${styles.startMsg} ${darkMode ? 'text-light' : ''}`}>
-                      Select a user to start chatting
-                    </p>
+                    <p className={styles.startMsg}>Select a user to start chatting</p>
                   )}
                 </div>
-                <div
-                  className={`${styles.lbMessaingMessageWindowFooter} ${
-                    darkMode ? 'bg-oxford-blue' : ''
-                  }`}
-                >
+                <div className={styles.lbMessaingMessageWindowFooter}>
                   <textarea
                     type="text"
                     placeholder="Type a message..."
@@ -765,9 +667,7 @@ export default function LBMessaging() {
                         handleSendMessage();
                       }
                     }}
-                    className={`${styles.lbMessagingTextarea} ${
-                      darkMode ? 'bg-yinmn-blue text-light' : ''
-                    }`}
+                    className={styles.lbMessagingTextarea}
                     disabled={!selectedUser.userId}
                   />
                   <FontAwesomeIcon
diff --git a/src/components/LBDashboard/Messaging/LBMessaging.module.css b/src/components/LBDashboard/Messaging/LBMessaging.module.css
index a5dbcea067..50977cd46f 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.module.css
+++ b/src/components/LBDashboard/Messaging/LBMessaging.module.css
@@ -56,16 +56,17 @@
   height: 100%;
   flex-direction: column;
   width: 30%;
+  border-right: 1px solid #ccc;
 }
 
-
 .containerTop {
-  display: flex;
+  display: none;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  height: 60px;
+  height: 0;
   background-color: #9dd425;
+  overflow: hidden;
 }
 
 .msg {
@@ -199,23 +200,23 @@
   flex-direction: column;
 }
 
-.lbMessagingMessageWindowFooter {
+.lbMessaingMessageWindowFooter {
   display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
   background-color: #e0e0e0;
   color: black;
-  height: 12%;
   padding: 10px 16px;
-  max-height: 50px;
   align-items: center;
   width: 100%;
-  justify-content: space-between;
-  gap: 12px;
+  gap: 10px;
+  box-sizing: border-box;
 }
 
 .lbMessagingTextarea {
   height: 38px;
-  flex: 1;
-  width: auto;
+  flex: 1 1 0;
+  width: 0;
   padding: 0 14px;
   border: 1px solid #b8b8b8;
   border-radius: 18px;
@@ -262,7 +263,6 @@
   margin-right: 10px;
 }
 
-
 .received {
   justify-content: flex-start !important;
   margin-left: 10px;
@@ -352,7 +352,7 @@
   box-sizing: border-box;
 }
 
-.activeInlgMessagingBellSelectDropdown{
+.activeInlgMessagingBellSelectDropdown {
   display: flex;
 }
 
@@ -512,6 +512,7 @@
   background-color: #4db7ab;
   color: #fff;
   transition: background-color 0.2s ease, transform 0.2s ease;
+  flex-shrink: 0;
 }
 
 .sendButton:hover {
@@ -595,6 +596,18 @@
   font-weight: 500;
 }
 
+/* Mobile: show containerTop */
+@media (max-width: 720px) {
+  .containerTop {
+    display: flex;
+    height: 60px;
+  }
+}
+
+:global(.dark-mode) .lbMessagingContacts {
+  border-right-color: #2a2a2a;
+}
+
 :global(.dark-mode) .mainContainer,
 :global(.dark-mode) .containerMainMsg {
   background-color: #141414;
@@ -656,7 +669,7 @@
   background-color: #1f1f1f;
 }
 
-:global(.dark-mode) .lbMessagingMessageWindowFooter {
+:global(.dark-mode) .lbMessaingMessageWindowFooter {
   background-color: #2a2a2a;
   color: #f1f1f1;
 }
@@ -723,4 +736,4 @@
 :global(.dark-mode) .lbNoMsgText,
 :global(.dark-mode) .startMsg {
   color: #d0d0d0;
-}
+}
\ No newline at end of file

From 01f5265cf323b4d6b2ab13cb6b042babcb2fafdc Mon Sep 17 00:00:00 2001
From: shravan0627 <neelamsetty.s@northeastern.edu>
Date: Mon, 8 Jun 2026 15:45:54 -0400
Subject: [PATCH 3/6] fix: remove nameless contacts from sidebar and fix code
 duplication

---
 .../LBDashboard/Messaging/LBMessaging.jsx     | 111 ++++++------------
 1 file changed, 34 insertions(+), 77 deletions(-)

diff --git a/src/components/LBDashboard/Messaging/LBMessaging.jsx b/src/components/LBDashboard/Messaging/LBMessaging.jsx
index 88f0106ba8..26e8c1397a 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.jsx
+++ b/src/components/LBDashboard/Messaging/LBMessaging.jsx
@@ -57,7 +57,7 @@ export default function LBMessaging() {
   const sidebarContacts = useMemo(() => {
     const chats = [...existingChats];
     const sid = selectedUser?.userId;
-    if (!sid) return chats;
+    if (!sid || !selectedUser?.firstName) return chats;
     const exists = chats.some(c => String(c.userId ?? c._id) === String(sid));
     if (!exists) {
       chats.unshift({
@@ -313,6 +313,24 @@ export default function LBMessaging() {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
+  const renderContactButton = (key, user, onClick) => (
+    <button key={key} type="button" className={styles.lbMessagingContact} onClick={onClick}>
+      <img
+        src={user.profilePic || '/pfp-default-header.png'}
+        alt="User Profile"
+        onError={e => {
+          e.target.onerror = null;
+          e.target.src = '/pfp-default-header.png';
+        }}
+      />
+      <div className={styles.lbMessagingContactInfo}>
+        <div className={`${styles.lbMessagingContactName} ${mobileView ? styles.black : ''}`}>
+          {user.firstName} {user.lastName}
+        </div>
+      </div>
+    </button>
+  );
+
   const renderContacts = () => {
     if (sidebarContacts.length === 0) {
       return (
@@ -320,31 +338,12 @@ export default function LBMessaging() {
       );
     }
 
-    return sidebarContacts.map(user => (
-      <button
-        key={user.userId || user._id}
-        type="button"
-        className={styles.lbMessagingContact}
-        onClick={() => {
-          updateSelection(user);
-          setMobileHamMenu(false);
-        }}
-      >
-        <img
-          src={user.profilePic || '/pfp-default-header.png'}
-          alt="User Profile"
-          onError={e => {
-            e.target.onerror = null;
-            e.target.src = '/pfp-default-header.png';
-          }}
-        />
-        <div className={styles.lbMessagingContactInfo}>
-          <div className={`${styles.lbMessagingContactName} ${mobileView ? styles.black : ''}`}>
-            {user.firstName} {user.lastName}
-          </div>
-        </div>
-      </button>
-    ));
+    return sidebarContacts.map(user =>
+      renderContactButton(user.userId || user._id, user, () => {
+        updateSelection(user);
+        setMobileHamMenu(false);
+      }),
+    );
   };
 
   const renderChatMessages = () => {
@@ -461,35 +460,12 @@ export default function LBMessaging() {
                             className={`${styles.lbMessagingContactsBody} ${styles.activeInlbMessagingContactsBody}`}
                           >
                             {showContacts
-                              ? safeSearchResults.map(user => (
-                                  <button
-                                    key={user.userId}
-                                    type="button"
-                                    className={styles.lbMessagingContact}
-                                    onClick={() => {
-                                      updateSelection(user);
-                                      setMobileHamMenu(false);
-                                    }}
-                                  >
-                                    <img
-                                      src={user.profilePic || '/pfp-default-header.png'}
-                                      alt="User Profile"
-                                      onError={e => {
-                                        e.target.onerror = null;
-                                        e.target.src = '/pfp-default-header.png';
-                                      }}
-                                    />
-                                    <div className={styles.lbMessagingContactInfo}>
-                                      <div
-                                        className={`${styles.lbMessagingContactName} ${
-                                          mobileView ? styles.black : ''
-                                        }`}
-                                      >
-                                        {user.firstName} {user.lastName}
-                                      </div>
-                                    </div>
-                                  </button>
-                                ))
+                              ? safeSearchResults.map(user =>
+                                  renderContactButton(user.userId, user, () => {
+                                    updateSelection(user);
+                                    setMobileHamMenu(false);
+                                  }),
+                                )
                               : renderContacts()}
                           </div>
                         </div>
@@ -548,28 +524,9 @@ export default function LBMessaging() {
                     className={`${styles.lbMessagingContactsBody} ${styles.activeInlbMessagingContactsBody}`}
                   >
                     {showContacts
-                      ? safeSearchResults.map(user => (
-                          <button
-                            key={user._id}
-                            type="button"
-                            className={styles.lbMessagingContact}
-                            onClick={() => updateSelection(user)}
-                          >
-                            <img
-                              src={user.profilePic || '/pfp-default-header.png'}
-                              alt="User Profile"
-                              onError={e => {
-                                e.target.onerror = null;
-                                e.target.src = '/pfp-default-header.png';
-                              }}
-                            />
-                            <div className={styles.lbMessagingContactInfo}>
-                              <div className={styles.lbMessagingContactName}>
-                                {user.firstName} {user.lastName}
-                              </div>
-                            </div>
-                          </button>
-                        ))
+                      ? safeSearchResults.map(user =>
+                          renderContactButton(user._id, user, () => updateSelection(user)),
+                        )
                       : renderContacts()}
                   </div>
                 </div>

From 0a4f38bd2b2c9079c3ce8fefb6433ea4c16e04a7 Mon Sep 17 00:00:00 2001
From: shravan0627 <neelamsetty.s@northeastern.edu>
Date: Mon, 8 Jun 2026 23:57:22 -0400
Subject: [PATCH 4/6] refactor: extract duplicate search onChange handler

---
 .../LBDashboard/Messaging/LBMessaging.jsx     | 30 ++++++++-----------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/components/LBDashboard/Messaging/LBMessaging.jsx b/src/components/LBDashboard/Messaging/LBMessaging.jsx
index 26e8c1397a..ece3313800 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.jsx
+++ b/src/components/LBDashboard/Messaging/LBMessaging.jsx
@@ -313,6 +313,16 @@ export default function LBMessaging() {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
+  const handleSearchChange = e => {
+    const query = e.target.value;
+    setSearchQuery(query);
+    if (query.trim() === '') {
+      setSearchResults([]);
+    } else {
+      searchUserProfiles(query);
+    }
+  };
+
   const renderContactButton = (key, user, onClick) => (
     <button key={key} type="button" className={styles.lbMessagingContact} onClick={onClick}>
       <img
@@ -422,15 +432,7 @@ export default function LBMessaging() {
                                 placeholder={placeholder}
                                 className={styles.lbSearchInput}
                                 value={searchQuery}
-                                onChange={e => {
-                                  const query = e.target.value;
-                                  setSearchQuery(query);
-                                  if (query.trim() === '') {
-                                    setSearchResults([]);
-                                  } else {
-                                    searchUserProfiles(query);
-                                  }
-                                }}
+                                onChange={handleSearchChange}
                               />
                               <button
                                 type="button"
@@ -486,15 +488,7 @@ export default function LBMessaging() {
                         placeholder={placeholder}
                         className={styles.lbSearchInput}
                         value={searchQuery}
-                        onChange={e => {
-                          const query = e.target.value;
-                          setSearchQuery(query);
-                          if (query.trim() === '') {
-                            setSearchResults([]);
-                          } else {
-                            searchUserProfiles(query);
-                          }
-                        }}
+                        onChange={handleSearchChange}
                       />
                       <button
                         type="button"

From db9ea7686743baae5f62dd4e4ce6622209bb7ba0 Mon Sep 17 00:00:00 2001
From: shravan0627 <neelamsetty.s@northeastern.edu>
Date: Sun, 21 Jun 2026 00:57:58 -0400
Subject: [PATCH 5/6] Fix dark mode conflict resolution for LB Dashboard
 Messaging #3939

---
 .../LBDashboard/Messaging/LBMessaging.jsx     | 18 +++++-
 .../Messaging/LBMessaging.module.css          | 63 ++++++++++++++++---
 2 files changed, 72 insertions(+), 9 deletions(-)

diff --git a/src/components/LBDashboard/Messaging/LBMessaging.jsx b/src/components/LBDashboard/Messaging/LBMessaging.jsx
index ece3313800..22c28b2bb2 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.jsx
+++ b/src/components/LBDashboard/Messaging/LBMessaging.jsx
@@ -324,7 +324,12 @@ export default function LBMessaging() {
   };
 
   const renderContactButton = (key, user, onClick) => (
-    <button key={key} type="button" className={styles.lbMessagingContact} onClick={onClick}>
+    <button
+      key={key}
+      type="button"
+      className={styles.lbMessagingContact}
+      onClick={onClick}
+    >
       <img
         src={user.profilePic || '/pfp-default-header.png'}
         alt="User Profile"
@@ -425,6 +430,15 @@ export default function LBMessaging() {
                     {mobileHamMenu && (
                       <div className={styles.lbMobileHamMenu} ref={menuRef}>
                         <div className={styles.lbMobileHamMenuHeader}>
+                          <div className={styles.lbMobilePanelTopBar}>
+                            <button
+                              type="button"
+                              className={styles.lbMobileCloseBtn}
+                              onClick={() => setMobileHamMenu(false)}
+                            >
+                              ✕
+                            </button>
+                          </div>
                           {showContacts ? (
                             <div className={styles.lbMessagingContactsHeaderMobile}>
                               <input
@@ -634,4 +648,4 @@ export default function LBMessaging() {
       </div>
     )
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/LBDashboard/Messaging/LBMessaging.module.css b/src/components/LBDashboard/Messaging/LBMessaging.module.css
index 50977cd46f..8fc9e924cd 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.module.css
+++ b/src/components/LBDashboard/Messaging/LBMessaging.module.css
@@ -135,14 +135,15 @@
 
 .lbMobileHamMenuHeader {
   display: flex;
-  position: absolute;
+  position: fixed;
   top: 0;
-  right: 0;
+  left: 0;
   flex-direction: column;
-  margin-top: 60px;
-  width: 220px;
+  width: 100vw;
+  height: 100vh;
   background-color: #e9e3e3;
-  z-index: 10;
+  z-index: 1000;
+  overflow-y: auto;
 }
 
 .black {
@@ -150,8 +151,7 @@
 }
 
 .lbMessagingContactsBody {
-  height: 87.5%;
-  max-height: 480px;
+  flex: 1;
   overflow-y: auto;
   display: none;
 }
@@ -591,6 +591,22 @@
   object-fit: cover;
 }
 
+.lbMobilePanelTopBar {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 16px;
+  background-color: #d0caca;
+}
+
+.lbMobileCloseBtn {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: #333;
+  padding: 4px 8px;
+}
+
 .lbMessagingContactName {
   font-size: 15px;
   font-weight: 500;
@@ -602,6 +618,39 @@
     display: flex;
     height: 60px;
   }
+
+  .lbMessaingMessageWindowFooter {
+    padding: 8px 10px;
+    position: sticky;
+    bottom: 0;
+  }
+
+  .lbMessagingTextarea {
+    height: 36px;
+    font-size: 14px;
+  }
+
+  .containerMainMsg {
+    margin: 0;
+    min-height: 0;
+    flex: 1;
+  }
+
+  .lbMessagingMessageWindow {
+    width: 100%;
+  }
+}
+
+:global(.dark-mode) .lbMobileHamMenuHeader {
+  background-color: #1a1a1a;
+}
+
+:global(.dark-mode) .lbMobilePanelTopBar {
+  background-color: #2a2a2a;
+}
+
+:global(.dark-mode) .lbMobileCloseBtn {
+  color: #f1f1f1;
 }
 
 :global(.dark-mode) .lbMessagingContacts {

From 19ab2726d6b1a410ec32d8ef361cc91a5f8d0cdc Mon Sep 17 00:00:00 2001
From: shravan0627 <neelamsetty.s@northeastern.edu>
Date: Sun, 21 Jun 2026 01:06:14 -0400
Subject: [PATCH 6/6] Fix prettier formatting in LBMessaging.jsx

---
 src/components/LBDashboard/Messaging/LBMessaging.jsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/LBDashboard/Messaging/LBMessaging.jsx b/src/components/LBDashboard/Messaging/LBMessaging.jsx
index 22c28b2bb2..8ebf0b5328 100644
--- a/src/components/LBDashboard/Messaging/LBMessaging.jsx
+++ b/src/components/LBDashboard/Messaging/LBMessaging.jsx
@@ -324,12 +324,7 @@ export default function LBMessaging() {
   };
 
   const renderContactButton = (key, user, onClick) => (
-    <button
-      key={key}
-      type="button"
-      className={styles.lbMessagingContact}
-      onClick={onClick}
-    >
+    <button key={key} type="button" className={styles.lbMessagingContact} onClick={onClick}>
       <img
         src={user.profilePic || '/pfp-default-header.png'}
         alt="User Profile"
@@ -648,4 +643,4 @@ export default function LBMessaging() {
       </div>
     )
   );
-}
\ No newline at end of file
+}