Skip to content

Commit 156cbf7

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

1 file changed

Lines changed: 91 additions & 57 deletions

File tree

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

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

12+
/* ======================================================
13+
POPUP CONTAINER
14+
====================================================== */
15+
1216
.popup {
1317
padding: 24px;
1418
width: 90%;
@@ -21,13 +25,31 @@
2125
box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
2226
}
2327

28+
.popupDark {
29+
border: 1px solid #4b5563;
30+
background-color: #1f2937;
31+
color: #f9fafb;
32+
}
33+
34+
/* ======================================================
35+
HEADING
36+
====================================================== */
37+
2438
.popupHeading {
2539
margin-bottom: 16px;
26-
color: #111827;
2740
font-size: 20px;
2841
text-align: center;
42+
color: #111827;
2943
}
3044

45+
.popupHeadingDark {
46+
color: #f9fafb;
47+
}
48+
49+
/* ======================================================
50+
TABLE
51+
====================================================== */
52+
3153
.popupTable {
3254
width: 100%;
3355
margin-bottom: 24px;
@@ -39,88 +61,100 @@
3961
.popupTable td {
4062
padding: 10px;
4163
border: 1px solid #d1d5db;
42-
color: #111827;
4364
text-align: left;
44-
}
45-
46-
.buttonRow {
47-
display: flex;
48-
justify-content: space-between;
49-
}
50-
51-
.button {
52-
padding: 8px 16px;
53-
border: 1px solid #d1d5db;
54-
border-radius: 6px;
55-
background-color: #f3f4f6;
5665
color: #111827;
57-
cursor: pointer;
58-
font-weight: 600;
59-
transition: background-color 0.2s ease;
60-
}
61-
62-
.popupDark {
63-
border: 1px solid #4b5563;
64-
color: #f9fafb;
65-
background-color: #1f2937;
6666
}
6767

68-
.popupHeadingDark {
69-
color: #f9fafb;
70-
}
68+
/* DARK TABLE FIRST (fixes specificity rule) */
7169

7270
.popupTableDark {
7371
background-color: #1f2937;
7472
}
7573

7674
.popupTableDark th,
7775
.popupTableDark td {
78-
color: #f9fafb;
7976
border: 1px solid #4b5563;
77+
color: #f9fafb;
8078
background-color: #1f2937;
8179
}
8280

8381
.popupTableDark thead th {
84-
color: #f9fafb;
8582
background-color: #374151;
83+
color: #f9fafb;
8684
}
8785

88-
.popupDark .button {
89-
border: 1px solid #6b7280;
90-
color: #f9fafb;
91-
background-color: #374151;
86+
/* LIGHT TABLE HEADER AFTER */
87+
88+
.popupTable thead th {
89+
font-weight: 600;
90+
background-color: #f3f4f6;
91+
color: #111827;
9292
}
9393

94+
/* ======================================================
95+
BUTTONS
96+
====================================================== */
97+
98+
.buttonRow {
99+
display: flex;
100+
justify-content: space-between;
101+
}
102+
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;
112+
}
113+
114+
/* BASE STATES FIRST */
115+
94116
.button:disabled {
95117
opacity: 0.8;
96118
cursor: not-allowed;
97119
color: #6b7280;
98120
background-color: #d1d5db;
99121
}
100122

123+
.popupDark .button {
124+
border: 1px solid #6b7280;
125+
background-color: #374151;
126+
color: #f9fafb;
127+
}
128+
101129
.button:hover:not(:disabled) {
102130
background-color: #e5e7eb;
103131
}
104132

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

111141
.popupDark .button:hover:not(:disabled) {
112142
background-color: #4b5563;
113143
}
114144

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

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

125159
.prCountBadge {
126160
display: inline-flex;
@@ -134,6 +168,12 @@
134168
font-weight: bold;
135169
}
136170

171+
.popupDark .prCountBadge {
172+
filter: brightness(0.9);
173+
}
174+
175+
/* COLORS (fixed hex shorthand) */
176+
137177
.color0 {
138178
color: #fff;
139179
background-color: #9400d3;
@@ -145,26 +185,29 @@
145185
}
146186

147187
.color-2 {
148-
background-color: #00F; /* Blue - dark, use white text */
188+
background-color: #00f; /* Blue - dark, use white text */
149189
color: white;
150190
}
151191

152192
.color-3 {
153-
background-color: #0F0; /* Green - bright, use black text */
193+
background-color: #0f0; /* Green - bright, use black text */
154194
color: black;
155195
}
156196

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

161202
.color2 {
162203
color: #fff;
163204
background-color: #00f;
205+
}
164206

165207
.color3 {
166208
color: #000;
167209
background-color: #0f0;
210+
}
168211

169212
.color4 {
170213
color: #000;
@@ -177,7 +220,7 @@
177220
}
178221

179222
.color-6 {
180-
background-color: #F00; /* Red - dark, use white text */
223+
background-color: #f00; /* Red - dark, use white text */
181224
color: white;
182225
}
183226

@@ -215,10 +258,6 @@
215258
border-color: #4b5563;
216259
}
217260

218-
.popup-table-dark thead th {
219-
background-color: #374151;
220-
}
221-
222261
.popup-dark .button {
223262
background-color: #374151;
224263
color: #e5e7eb;
@@ -232,46 +271,41 @@
232271
:global(body.dark-mode) .popup-table-dark .pr-count-badge.color-0,
233272
:global(body.bm-dashboard-dark) .popup-table-dark .pr-count-badge.color-0 {
234273
color: #fff !important;
235-
background-color: #9400D3 !important;
274+
background-color: #9400d3 !important;
236275
}
237276

238277
:global(body.dark-mode) .popup-table-dark .pr-count-badge.color-1,
239278
:global(body.bm-dashboard-dark) .popup-table-dark .pr-count-badge.color-1 {
240279
color: #fff !important;
241-
background-color: #4B0082 !important;
280+
background-color: #4b0082 !important;
242281
}
243282

244283
:global(body.dark-mode) .popup-table-dark .pr-count-badge.color-2,
245284
:global(body.bm-dashboard-dark) .popup-table-dark .pr-count-badge.color-2 {
246285
color: #fff !important;
247-
background-color: #00F !important;
286+
background-color: #00f !important;
248287
}
249288

250289
:global(body.dark-mode) .popup-table-dark .pr-count-badge.color-3,
251290
:global(body.bm-dashboard-dark) .popup-table-dark .pr-count-badge.color-3 {
252291
color: #000 !important;
253-
background-color: #0F0 !important;
292+
background-color: #0f0 !important;
254293
}
255294

256295
:global(body.dark-mode) .popup-table-dark .pr-count-badge.color-4,
257296
:global(body.bm-dashboard-dark) .popup-table-dark .pr-count-badge.color-4 {
258297
color: #000 !important;
259-
background-color: #FF0 !important;
298+
background-color: #ff0 !important;
260299
}
261300

262301
:global(body.dark-mode) .popup-table-dark .pr-count-badge.color-5,
263302
:global(body.bm-dashboard-dark) .popup-table-dark .pr-count-badge.color-5 {
264303
color: #fff !important;
265-
background-color: #C45C00 !important;
304+
background-color: #a94f00 !important;
266305
}
267306

268307
:global(body.dark-mode) .popup-table-dark .pr-count-badge.color-6,
269308
:global(body.bm-dashboard-dark) .popup-table-dark .pr-count-badge.color-6 {
270309
color: #fff !important;
271310
background-color: #b00000 !important;
272-
273-
.color6 {
274-
color: #fff;
275-
background-color: #f00;
276311
}
277-
}}}}

0 commit comments

Comments
 (0)