Skip to content

Commit 5e5ca26

Browse files
one-communityone-community
authored
Merge pull request #4253 from OneCommunityGlobal/Pujitha_impl_update-bargraph-contrast
Pujitha - Text visibility in dark mode for Grouped-Bar Graph (Number of Issues by Type)
2 parents 60bc2d7 + 25714cc commit 5e5ca26

7 files changed

Lines changed: 509 additions & 83 deletions

File tree

‎jsconfig.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{
22
"compilerOptions": {
3-
"ignoreDeprecations": "6.0"
4-
// "baseUrl": ".", // Removed because it is deprecated. Use path mapping or absolute imports as per https://aka.ms/ts6
3+
"baseUrl": "src"
54
}
65
}

‎src/components/BMDashboard/Issues/issueChart.module.css‎

Lines changed: 141 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,64 +4,178 @@
44
max-width: 900px;
55
margin: 0 auto;
66
padding: 20px;
7-
background: #f9f9f9;
8-
border-radius: 8px;
9-
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
7+
background: #fafbfc;
8+
border-radius: 12px;
9+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
10+
border: 1px solid #e2e8f0;
1011
}
1112

1213
.issueChartEventContainerDark {
13-
background: #121212;
14-
box-shadow: 0 4px 12px rgba(0,0,0,0.9);
15-
color: #ccd1dc;
14+
background: #1a202c;
15+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
16+
color: #f7fafc;
17+
border: 1px solid #2d3748;
1618
}
1719

1820
.issueChartEventTitle {
1921
text-align: center;
2022
font-size: 24px;
21-
color: #333;
23+
font-weight: 600;
24+
color: #1a1a1a;
25+
margin-bottom: 24px;
26+
text-shadow: none;
2227
}
2328

2429
.issueChartEventTitleDark {
25-
color: #fff;
30+
color: #f7fafc;
31+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
2632
}
2733

2834
.chartWrapper {
29-
padding: 20px;
30-
background: #fff;
31-
border-radius: 8px;
32-
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
35+
padding: 24px;
36+
background: #ffffff;
37+
border-radius: 12px;
38+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
39+
border: 1px solid #e2e8f0;
40+
margin-top: 20px;
3341
}
3442

3543
.chartWrapperDark {
36-
background: #1e1e1e;
37-
box-shadow: 0 0 15px rgba(0,0,0,0.9);
38-
color: #ccd1dc;
44+
background: #2d3748;
45+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
46+
color: #f7fafc;
47+
border: 1px solid #4a5568;
3948
}
4049

4150
.issueChartLabel {
4251
font-size: 16px;
43-
color: #555;
52+
font-weight: 600;
53+
color: #2d3748;
54+
margin-bottom: 8px;
55+
display: block;
4456
}
4557

4658
.issueChartLabelDark {
47-
color: #fff;
59+
color: #f7fafc;
60+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
4861
}
4962

5063
.issueChartSelect {
51-
padding: 2px 10px;
52-
font-size: 16px;
53-
border-radius: 4px;
54-
border: 1px solid #ccc;
55-
background-color: #fff;
56-
color: #333;
64+
padding: 8px 12px;
65+
font-size: 14px;
66+
font-weight: 500;
67+
border-radius: 8px;
68+
border: 1px solid #d1d5db;
69+
background-color: #ffffff;
70+
color: #1f2937;
5771
cursor: pointer;
58-
transition: border-color 0.3s ease;
72+
transition: all 0.2s ease;
5973
outline: none;
6074
margin-bottom: 20px;
75+
min-height: 42px;
76+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
77+
}
78+
79+
.issueChartSelect:hover {
80+
border-color: #9ca3af;
81+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
82+
}
83+
84+
.issueChartSelect:focus {
85+
border-color: #3b82f6;
86+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
6187
}
6288

6389
.issueChartSelectDark {
64-
border-color: #3d444d;
65-
background-color: #22272e;
66-
color: #cfd7e3;
90+
border-color: #4a5568;
91+
background-color: #2d3748;
92+
color: #f7fafc;
93+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
94+
}
95+
96+
.issueChartSelectDark:hover {
97+
border-color: #718096;
98+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
99+
}
100+
101+
.issueChartSelectDark:focus {
102+
border-color: #63b3ed;
103+
box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.2);
104+
}
105+
106+
/* Select container styling */
107+
.selectContainer {
108+
display: flex;
109+
flex-wrap: wrap;
110+
gap: 24px;
111+
justify-content: center;
112+
margin-bottom: 24px;
113+
padding: 16px;
114+
background: rgba(0, 0, 0, 0.02);
115+
border-radius: 8px;
116+
}
117+
118+
.selectContainer > div {
119+
min-width: 220px;
120+
flex: 1;
121+
max-width: 300px;
122+
}
123+
124+
/* Dark mode select container */
125+
.issueChartEventContainerDark .selectContainer {
126+
background: rgba(255, 255, 255, 0.05);
127+
}
128+
129+
/* Improved accessibility and responsiveness */
130+
@media (max-width: 768px) {
131+
.issueChartEventContainer,
132+
.issueChartEventContainerDark {
133+
margin: 16px;
134+
padding: 16px;
135+
}
136+
137+
.chartWrapper,
138+
.chartWrapperDark {
139+
padding: 16px;
140+
}
141+
142+
.selectContainer {
143+
flex-direction: column;
144+
gap: 16px;
145+
}
146+
147+
.selectContainer > div {
148+
min-width: unset;
149+
max-width: unset;
150+
}
151+
152+
.issueChartEventTitle,
153+
.issueChartEventTitleDark {
154+
font-size: 20px;
155+
}
156+
}
157+
158+
/* Loading and error states */
159+
.loadingText,
160+
.errorText {
161+
text-align: center;
162+
padding: 20px;
163+
font-size: 16px;
164+
font-weight: 500;
165+
}
166+
167+
.loadingText {
168+
color: #6b7280;
169+
}
170+
171+
.loadingTextDark {
172+
color: #d1d5db;
173+
}
174+
175+
.errorText {
176+
color: #dc2626;
177+
}
178+
179+
.errorTextDark {
180+
color: #fca5a5;
67181
}

0 commit comments

Comments
 (0)