Skip to content

Commit 0428e87

Browse files
one-communityone-community
authored
Merge pull request #5336 from OneCommunityGlobal/revert-5200-Akshith-fix-pr-promotion-darkmode
Revert "Akshith - PR Review Team Analytics Dashboard - Implement Dark mode"
2 parents 8619d6c + 1d21c45 commit 0428e87

1 file changed

Lines changed: 57 additions & 91 deletions

File tree

‎src/components/PRPromotions/DisplayBox.module.css‎

Lines changed: 57 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,6 @@
99
background-color: rgb(0 0 0 / 60%);
1010
}
1111

12-
/* ======================================================
13-
POPUP CONTAINER
14-
====================================================== */
15-
1612
.popup {
1713
padding: 24px;
1814
width: 90%;
@@ -25,31 +21,13 @@
2521
box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
2622
}
2723

28-
.popupDark {
29-
border: 1px solid #4b5563;
30-
background-color: #1f2937;
31-
color: #f9fafb;
32-
}
33-
34-
/* ======================================================
35-
HEADING
36-
====================================================== */
37-
3824
.popupHeading {
3925
margin-bottom: 16px;
26+
color: #111827;
4027
font-size: 20px;
4128
text-align: center;
42-
color: #111827;
4329
}
4430

45-
.popupHeadingDark {
46-
color: #f9fafb;
47-
}
48-
49-
/* ======================================================
50-
TABLE
51-
====================================================== */
52-
5331
.popupTable {
5432
width: 100%;
5533
margin-bottom: 24px;
@@ -61,57 +39,57 @@
6139
.popupTable td {
6240
padding: 10px;
6341
border: 1px solid #d1d5db;
64-
text-align: left;
6542
color: #111827;
43+
text-align: left;
6644
}
6745

68-
/* DARK TABLE FIRST (fixes specificity rule) */
46+
.buttonRow {
47+
display: flex;
48+
justify-content: space-between;
49+
}
6950

70-
.popupTableDark {
71-
background-color: #1f2937;
51+
.button {
52+
padding: 8px 16px;
53+
border: 1px solid #d1d5db;
54+
border-radius: 6px;
55+
background-color: #f3f4f6;
56+
color: #111827;
57+
cursor: pointer;
58+
font-weight: 600;
59+
transition: background-color 0.2s ease;
7260
}
7361

74-
.popupTableDark th,
75-
.popupTableDark td {
62+
.popupDark {
7663
border: 1px solid #4b5563;
7764
color: #f9fafb;
7865
background-color: #1f2937;
7966
}
8067

81-
.popupTableDark thead th {
82-
background-color: #374151;
68+
.popupHeadingDark {
8369
color: #f9fafb;
8470
}
8571

86-
/* LIGHT TABLE HEADER AFTER */
87-
88-
.popupTable thead th {
89-
font-weight: 600;
90-
background-color: #f3f4f6;
91-
color: #111827;
72+
.popupTableDark {
73+
background-color: #1f2937;
9274
}
9375

94-
/* ======================================================
95-
BUTTONS
96-
====================================================== */
97-
98-
.buttonRow {
99-
display: flex;
100-
justify-content: space-between;
76+
.popupTableDark th,
77+
.popupTableDark td {
78+
color: #f9fafb;
79+
border: 1px solid #4b5563;
80+
background-color: #1f2937;
10181
}
10282

103-
.button {
104-
padding: 8px 16px;
105-
border: 1px solid #d1d5db;
106-
border-radius: 6px;
107-
background-color: #f3f4f6;
108-
color: #111827;
109-
cursor: pointer;
110-
font-weight: 600;
111-
transition: background-color 0.2s ease;
83+
.popupTableDark thead th {
84+
color: #f9fafb;
85+
background-color: #374151;
11286
}
11387

114-
/* BASE STATES FIRST */
88+
.popupDark .button {
89+
border: 1px solid #6b7280;
90+
color: #f9fafb;
91+
background-color: #374151;
92+
}
11593

11694
.button:disabled {
11795
opacity: 0.8;
@@ -120,41 +98,29 @@
12098
background-color: #d1d5db;
12199
}
122100

123-
.popupDark .button {
124-
border: 1px solid #6b7280;
125-
background-color: #374151;
126-
color: #f9fafb;
127-
}
128-
129101
.button:hover:not(:disabled) {
130102
background-color: #e5e7eb;
131103
}
132104

133-
/* DARK MODE (MORE SPECIFIC — MUST COME AFTER) */
134-
135105
.popupDark .button:disabled {
136106
border: 1px solid #4b5563;
137-
background-color: #2d3748;
138107
color: #9ca3af;
108+
background-color: #374151;
139109
}
140110

141111
.popupDark .button:hover:not(:disabled) {
142112
background-color: #4b5563;
143113
}
144114

145-
/* ======================================================
146-
CHECKBOXES
147-
====================================================== */
148-
149115
.popupDark input[type='checkbox'] {
150116
accent-color: #60a5fa;
151-
background-color: #1f2937;
152-
border: 1px solid #6b7280;
153117
}
154118

155-
/* ======================================================
156-
PR BADGES
157-
====================================================== */
119+
.popupTable thead th {
120+
font-weight: 600;
121+
color: #111827;
122+
background-color: #f3f4f6;
123+
}
158124

159125
.prCountBadge {
160126
display: inline-flex;
@@ -168,12 +134,6 @@
168134
font-weight: bold;
169135
}
170136

171-
.popupDark .prCountBadge {
172-
filter: brightness(0.9);
173-
}
174-
175-
/* COLORS (fixed hex shorthand) */
176-
177137
.color0 {
178138
color: #fff;
179139
background-color: #9400d3;
@@ -185,29 +145,26 @@
185145
}
186146

187147
.color-2 {
188-
background-color: #00f; /* Blue - dark, use white text */
148+
background-color: #00F; /* Blue - dark, use white text */
189149
color: white;
190150
}
191151

192152
.color-3 {
193-
background-color: #0f0; /* Green - bright, use black text */
153+
background-color: #0F0; /* Green - bright, use black text */
194154
color: black;
195155
}
196156

197157
.color-4 {
198-
background-color: #ff0; /* Yellow - bright, use black text */
158+
background-color: #FF0; /* Yellow - bright, use black text */
199159
color: black;
200-
}
201160

202161
.color2 {
203162
color: #fff;
204163
background-color: #00f;
205-
}
206164

207165
.color3 {
208166
color: #000;
209167
background-color: #0f0;
210-
}
211168

212169
.color4 {
213170
color: #000;
@@ -220,7 +177,7 @@
220177
}
221178

222179
.color-6 {
223-
background-color: #f00; /* Red - dark, use white text */
180+
background-color: #F00; /* Red - dark, use white text */
224181
color: white;
225182
}
226183

@@ -258,6 +215,10 @@
258215
border-color: #4b5563;
259216
}
260217

218+
.popup-table-dark thead th {
219+
background-color: #374151;
220+
}
221+
261222
.popup-dark .button {
262223
background-color: #374151;
263224
color: #e5e7eb;
@@ -271,41 +232,46 @@
271232
:global(body.dark-mode) .popup-table-dark .pr-count-badge.color-0,
272233
:global(body.bm-dashboard-dark) .popup-table-dark .pr-count-badge.color-0 {
273234
color: #fff !important;
274-
background-color: #9400d3 !important;
235+
background-color: #9400D3 !important;
275236
}
276237

277238
:global(body.dark-mode) .popup-table-dark .pr-count-badge.color-1,
278239
:global(body.bm-dashboard-dark) .popup-table-dark .pr-count-badge.color-1 {
279240
color: #fff !important;
280-
background-color: #4b0082 !important;
241+
background-color: #4B0082 !important;
281242
}
282243

283244
:global(body.dark-mode) .popup-table-dark .pr-count-badge.color-2,
284245
:global(body.bm-dashboard-dark) .popup-table-dark .pr-count-badge.color-2 {
285246
color: #fff !important;
286-
background-color: #00f !important;
247+
background-color: #00F !important;
287248
}
288249

289250
:global(body.dark-mode) .popup-table-dark .pr-count-badge.color-3,
290251
:global(body.bm-dashboard-dark) .popup-table-dark .pr-count-badge.color-3 {
291252
color: #000 !important;
292-
background-color: #0f0 !important;
253+
background-color: #0F0 !important;
293254
}
294255

295256
:global(body.dark-mode) .popup-table-dark .pr-count-badge.color-4,
296257
:global(body.bm-dashboard-dark) .popup-table-dark .pr-count-badge.color-4 {
297258
color: #000 !important;
298-
background-color: #ff0 !important;
259+
background-color: #FF0 !important;
299260
}
300261

301262
:global(body.dark-mode) .popup-table-dark .pr-count-badge.color-5,
302263
:global(body.bm-dashboard-dark) .popup-table-dark .pr-count-badge.color-5 {
303264
color: #fff !important;
304-
background-color: #a94f00 !important;
265+
background-color: #C45C00 !important;
305266
}
306267

307268
:global(body.dark-mode) .popup-table-dark .pr-count-badge.color-6,
308269
:global(body.bm-dashboard-dark) .popup-table-dark .pr-count-badge.color-6 {
309270
color: #fff !important;
310271
background-color: #b00000 !important;
272+
273+
.color6 {
274+
color: #fff;
275+
background-color: #f00;
311276
}
277+
}}}}

0 commit comments

Comments
 (0)