Shravan fix conflicts Carlos enable dark mode support messaging hosts PR 3939

[Shravan-neelamsetty]

Description

This PR resolves merge conflicts in LBMessaging.jsx between Carlos's dark mode implementation (#3939) and the current development branch, and applies dark mode support to the LB Dashboard messaging page for both desktop and mobile.

Implements #3939

Related PRs (if any):

This is a redo of this PR: #3939

Main changes explained:

• Resolved merge conflicts in src/components/LBDashboard/Messaging/LBMessaging.jsx between carlos_enable_dark_mode_support_messaging_hosts and development
• Added darkMode selector and applied dark mode classes across all messaging UI elements: main container, logo container, content container, contacts panel header/body, search input, message window header/body/footer, message bubbles, bell notification dropdown, and empty state text
• Added dark mode icon support for search and close icons (white icon URLs in dark mode)
• Restored Header component import to maintain navbar visibility on the messaging page

How to test:

1. Checkout shravan-fix-conflicts-3939
2. Run npm install and npm run start:local
3. Clear site data/cache
4. Log in as admin
5. Toggle dark mode from the navbar on any page
6. Navigate to http://localhost:5173/lbdashboard/messaging
7. Verify the contacts panel, message window, header, footer, textarea, and bell dropdown all render correctly in dark mode
8. Toggle back to light mode and verify no visual regressions
9. Resize browser below 720px and verify the hamburger menu works correctly in dark mode

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	0a4f38b
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a278f2ef32d920008d4909f
😎 Deploy Preview	https://deploy-preview-5333--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Mahitha-pasupuleti]

The messaging functionality works well in both light and dark modes. Contact search, contact selection, message sending, and message display are all functioning as expected.

For dark mode, I would suggest adding slightly more visual distinction between the messaging container and the page background to improve contrast and readability. This is a minor UI enhancement and can be addressed later if desired.

However, I observed issues in mobile view (tested on iPhone 12 and iPhone 14 screen sizes):

• Contact search does not appear to function correctly in mobile view. I was unable to locate additional contacts through the search feature.
• Search result text does not render properly on smaller screen sizes.
• The "Type a message" input area does not render correctly in mobile view.

Overall, the dark mode implementation looks good, but there are several mobile responsiveness and usability issues that should be reviewed before merging.

[DeepighaJ]

• Checked out to current branch and tested the PR locally.
• The contacts panel, message window, header, footer, textarea and bell dropdown all render correctly in dark mode as expected.
• But in Mobile view the search option is not available.

[kzou55]

Hi Shravan,

I checked out to the branch and tested the PR locally. I verified that the chat elements rendered correctly in dark mode.

I also observed some issues below:

• On smaller screen sizes (desktop/mobile), the search area disappears and is replaced by a green tab. I'm not sure if this is intended to be the new search component, but clicking the tab does not trigger any action, so the search functionality is not accessible in this state.

• The ‘up arrow’ button overlaps with the chat component on smaller screen sizes; the layout could be adjusted to improve responsiveness.
  

• Not sure if for the "Notifications" you meant the original dashboard page. But just wanted to note/flag that there's some issues there too.

  • In dark mode, the background of the notification covers the profile section when you click on the user's name in the dashboard.

    

  • This isn't the case in light mode.

    

  • Clicking on the tabs in the profile section (View Profile, Update Password, Light Mode, Logout) does nothing when the notification is present. Despite the tabs being visible, the notification must be closed before those tabs are clickable.

[Abhi-R0211]

Hi, I tested locally on branch shravan-fix-conflicts-3939, logged in as admin, navigated to http://localhost:5173/lbdashboard/messaging. Here is my analysis:

What's Working Well

• Light mode renders correctly - contacts panel, empty state text, textarea, and send button all display as expected

• Light mode search works correctly - results list renders with readable contact names

• Dark mode default renders correctly - main container, contacts panel, message window header, empty state text, and textarea all adopt the dark theme

• Dark mode search works correctly - search input is active, results list renders with correct dark styling and readable contact names

• Dark mode message window renders correctly - header, message body, textarea, and send button all display with proper contrast
• Bell notification dropdown renders correctly in dark mode - In App/Email checkboxes and Save button are visible and readable

---

Issues

1. Mobile (390px) - search button hidden, contacts list inaccessible
   At 390px width the search icon is not visible, making it impossible to open the contacts list or start a new conversation on mobile.

2. Mobile (390px) - bell notification hidden
   The notification bell icon is also not visible at mobile width, making notification preferences inaccessible on mobile.

3. Mobile (390px) - textarea and send button cramped, up arrow overlaps chat
   The Type a message input and send button are present at the bottom but cramped, and the up arrow scroll button overlaps the chat area at mobile width.

[mahathiganimi]

Dark mode looks solid on desktop. contacts panel, message window, header, footer, text area, and bell dropdown all render correctly, and light mode shows no regressions.
However, mobile view (~390px, tested on iPhone 14 Pro Max) has several issues: the search/contacts list is not accessible, the search icon either disappears or is replaced by an unresponsive green tab, the bell notification icon is hidden, and the "Type a message" text area + send button are cramped with the up-arrow scroll button overlapping the chat area. These mobile issues are consistent with what other reviewers also found.
Suggest also adding more visual contrast between the messaging container and page background in dark mode for readability (minor, can be a follow-up).
Given the mobile responsiveness issues, requesting changes before this can be merged.