Skip to content

Commit e3d577a

Browse files
nishitag5nishitag5
committed
fixing dark mode
1 parent 9328e67 commit e3d577a

6 files changed

Lines changed: 225 additions & 24 deletions

File tree

‎src/components/CommunityPortal/Reports/Participation/DropOffTracking.jsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useState } from 'react';
2+
import { useSelector } from 'react-redux';
23
import './Participation.css';
34
import mockEvents from './mockData';
45

@@ -57,9 +58,11 @@ function DropOffTracking() {
5758
return true;
5859
});
5960

61+
const darkMode = useSelector(state => state.theme.darkMode);
62+
6063
return (
61-
<div className="tracking-container">
62-
<div className="tracking-header">
64+
<div className={`tracking-container ${darkMode ? 'tracking-container-dark' : ''}`}>
65+
<div className={`tracking-header ${darkMode ? 'tracking-header-dark' : ''}`}>
6366
<h3>Drop-off and no-show rate tracking</h3>
6467
<div className="tracking-filters">
6568
<select value={selectedEvent} onChange={e => setSelectedEvent(e.target.value)}>
@@ -78,21 +81,22 @@ function DropOffTracking() {
7881
</div>
7982
</div>
8083
<div className="tracking-summary">
81-
<div className="tracking-rate">
84+
<div className={`tracking-rate ${darkMode ? 'tracking-rate-dark' : ''}`}>
8285
<p className="tracking-rate-value">
83-
+5% <span>Last week</span>
86+
+5%
87+
<span className={darkMode ? 'span-dark' : ''}>Last week</span>
8488
</p>
8589
<p>Drop-off rate</p>
8690
</div>
87-
<div className="tracking-rate">
91+
<div className={`tracking-rate ${darkMode ? 'tracking-rate-dark' : ''}`}>
8892
<p className="tracking-rate-value">
89-
+5% <span>Last week</span>
93+
+5% <span className={darkMode ? 'span-dark' : ''}>Last week</span>
9094
</p>
9195
<p>No-show rate</p>
9296
</div>
9397
</div>
94-
<div className="tracking-list-container">
95-
<table className="tracking-table">
98+
<div className={`tracking-list-container ${darkMode ? 'tracking-list-container-dark' : ''}`}>
99+
<table className={`tracking-table ${darkMode ? 'tracking-table-dark' : ''}`}>
96100
<thead>
97101
<tr>
98102
<th>Event name</th>

‎src/components/CommunityPortal/Reports/Participation/EventParticipation.jsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
1+
import { useSelector } from 'react-redux';
12
import MyCases from './MyCases';
23
import DropOffTracking from './DropOffTracking';
34
import NoShowInsights from './NoShowInsights';
45
import './Participation.css';
56

67
function LandingPage() {
8+
const darkMode = useSelector(state => state.theme.darkMode);
79
return (
8-
<div className="participation-landing-page">
10+
<div
11+
className={`participation-landing-page ${darkMode ? 'participation-landing-page-dark' : ''}`}
12+
>
913
<header>
10-
<h1>HGN Management System</h1>
14+
<h1 className={`landing-page-header ${darkMode ? 'landing-page-header-dark' : ''}`}>
15+
HGN Management System
16+
</h1>
1117
</header>
1218
<MyCases />
1319
<div className="analytics-section">

‎src/components/CommunityPortal/Reports/Participation/MyCases.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,41 @@ body {
1414
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
1515
}
1616

17+
.my-cases-page-dark{
18+
padding: 20px;
19+
background-color: #1C2541;
20+
border: 1px solid #ddd;
21+
border-radius: 8px;
22+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
23+
}
24+
1725
.my-cases-page .header {
1826
display: flex;
1927
justify-content: space-between;
2028
align-items: center;
2129
}
2230

31+
.my-cases-page-dark .header {
32+
display: flex;
33+
justify-content: space-between;
34+
align-items: center;
35+
color: #ffffff;
36+
}
37+
2338
.section-title {
2439
font-size: 24px;
2540
font-weight: bold;
2641
color: #333;
2742
margin: 0;
2843
}
2944

45+
.section-title-dark {
46+
font-size: 24px;
47+
font-weight: bold;
48+
color: #ffffff !important;
49+
margin: 0;
50+
}
51+
3052
.header-actions {
3153
display: flex;
3254
align-items: center;
@@ -84,6 +106,7 @@ body {
84106
margin-top: 10px;
85107
}
86108

109+
87110
/* Card View Styles */
88111
.case-cards {
89112
display: grid;
@@ -102,6 +125,18 @@ body {
102125
justify-content: space-between;
103126
}
104127

128+
.case-card-dark {
129+
background-color: #3A506B;
130+
color: #ffffff;
131+
border: 1px solid #ddd;
132+
border-radius: 8px;
133+
padding: 15px;
134+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
135+
display: flex;
136+
flex-direction: column;
137+
justify-content: space-between;
138+
}
139+
105140
.event-badge {
106141
display: inline-block;
107142
font-size: 12px;
@@ -139,19 +174,39 @@ body {
139174
margin-bottom: 10px;
140175
}
141176

177+
.event-time-dark {
178+
font-size: 14px;
179+
color: #ffffff;
180+
margin-bottom: 10px;
181+
}
182+
142183
.event-name {
143184
font-size: 16px;
144185
font-weight: bold;
145186
margin-bottom: 15px;
146187
color: #333;
147188
}
148189

190+
.event-name-dark {
191+
font-size: 16px;
192+
font-weight: bold;
193+
margin-bottom: 15px;
194+
color: #ffffff;
195+
}
196+
149197
.attendees-info {
150198
display: flex;
151199
align-items: center;
152200
justify-content: space-between;
153201
}
154202

203+
.attendees-info-dark {
204+
display: flex;
205+
align-items: center;
206+
justify-content: space-between;
207+
color: #ffffff;
208+
}
209+
155210
.avatars img {
156211
width: 24px;
157212
height: 24px;
@@ -165,6 +220,11 @@ body {
165220
color: #555;
166221
}
167222

223+
.attendees-count-dark {
224+
font-size: 14px;
225+
color: #ffffff;
226+
}
227+
168228
.rates {
169229
margin-top: 10px;
170230
font-size: 14px;
@@ -187,12 +247,27 @@ body {
187247
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
188248
}
189249

250+
.case-list-item-dark {
251+
display: grid;
252+
grid-template-columns: 2fr 3fr 1fr 1fr;
253+
align-items: center;
254+
padding: 15px;
255+
background-color: #3A506B;
256+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
257+
}
258+
190259
.case-list-item span {
191260
margin-right: 15px;
192261
font-size: 14px;
193262
color: #333;
194263
}
195264

265+
.case-list-item-dark span {
266+
margin-right: 15px;
267+
font-size: 14px;
268+
color: #ffffff;
269+
}
270+
196271
.event-type {
197272
font-weight: bold;
198273
font-size: 14px;
@@ -208,4 +283,15 @@ body {
208283
font-size: 16px;
209284
color: #555;
210285
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
286+
}
287+
288+
.calendar-view-dark {
289+
padding: 20px;
290+
background-color: #3A506B;
291+
border: 1px solid #ddd;
292+
border-radius: 8px;
293+
text-align: center;
294+
font-size: 16px;
295+
color: #ffffff;
296+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
211297
}

‎src/components/CommunityPortal/Reports/Participation/MyCases.jsx‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useState } from 'react';
2+
import { useSelector } from 'react-redux';
23
import './MyCases.css';
34
import mockEvents from './mockData';
45

@@ -38,20 +39,28 @@ function MyCases() {
3839
return events;
3940
};
4041

42+
const darkMode = useSelector(state => state.theme.darkMode);
43+
4144
const filteredEvents = filterEvents(mockEvents);
4245

4346
const renderCardView = () => (
4447
<div className="case-cards">
4548
{filteredEvents.map(event => (
46-
<div className="case-card" key={event.id}>
49+
<div className={`case-card ${darkMode ? 'case-card-dark' : ''}`} key={event.id}>
4750
<span className="event-badge">{event.eventType}</span>
48-
<span className="event-time">{event.eventTime}</span>
49-
<span className="event-name">{event.eventName}</span>
50-
<div className="attendees-info">
51+
<span className={`event-time ${darkMode ? 'event-time-dark' : ''}`}>
52+
{event.eventTime}
53+
</span>
54+
<span className={`event-name ${darkMode ? 'event-name-dark' : ''}`}>
55+
{event.eventName}
56+
</span>
57+
<div className={`attendees-info ${darkMode ? 'attendees-info-dark' : ''}`}>
5158
<div className="avatars">
5259
<img alt="profile img" />
5360
</div>
54-
<span className="attendees-count">{`+${event.attendees}`}</span>
61+
<span
62+
className={`attendees-count ${darkMode ? 'attendees-count-dark' : ''}`}
63+
>{`+${event.attendees}`}</span>
5564
</div>
5665
</div>
5766
))}
@@ -61,7 +70,7 @@ function MyCases() {
6170
const renderListView = () => (
6271
<ul className="case-list">
6372
{filteredEvents.map(event => (
64-
<li className="case-list-item" key={event.id}>
73+
<li className={`case-list-item ${darkMode ? 'case-list-item-dark' : ''}`} key={event.id}>
6574
<span className="event-type">{event.eventType}</span>
6675
<span className="event-time">{event.eventTime}</span>
6776
<span className="event-name">{event.eventName}</span>
@@ -72,15 +81,15 @@ function MyCases() {
7281
);
7382

7483
const renderCalendarView = () => (
75-
<div className="calendar-view">
84+
<div className={`calendar-view ${darkMode ? 'calendar-view-dark' : ''}`}>
7685
<p>Calendar View is under construction...</p>
7786
</div>
7887
);
7988

8089
return (
81-
<div className="my-cases-page">
90+
<div className={`my-cases-page ${darkMode ? 'my-cases-page-dark' : ''}`}>
8291
<header className="header">
83-
<h2 className="section-title">My Cases</h2>
92+
<h2 className={`section-title ${darkMode ? 'section-title-dark' : ''}`}>My Cases</h2>
8493
<div className="header-actions">
8594
<div className="view-switcher">
8695
<button

‎src/components/CommunityPortal/Reports/Participation/NoShowInsights.jsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useState } from 'react';
2+
import { useSelector } from 'react-redux';
23
import mockEvents from './mockData'; // Import mock data
34
import './Participation.css';
45

@@ -70,25 +71,30 @@ function NoShowInsights() {
7071
}));
7172
};
7273

74+
const darkMode = useSelector(state => state.theme.darkMode);
7375
// Function to render stats dynamically for the active tab
7476
const renderStats = () => {
7577
const filteredEvents = filterByDate(mockEvents);
7678
const stats = calculateStats(filteredEvents);
7779

7880
return stats.map(item => (
7981
<div key={item.label} className="insight-item">
80-
<div className="insight-label">{item.label}</div>
82+
<div className={`insights-label ${darkMode ? 'insights-label-dark' : ''}`}>
83+
{item.label}
84+
</div>
8185
<div className="insight-bar">
8286
<div className="insight-fill" style={{ width: `${item.percentage}%` }} />
8387
</div>
84-
<div className="insight-percentage">{item.percentage}%</div>
88+
<div className={`insights-percentage ${darkMode ? 'insights-percentage-dark' : ''}`}>
89+
{item.percentage}%
90+
</div>
8591
</div>
8692
));
8793
};
8894

8995
return (
90-
<div className="insights">
91-
<div className="insights-header">
96+
<div className={`insights ${darkMode ? 'insights-dark' : ''}`}>
97+
<div className={`insights-header ${darkMode ? 'insights-header-dark' : ''}`}>
9298
<h3>No-show rate insights</h3>
9399
<div className="insights-filters">
94100
<select value={dateFilter} onChange={e => setDateFilter(e.target.value)}>

0 commit comments

Comments
 (0)