Skip to content

Commit e3f32ab

Browse files
one-communityone-community
authored
Merge pull request #4636 from OneCommunityGlobal/aryan_hgn_help_dark_mode
Aryan Add Dark Mode Styles to HGN Help Modal
2 parents e4c577f + 8107bed commit e3f32ab

2 files changed

Lines changed: 147 additions & 48 deletions

File tree

‎src/components/LandingPage/HelpModal.jsx‎

Lines changed: 74 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React, { useState, useEffect } from 'react';
1+
import React, { useState, useEffect, useMemo } from 'react';
22
import PropTypes from 'prop-types';
33
import { Modal, Button } from 'react-bootstrap';
4-
import { connect } from 'react-redux';
4+
import { connect, useSelector } from 'react-redux';
55
import axios from 'axios';
66
import { ENDPOINTS } from '~/utils/URL';
77
import styles from './HelpModal.module.css';
@@ -12,22 +12,43 @@ function HelpModal({ show, onHide, auth }) {
1212
const [options, setOptions] = useState([]);
1313
const [loading, setLoading] = useState(true);
1414
const [error, setError] = useState(null);
15+
const [teams, setTeams] = useState([]);
16+
17+
const darkMode = useSelector(state => state.theme.darkMode);
18+
19+
const userId = auth?.user?.userid;
1520

16-
// Fetch Help Categories
1721
useEffect(() => {
1822
const fetchHelpCategories = async () => {
1923
try {
20-
const response = await axios.get(ENDPOINTS.HELP_CATEGORIES);
21-
setOptions(response.data.map(category => category.name));
22-
setLoading(false);
23-
} catch (err) {
24+
const categoriesResponse = await axios.get(ENDPOINTS.HELP_CATEGORIES);
25+
setOptions(categoriesResponse.data.map(category => category.name));
26+
} catch {
2427
setError('Failed to load help categories');
28+
} finally {
2529
setLoading(false);
2630
}
2731
};
32+
2833
fetchHelpCategories();
2934
}, []);
3035

36+
useEffect(() => {
37+
if (!userId) return;
38+
39+
const fetchUserProfile = async () => {
40+
try {
41+
const profileResponse = await axios.get(ENDPOINTS.USER_PROFILE(userId));
42+
setTeams(profileResponse.data?.teams || []);
43+
} catch (err) {
44+
console.error('Failed to fetch user profile', err);
45+
setTeams([]);
46+
}
47+
};
48+
49+
fetchUserProfile();
50+
}, [userId]);
51+
3152
const handleSelect = option => {
3253
setSelectedOption(option);
3354
setIsOpen(false);
@@ -44,32 +65,59 @@ function HelpModal({ show, onHide, auth }) {
4465
onHide();
4566
};
4667

68+
/* ---------------- Access Logic ---------------- */
69+
const role = auth?.user?.role?.trim().toLowerCase() || '';
70+
71+
const allowedRoles = useMemo(() => new Set(['owner', 'administrator']), []);
72+
73+
const isSoftwareDevMember = useMemo(() => {
74+
return (
75+
allowedRoles.has(role) ||
76+
teams.some(team => team.teamName?.trim().toLowerCase() === 'software development team')
77+
);
78+
}, [allowedRoles, teams, role]);
79+
4780
const renderContent = () => {
4881
if (loading) return <div>Loading categories...</div>;
4982
if (error) return <div className="text-danger">{error}</div>;
5083

5184
return (
5285
<>
5386
<div
54-
className={styles.selectButton}
87+
className={`${styles.selectButton} ${darkMode ? styles.selectButtonDark : ''}`}
5588
onClick={() => setIsOpen(!isOpen)}
5689
role="button"
5790
tabIndex={0}
5891
onKeyDown={e => {
5992
if (e.key === 'Enter' || e.key === ' ') setIsOpen(!isOpen);
6093
}}
6194
>
62-
<span className={`${styles.selectButtonText} ${selectedOption ? styles.selected : ''}`}>
95+
<span
96+
className={`${styles.selectButtonText}
97+
${selectedOption ? styles.selected : ''}
98+
${darkMode ? styles.selectButtonTextDark : ''}
99+
${darkMode && selectedOption ? styles.selectedDark : ''}
100+
`}
101+
>
63102
{selectedOption || 'Select an option'}
64103
</span>
65-
<span className={`${styles.selectButtonArrow} ${isOpen ? styles.open : ''}`} />
104+
105+
<span
106+
className={`${styles.selectButtonArrow} ${isOpen ? styles.open : ''} ${
107+
darkMode ? styles.selectButtonArrowDark : ''
108+
}`}
109+
/>
66110
</div>
111+
67112
{isOpen && (
68-
<div className={styles.selectOptions} role="listbox">
113+
<div
114+
className={`${styles.selectOptions} ${darkMode ? styles.selectOptionsDark : ''}`}
115+
role="listbox"
116+
>
69117
{options.map(option => (
70118
<div
71119
key={option}
72-
className={styles.selectOption}
120+
className={`${styles.selectOption} ${darkMode ? styles.selectOptionDark : ''}`}
73121
onClick={() => handleSelect(option)}
74122
role="option"
75123
tabIndex={0}
@@ -87,52 +135,38 @@ function HelpModal({ show, onHide, auth }) {
87135
);
88136
};
89137

90-
// ---- Access Logic ----
91-
const user = auth?.user || {};
92-
const role = user.role?.trim().toLowerCase() || '';
93-
94-
const allowedRoles = ['owner', 'administrator'];
95-
96-
// User must be in Software Development Team OR have one of the allowed roles
97-
const isSoftwareDevMember =
98-
user.teams?.some(team => team.teamName?.trim().toLowerCase() === 'software development team') ||
99-
allowedRoles.includes(role);
100-
101-
console.log('User Role:', role);
102-
console.log('Teams:', user.teams);
103-
console.log('isSoftwareDevMember:', isSoftwareDevMember);
104-
105-
// ---- Modal Layout ----
106138
return (
107-
<Modal show={show} onHide={onHide} className={styles.helpModal} centered>
139+
<Modal
140+
show={show}
141+
onHide={onHide}
142+
centered
143+
className={`${styles.helpModal} ${darkMode ? styles.darkMode : ''}`}
144+
>
108145
<Modal.Header closeButton>
109146
<Modal.Title>What do you need help with?</Modal.Title>
110147
</Modal.Header>
148+
111149
<Modal.Body>
112150
<div className={styles.selectContainer}>{renderContent()}</div>
113151

114152
{!isSoftwareDevMember && (
115153
<div className="alert alert-warning mt-3">
116-
Only members from the software development team can seek help
154+
Only members of the Software Development Team can submit requests.
117155
</div>
118156
)}
119157

120-
<p className={styles.textMuted}>
121-
If you have any suggestions please click
158+
<p className={`${styles.textMuted} ${darkMode ? styles.textMutedDark : ''}`}>
159+
If you have any suggestions please click{' '}
122160
<button
123161
type="button"
124-
className="btn btn-link p-0 border-0 align-baseline"
162+
className="p-0 border-0 align-baseline"
125163
onClick={handleSuggestionsClick}
126-
style={{
127-
color: '#0066CC',
128-
textDecoration: 'none',
129-
marginLeft: '4px',
130-
}}
131164
>
132165
here
133166
</button>
134167
</p>
135168
</Modal.Body>
169+
136170
<Modal.Footer>
137171
<Button
138172
variant="primary"
@@ -146,18 +180,14 @@ function HelpModal({ show, onHide, auth }) {
146180
);
147181
}
148182

149-
// ---- PropTypes ----
183+
/* ---------------- PropTypes ---------------- */
150184
HelpModal.propTypes = {
151185
show: PropTypes.bool.isRequired,
152186
onHide: PropTypes.func.isRequired,
153187
auth: PropTypes.shape({
154188
user: PropTypes.shape({
189+
userid: PropTypes.string,
155190
role: PropTypes.string,
156-
teams: PropTypes.arrayOf(
157-
PropTypes.shape({
158-
teamName: PropTypes.string,
159-
}),
160-
),
161191
}),
162192
}).isRequired,
163193
};

‎src/components/LandingPage/HelpModal.module.css‎

Lines changed: 73 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,16 +41,15 @@
4141
.selectButton {
4242
box-sizing: border-box;
4343
width: 100%;
44-
height: 62px;
44+
height: 55px;
4545
background: #fff;
4646
border: 2px solid rgba(0, 0, 0, 0.8);
47-
border-radius: 10px;
4847
padding: 12px 20px;
4948
display: flex;
5049
justify-content: space-between;
5150
align-items: center;
5251
cursor: pointer;
53-
margin-bottom: 24px;
52+
margin-bottom: 50px;
5453
}
5554

5655
.selectButtonText {
@@ -83,7 +82,8 @@
8382

8483
.selectOptions {
8584
position: absolute;
86-
top: calc(100% - 24px);
85+
top: 100%;
86+
margin-top: -2px;
8787
left: 0;
8888
width: 100%;
8989
background: #fff;
@@ -116,6 +116,75 @@
116116
padding-left: 5px;
117117
}
118118

119+
/* ============================================
120+
DARK MODE STYLES
121+
============================================ */
122+
123+
.darkMode .modalContent {
124+
background-color: #2b3e59 !important;
125+
border: 1px solid #4a5a77 !important;
126+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
127+
}
128+
129+
.darkMode .modalHeader {
130+
border-bottom: 1px solid #4a5a77 !important;
131+
}
132+
133+
.darkMode .modalTitle {
134+
color: #ffffff !important;
135+
}
136+
137+
.darkMode p button {
138+
font-size: 18px;
139+
color: #ddb55e !important;
140+
text-decoration: underline;
141+
}
142+
143+
.darkMode p button:hover {
144+
color: #f5a926 !important;
145+
}
146+
147+
.selectButtonDark {
148+
background-color: #3a506b;
149+
border: 2px solid #4a5a77;
150+
color: #ffffff;
151+
}
152+
153+
.selectButtonTextDark {
154+
color: rgba(255, 255, 255, 0.7);
155+
}
156+
157+
.selectedDark {
158+
color: #ffffff;
159+
}
160+
161+
.selectButtonArrowDark {
162+
border-color: #ffffff;
163+
}
164+
165+
.selectOptionsDark {
166+
background-color: #2d4059;
167+
border: 2px solid #4a5a77;
168+
}
169+
170+
.selectOptionDark {
171+
color: #ffffff;
172+
}
173+
174+
.selectOptionDark:hover {
175+
background-color: #253342;
176+
}
177+
178+
.textMutedDark {
179+
color: #cfd8e3;
180+
}
181+
182+
.darkMode :global(.alert-warning) {
183+
background-color: #4a3b1f;
184+
color: #f5e6c8;
185+
border-color: #e8a71c;
186+
}
187+
119188
@media (max-width: 992px) {
120189
.helpModal .modalBody {
121190
padding: 0 20px;

0 commit comments

Comments
 (0)