Skip to content

Commit 172e09c

Browse files
one-communityone-community
authored
Merge pull request #4512 from OneCommunityGlobal/deep-add-drop-down-menu
deep fix dark mode issues
2 parents e1f8947 + 4a177b6 commit 172e09c

3 files changed

Lines changed: 280 additions & 4 deletions

File tree

‎src/components/BMDashboard/ItemList/ItemListView.jsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useState, useEffect } from 'react';
2+
import { useSelector } from 'react-redux';
23
import PropTypes from 'prop-types';
34
import DatePicker from 'react-datepicker';
45
import 'react-datepicker/dist/react-datepicker.css';
@@ -14,6 +15,7 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
1415
const [selectedItem, setSelectedItem] = useState('all');
1516
const [isError, setIsError] = useState(false);
1617
const [selectedTime, setSelectedTime] = useState(new Date());
18+
const darkMode = useSelector(state => state.theme.darkMode);
1719

1820
useEffect(() => {
1921
if (items) setFilteredItems([...items]);
@@ -44,7 +46,7 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
4446

4547
if (isError) {
4648
return (
47-
<main className={`${styles.itemsListContainer}`}>
49+
<main className={`${styles.itemsListContainer} ${darkMode ? styles.darkMode : ''}`}>
4850
<h2>
4951
{itemType}
5052
{' List'}
@@ -55,7 +57,7 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
5557
}
5658

5759
return (
58-
<main className={`${styles.itemsListContainer}`}>
60+
<main className={`${styles.itemsListContainer} ${darkMode ? styles.darkMode : ''}`}>
5961
<h3>{itemType}</h3>
6062
<section>
6163
<span>
@@ -71,6 +73,11 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
7173
dateFormat="yyyy-MM-dd HH:mm:ss"
7274
placeholderText="Select date and time"
7375
inputId="itemListTime" // This is the key line
76+
className={darkMode ? styles.darkDatePickerInput : styles.lightDatePickerInput}
77+
calendarClassName={darkMode ? styles.darkDatePicker : styles.lightDatePicker}
78+
popperClassName={
79+
darkMode ? styles.darkDatePickerPopper : styles.lightDatePickerPopper
80+
}
7481
/>
7582
<SelectForm
7683
items={items}
@@ -104,6 +111,7 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
104111
filteredItems={filteredItems}
105112
UpdateItemModal={UpdateItemModal}
106113
dynamicColumns={dynamicColumns}
114+
darkMode={darkMode}
107115
/>
108116
)}
109117
</section>

‎src/components/BMDashboard/ItemList/ItemListView.module.css‎

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,3 +91,270 @@
9191
.btnPrimary:hover {
9292
background-color: #3b82f6;
9393
}
94+
95+
.darkMode {
96+
color: #e8edf4;
97+
}
98+
99+
.darkMode h3 {
100+
color: #ffffff;
101+
}
102+
103+
.darkMode .selectInput label {
104+
color: #e8edf4;
105+
}
106+
107+
.darkMode .selectInput input,
108+
.darkMode .selectInput select {
109+
background-color: #2a3f5f;
110+
color: #e8edf4;
111+
border: 1px solid #3f5269;
112+
}
113+
114+
.darkMode .selectInput input::placeholder {
115+
color: #c8d2e0;
116+
}
117+
118+
.darkMode .selectInput option {
119+
background-color: #2a3f5f;
120+
color: #e8edf4;
121+
}
122+
123+
.darkTableWrapper {
124+
background-color: #1b2a41;
125+
border: 1px solid #2f4157;
126+
border-radius: 6px;
127+
}
128+
129+
.darkTable {
130+
background-color: #1b2a41;
131+
color: #e8edf4;
132+
}
133+
134+
.darkTable thead th {
135+
background-color: #2f4157;
136+
color: #f2f6ff !important;
137+
border-color: #3f5269 !important;
138+
}
139+
140+
.darkTable tbody td,
141+
.darkTable tbody th {
142+
border-color: #2f4157 !important;
143+
}
144+
145+
.darkTable tbody tr:nth-child(odd) {
146+
background-color: #1f2e45;
147+
}
148+
149+
.darkTable tbody tr:nth-child(even) {
150+
background-color: #23375b;
151+
}
152+
153+
.darkDatePickerInput {
154+
background-color: #2a3f5f !important;
155+
color: #e8edf4 !important;
156+
border: 1px solid #3f5269 !important;
157+
}
158+
159+
.darkDatePickerInput::placeholder {
160+
color: #c8d2e0 !important;
161+
}
162+
163+
.darkDatePicker {
164+
background-color: #1f2e45 !important;
165+
color: #e8edf4 !important;
166+
border: 1px solid #3f5269 !important;
167+
}
168+
169+
.darkDatePicker .react-datepicker__header {
170+
background-color: #2f4157;
171+
border-color: #3f5269;
172+
}
173+
174+
.darkDatePicker .react-datepicker__time-header {
175+
color: #f2f6ff !important;
176+
background-color: #2f4157 !important;
177+
border-bottom: 1px solid #3f5269 !important;
178+
}
179+
180+
.darkDatePicker .react-datepicker__current-month,
181+
.darkDatePicker .react-datepicker-year-header {
182+
color: #f2f6ff !important;
183+
}
184+
185+
.darkDatePicker .react-datepicker__day-name,
186+
.darkDatePicker .react-datepicker__day,
187+
.darkDatePicker .react-datepicker__time-name {
188+
color: #e8edf4;
189+
}
190+
191+
.darkDatePicker .react-datepicker__day--selected,
192+
.darkDatePicker .react-datepicker__day--keyboard-selected,
193+
.darkDatePicker .react-datepicker__time-list-item--selected {
194+
background-color: #468ef9 !important;
195+
color: #ffffff !important;
196+
}
197+
198+
.darkDatePicker .react-datepicker__time-container {
199+
border-color: #3f5269 !important;
200+
background-color: #2a3f5f !important;
201+
}
202+
203+
.darkDatePicker .react-datepicker__time-container .react-datepicker__time {
204+
background-color: #2a3f5f !important;
205+
border-color: #3f5269 !important;
206+
}
207+
208+
.darkDatePicker .react-datepicker__time-container .react-datepicker__time-box {
209+
background-color: #2a3f5f !important;
210+
border-color: #3f5269 !important;
211+
}
212+
213+
.darkDatePicker .react-datepicker__time-container .react-datepicker__time-list {
214+
background-color: #2a3f5f !important;
215+
color: #e8edf4 !important;
216+
border-color: #3f5269 !important;
217+
}
218+
219+
.darkDatePicker
220+
.react-datepicker__time-container
221+
.react-datepicker__time-box
222+
ul.react-datepicker__time-list
223+
li {
224+
color: #e8edf4 !important;
225+
background-color: #2a3f5f !important;
226+
border-color: #3f5269 !important;
227+
}
228+
229+
.darkDatePicker
230+
.react-datepicker__time-container
231+
.react-datepicker__time-box
232+
ul.react-datepicker__time-list
233+
li:hover {
234+
background-color: #3a506b !important;
235+
color: #ffffff !important;
236+
}
237+
238+
.darkDatePicker
239+
.react-datepicker__time-container
240+
.react-datepicker__time-box
241+
ul.react-datepicker__time-list {
242+
background-color: #2a3f5f !important;
243+
}
244+
245+
/* Explicitly target react-datepicker time list via :global to override inline white background */
246+
.darkDatePicker :global(.react-datepicker__time-container),
247+
.darkDatePicker :global(.react-datepicker__time-container .react-datepicker__time),
248+
.darkDatePicker :global(.react-datepicker__time-container .react-datepicker__time-box),
249+
.darkDatePicker :global(.react-datepicker__time-container .react-datepicker__time-box ul.react-datepicker__time-list) {
250+
background-color: #2a3f5f !important;
251+
border-color: #3f5269 !important;
252+
color: #e8edf4 !important;
253+
}
254+
255+
.darkDatePicker :global(.react-datepicker__time-list-item) {
256+
background-color: #2a3f5f !important;
257+
color: #e8edf4 !important;
258+
}
259+
260+
.darkDatePicker :global(.react-datepicker__time-list-item:hover),
261+
.darkDatePicker :global(.react-datepicker__time-list-item:focus) {
262+
background-color: #3a506b !important;
263+
color: #ffffff !important;
264+
}
265+
266+
.darkDatePicker :global(.react-datepicker__time-list-item--selected) {
267+
background-color: #468ef9 !important;
268+
color: #ffffff !important;
269+
}
270+
271+
.darkDatePickerPopper .react-datepicker__triangle {
272+
display: none;
273+
}
274+
275+
/* Light mode styles to improve time list contrast */
276+
.lightDatePickerInput {
277+
background-color: #ffffff !important;
278+
color: #111827 !important;
279+
border: 1px solid #d1d5db !important;
280+
}
281+
282+
.lightDatePicker {
283+
background-color: #ffffff !important;
284+
color: #111827 !important;
285+
border: 1px solid #d1d5db !important;
286+
}
287+
288+
.lightDatePicker .react-datepicker__header {
289+
background-color: #f1f5f9;
290+
border-color: #d1d5db;
291+
}
292+
293+
.lightDatePicker .react-datepicker__current-month,
294+
.lightDatePicker .react-datepicker__time-header,
295+
.lightDatePicker .react-datepicker-year-header {
296+
color: #111827 !important;
297+
}
298+
299+
.lightDatePicker .react-datepicker__day-name,
300+
.lightDatePicker .react-datepicker__day,
301+
.lightDatePicker .react-datepicker__time-name {
302+
color: #1f2937;
303+
}
304+
305+
.lightDatePicker .react-datepicker__day--selected,
306+
.lightDatePicker .react-datepicker__day--keyboard-selected,
307+
.lightDatePicker .react-datepicker__time-list-item--selected {
308+
background-color: #468ef9 !important;
309+
color: #ffffff !important;
310+
}
311+
312+
.lightDatePicker .react-datepicker__time-container {
313+
border-color: #d1d5db !important;
314+
background-color: #ffffff !important;
315+
}
316+
317+
.lightDatePicker .react-datepicker__time-container .react-datepicker__time {
318+
background-color: #ffffff !important;
319+
border-color: #d1d5db !important;
320+
}
321+
322+
.lightDatePicker .react-datepicker__time-container .react-datepicker__time-box {
323+
background-color: #ffffff !important;
324+
border-color: #d1d5db !important;
325+
}
326+
327+
.lightDatePicker .react-datepicker__time-container .react-datepicker__time-list {
328+
background-color: #ffffff !important;
329+
color: #1f2937 !important;
330+
border-color: #d1d5db !important;
331+
}
332+
333+
.lightDatePicker :global(.react-datepicker__time-container),
334+
.lightDatePicker :global(.react-datepicker__time-container .react-datepicker__time),
335+
.lightDatePicker :global(.react-datepicker__time-container .react-datepicker__time-box),
336+
.lightDatePicker :global(.react-datepicker__time-container .react-datepicker__time-box ul.react-datepicker__time-list) {
337+
background-color: #ffffff !important;
338+
border-color: #d1d5db !important;
339+
color: #1f2937 !important;
340+
}
341+
342+
.lightDatePicker :global(.react-datepicker__time-list-item) {
343+
background-color: #ffffff !important;
344+
color: #1f2937 !important;
345+
}
346+
347+
.lightDatePicker :global(.react-datepicker__time-list-item:hover),
348+
.lightDatePicker :global(.react-datepicker__time-list-item:focus) {
349+
background-color: #e5e7eb !important;
350+
color: #111827 !important;
351+
}
352+
353+
.lightDatePicker :global(.react-datepicker__time-list-item--selected) {
354+
background-color: #468ef9 !important;
355+
color: #ffffff !important;
356+
}
357+
358+
.lightDatePickerPopper .react-datepicker__triangle {
359+
display: none;
360+
}

‎src/components/BMDashboard/ItemList/ItemsTable.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export default function ItemsTable({
1212
filteredItems,
1313
UpdateItemModal,
1414
dynamicColumns,
15+
darkMode = false,
1516
}) {
1617
const [sortedData, setData] = useState(filteredItems);
1718
const [modal, setModal] = useState(false);
@@ -97,8 +98,8 @@ export default function ItemsTable({
9798
recordType={recordType}
9899
/>
99100
<UpdateItemModal modal={updateModal} setModal={setUpdateModal} record={updateRecord} />
100-
<div className={`${styles.itemsTableContainer}`}>
101-
<Table>
101+
<div className={`${styles.itemsTableContainer} ${darkMode ? styles.darkTableWrapper : ''}`}>
102+
<Table className={darkMode ? styles.darkTable : ''}>
102103
<thead>
103104
<tr>
104105
{selectedProject === 'all' ? (

0 commit comments

Comments
 (0)