Skip to content

Commit 8d6a38d

Browse files
Neeraj-KondaveetiNeeraj-Kondaveeti
committed
fix: correct dark mode contrast
1 parent 065f7aa commit 8d6a38d

2 files changed

Lines changed: 83 additions & 123 deletions

File tree

‎src/components/CommunityPortal/ResourceUsage/ResourceUsage.jsx‎

Lines changed: 70 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { useState, useEffect, useRef} from 'react';
3+
import { useState, useEffect, useRef } from 'react';
44
import { Dropdown } from 'react-bootstrap';
55
import {
66
BarChart,
@@ -89,31 +89,31 @@ function filterDataByDate(data, timePeriod) {
8989
function CustomTooltip({ active, payload, darkMode }) {
9090
if (!active || !payload || !payload.length) return null;
9191

92-
const data = payload[0].payload;
92+
const data = payload[0].payload;
9393

94-
return (
95-
<div
96-
className={styles.chartTooltip}
97-
style={{
98-
backgroundColor: darkMode ? '#1e293b' : '#ffffff',
99-
color: darkMode ? '#f8fafc' : '#111827',
100-
}}
101-
>
102-
<div className={styles.tooltipTitle}>{data.name}</div>
94+
return (
95+
<div
96+
className={styles.chartTooltip}
97+
style={{
98+
backgroundColor: darkMode ? '#1e293b' : '#ffffff',
99+
color: darkMode ? '#f8fafc' : '#111827',
100+
}}
101+
>
102+
<div className={styles.tooltipTitle}>{data.name}</div>
103103

104-
<div className={styles.tooltipRow}>
105-
<span className={styles.tooltipDot} style={{ background: '#22c55e' }} />
106-
<span>Returned</span>
107-
<span className={styles.tooltipValue}>{data.returned}</span>
108-
</div>
104+
<div className={styles.tooltipRow}>
105+
<span className={styles.tooltipDot} style={{ background: '#22c55e' }} />
106+
<span>Returned</span>
107+
<span className={styles.tooltipValue}>{data.returned}</span>
108+
</div>
109109

110-
<div className={styles.tooltipRow}>
111-
<span className={styles.tooltipDot} style={{ background: '#fca5a5' }} />
112-
<span>Loaned</span>
113-
<span className={styles.tooltipValue}>{data.loaned}</span>
110+
<div className={styles.tooltipRow}>
111+
<span className={styles.tooltipDot} style={{ background: '#fca5a5' }} />
112+
<span>Loaned</span>
113+
<span className={styles.tooltipValue}>{data.loaned}</span>
114+
</div>
114115
</div>
115-
</div>
116-
);
116+
);
117117
}
118118

119119
export default function ResourceUsage() {
@@ -129,10 +129,10 @@ export default function ResourceUsage() {
129129
useEffect(() => {
130130
badgeRefs.current.forEach(badge => {
131131
if (badge) {
132-
badge.style.setProperty('color', '#000', 'important');
132+
badge.style.setProperty('color', darkMode ? '#000' : '#000');
133133
}
134134
});
135-
}, [insights]);
135+
}, [insights, darkMode]);
136136

137137
useEffect(() => {
138138
const resourceTypeKey = resourceType.toLowerCase();
@@ -245,65 +245,63 @@ export default function ResourceUsage() {
245245
<p>No data available for the selected time period and resource type.</p>
246246
</div>
247247
)}
248-
</div>
249-
</div>
248+
</div>
249+
</div>
250250

251-
{/* RIGHT SECTION */}
252-
<div className={`${styles.insightsSection} ${darkMode ? 'bg-space-cadet text-light' : ''}`}>
253-
<div className={styles.insightsHeader}>
254-
<h2>Insights</h2>
255-
<Dropdown>
256-
<Dropdown.Toggle className={styles.customDropdown}>
257-
{insightsTimePeriod}
258-
</Dropdown.Toggle>
259-
<Dropdown.Menu>
260-
<Dropdown.Item onClick={() => setInsightsTimePeriod('This Week')}>
261-
This Week
262-
</Dropdown.Item>
263-
<Dropdown.Item onClick={() => setInsightsTimePeriod('Last Week')}>
264-
Last Week
265-
</Dropdown.Item>
266-
<Dropdown.Item onClick={() => setInsightsTimePeriod('This Month')}>
267-
This Month
268-
</Dropdown.Item>
269-
</Dropdown.Menu>
270-
</Dropdown>
271-
</div>
251+
{/* RIGHT SECTION */}
252+
<div className={`${styles.insightsSection} ${darkMode ? styles.darkInsightsSection : ''}`}>
253+
<div className={styles.insightsHeader}>
254+
<h2>Insights</h2>
255+
<Dropdown>
256+
<Dropdown.Toggle className={styles.customDropdown}>
257+
{insightsTimePeriod}
258+
</Dropdown.Toggle>
259+
<Dropdown.Menu>
260+
<Dropdown.Item onClick={() => setInsightsTimePeriod('This Week')}>
261+
This Week
262+
</Dropdown.Item>
263+
<Dropdown.Item onClick={() => setInsightsTimePeriod('Last Week')}>
264+
Last Week
265+
</Dropdown.Item>
266+
<Dropdown.Item onClick={() => setInsightsTimePeriod('This Month')}>
267+
This Month
268+
</Dropdown.Item>
269+
</Dropdown.Menu>
270+
</Dropdown>
271+
</div>
272272

273-
<div className={styles.insightsGrid}>
274-
{insights.map((insight, idx) => (
273+
<div className={styles.insightsGrid}>
274+
{insights.map((insight, idx) => (
275+
<div
276+
key={idx}
277+
className={`${styles.insightCard} ${darkMode ? 'bg-yinmn-blue text-light' : ''}`}
278+
>
279+
<div className={styles.insightContent}>
275280
<div
276-
key={idx}
277-
className={`${styles.insightCard} ${darkMode ? 'bg-yinmn-blue text-light' : ''}`}
281+
className={styles.insightTitle}
282+
title={insightDefinitions[insight.title]}
283+
style={{ color: darkMode ? '#e5e7eb' : '#6b7280', fontWeight: 600 }}
278284
>
279-
{/* Tooltip description */}
280-
<div className={styles.insightTooltip}>
281-
{insightDefinitions[insight.title]}
282-
</div>
285+
{insight.title}
286+
</div>
283287

284-
<div
285-
className={styles.insightTitle}
286-
title={insightDefinitions[insight.title]}
287-
style={{ color: darkMode ? '#342d2dff' : '#6b7280', fontWeight: 600 }}
288-
>
289-
{insight.title}
290-
</div>
288+
<div
289+
ref={el => (badgeRefs.current[idx] = el)}
290+
className={`${styles.insightBadge} ${darkMode ? 'text-dark' : ''}`}
291+
style={{ backgroundColor: insight.color }}
292+
>
293+
{insight.value}
294+
</div>
291295

292-
<div
293-
ref={el => (badgeRefs.current[idx] = el)}
294-
className={`${styles.insightBadge} ${darkMode ? 'text-dark' : ''}`}
295-
style={{ backgroundColor: insight.color }}
296-
>
297-
{insight.value}
296+
<div className={styles.insightMeta}>Based on returned vs loaned comparison</div>
298297
</div>
299298

300-
<div className={styles.insightMeta}>
301-
Based on returned vs loaned comparison
302-
</div>
299+
{/* Tooltip */}
300+
<div className={styles.insightTooltip}>{insightDefinitions[insight.title]}</div>
303301
</div>
304302
))}
305303
</div>
306-
</div>
307304
</div>
305+
</div>
308306
);
309307
}

‎src/components/CommunityPortal/ResourceUsage/ResourceUsage.module.css‎

Lines changed: 13 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -62,15 +62,6 @@
6262
z-index: 5;
6363
}
6464

65-
.yAxisLabel {
66-
position: absolute;
67-
top: -8px;
68-
left: 35px;
69-
font-size: 13px;
70-
font-weight: 700;
71-
z-index: 5;
72-
}
73-
7465
/* ---------------- INSIGHTS ---------------- */
7566

7667
.insightsSection {
@@ -79,10 +70,6 @@
7970
border-left: 1px solid #e5e7eb;
8071
}
8172

82-
.darkInsightsSection {
83-
background: #1b2a41;
84-
}
85-
8673
.insightCard {
8774
position: relative;
8875
padding: 1rem;
@@ -111,27 +98,22 @@
11198
/* Tooltip */
11299
.insightTooltip {
113100
position: absolute;
114-
bottom: 3.25rem;
101+
bottom: 100%;
115102
left: 50%;
116-
transform: translateX(-50%) translateY(6px);
117-
max-width: 140px;
118-
width: max-content;
119-
padding: 0.6rem 0.75rem;
120-
background-color: #374151;
121-
color: #fff;
122-
font-size: 0.75rem;
123-
line-height: 1.35;
124-
border-radius: 0.5rem;
125-
white-space: normal;
126-
text-align: left;
127-
box-shadow: 0 8px 20px rgb(0 0 0 / 18%);
103+
transform: translateX(-50%);
104+
background: #374151;
105+
color: white;
106+
padding: 8px 10px;
107+
border-radius: 6px;
108+
font-size: 12px;
128109
opacity: 0;
110+
visibility: hidden;
111+
transition: all 0.2s ease;
129112
pointer-events: none;
130-
transition: opacity 0.15s ease, transform 0.15s ease;
131-
z-index: 5;
113+
z-index: 10;
132114
}
133115

134-
/* 🔥 FIX: Apply dark styles INSIDE insights section */
116+
/* FIX: Apply dark styles INSIDE insights section */
135117
.darkInsightsSection .insightCard {
136118
background-color: #1e293b;
137119
border: 1px solid #334155;
@@ -177,20 +159,6 @@
177159

178160
/* BADGE */
179161

180-
.insightCard {
181-
padding: 1rem;
182-
border-radius: 0.75rem;
183-
}
184-
185-
.darkInsightCard {
186-
background: #2b3e59;
187-
}
188-
189-
.insightTitle {
190-
margin-bottom: 0.75rem;
191-
font-size: 0.875rem;
192-
}
193-
194162
.insightBadge {
195163
padding: 0.25rem 0.75rem;
196164
border-radius: 1rem;
@@ -256,7 +224,7 @@
256224
.dark-mode .customDropdown,
257225
.dark-mode .dropdown-toggle.customDropdown {
258226
background-color: #1C2541 !important;
259-
color: #ffffff !important;
227+
color: #fff !important;
260228
border-color: #3A506B !important;
261229
}
262230

@@ -271,22 +239,16 @@
271239
}
272240

273241
.dark-mode .dropdown-item {
274-
color: #ffffff !important;
242+
color: #fff !important;
275243
}
276244

277245
.dark-mode .dropdown-item:hover {
278246
background-color: #3A506B !important;
279247
}
280248

281-
/* Badge visibility in dark mode */
282-
.dark-mode .insightBadge {
283-
color: #111827 !important;
284-
}
285-
286249
/* Chart ticks */
287250
.recharts-cartesian-axis-tick-value {
288251
font-size: 12px;
289252
font-weight: 700;
290253
fill: #666;
291-
font-weight: 700;
292254
}

0 commit comments

Comments
 (0)