Skip to content

Commit cbf4633

Browse files
nishitag5nishitag5
committed
adding new changes for dark mode
1 parent 787a196 commit cbf4633

2 files changed

Lines changed: 115 additions & 39 deletions

File tree

‎src/components/CommunityPortal/EventPersonalization/EventStats.css‎

Lines changed: 88 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,32 @@
11
.popular-events-container {
2-
max-width: 800px;
3-
width: 90%;
2+
3+
max-height: 100%;
44
margin: 0 auto;
55
padding: 20px;
66
font-family: Arial, sans-serif;
77
background: white;
88
}
99

10+
.popular-events-container-dark {
11+
12+
margin: 0 auto;
13+
padding: 20px;
14+
font-family: Arial, sans-serif;
15+
background: #1B2A41;
16+
min-height: 100%;
17+
}
18+
1019
.header-container {
1120
display: flex;
1221
justify-content: space-between;
1322
align-items: center;
14-
margin-bottom: 15px;
23+
}
24+
25+
.header-container-dark {
26+
display: flex;
27+
justify-content: space-between;
28+
align-items: center;
29+
color: #1C2541;
1530
}
1631

1732
.popular-events-header {
@@ -20,11 +35,24 @@
2035
margin: 0;
2136
}
2237

38+
.popular-events-header-dark {
39+
font-size: 1.5rem;
40+
color: #ffffff;
41+
margin: 0;
42+
background-color: #1C2541;
43+
}
44+
2345
.filters {
2446
display: flex;
2547
gap: 10px;
2648
}
2749

50+
.filters-dark {
51+
display: flex;
52+
gap: 10px;
53+
background-color: #1C2541;
54+
}
55+
2856
.filters select {
2957
padding: 6px;
3058
font-size: 14px;
@@ -42,19 +70,38 @@
4270
padding: 30px;
4371
}
4472

73+
.stats-dark {
74+
display: flex;
75+
flex-direction: column;
76+
gap: 20px;
77+
border-radius: 8px;
78+
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
79+
padding: 30px;
80+
background-color: #1C2541;
81+
}
82+
4583
.stat-item {
4684
display: flex;
4785
align-items: center;
4886
justify-content: space-between;
4987
}
5088

89+
90+
5191
.stat-label {
5292
flex: 1;
5393
font-size: 14px;
5494
font-weight: bold;
5595
color: #333;
5696
}
5797

98+
.stat-label-dark {
99+
flex: 1;
100+
font-size: 14px;
101+
font-weight: bold;
102+
color: #ffffff;
103+
}
104+
58105
.stat-bar {
59106
flex: 3;
60107
background: #f0f0f0;
@@ -91,6 +138,14 @@
91138
color: #333;
92139
}
93140

141+
.stat-value-dark {
142+
flex: 1;
143+
text-align: right;
144+
font-size: 14px;
145+
font-weight: bold;
146+
color: #ffffff;
147+
}
148+
94149
.summary {
95150
display: grid;
96151
grid-template-columns: repeat(4, 1fr);
@@ -117,6 +172,21 @@
117172
text-align: center;
118173
}
119174

175+
.summary-item-dark {
176+
background: #3A506B;
177+
padding: 12px;
178+
border-radius: 8px;
179+
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
180+
display: flex;
181+
flex-direction: column;
182+
justify-content: center;
183+
align-items: center;
184+
max-height: 90px;
185+
min-height: 80px;
186+
overflow: hidden;
187+
text-align: center;
188+
}
189+
120190
.summary-title {
121191
font-size: 14px;
122192
font-weight: bold;
@@ -127,21 +197,26 @@
127197
color: #777;
128198
}
129199

200+
.summary-title-dark {
201+
font-size: 14px;
202+
font-weight: bold;
203+
text-align: center;
204+
white-space: normal;
205+
word-wrap: break-word;
206+
max-width: 90%;
207+
color: #ffffff;
208+
}
209+
130210
.summary-value {
131211
font-size: 14px;
132212
font-weight: bold;
133213
color: #000;
134214
margin-top: 4px;
135215
}
136216

137-
@media (max-width: 700px) {
138-
.summary {
139-
grid-template-columns: repeat(2, 1fr);
140-
}
141-
}
142-
143-
@media (max-width: 400px) {
144-
.summary {
145-
grid-template-columns: 1fr;
146-
}
217+
.summary-value-dark {
218+
font-size: 14px;
219+
font-weight: bold;
220+
color: #ffffff;
221+
margin-top: 4px;
147222
}

‎src/components/CommunityPortal/EventPersonalization/EventStats.jsx‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useState } from 'react';
22
import './EventStats.css';
3+
import { useSelector } from 'react-redux';
34

