Skip to content

Commit f7f7bcb

Browse files
somramnanisomramnani
authored
Merge branch 'development' into som-fix/ending-after-figma-mismatch
2 parents c24d29a + 0366e43 commit f7f7bcb

94 files changed

Lines changed: 26743 additions & 12632 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎package-lock.json‎

Lines changed: 18098 additions & 8179 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
2+
"$schema": "https://json.schemastore.org/package.json",
23
"name": "hgnreactapp",
34
"version": "0.1.0",
45
"license": "GPL-2.0",

‎public/index.css‎

Lines changed: 321 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,325 @@
11
/* public/index.css */
2+
3+
/* Global Dark Mode Styles */
4+
body.dark-mode,
5+
body.bm-dashboard-dark {
6+
background-color: #1b2a41 !important;
7+
color: #ffffff !important;
8+
}
9+
10+
body.dark-mode #root,
11+
body.bm-dashboard-dark #root {
12+
background-color: #1b2a41 !important;
13+
color: #ffffff !important;
14+
}
15+
16+
/* Enhanced text visibility for dark mode */
17+
body.dark-mode *,
18+
body.bm-dashboard-dark * {
19+
color: #ffffff !important;
20+
}
21+
22+
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
23+
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
24+
body.bm-dashboard-dark h1, body.bm-dashboard-dark h2, body.bm-dashboard-dark h3,
25+
body.bm-dashboard-dark h4, body.bm-dashboard-dark h5, body.bm-dashboard-dark h6 {
26+
color: #ffffff !important;
27+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
28+
}
29+
30+
body.dark-mode p, body.dark-mode span, body.dark-mode div,
31+
body.dark-mode label, body.dark-mode a, body.dark-mode li,
32+
body.bm-dashboard-dark p, body.bm-dashboard-dark span, body.bm-dashboard-dark div,
33+
body.bm-dashboard-dark label, body.bm-dashboard-dark a, body.bm-dashboard-dark li {
34+
color: #ffffff !important;
35+
}
36+
37+
body.dark-mode .text-muted,
38+
body.bm-dashboard-dark .text-muted {
39+
color: #b8c5d1 !important;
40+
}
41+
42+
body.dark-mode .text-secondary,
43+
body.bm-dashboard-dark .text-secondary {
44+
color: #d1d8e0 !important;
45+
}
46+
47+
body.dark-mode .text-primary,
48+
body.bm-dashboard-dark .text-primary {
49+
color: #66b3ff !important;
50+
}
51+
52+
body.dark-mode .text-success,
53+
body.bm-dashboard-dark .text-success {
54+
color: #66ff99 !important;
55+
}
56+
57+
body.dark-mode .text-warning,
58+
body.bm-dashboard-dark .text-warning {
59+
color: #ffcc66 !important;
60+
}
61+
62+
body.dark-mode .text-danger,
63+
body.bm-dashboard-dark .text-danger {
64+
color: #ff6666 !important;
65+
}
66+
67+
body.dark-mode .text-info,
68+
body.bm-dashboard-dark .text-info {
69+
color: #66ffff !important;
70+
}
71+
72+
/* Dark mode for common elements */
73+
body.dark-mode .container,
74+
body.dark-mode .container-fluid,
75+
body.bm-dashboard-dark .container,
76+
body.bm-dashboard-dark .container-fluid {
77+
background-color: #1b2a41;
78+
color: #ffffff;
79+
}
80+
81+
body.dark-mode .card,
82+
body.bm-dashboard-dark .card {
83+
background-color: #2e5061;
84+
border-color: #3a506b;
85+
color: #ffffff;
86+
}
87+
88+
body.dark-mode .card-body,
89+
body.bm-dashboard-dark .card-body {
90+
color: #ffffff;
91+
}
92+
93+
body.dark-mode .card-title,
94+
body.bm-dashboard-dark .card-title {
95+
color: #ffffff !important;
96+
}
97+
98+
body.dark-mode .card-text,
99+
body.bm-dashboard-dark .card-text {
100+
color: #ffffff !important;
101+
}
102+
103+
body.dark-mode .card-header,
104+
body.bm-dashboard-dark .card-header {
105+
background-color: #3a506b;
106+
border-color: #4a6072;
107+
color: #ffffff !important;
108+
}
109+
110+
body.dark-mode .form-control,
111+
body.bm-dashboard-dark .form-control {
112+
background-color: #2e5061;
113+
border-color: #3a506b;
114+
color: #ffffff !important;
115+
}
116+
117+
body.dark-mode .form-control::placeholder,
118+
body.bm-dashboard-dark .form-control::placeholder {
119+
color: #b8c5d1 !important;
120+
}
121+
122+
body.dark-mode .form-control:focus,
123+
body.bm-dashboard-dark .form-control:focus {
124+
background-color: #2e5061;
125+
border-color: #4a6072;
126+
color: #ffffff !important;
127+
box-shadow: 0 0 0 0.2rem rgba(74, 96, 114, 0.25);
128+
}
129+
130+
body.dark-mode .form-label,
131+
body.bm-dashboard-dark .form-label {
132+
color: #ffffff !important;
133+
}
134+
135+
body.dark-mode .btn-primary,
136+
body.bm-dashboard-dark .btn-primary {
137+
background-color: #3a506b;
138+
border-color: #3a506b;
139+
color: #ffffff !important;
140+
}
141+
142+
body.dark-mode .btn-primary:hover,
143+
body.bm-dashboard-dark .btn-primary:hover {
144+
background-color: #4a6072;
145+
border-color: #4a6072;
146+
color: #ffffff !important;
147+
}
148+
149+
body.dark-mode .btn-secondary,
150+
body.bm-dashboard-dark .btn-secondary {
151+
background-color: #2e5061;
152+
border-color: #2e5061;
153+
color: #ffffff !important;
154+
}
155+
156+
body.dark-mode .btn-secondary:hover,
157+
body.bm-dashboard-dark .btn-secondary:hover {
158+
background-color: #3a506b;
159+
border-color: #3a506b;
160+
color: #ffffff !important;
161+
}
162+
163+
body.dark-mode .btn,
164+
body.bm-dashboard-dark .btn {
165+
color: #ffffff !important;
166+
}
167+
168+
body.dark-mode .table,
169+
body.bm-dashboard-dark .table {
170+
color: #ffffff !important;
171+
}
172+
173+
body.dark-mode .table th,
174+
body.dark-mode .table td,
175+
body.bm-dashboard-dark .table th,
176+
body.bm-dashboard-dark .table td {
177+
color: #ffffff !important;
178+
border-color: #3a506b;
179+
}
180+
181+
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd),
182+
body.bm-dashboard-dark .table-striped > tbody > tr:nth-of-type(odd) {
183+
background-color: rgba(46, 80, 97, 0.5);
184+
color: #ffffff !important;
185+
}
186+
187+
body.dark-mode .modal-content,
188+
body.bm-dashboard-dark .modal-content {
189+
background-color: #2e5061;
190+
color: #ffffff !important;
191+
}
192+
193+
body.dark-mode .modal-header,
194+
body.bm-dashboard-dark .modal-header {
195+
background-color: #3a506b;
196+
border-color: #4a6072;
197+
color: #ffffff !important;
198+
}
199+
200+
body.dark-mode .modal-title,
201+
body.bm-dashboard-dark .modal-title {
202+
color: #ffffff !important;
203+
}
204+
205+
body.dark-mode .modal-body,
206+
body.bm-dashboard-dark .modal-body {
207+
color: #ffffff !important;
208+
}
209+
210+
body.dark-mode .modal-footer,
211+
body.bm-dashboard-dark .modal-footer {
212+
background-color: #3a506b;
213+
border-color: #4a6072;
214+
color: #ffffff !important;
215+
}
216+
217+
body.dark-mode .nav-tabs .nav-link,
218+
body.bm-dashboard-dark .nav-tabs .nav-link {
219+
background-color: #2e5061;
220+
border-color: #3a506b;
221+
color: #ffffff !important;
222+
}
223+
224+
body.dark-mode .nav-tabs .nav-link.active,
225+
body.bm-dashboard-dark .nav-tabs .nav-link.active {
226+
background-color: #3a506b;
227+
border-color: #4a6072;
228+
color: #ffffff !important;
229+
}
230+
231+
/* Navigation and menu items */
232+
body.dark-mode .nav-link,
233+
body.bm-dashboard-dark .nav-link {
234+
color: #ffffff !important;
235+
}
236+
237+
body.dark-mode .navbar,
238+
body.bm-dashboard-dark .navbar {
239+
background-color: #1b2a41 !important;
240+
}
241+
242+
body.dark-mode .navbar-brand,
243+
body.bm-dashboard-dark .navbar-brand {
244+
color: #ffffff !important;
245+
}
246+
247+
body.dark-mode .dropdown-menu,
248+
body.bm-dashboard-dark .dropdown-menu {
249+
background-color: #2e5061;
250+
border-color: #3a506b;
251+
}
252+
253+
body.dark-mode .dropdown-item,
254+
body.bm-dashboard-dark .dropdown-item {
255+
color: #ffffff !important;
256+
}
257+
258+
body.dark-mode .dropdown-item:hover,
259+
body.bm-dashboard-dark .dropdown-item:hover {
260+
background-color: #3a506b;
261+
color: #ffffff !important;
262+
}
263+
264+
/* Alert components */
265+
body.dark-mode .alert,
266+
body.bm-dashboard-dark .alert {
267+
color: #ffffff !important;
268+
}
269+
270+
body.dark-mode .alert-primary,
271+
body.bm-dashboard-dark .alert-primary {
272+
background-color: #3a506b;
273+
border-color: #4a6072;
274+
color: #ffffff !important;
275+
}
276+
277+
body.dark-mode .alert-secondary,
278+
body.bm-dashboard-dark .alert-secondary {
279+
background-color: #2e5061;
280+
border-color: #3a506b;
281+
color: #ffffff !important;
282+
}
283+
284+
/* List groups */
285+
body.dark-mode .list-group-item,
286+
body.bm-dashboard-dark .list-group-item {
287+
background-color: #2e5061;
288+
border-color: #3a506b;
289+
color: #ffffff !important;
290+
}
291+
292+
/* Breadcrumbs */
293+
body.dark-mode .breadcrumb,
294+
body.bm-dashboard-dark .breadcrumb {
295+
background-color: #2e5061;
296+
}
297+
298+
body.dark-mode .breadcrumb-item,
299+
body.bm-dashboard-dark .breadcrumb-item {
300+
color: #ffffff !important;
301+
}
302+
303+
body.dark-mode .breadcrumb-item.active,
304+
body.bm-dashboard-dark .breadcrumb-item.active {
305+
color: #b8c5d1 !important;
306+
}
307+
308+
/* Pagination */
309+
body.dark-mode .page-link,
310+
body.bm-dashboard-dark .page-link {
311+
background-color: #2e5061;
312+
border-color: #3a506b;
313+
color: #ffffff !important;
314+
}
315+
316+
body.dark-mode .page-item.active .page-link,
317+
body.bm-dashboard-dark .page-item.active .page-link {
318+
background-color: #3a506b;
319+
border-color: #4a6072;
320+
color: #ffffff !important;
321+
}
322+
2323
/* Fix the position of the header at the top */
3324
.top {
4325
position: fixed;

‎src/components/App.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import Loading from './common/Loading';
1212
import '../App.css';
1313
import { initMessagingSocket } from '../utils/messagingSocket';
1414
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
15+
import ThemeManager from './common/ThemeManager';
1516

1617
const queryClient = new QueryClient({
1718
defaultOptions: {
@@ -228,6 +229,7 @@ class App extends Component {
228229
<QueryClientProvider client={queryClient}>
229230
<ModalProvider>
230231
<Router>
232+
<ThemeManager />
231233
<UpdateDocumentTitle />
232234
{routes}
233235
</Router>

0 commit comments

Comments
 (0)