Skip to content

Commit f5af14a

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

1 file changed

Lines changed: 41 additions & 25 deletions

File tree

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

Lines changed: 41 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@ const dummyData = [
5454
},
5555
];
5656

57-
5857
export default function PopularEvents() {
5958
const [timeFilter, setTimeFilter] = useState('All day');
6059
const [typeFilter, setTypeFilter] = useState('All');
@@ -76,7 +75,7 @@ export default function PopularEvents() {
7675
const mostPopularEvent = filteredData.reduce(
7776
(max, event) =>
7877
calculatePercentage(event.attended, event.enrolled) >
79-
calculatePercentage(max.attended, max.enrolled)
78+
calculatePercentage(max.attended, max.enrolled)
8079
? event
8180
: max,
8281
filteredData[0] || {},
@@ -85,17 +84,19 @@ export default function PopularEvents() {
8584
const leastPopularEvent = filteredData.reduce(
8685
(min, event) =>
8786
calculatePercentage(event.attended, event.enrolled) <
88-
calculatePercentage(min.attended, min.enrolled)
87+
calculatePercentage(min.attended, min.enrolled)
8988
? event
9089
: min,
9190
filteredData[0] || {},
9291
);
9392
const darkMode = useSelector(state => state.theme.darkMode);
9493
return (
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" : ""}`}>
94+
<div className={`popular-events-container ${darkMode ? 'popular-events-container-dark' : ''}`}>
95+
<div className={`header-container ${darkMode ? 'header-container-dark' : ''}`}>
96+
<h2 className={`popular-events-header ${darkMode ? 'popular-events-header-dark' : ''}`}>
97+
Most Popular Event
98+
</h2>
99+
<div className={`filters ${darkMode ? 'filters-dark' : ''}`}>
99100
<select value={timeFilter} onChange={e => setTimeFilter(e.target.value)}>
100101
<option value="All day">All day</option>
101102
<option value="Morning">Morning</option>
@@ -110,10 +111,10 @@ export default function PopularEvents() {
110111
</div>
111112
</div>
112113

113-
<div className={`stats ${darkMode ? "stats-dark" : ""}`}>
114+
<div className={`stats ${darkMode ? 'stats-dark' : ''}`}>
114115
{filteredData.map(event => (
115116
<div key={event.id} className="stat-item">
116-
<div className={`stat-label ${darkMode ? "stat-label-dark" : ""}`}>{event.type}</div>
117+
<div className={`stat-label ${darkMode ? 'stat-label-dark' : ''}`}>{event.type}</div>
117118
<div className="stat-bar">
118119
<div
119120
className={`bar ${getBarColor(
@@ -122,37 +123,52 @@ export default function PopularEvents() {
122123
style={{ width: `${calculatePercentage(event.attended, event.enrolled)}%` }}
123124
/>
124125
</div>
125-
<div className={`stat-value ${darkMode ? "stat-value-dark" : ""}`}>
126-
{`${calculatePercentage(event.attended, event.enrolled)}% (${event.attended}/${event.enrolled
127-
})`}
126+
<div className={`stat-value ${darkMode ? 'stat-value-dark' : ''}`}>
127+
{`${calculatePercentage(event.attended, event.enrolled)}% (${event.attended}/${
128+
event.enrolled
129+
})`}
128130
</div>
129131
</div>
130132
))}
131133
</div>
132134
<div className="summary">
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>
135+
<div className={`summary-item ${darkMode ? 'summary-item-dark' : ''}`}>
136+
<div className={`summary-title ${darkMode ? 'summary-title-dark' : ''}`}>
137+
Total Number of Events
138+
</div>
139+
<div className={`summary-value ${darkMode ? 'summary-value-dark' : ''}`}>
140+
{filteredData.length}
141+
</div>
136142
</div>
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" : ""}`}>
143+
<div className={`summary-item ${darkMode ? 'summary-item-dark' : ''}`}>
144+
<div className={`summary-title ${darkMode ? 'summary-title-dark' : ''}`}>
145+
Total Number of Event Enrollments
146+
</div>
147+
<div className={`summary-value ${darkMode ? 'summary-value-dark' : ''}`}>
140148
{filteredData.reduce((acc, event) => acc + event.enrolled, 0)}
141149
</div>
142150
</div>
143151
{filteredData.length > 0 && (
144152
<>
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>
153+
<div className={`summary-item ${darkMode ? 'summary-item-dark' : ''}`}>
154+
<div className={`summary-title ${darkMode ? 'summary-title-dark' : ''}`}>
155+
Most Popular Event
156+
</div>
157+
<div className={`summary-value ${darkMode ? 'summary-value-dark' : ''}`}>
158+
{mostPopularEvent.type || 'N/A'}
159+
</div>
148160
</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>
161+
<div className={`summary-item ${darkMode ? 'summary-item-dark' : ''}`}>
162+
<div className={`summary-title ${darkMode ? 'summary-title-dark' : ''}`}>
163+
Least Popular Event
164+
</div>
165+
<div className={`summary-value ${darkMode ? 'summary-value-dark' : ''}`}>
166+
{leastPopularEvent.type || 'N/A'}
167+
</div>
152168
</div>
153169
</>
154170
)}
155171
</div>
156-
</div >
172+
</div>
157173
);
158174
}

0 commit comments

Comments
 (0)