Skip to content

Carlos enable dark mode support messaging hosts #3939

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sircarmart wants to merge 9 commits into from
Closed

Carlos enable dark mode support messaging hosts #3939

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6250787
add dark mode backgrounds
sircarmart Aug 16, 2025
794d935
add dark mode borders to components
sircarmart Aug 16, 2025
c5bff10
add bootstrap light text class in dark mode
sircarmart Aug 16, 2025
8035911
add dark mode icon support
sircarmart Aug 21, 2025
333b1db
Merge remote-tracking branch 'origin/development' into carlos_enable_…
sircarmart Aug 21, 2025
0747f6a
add text-light class to start message
sircarmart Aug 22, 2025
a6dafc0
fix: improve dark mode visibility if no contacts available
sircarmart Aug 22, 2025
60a7fe8
refactored code to use App.css classes in most elements
sircarmart Aug 23, 2025
dc73f36
Merge remote-tracking branch 'origin/development' into carlos_enable_…
sircarmart Aug 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
176 changes: 135 additions & 41 deletions src/components/LBDashboard/Messaging/LBMessaging.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' });
Expand Down Expand Up @@ -213,14 +215,16 @@ 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 => (
<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);
Expand All @@ -235,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>
Expand All @@ -245,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(
Expand All @@ -259,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 (
Expand All @@ -272,7 +292,7 @@ export default function LBMessaging() {
message.sender === auth.userid ? styles.sent : styles.received
}`}
>
<p className={styles.messageText}>
<p className={`${styles.messageText} ${darkMode ? ` bg-azure text-light` : ''}`}>
{message.content.split('\n').map(line => (
<span key={message._id + line}>
{line}
Expand All @@ -289,12 +309,16 @@ export default function LBMessaging() {

return (
users.userProfilesBasicInfo.length !== 0 && (
<div className={styles.mainContainer}>
<div className={styles.logoContainer}>
<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.containerTop} ${styles.msg}`}>
<div
className={`${styles.contentContainer} ${
darkMode ? ` bg-yinmn-blue ${styles.darkModeBorder}` : ''
}`}
>
<div className={`${styles.containerTop} ${styles.msg} ${darkMode ? ' bg-azure' : ''}`}>
{mobileView && (
<div className={styles.lbMobileMessagingMenu}>
<div className={styles.lbMobileHeader}>
Expand All @@ -309,11 +333,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 ? ' 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;
Expand All @@ -331,33 +361,53 @@ 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}
/>
</button>
</div>
) : (
<div className={styles.lbMessagingContactsHeaderMobile}>
<h3 className={styles.lbContactMsgs}>Messages</h3>
<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
? searchResults.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);
Expand All @@ -375,7 +425,7 @@ export default function LBMessaging() {
<div
className={`${styles.lbMessagingContactName} ${
mobileView ? styles.black : ''
}`}
} ${darkMode ? 'text-light' : ''}`}
>
{user.firstName} {user.lastName}
</div>
Expand All @@ -391,16 +441,22 @@ export default function LBMessaging() {
</div>
)}
</div>
<div className={styles.containerMainMsg}>
<div className={`${styles.containerMainMsg} ${darkMode ? ' bg-oxford-blue' : ''}`}>
{/* Contacts Section */}
{!mobileView && (
<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;
Expand All @@ -415,36 +471,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 : ''}`} // 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}
/>
</button>
</div>
) : (
<div className={styles.lbMessagingContactsHeader}>
<h3 className={styles.lbContactMsgs}>Messages</h3>
<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
? searchResults.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
Expand All @@ -456,7 +528,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>
Expand All @@ -469,8 +545,12 @@ export default function LBMessaging() {

{/* Chat Window Section */}
<div className={styles.lbMessagingMessageWindow}>
<div className={styles.lbMessagingMessageWindowHeader}>
<div>
<div
className={`${styles.lbMessagingMessageWindowHeader} ${
darkMode ? ' bg-oxford-blue' : ''
}`}
>
<div className={darkMode ? 'text-light' : ''}>
<img
src={selectedUser.profilePic || '/pfp-default-header.png'}
onError={e => {
Expand All @@ -491,15 +571,17 @@ export default function LBMessaging() {
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}
Expand All @@ -513,7 +595,7 @@ export default function LBMessaging() {
/>
In App
</label>
<label>
<label className={darkMode ? 'text-light' : ''}>
<input
type="checkbox"
checked={selectedOption.notifyEmail || false}
Expand All @@ -539,14 +621,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..."
Expand All @@ -558,7 +650,9 @@ export default function LBMessaging() {
handleSendMessage();
}
}}
className={styles.lbMessagingTextarea}
className={`${styles.lbMessagingTextarea} ${
darkMode ? ` bg-yinmn-blue text-light` : ''
}`}
disabled={!selectedUser.userId}
/>
<FontAwesomeIcon
Expand Down
Loading
Loading