45
const dummyData = [
56
{
@@ -53,6 +54,7 @@ const dummyData = [
5354
},
5455
];
5556

57+
5658
export default function PopularEvents() {
5759
const [timeFilter, setTimeFilter] = useState('All day');
5860
const [typeFilter, setTypeFilter] = useState('All');
@@ -74,7 +76,7 @@ export default function PopularEvents() {
7476
const mostPopularEvent = filteredData.reduce(
7577
(max, event) =>
7678
calculatePercentage(event.attended, event.enrolled) >
77-
calculatePercentage(max.attended, max.enrolled)
79+
calculatePercentage(max.attended, max.enrolled)
7880
? event
7981
: max,
8082
filteredData[0] || {},
@@ -83,17 +85,17 @@ export default function PopularEvents() {
8385
const leastPopularEvent = filteredData.reduce(
8486
(min, event) =>
8587
calculatePercentage(event.attended, event.enrolled) <
86-
calculatePercentage(min.attended, min.enrolled)
88+
calculatePercentage(min.attended, min.enrolled)
8789
? event
8890
: min,
8991
filteredData[0] || {},
9092
);
91-
93+
const darkMode = useSelector(state => state.theme.darkMode);
9294
return (
93-
<div className="popular-events-container">
94-
<div className="header-container">
95-
<h2 className="popular-events-header">Most Popular Event</h2>
96-
<div className="filters">
95+
<div className={`popular-events-container ${darkMode ? "popular-events-container-dark" : ""}`}>
96+
<div className={`header-container ${darkMode ? "header-container-dark" : ""}`}>
97+
<h2 className={`popular-events-header ${darkMode ? "popular-events-header-dark" : ""}`} >Most Popular Event</h2>
98+
<div className={`filters ${darkMode ? "filters-dark" : ""}`}>
9799
<select value={timeFilter} onChange={e => setTimeFilter(e.target.value)}>
98100
<option value="All day">All day</option>
99101
<option value="Morning">Morning</option>
@@ -108,10 +110,10 @@ export default function PopularEvents() {
108110
</div>
109111
</div>
110112

111-
<div className="stats">
113+
<div className={`stats ${darkMode ? "stats-dark" : ""}`}>
112114
{filteredData.map(event => (
113115
<div key={event.id} className="stat-item">
114-
<div className="stat-label">{event.type}</div>
116+
<div className={`stat-label ${darkMode ? "stat-label-dark" : ""}`}>{event.type}</div>
115117
<div className="stat-bar">
116118
<div
117119
className={`bar ${getBarColor(
@@ -120,38 +122,37 @@ export default function PopularEvents() {
120122
style={{ width: `${calculatePercentage(event.attended, event.enrolled)}%` }}
121123
/>
122124
</div>
123-
<div className="stat-value">
124-
{`${calculatePercentage(event.attended, event.enrolled)}% (${event.attended}/${
125-
event.enrolled
126-
})`}
125+
<div className={`stat-value ${darkMode ? "stat-value-dark" : ""}`}>
126+
{`${calculatePercentage(event.attended, event.enrolled)}% (${event.attended}/${event.enrolled
127+
})`}
127128
</div>
128129
</div>
129130
))}
130131
</div>
131132
<div className="summary">
132-
<div className="summary-item">
133-
<div className="summary-title">Total Number of Events</div>
134-
<div className="summary-value">{filteredData.length}</div>
133+
<div className={`summary-item ${darkMode ? "summary-item-dark" : ""}`}>
134+
<div className={`summary-title ${darkMode ? "summary-title-dark" : ""}`}>Total Number of Events</div>
135+
<div className={`summary-value ${darkMode ? "summary-value-dark" : ""}`}>{filteredData.length}</div>
135136
</div>
136-
<div className="summary-item">
137-
<div className="summary-title">Total Number of Event Enrollments</div>
138-
<div className="summary-value">
137+
<div className={`summary-item ${darkMode ? "summary-item-dark" : ""}`}>
138+
<div className={`summary-title ${darkMode ? "summary-title-dark" : ""}`}>Total Number of Event Enrollments</div>
139+
<div className={`summary-value ${darkMode ? "summary-value-dark" : ""}`}>
139140
{filteredData.reduce((acc, event) => acc + event.enrolled, 0)}
140141
</div>
141142
</div>
142143
{filteredData.length > 0 && (
143144
<>
144-
<div className="summary-item">
145-
<div className="summary-title">Most Popular Event</div>
146-
<div className="summary-value">{mostPopularEvent.type || 'N/A'}</div>
145+
<div className={`summary-item ${darkMode ? "summary-item-dark" : ""}`}>
146+
<div className={`summary-title ${darkMode ? "summary-title-dark" : ""}`}>Most Popular Event</div>
147+
<div className={`summary-value ${darkMode ? "summary-value-dark" : ""}`}>{mostPopularEvent.type || 'N/A'}</div>
147148
</div>
148-
<div className="summary-item">
149-
<div className="summary-title">Least Popular Event</div>
150-
<div className="summary-value">{leastPopularEvent.type || 'N/A'}</div>
149+
<div className={`summary-item ${darkMode ? "summary-item-dark" : ""}`}>
150+
<div className={`summary-title ${darkMode ? "summary-title-dark" : ""}`}>Least Popular Event</div>
151+
<div className={`summary-value ${darkMode ? "summary-value-dark" : ""}`}>{leastPopularEvent.type || 'N/A'}</div>
151152
</div>
152153
</>
153154
)}
154155
</div>
155-
</div>
156+
</div >
156157
);
157158
}

0 commit comments

Comments
 (0)