Skip to content

Commit f6b1e9e

Browse files
Schero94Schero94
committed
fix: dark/light mode compatibility for entire admin UI
- Replace all theme.colors.* refs with CSS variables (var(--colors-xxx)) - Replace hardcoded hex borders with rgba values - Replace background="white" with background="neutral0" - Replace hardcoded text colors with CSS variables - Affects: HomePage, Settings, SettingsNew, Analytics, StyledButtons, SessionDetailModal, SessionInfoPanel, UpgradePage, License, LicenseGuard, OnlineUsersWidget
1 parent f054ba9 commit f6b1e9e

11 files changed

Lines changed: 322 additions & 322 deletions

‎admin/src/components/LicenseGuard.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const ModalOverlay = styled.div`
4848
`;
4949

5050
const ModalContent = styled(Box)`
51-
background: white;
51+
background: var(--colors-neutral0, white);
5252
border-radius: 16px;
5353
width: 100%;
5454
max-width: 580px;
@@ -401,7 +401,7 @@ const LicenseGuard = ({ children }) => {
401401
padding={4}
402402
style={{
403403
borderRadius: '8px',
404-
border: '2px solid #BAE6FD',
404+
border: '2px solid rgba(14, 165, 233, 0.3)',
405405
width: '100%',
406406
}}
407407
>
@@ -468,12 +468,12 @@ const LicenseGuard = ({ children }) => {
468468
padding={5}
469469
style={{
470470
borderRadius: '8px',
471-
border: '2px solid #DCFCE7',
471+
border: '2px solid rgba(34, 197, 94, 0.3)',
472472
textAlign: 'center',
473473
}}
474474
>
475475
<Typography variant="omega" fontWeight="bold" style={{ marginBottom: '12px', display: 'block' }}>
476-
Ready to activate with your account:
476+
Ready to activate with your account
477477
</Typography>
478478
<Typography variant="pi" style={{ marginBottom: '4px', display: 'block' }}>
479479
{adminUser.firstname || 'Admin'} {adminUser.lastname || 'User'}

‎admin/src/components/OnlineUsersWidget.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ const OnlineUsersWidget = () => {
108108
textDecoration: 'none',
109109
cursor: 'default',
110110
transition: 'box-shadow 0.2s',
111-
border: '1px solid #f0f0ff',
111+
border: '1px solid rgba(128, 128, 128, 0.1)',
112112
}}
113113
>
114114
<Flex justifyContent="space-between" alignItems="flex-start">

‎admin/src/components/SessionDetailModal.jsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,10 @@ const SectionTitle = styled(Typography)`
4848
letter-spacing: 0.5px;
4949
font-size: 11px;
5050
font-weight: 700;
51-
color: #374151;
51+
color: var(--colors-neutral800);
5252
margin-bottom: 16px;
5353
padding-bottom: 8px;
54-
border-bottom: 2px solid #e5e7eb;
54+
border-bottom: 2px solid rgba(128, 128, 128, 0.2);
5555
display: block;
5656
`;
5757

@@ -72,16 +72,16 @@ const ModalStatusBadge = styled.span`
7272
text-transform: uppercase;
7373
7474
${props => props.$online && `
75-
background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
76-
color: #166534;
77-
border: 2px solid #86EFAC;
75+
background: linear-gradient(135deg, rgba(22, 163, 74, 0.12) 0%, rgba(34, 197, 94, 0.3) 100%);
76+
color: var(--colors-success600, #166534);
77+
border: 2px solid rgba(34, 197, 94, 0.3);
7878
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
7979
`}
8080
8181
${props => !props.$online && `
82-
background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
83-
color: #4B5563;
84-
border: 2px solid #D1D5DB;
82+
background: linear-gradient(135deg, rgba(128, 128, 128, 0.08) 0%, rgba(128, 128, 128, 0.2) 100%);
83+
color: var(--colors-neutral600);
84+
border: 2px solid rgba(128, 128, 128, 0.2);
8585
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
8686
`}
8787
`;
@@ -92,13 +92,13 @@ const StatusDot = styled.span`
9292
border-radius: 50%;
9393
9494
${props => props.$online && `
95-
background: #22C55E;
95+
background: var(--colors-success600, #22C55E);
9696
box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
9797
animation: pulse-green 2s ease-in-out infinite;
9898
`}
9999
100100
${props => !props.$online && `
101-
background: #9CA3AF;
101+
background: var(--colors-neutral500);
102102
`}
103103
104104
@keyframes pulse-green {
@@ -234,7 +234,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
234234
display: 'flex',
235235
alignItems: 'center',
236236
justifyContent: 'center',
237-
background: '#f3f4f6',
237+
background: 'var(--colors-neutral100)',
238238
borderRadius: '8px',
239239
flexShrink: 0,
240240
}}>
@@ -261,7 +261,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
261261
width: '48px',
262262
height: '48px',
263263
borderRadius: '12px',
264-
background: isOnline ? '#dcfce7' : '#f3f4f6',
264+
background: isOnline ? 'rgba(22, 163, 74, 0.12)' : 'var(--colors-neutral100)',
265265
display: 'flex',
266266
alignItems: 'center',
267267
justifyContent: 'center',
@@ -424,18 +424,18 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
424424
<Box
425425
padding={5}
426426
style={{
427-
background: 'linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%)',
427+
background: 'linear-gradient(135deg, rgba(234, 179, 8, 0.12) 0%, rgba(234, 179, 8, 0.25) 100%)',
428428
borderRadius: '12px',
429-
border: '2px solid #fbbf24',
429+
border: '2px solid rgba(234, 179, 8, 0.4)',
430430
textAlign: 'center',
431431
}}
432432
>
433433
<Flex direction="column" alignItems="center" gap={3}>
434-
<Crown style={{ width: '40px', height: '40px', color: '#d97706' }} />
435-
<Typography variant="beta" style={{ color: '#92400e', fontWeight: '700' }}>
434+
<Crown style={{ width: '40px', height: '40px', color: 'var(--colors-warning600, #d97706)' }} />
435+
<Typography variant="beta" style={{ color: 'var(--colors-warning600, #92400e)', fontWeight: '700' }}>
436436
{t('modal.premium.title', 'Location and Security Analysis')}
437437
</Typography>
438-
<Typography variant="omega" style={{ color: '#78350f', fontSize: '14px', lineHeight: '1.6' }}>
438+
<Typography variant="omega" style={{ color: 'var(--colors-warning600, #78350f)', fontSize: '14px', lineHeight: '1.6' }}>
439439
{t('modal.premium.description', 'Unlock premium features to get IP geolocation, security scoring, and VPN/Proxy detection for every session')}
440440
</Typography>
441441
<PremiumButton

