Skip to content

Commit e378fd0

Browse files
deep3072deep3072
committed
fix: pr review bugs
1 parent b0f91fe commit e378fd0

9 files changed

Lines changed: 177 additions & 144 deletions

‎src/components/TotalOrgSummary/TotalOrgSummary.jsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ function TotalOrgSummary(props) {
178178

179179
// 3. Replace Chart.js canvas elements with images in the live DOM.
180180
const chartCanvases = document.querySelectorAll(
181-
'.volunteer-status-chart canvas, .mentor-status-chart canvas',
181+
'[data-chart="volunteer-status"] canvas, [data-chart="mentor-status"] canvas',
182182
);
183183
const originalCanvases = [];
184184
chartCanvases.forEach(canvasElem => {
@@ -675,7 +675,11 @@ ${
675675
</Col>
676676
<Col lg={{ size: 6 }}>
677677
<div
678-
className={clsx(styles.componentContainer, styles.componentBorder)}
678+
className={clsx(
679+
styles.componentContainer,
680+
styles.componentBorder,
681+
styles.componentBorderLoose,
682+
)}
679683
data-pdf-block
680684
>
681685
<div

‎src/components/TotalOrgSummary/TotalOrgSummary.module.css‎

Lines changed: 5 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
1+
/* Chart labels stay dark in dark mode for readability against light label chips */
12
.containerTotalOrgWrapper:global(.bg-oxford-blue) .componentContainer .recharts-wrapper text,
23
.containerTotalOrgWrapper:global(.bg-oxford-blue) .componentContainer .recharts-wrapper tspan {
34
fill: #000 !important;
45
color: #000 !important;
56
text-shadow: 1px 1px 3px rgba(0,0,0,0.25), 0 0 2px #fff;
67
}
7-
/* Chart title stays white, but chart numbers/labels inside the donut graph are black for better contrast */
8-
.containerTotalOrgWrapper:global(.bg-oxford-blue) .componentContainer .recharts-wrapper text,
9-
.containerTotalOrgWrapper:global(.bg-oxford-blue) .componentContainer .recharts-wrapper tspan {
10-
fill: #000 !important;
11-
color: #000 !important;
12-
}
138
/* Chart and graph titles/text should be white in dark mode for visibility */
149
.containerTotalOrgWrapper:global(.bg-oxford-blue) .componentContainer h3,
1510
.containerTotalOrgWrapper:global(.bg-oxford-blue) .componentContainer p,
@@ -73,11 +68,6 @@
7368
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4) !important;
7469
}
7570

76-
.containerTotalOrgWrapper:global(.bg-oxford-blue) .componentBorder {
77-
background-color: #1c2541 !important;
78-
border: none !important;
79-
}
80-
8171
.containerTotalOrgWrapper:global(.bg-oxford-blue) .componentContainer {
8272
background-color: #1c2541 !important;
8373
border: none !important;
@@ -279,25 +269,6 @@
279269
}
280270

281271
/* Dark mode dropdown consistency */
282-
.containerTotalOrgWrapper:global(.bg-oxford-blue) .reportHeaderActions :global(.dropdown-toggle) {
283-
background-color: #6f42c1 !important;
284-
border-color: #6f42c1 !important;
285-
}
286-
287-
.containerTotalOrgWrapper:global(.bg-oxford-blue) .reportHeaderActions :global(.dropdown-menu) {
288-
background-color: #1c2541 !important;
289-
border-color: #6f42c1 !important;
290-
}
291-
292-
.containerTotalOrgWrapper:global(.bg-oxford-blue) .reportHeaderActions :global(.dropdown-item) {
293-
background-color: #1c2541 !important;
294-
color: #fff !important;
295-
}
296-
297-
.containerTotalOrgWrapper:global(.bg-oxford-blue) .reportHeaderActions :global(.dropdown-item):hover {
298-
background-color: #6f42c1 !important;
299-
}
300-
301272
/* Component containers - Clean borderless design */
302273
.componentContainer {
303274
margin: 15px 0;
@@ -315,6 +286,10 @@
315286
background-color: #fff;
316287
overflow: hidden;
317288
}
289+
290+
.componentBorderLoose {
291+
overflow: visible;
292+
}
318293
.containerTotalOrgWrapper:global(.bg-oxford-blue) .componentBorder {
319294
background-color: #1c2541 !important;
320295
border: 1.5px solid #2f4157 !important;

‎src/components/TotalOrgSummary/VolunteerStatus/MentorStatusPieChart.jsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import PropTypes from 'prop-types';
22
import { Doughnut } from 'react-chartjs-2';
33
import { Chart, ArcElement } from 'chart.js';
4-
import './MentorStatusPieChart.css';
4+
import styles from './MentorStatusPieChart.module.css';
55
import externalLabelGuidesPlugin from './externalLabelGuidesPlugin';
66

77
Chart.register(ArcElement);
@@ -52,15 +52,20 @@ function MentorStatusPieChart({
5252
const percentageChangeColor = percentageChange >= 0 ? 'green' : 'red';
5353

5454
return (
55-
<section className="mentor-status-container" aria-label="Mentor Status Overview">
56-
<div className="mentor-status-chart" role="img" aria-label="Mentor Status Pie Chart">
55+
<section className={styles.mentorStatusContainer} aria-label="Mentor Status Overview">
56+
<div
57+
className={styles.mentorStatusChart}
58+
data-chart="mentor-status"
59+
role="img"
60+
aria-label="Mentor Status Pie Chart"
61+
>
5762
<Doughnut data={chartData} options={options} plugins={[externalLabelGuidesPlugin]} />
58-
<div className="mentor-status-center">
59-
<h2 className="mentor-status-heading">TOTAL MENTORS</h2>
60-
<p className="mentor-count">{totalMentors}</p>
63+
<div className={styles.mentorStatusCenter}>
64+
<h2 className={styles.mentorStatusHeading}>TOTAL MENTORS</h2>
65+
<p className={styles.mentorCount}>{totalMentors}</p>
6166
{comparisonType !== 'No Comparison' && (
6267
<p
63-
className="mentor-percentage-change"
68+
className={styles.mentorPercentageChange}
6469
style={{ color: percentageChangeColor }}
6570
aria-label={`Mentor percentage change: ${percentageChange}% ${comparisonType.toLowerCase()}`}
6671
>
@@ -71,11 +76,11 @@ function MentorStatusPieChart({
7176
)}
7277
</div>
7378
</div>
74-
<div className="mentor-status-labels">
79+
<div className={styles.mentorStatusLabels}>
7580
{mentorData.map((item, index) => (
76-
<div key={item.label} className="mentor-status-label">
81+
<div key={item.label} className={styles.mentorStatusLabel}>
7782
<span
78-
className="mentor-status-color"
83+
className={styles.mentorStatusColor}
7984
style={{ backgroundColor: chartData.datasets[0].backgroundColor[index] }}
8085
aria-hidden="true"
8186
/>

src/components/TotalOrgSummary/VolunteerStatus/MentorStatusPieChart.css renamed to src/components/TotalOrgSummary/VolunteerStatus/MentorStatusPieChart.module.css

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.mentor-status-container {
1+
.mentorStatusContainer {
22
margin-top: 24px;
33
display: flex;
44
flex-direction: column;
@@ -9,15 +9,15 @@
99
gap: 12px;
1010
}
1111

12-
.mentor-status-chart {
12+
.mentorStatusChart {
1313
position: relative;
14-
width: 100%;
14+
width: min(320px, 100%);
1515
max-width: 320px;
16-
height: 320px;
16+
aspect-ratio: 1 / 1;
1717
overflow: visible;
1818
}
1919

20-
.mentor-status-center {
20+
.mentorStatusCenter {
2121
position: absolute;
2222
top: 50%;
2323
left: 50%;
@@ -30,7 +30,7 @@
3030
gap: 6px;
3131
}
3232

33-
.mentor-status-heading {
33+
.mentorStatusHeading {
3434
color: #828282;
3535
font-size: 1.2rem;
3636
letter-spacing: 0.5px;
@@ -40,52 +40,62 @@
4040
text-align: center;
4141
}
4242

43-
.mentor-status-center .mentor-count {
43+
.mentorCount {
4444
color: #6c6c6c;
4545
font-size: 1.8rem;
4646
font-weight: 800;
4747
line-height: 1.18;
4848
margin-top: -10px;
4949
}
5050

51-
.mentor-status-center .mentor-percentage-change {
51+
.mentorPercentageChange {
5252
font-weight: 600;
5353
}
5454

55-
.mentor-status-labels {
55+
.mentorStatusLabels {
5656
display: flex;
5757
justify-content: center;
5858
align-items: center;
5959
gap: 16px;
60-
margin-top: 60px;
61-
flex-wrap: nowrap;
60+
margin-top: 28px;
61+
flex-wrap: wrap;
6262
}
6363

64-
.mentor-status-label {
64+
.mentorStatusLabel {
6565
display: flex;
6666
align-items: center;
6767
gap: 6px;
6868
font-size: 0.875rem;
6969
white-space: nowrap;
7070
}
7171

72-
.mentor-status-color {
72+
.mentorStatusColor {
7373
display: inline-block;
7474
width: 12px;
7575
height: 12px;
7676
border-radius: 2px;
7777
}
7878

79-
@media (max-width: 640px) {
80-
.mentor-status-labels {
81-
flex-wrap: wrap;
79+
:global(.bg-oxford-blue) .mentorStatusHeading {
80+
color: #f1f5ff;
81+
}
82+
83+
:global(.bg-oxford-blue) .mentorCount {
84+
color: #ffffff;
85+
}
86+
87+
@media (max-width: 768px) {
88+
.mentorStatusChart {
89+
width: min(280px, 100%);
90+
}
91+
92+
.mentorStatusLabels {
8293
gap: 12px;
8394
}
8495
}
8596

8697
@media (min-width: 768px) {
87-
.mentor-status-chart {
98+
.mentorStatusChart {
8899
max-width: 280px;
89-
height: 280px;
90100
}
91101
}

‎src/components/TotalOrgSummary/VolunteerStatus/VolunteerStatusChart.module.css‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,53 +9,58 @@
99
display: flex;
1010
flex-direction: column;
1111
align-items: center;
12+
justify-content: center;
1213
gap: 24px;
1314
width: 100%;
1415
flex: 1 1 auto;
1516
}
1617

17-
.volunteerChartSection {
18-
width: 100%;
19-
display: flex;
20-
justify-content: center;
21-
align-items: stretch;
22-
}
23-
18+
.volunteerChartSection,
2419
.mentorChartSection {
2520
width: 100%;
2621
display: flex;
2722
justify-content: center;
2823
align-items: stretch;
24+
flex: 1 1 100%;
25+
min-width: 0;
2926
}
3027

3128
@media (min-width: 768px) {
3229
.volunteerMentorChartsWrapper {
3330
flex-direction: row;
31+
flex-wrap: wrap;
3432
align-items: stretch;
3533
justify-content: center;
3634
}
3735

38-
.volunteerChartSection {
39-
flex: 1 1 0;
40-
}
41-
36+
.volunteerChartSection,
4237
.mentorChartSection {
43-
flex: 0 0 320px;
38+
flex: 1 1 280px;
39+
max-width: 360px;
4440
}
4541

4642
.chartRoot {
4743
min-height: 520px;
4844
}
4945
}
5046

51-
@media (min-width: 992px) {
47+
@media (min-width: 1200px) {
48+
.volunteerMentorChartsWrapper {
49+
flex-wrap: nowrap;
50+
justify-content: space-evenly;
51+
}
52+
53+
.volunteerChartSection {
54+
flex: 1 1 340px;
55+
}
56+
5257
.mentorChartSection {
53-
flex: 0 0 280px;
58+
flex: 0 1 320px;
5459
}
5560
}
5661

5762
.volunteerMentorFootnote {
58-
margin-top: 120px;
63+
margin-top: 105px;
5964
text-align: center;
6065
font-size: 0.75rem;
6166
color: #4f4f4f;

‎src/components/TotalOrgSummary/VolunteerStatus/VolunteerStatusPieChart.jsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import PropTypes from 'prop-types';
22
import { Doughnut } from 'react-chartjs-2';
33
import { Chart, ArcElement } from 'chart.js';
4-
import './VolunteerStatusPieChart.css';
4+
import styles from './VolunteerStatusPieChart.module.css';
55
import externalLabelGuidesPlugin from './externalLabelGuidesPlugin';
66

77
Chart.register(ArcElement);
@@ -68,15 +68,19 @@ function VolunteerStatusPieChart({
6868
const percentageChangeColor = percentageChange >= 0 ? 'green' : 'red';
6969

7070
return (
71-
<section className="volunteer-status-container" aria-label="Volunteer Status Overview">
72-
<div className="volunteer-status-chart" role="img" aria-label="Volunteer Status Pie Chart">
71+
<section className={styles.volunteerStatusContainer} aria-label="Volunteer Status Overview">
72+
<div
73+
className={styles.volunteerStatusChart}
74+
data-chart="volunteer-status"
75+
role="img"
76+
aria-label="Volunteer Status Pie Chart"
77+
>
7378
<Doughnut data={chartData} options={options} plugins={[externalLabelGuidesPlugin]} />
74-
<div className="volunteer-status-center">
75-
<h2 className="volunteer-status-heading">TOTAL VOLUNTEERS*</h2>
76-
<p className="volunteer-count">{totalVolunteers}</p>
79+
<div className={styles.volunteerStatusCenter}>
80+
<h2 className={styles.volunteerStatusHeading}>TOTAL VOLUNTEERS*</h2>
81+
<p className={styles.volunteerCount}>{totalVolunteers}</p>
7782
{comparisonType !== 'No Comparison' && (
7883
<p
79-
className="percentage-change"
8084
style={{ color: percentageChangeColor }}
8185
aria-label={`Percentage change: ${percentageChange}% ${comparisonType.toLowerCase()}`}
8286
>
@@ -87,11 +91,11 @@ function VolunteerStatusPieChart({
8791
)}
8892
</div>
8993
</div>
90-
<div className="volunteer-status-labels">
94+
<div className={styles.volunteerStatusLabels}>
9195
{volunteerData.map((item, index) => (
92-
<div key={item.label} className="volunteer-status-label">
96+
<div key={item.label} className={styles.volunteerStatusLabel}>
9397
<span
94-
className="volunteer-status-color"
98+
className={styles.volunteerStatusColor}
9599
style={{ backgroundColor: chartData.datasets[0].backgroundColor[index] }}
96100
aria-hidden="true"
97101
/>

0 commit comments

Comments
 (0)