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	19ab272
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a37714ca707640008369508
😎 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.

[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.

[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

[pixelpix13]

Testing Summary

Tested locally on branch shravan-fix-conflicts-3939.

Verified

Navigation

• Header is visible.
• Navbar renders correctly.
• Messaging page loads without errors.

Dark Mode

• Theme changes immediately.
• No page refresh required.
• No layout shifts observed.
• No visual glitches during theme switching.

Contacts Panel

• Contact list is readable.
• Search field is readable.
• Search icon switches correctly.
• Selected contact remains visible.
• Hover states are visible.
• Light mode and dark mode both render correctly.

Message Window

• Header is visible.
• Messages are visible.
• Sent and received message bubbles are readable.
• Timestamps are readable.
• Footer is visible.
• Textarea is visible.
• Placeholder text is readable.
• Message contrast is acceptable in dark mode.

Notification Dropdown

• Dropdown opens correctly.
• Text is readable.
• Hover states work correctly.
• Dark mode styling appears correct.

Mobile Testing

Verified on:

• iPhone 12
• Galaxy S20
• iPad

Verified:

• Hamburger menu appears below 720px.
• Hamburger menu opens and closes correctly.
• Messaging UI remains usable.
• Contact panel is accessible.
• Message window is accessible.
• No overlapping text observed.

Theme Switching

Tested:

• Light → Dark → Light → Dark

Verified:

• No stale colors.
• No disappearing icons.
• No visual glitches.
• No layout shifts.

---

Issue 1 – Close (X) Button Contrast

The close button remains black in dark mode.

Expected Behavior

The close button should switch to a lighter color (white or equivalent) to remain visible and consistent with the dark theme.

Screenshot

---

Issue 2 – Duplicate Message Rendering

After sending a message, the same message appears twice in the conversation window.

Expected Behavior

Messages should only render once after being sent.

Screenshot

---

Issue 3 – Mobile Text Wrapping

For longer messages on smaller screens, horizontal scrolling is required to view the entire message.

Expected Behavior

Message text should wrap automatically so that all content remains visible within the available screen width.

Screenshot

---

Issue 4 – Chat Window Scrolling Behavior

As conversations grow longer, the message area continues expanding downward.

Expected Behavior

The chat area should become scrollable while keeping:

• Message input field fixed
• Send button fixed
• Latest messages easily accessible

This would improve usability during longer conversations.

Screenshot

---

Issue 5 – Console Errors

Console contains errors while using the messaging page.

Expected Behavior

The messaging page should load without console errors or warnings related to messaging functionality.

Screenshot

---

Overall Assessment

Verified Working

• Header visibility
• Navbar rendering
• Dark mode toggle behavior
• Contacts panel
• Search functionality
• Notification dropdown
• Mobile navigation
• Theme switching
• General messaging workflow

Requesting Changes

The dark mode implementation is generally working; however, the following issues should be addressed:

• Close button visibility in dark mode
• Duplicate message rendering
• Dashboard notification synchronization
• Mobile text wrapping
• Chat window scrolling behavior
• Console errors

The messaging UI is usable overall, but addressing these issues would improve functionality and usability across desktop and mobile views.