‎admin/src/components/SessionInfoPanel.jsx‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -16,39 +16,39 @@ const PanelContainer = styled(Box)`
1616
const StatusCard = styled(Box)`
1717
padding: 20px;
1818
border-radius: 12px;
19-
border: 1px solid ${props => props.$isOnline ? '#BBF7D0' : '#E5E7EB'};
19+
border: 1px solid ${props => props.$isOnline ? 'rgba(34, 197, 94, 0.3)' : 'rgba(128, 128, 128, 0.2)'};
2020
background: ${props => props.$isOnline
21-
? 'linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%)'
22-
: 'linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%)'};
21+
? 'linear-gradient(135deg, rgba(22, 163, 74, 0.06) 0%, rgba(22, 163, 74, 0.12) 100%)'
22+
: 'linear-gradient(135deg, rgba(128, 128, 128, 0.04) 0%, rgba(128, 128, 128, 0.08) 100%)'};
2323
transition: all 0.2s ease;
2424
`;
2525

2626
const BlockedWarning = styled(Box)`
2727
padding: 16px;
2828
border-radius: 10px;
29-
background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
30-
border: 1px solid #FECACA;
29+
background: linear-gradient(135deg, rgba(220, 38, 38, 0.06) 0%, rgba(220, 38, 38, 0.12) 100%);
30+
border: 1px solid rgba(239, 68, 68, 0.4);
3131
`;
3232

3333
const SessionCard = styled(Box)`
3434
padding: 16px;
35-
background: white;
35+
background: var(--colors-neutral0, white);
3636
border-radius: 10px;
37-
border: 1px solid #E5E7EB;
37+
border: 1px solid rgba(128, 128, 128, 0.2);
3838
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
3939
transition: all 0.2s ease;
4040
4141
&:hover {
4242
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
43-
border-color: #0EA5E9;
43+
border-color: var(--colors-primary600, #0EA5E9);
4444
}
4545
`;
4646

4747
const EmptyState = styled(Box)`
4848
padding: 32px;
49-
background: #F9FAFB;
49+
background: var(--colors-neutral100);
5050
border-radius: 12px;
51-
border: 2px dashed #E5E7EB;
51+
border: 2px dashed rgba(128, 128, 128, 0.2);
5252
text-align: center;
5353
`;
5454

@@ -59,17 +59,17 @@ const EmptyIcon = styled(Box)`
5959
display: flex;
6060
align-items: center;
6161
justify-content: center;
62-
background: #E5E7EB;
62+
background: rgba(128, 128, 128, 0.2);
6363
border-radius: 50%;
64-
color: #9CA3AF;
64+
color: var(--colors-neutral500);
6565
`;
6666

6767
const SectionLabel = styled(Typography)`
6868
text-transform: uppercase;
6969
letter-spacing: 0.5px;
7070
font-size: 11px !important;
7171
font-weight: 700 !important;
72-
color: #6B7280;
72+
color: var(--colors-neutral600);
7373
margin-bottom: 12px;
7474
display: block;
7575
`;
@@ -88,23 +88,23 @@ const ActionButton = styled.button`
8888
transition: all 0.2s ease;
8989
9090
${props => props.$variant === 'danger' && `
91-
background: white;
92-
color: #DC2626;
93-
border: 2px solid #DC2626;
91+
background: var(--colors-neutral0, white);
92+
color: var(--colors-danger600, #DC2626);
93+
border: 2px solid var(--colors-danger600, #DC2626);
9494
9595
&:hover:not(:disabled) {
96-
background: #DC2626;
96+
background: var(--colors-danger600, #DC2626);
9797
color: white;
9898
}
9999
`}
100100
101101
${props => props.$variant === 'success' && `
102-
background: white;
103-
color: #16A34A;
104-
border: 2px solid #16A34A;
102+
background: var(--colors-neutral0, white);
103+
color: var(--colors-success600, #16A34A);
104+
border: 2px solid var(--colors-success600, #16A34A);
105105
106106
&:hover:not(:disabled) {
107-
background: #16A34A;
107+
background: var(--colors-success600, #16A34A);
108108
color: white;
109109
}
110110
`}
@@ -126,14 +126,14 @@ const IconWrapper = styled(Box)`
126126
display: flex;
127127
align-items: center;
128128
justify-content: center;
129-
background: #F3F4F6;
129+
background: var(--colors-neutral100);
130130
border-radius: 8px;
131131
flex-shrink: 0;
132132
133133
svg {
134134
width: 16px;
135135
height: 16px;
136-
color: #6B7280;
136+
color: var(--colors-neutral600);
137137
}
138138
`;
139139

@@ -341,14 +341,14 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
341341
<Divider />
342342

343343
<Flex gap={2} alignItems="center">
344-
<Server width="14px" height="14px" style={{ color: '#9CA3AF' }} />
344+
<Server width="14px" height="14px" style={{ color: 'var(--colors-neutral500)' }} />
345345
<Typography variant="pi" textColor="neutral600">
346346
{session.ipAddress}
347347
</Typography>
348348
</Flex>
349349

350350
<Flex gap={2} alignItems="center">
351-
<Clock width="14px" height="14px" style={{ color: '#9CA3AF' }} />
351+
<Clock width="14px" height="14px" style={{ color: 'var(--colors-neutral500)' }} />
352352
<Typography variant="pi" textColor="neutral600">
353353
{new Date(session.loginTime).toLocaleString('en-US', {
354354
month: 'short',

0 commit comments

Comments
 (0)