Skip to content

Commit e1ea55a

Browse files
shashankm9shashankm9
committed
Fix dark mode styling for WinningVsAverageBidChart
1 parent 6bab59f commit e1ea55a

2 files changed

Lines changed: 99 additions & 18 deletions

File tree

‎src/components/LBDashboard/LbAnalytics/WinningVsAverageBidChart/WinningVsAverageBidChart.jsx‎

Lines changed: 95 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,9 @@ const WinningVsAverageBidChart = ({ darkMode = false }) => {
232232
const winningBids = data.map(item => item.winningBid);
233233
const averageBids = data.map(item => item.averageBid);
234234

235+
const labelColor = '#ffffff';
236+
const winningBidBarColor = darkMode ? '#888888' : '#555555';
237+
235238
setChartData({
236239
labels,
237240
datasets: [
@@ -242,7 +245,7 @@ const WinningVsAverageBidChart = ({ darkMode = false }) => {
242245
borderColor: '#9370db',
243246
borderWidth: 0,
244247
datalabels: {
245-
color: '#6b4fa0',
248+
color: labelColor,
246249
font: { weight: 'bold', size: 12 },
247250
anchor: 'center',
248251
align: 'center',
@@ -251,11 +254,11 @@ const WinningVsAverageBidChart = ({ darkMode = false }) => {
251254
{
252255
label: 'Winning Bid',
253256
data: winningBids,
254-
backgroundColor: '#555555',
255-
borderColor: '#555555',
257+
backgroundColor: winningBidBarColor,
258+
borderColor: winningBidBarColor,
256259
borderWidth: 0,
257260
datalabels: {
258-
color: '#ffffff',
261+
color: labelColor,
259262
font: { weight: 'bold', size: 12 },
260263
anchor: 'center',
261264
align: 'center',
@@ -266,6 +269,9 @@ const WinningVsAverageBidChart = ({ darkMode = false }) => {
266269
};
267270

268271
// Chart options
272+
const textColor = darkMode ? '#ffffff' : '#000000';
273+
const gridColor = darkMode ? 'rgba(255, 255, 255, 0.15)' : 'rgba(200, 200, 200, 0.3)';
274+
269275
const chartOptions = {
270276
responsive: true,
271277
maintainAspectRatio: false,
@@ -279,7 +285,7 @@ const WinningVsAverageBidChart = ({ darkMode = false }) => {
279285
legend: {
280286
position: 'top',
281287
labels: {
282-
color: '#000000',
288+
color: textColor,
283289
font: {
284290
size: 13,
285291
weight: '500',
@@ -291,7 +297,7 @@ const WinningVsAverageBidChart = ({ darkMode = false }) => {
291297
title: {
292298
display: true,
293299
text: 'Winning Bid vs Average Bid',
294-
color: '#000000',
300+
color: textColor,
295301
font: {
296302
size: 20,
297303
weight: 'bold',
@@ -319,22 +325,22 @@ const WinningVsAverageBidChart = ({ darkMode = false }) => {
319325
title: {
320326
display: true,
321327
text: 'Listing number/identifier',
322-
color: '#000000',
328+
color: textColor,
323329
font: {
324330
size: 12,
325331
weight: 'bold',
326332
},
327333
padding: 10,
328334
},
329335
ticks: {
330-
color: '#000000',
336+
color: textColor,
331337
font: {
332338
size: 11,
333339
},
334340
},
335341
grid: {
336342
display: true,
337-
color: 'rgba(200, 200, 200, 0.3)',
343+
color: gridColor,
338344
drawBorder: true,
339345
},
340346
},
@@ -344,15 +350,15 @@ const WinningVsAverageBidChart = ({ darkMode = false }) => {
344350
title: {
345351
display: true,
346352
text: 'Bid Amount in USD',
347-
color: '#000000',
353+
color: textColor,
348354
font: {
349355
size: 12,
350356
weight: 'bold',
351357
},
352358
padding: 10,
353359
},
354360
ticks: {
355-
color: '#000000',
361+
color: textColor,
356362
font: {
357363
size: 11,
358364
},
@@ -362,7 +368,7 @@ const WinningVsAverageBidChart = ({ darkMode = false }) => {
362368
},
363369
grid: {
364370
display: true,
365-
color: 'rgba(200, 200, 200, 0.3)',
371+
color: gridColor,
366372
drawBorder: true,
367373
},
368374
},
@@ -374,7 +380,7 @@ const WinningVsAverageBidChart = ({ darkMode = false }) => {
374380
if (villages.length > 0 && listings.length > 0) {
375381
fetchChartData();
376382
}
377-
}, [category, limit, selectedVillages, selectedListings, villages, listings]);
383+
}, [category, limit, selectedVillages, selectedListings, villages, listings, darkMode]);
378384

379385
const handleApplyFilters = () => {
380386
fetchChartData();
@@ -451,6 +457,44 @@ const WinningVsAverageBidChart = ({ darkMode = false }) => {
451457
textField: {
452458
size: 'small',
453459
fullWidth: true,
460+
sx: darkMode
461+
? {
462+
'& .MuiOutlinedInput-root': {
463+
backgroundColor: '#2c2c2c',
464+
color: '#ffffff',
465+
'& fieldset': { borderColor: '#555555' },
466+
'&:hover fieldset': { borderColor: '#777777' },
467+
'&.Mui-focused fieldset': { borderColor: '#9370db' },
468+
},
469+
'& .MuiInputAdornment-root .MuiButtonBase-root': {
470+
color: '#ffffff',
471+
},
472+
}
473+
: {},
474+
},
475+
popper: {
476+
sx: darkMode
477+
? {
478+
'& .MuiPaper-root': {
479+
backgroundColor: '#2c2c2c',
480+
color: '#ffffff',
481+
},
482+
'& .MuiPickersDay-root': {
483+
color: '#ffffff',
484+
'&:hover': { backgroundColor: '#444444' },
485+
'&.Mui-selected': { backgroundColor: '#9370db' },
486+
},
487+
'& .MuiPickersCalendarHeader-label': {
488+
color: '#ffffff',
489+
},
490+
'& .MuiIconButton-root': {
491+
color: '#ffffff',
492+
},
493+
'& .MuiDayCalendar-weekDayLabel': {
494+
color: '#aaaaaa',
495+
},
496+
}
497+
: {},
454498
},
455499
}}
456500
/>
@@ -474,6 +518,44 @@ const WinningVsAverageBidChart = ({ darkMode = false }) => {
474518
textField: {
475519
size: 'small',
476520
fullWidth: true,
521+
sx: darkMode
522+
? {
523+
'& .MuiOutlinedInput-root': {
524+
backgroundColor: '#2c2c2c',
525+
color: '#ffffff',
526+
'& fieldset': { borderColor: '#555555' },
527+
'&:hover fieldset': { borderColor: '#777777' },
528+
'&.Mui-focused fieldset': { borderColor: '#9370db' },
529+
},
530+
'& .MuiInputAdornment-root .MuiButtonBase-root': {
531+
color: '#ffffff',
532+
},
533+
}
534+
: {},
535+
},
536+
popper: {
537+
sx: darkMode
538+
? {
539+
'& .MuiPaper-root': {
540+
backgroundColor: '#2c2c2c',
541+
color: '#ffffff',
542+
},
543+
'& .MuiPickersDay-root': {
544+
color: '#ffffff',
545+
'&:hover': { backgroundColor: '#444444' },
546+
'&.Mui-selected': { backgroundColor: '#9370db' },
547+
},
548+
'& .MuiPickersCalendarHeader-label': {
549+
color: '#ffffff',
550+
},
551+
'& .MuiIconButton-root': {
552+
color: '#ffffff',
553+
},
554+
'& .MuiDayCalendar-weekDayLabel': {
555+
color: '#aaaaaa',
556+
},
557+
}
558+
: {},
477559
},
478560
}}
479561
/>

‎src/components/LBDashboard/LbAnalytics/WinningVsAverageBidChart/WinningVsAverageBidChart.module.css‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
.container {
22
padding: 20px;
3-
min-height: 100vh;
43
}
54

65
.darkContainer {
7-
background-color: #1a1a1a;
6+
background-color: #1C2541;
87
}
98

109
.card {
@@ -14,8 +13,9 @@
1413
}
1514

1615
.darkCard {
17-
background-color: #2c2c2c;
18-
border-color: #444444;
16+
background-color: #243B5A !important;
17+
border-color: #3A506B !important;
18+
box-shadow: 0 4px 16px #1C1C1C;
1919
}
2020

2121
.filtersSection {
@@ -48,7 +48,6 @@
4848

4949
.chartSection {
5050
padding: 20px;
51-
min-height: 500px;
5251
}
5352

5453
.chartContainer {

0 commit comments

Comments
 (0)