Skip to content

Commit 668280d

Browse files
one-communityone-community
authored
Merge pull request #4509 from OneCommunityGlobal/feature/activities-dark-mode
Namitha: Support dark mode styling on Activities List page
2 parents c0b9c15 + fa5d595 commit 668280d

2 files changed

Lines changed: 145 additions & 70 deletions

File tree

‎src/components/CommunityPortal/Activities/ActivityList.jsx‎

Lines changed: 49 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import { mockActivities } from './mockActivities';
66
// import { useHistory } from 'react-router-dom';
77

88
function ActivityList() {
9+
const darkMode = useSelector(state => state.theme.darkMode);
910
const [activities, setActivities] = useState([]);
1011
const [loading, setLoading] = useState(true);
1112
const [error, setError] = useState(null);
12-
const darkMode = useSelector(state => state.theme.darkMode);
1313
const [filter, setFilter] = useState({
1414
type: '',
1515
date: '',
@@ -18,6 +18,18 @@ function ActivityList() {
1818
const [locationSuggestions, setLocationSuggestions] = useState([]);
1919
const [showSuggestions, setShowSuggestions] = useState(false);
2020

21+
useEffect(() => {
22+
if (darkMode) {
23+
document.body.classList.add('activity-list-dark-body');
24+
} else {
25+
document.body.classList.remove('activity-list-dark-body');
26+
}
27+
28+
return () => {
29+
document.body.classList.remove('activity-list-dark-body');
30+
};
31+
}, [darkMode]);
32+
2133
useEffect(() => {
2234
const fetchActivities = async () => {
2335
try {
@@ -103,27 +115,34 @@ function ActivityList() {
103115
};
104116

105117
return (
106-
<div className={`${styles.body} ${darkMode ? styles.darkBody : ''}`}>
107-
<h1 className={styles.h1}>Activity List</h1>
118+
<div className={`${styles.activityListContainer} ${darkMode ? 'bg-oxford-blue' : ''}`}>
119+
<h1 className={`${styles.heading} ${darkMode ? 'text-light' : ''}`}>Activity List</h1>
108120

109-
<div className={`${styles.filters} ${darkMode ? styles.darkFilters : ''}`}>
110-
<label>
121+
<div className={`${styles.filters} ${darkMode ? styles.darkModeFilters : ''}`}>
122+
<label className={darkMode ? 'text-light' : ''}>
111123
Type:
112-
<select name="type" value={filter.type} onChange={handleFilterChange}>
113-
<option value="">All</option>
114-
<option value="Fitness">Fitness</option>
115-
<option value="Social">Social</option>
116-
<option value="Educational">Educational</option>
117-
<option value="Art">Art</option>
118-
</select>
124+
<input
125+
type="text"
126+
name="type"
127+
value={filter.type}
128+
onChange={handleFilterChange}
129+
placeholder="Enter type"
130+
className={darkMode ? styles.darkModeInput : ''}
131+
/>
119132
</label>
120133

121-
<label>
134+
<label className={darkMode ? 'text-light' : ''}>
122135
Date:
123-
<input type="date" name="date" value={filter.date} onChange={handleFilterChange} />
136+
<input
137+
type="date"
138+
name="date"
139+
value={filter.date}
140+
onChange={handleFilterChange}
141+
className={darkMode ? styles.darkModeInput : ''}
142+
/>
124143
</label>
125144

126-
<label>
145+
<label className={darkMode ? 'text-light' : ''}>
127146
Location:
128147
<div style={{ position: 'relative' }}>
129148
<input
@@ -144,6 +163,7 @@ function ActivityList() {
144163
}}
145164
placeholder="Enter location"
146165
autoComplete="off"
166+
className={darkMode ? styles.darkModeInput : ''}
147167
/>
148168
{showSuggestions && locationSuggestions.length > 0 && (
149169
<div
@@ -176,30 +196,31 @@ function ActivityList() {
176196
)}
177197
</div>
178198
</label>
179-
<button
180-
type="button"
181-
onClick={handleClearFilters}
182-
disabled={!filter.type && !filter.date && !filter.location}
183-
className={styles.clearButton}
184-
>
185-
Clear All
186-
</button>
199+
<div className={styles.clearButtonWrapper}>
200+
<button
201+
type="button"
202+
onClick={handleClearFilters}
203+
disabled={!filter.type && !filter.date && !filter.location}
204+
className={styles.clearButton}
205+
>
206+
Clear All
207+
</button>
208+
</div>
187209
</div>
188-
189-
<div className={`${styles.activityList} ${darkMode ? styles.darkActivityList : ''}`}>
210+
<div className={`${styles.activityList} ${darkMode ? styles.darkModeList : ''}`}>
190211
{loading ? (
191-
<p>Loading activities...</p>
212+
<p className={darkMode ? 'text-light' : ''}>Loading activities...</p>
192213
) : filteredActivities.length > 0 ? (
193214
<ul>
194215
{filteredActivities.map(activity => (
195-
<li key={activity.id}>
216+
<li key={activity.id} className={darkMode ? styles.darkModeItem : ''}>
196217
<strong>{activity.name}</strong> - {activity.type} - {activity.date} -{' '}
197218
{activity.location}
198219
</li>
199220
))}
200221
</ul>
201222
) : (
202-
<p>No activities found</p>
223+
<p className={darkMode ? 'text-light' : ''}>No activities found</p>
203224
)}
204225
</div>
205226
</div>

‎src/components/CommunityPortal/Activities/ActivityList.module.css‎

Lines changed: 96 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,42 @@
11
/* Enhanced Aesthetic CSS for Activity List */
22

3-
.body {
4-
font-family: 'Poppins', sans-serif;
5-
margin: 0;
6-
padding: 0;
7-
background-color: #fff;
8-
color: #333;
3+
/* Activity List Container */
4+
.activityListContainer {
5+
padding: 20px;
6+
min-height: calc(100vh - 140px);
97
}
108

11-
.darkBody {
12-
background: #1b2a41;
9+
/* Dark mode follows Dashboard pattern using bg-oxford-blue */
10+
.activityListContainer:global(.bg-oxford-blue) {
11+
color: #ffffff;
12+
padding-bottom: 40px;
1313
}
1414

15-
.h1 {
15+
.heading {
1616
text-align: center;
1717
margin: 20px 0;
1818
color: #1e3a8a;
1919
font-size: 2.5em;
2020
font-weight: 600;
2121
}
2222

23+
/* Dark mode heading - uses global text-light class */
24+
.activityListContainer:global(.bg-oxford-blue) .heading {
25+
color: #ffffff !important;
26+
}
27+
28+
/* Body background helper when Activity List is in dark mode */
29+
:global(.activity-list-dark-body),
30+
:global(.activity-list-dark-body #root),
31+
:global(.activity-list-dark-body .App) {
32+
background-color: #1b2a41 !important;
33+
color: #ffffff !important;
34+
}
35+
2336
.filters {
2437
display: flex;
2538
justify-content: center;
39+
align-items: flex-end;
2640
gap: 30px;
2741
margin: 30px 0;
2842
padding: 10px;
@@ -31,8 +45,12 @@
3145
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
3246
}
3347

34-
.darkFilters {
35-
background: #0f172a;
48+
/* Dark mode filters - navy-blue theme matching Dashboard */
49+
.darkModeFilters {
50+
background: #1e2a3a;
51+
box-shadow: none;
52+
border: 1px solid #3a4a5c;
53+
border-radius: 0;
3654
}
3755

3856
.filters label {
@@ -49,52 +67,63 @@
4967
margin-top: 5px;
5068
font-size: 1rem;
5169
transition: all 0.3s ease;
70+
background-color: #ffffff;
71+
color: #333;
5272
}
5373

54-
.filters input:focus {
55-
outline: none;
56-
border-color: #3b82f6;
57-
box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
74+
/* Dark mode inputs - navy-blue theme (#1e2a3a bg, #3a4a5c borders) */
75+
.darkModeInput {
76+
background-color: #1e2a3a !important;
77+
color: #ffffff !important;
78+
border: 1px solid #3a4a5c !important;
79+
color-scheme: dark;
5880
}
5981

60-
.filters select {
61-
padding: 10px;
62-
height: 48px;
63-
border: 1px solid #d1d5db;
64-
border-radius: 6px;
65-
margin-top: 5px;
66-
font-size: 1rem;
82+
/* Dark mode date input - style the calendar icon */
83+
.darkModeInput[type="date"]::-webkit-calendar-picker-indicator {
84+
filter: invert(1);
85+
cursor: pointer;
6786
}
6887

69-
.filters select:focus {
88+
.filters input:focus {
7089
outline: none;
7190
border-color: #3b82f6;
7291
box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
7392
}
7493

75-
.filters button {
76-
margin: 30px 0;
77-
border: 1px solid #000000;
78-
border-radius: 6px;
79-
padding: 10px;
94+
/* Dark mode input focus */
95+
.darkModeInput:focus {
96+
border-color: #5c9ce6 !important;
97+
box-shadow: 0 0 8px rgba(92, 156, 230, 0.5) !important;
8098
}
8199

82-
.filters button:hover:not(:disabled) {
83-
transform: scale(1.05);
100+
/* Dark mode input placeholder */
101+
.darkModeInput::placeholder {
102+
color: #a0a0a0;
84103
}
85104

86-
.darkFilters button {
87-
border: 1px solid #ffffff;
105+
/* Clear All button */
106+
.clearButton {
107+
padding: 10px 20px;
108+
background-color: #ef4444;
109+
color: #ffffff;
110+
border: none;
111+
border-radius: 6px;
112+
font-size: 1rem;
113+
cursor: pointer;
114+
transition: all 0.3s ease;
88115
}
89116

90-
.darkFilters input {
91-
background: #0f172a;
92-
border: 1px solid #ffffff;
117+
.clearButton:hover:not(:disabled) {
118+
background-color: #dc2626;
119+
transform: translateY(-2px);
120+
box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
93121
}
94122

95-
.darkFilters select{
96-
background: #0f172a;
97-
border: 1px solid #ffffff;
123+
.clearButton:disabled {
124+
background-color: #9ca3af;
125+
cursor: not-allowed;
126+
opacity: 0.6;
98127
}
99128

100129
.activityList {
@@ -106,8 +135,13 @@
106135
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
107136
}
108137

109-
.darkActivityList {
110-
background: #2b3e59;
138+
/* Dark mode activity list - remove border-radius, margin, box-shadow artifacts */
139+
.darkModeList {
140+
background: #1e2a3a;
141+
box-shadow: none;
142+
border: 1px solid #3a4a5c;
143+
border-radius: 0;
144+
margin: 0 auto;
111145
}
112146

113147
.activityList ul {
@@ -127,24 +161,44 @@
127161
transition: transform 0.2s ease, box-shadow 0.2s ease;
128162
}
129163

130-
.darkActivityList li {
131-
background: #1b2a41;
164+
/* Dark mode list items - navy-blue theme */
165+
.darkModeItem {
166+
background-color: #1e2a3a !important;
167+
border: 1px solid #3a4a5c !important;
168+
color: #ffffff !important;
169+
border-radius: 0;
132170
}
133171

134172
.activityList li:hover {
135173
transform: translateY(-3px);
136174
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
137175
}
138176

177+
/* Dark mode list item hover - button color theme (#3d4f62) */
178+
.darkModeItem:hover {
179+
background-color: #3d4f62 !important;
180+
box-shadow: none !important;
181+
}
182+
139183
.activityList li strong {
140184
color: #1e3a8a;
141185
font-size: 1.2rem;
142186
}
143187

188+
/* Dark mode strong text */
189+
.darkModeItem strong {
190+
color: #5c9ce6 !important;
191+
}
192+
144193
.activityList li span {
145194
color: #4b5563;
146195
}
147196

197+
/* Dark mode span text */
198+
.darkModeItem span {
199+
color: #d1d5db !important;
200+
}
201+
148202
.activityList p {
149203
text-align: center;
150204
color: #6b7280;

0 commit comments

Comments
 (0)