Skip to content

Commit 2f92511

Browse files
alejandro-n-riveraalejandro-n-rivera
authored
fix admin Extension Scans light theme UI (#1543)
1 parent ecb8e7a commit 2f92511

File tree

6 files changed

+26
-23
lines changed

6 files changed

+26
-23
lines changed

‎webui/src/components/scan-admin/common/file-table.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@ export const FileTable: FunctionComponent<FileTableProps> = (props) => {
274274
checked={allSelected}
275275
onChange={handleSelectAll}
276276
sx={{
277-
color: theme.palette.scanBackground.light,
277+
color: theme.palette.checkboxUnchecked,
278278
'&.Mui-checked': {
279279
color: 'secondary.main',
280280
},
@@ -433,7 +433,7 @@ export const FileTable: FunctionComponent<FileTableProps> = (props) => {
433433
<Checkbox
434434
checked={selected}
435435
sx={{
436-
color: theme.palette.scanBackground.light,
436+
color: theme.palette.checkboxUnchecked,
437437
'&.Mui-checked': {
438438
color: 'secondary.main',
439439
},

‎webui/src/components/scan-admin/scan-card/scan-card.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,12 +76,12 @@ export const ScanCard: FunctionComponent<ScanCardProps> = ({
7676
position: 'relative',
7777
mb: 1.5,
7878
borderRadius: 2,
79-
boxShadow: 2,
79+
boxShadow: theme.palette.mode === 'light' ? 4 : 2,
8080
backgroundColor: 'transparent',
8181
outline: checked ? '2px solid' : 'none',
8282
outlineColor: checked ? 'secondary.main' : 'transparent',
8383
'&:hover': {
84-
boxShadow: 4,
84+
boxShadow: theme.palette.mode === 'light' ? 6 : 4,
8585
},
8686
overflow: 'hidden',
8787
paddingLeft: '16px',

‎webui/src/components/scan-admin/toolbars/counts-toolbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ export const CountsToolbar: FunctionComponent<CountsToolbarProps> = ({
173173
checked={option.checked}
174174
size='small'
175175
sx={{
176-
color: 'rgba(255, 255, 255, 0.23)',
176+
color: theme.palette.checkboxUnchecked,
177177
'&.Mui-checked': {
178178
color: theme.palette.secondary.main,
179179
},

‎webui/src/components/scan-admin/toolbars/search-toolbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ export const SearchToolbar: FunctionComponent<SearchToolbarProps> = ({
158158
disabled={filter.disabled}
159159
size='small'
160160
sx={{
161-
color: 'rgba(255, 255, 255, 0.23)',
161+
color: theme.palette.checkboxUnchecked,
162162
'&.Mui-checked': {
163163
color: theme.palette.secondary.main,
164164
},

‎webui/src/context/scan-admin/scan-api-effects.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,6 @@ export const useScansEffect = (
234234
state.dateRange,
235235
state.enforcement,
236236
state.refreshTrigger,
237-
state.scans.length,
238237
dispatch,
239238
handleErrorRef,
240239
]);

‎webui/src/default/theme.tsx‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ interface UnenforcedColors {
5252
interface CustomPaletteColors {
5353
neutral: NeutralColors;
5454
textHint: Color;
55+
checkboxUnchecked: Color;
5556
passed: StatusColors;
5657
quarantined: StatusColors;
5758
rejected: StatusColors;
@@ -89,35 +90,36 @@ export default function createDefaultTheme(themeType: 'light' | 'dark'): Theme {
8990
dark: themeType === 'dark' ? '#151515' : '#fff',
9091
},
9192
textHint: 'rgba(0, 0, 0, 0.38)',
93+
checkboxUnchecked: themeType === 'dark' ? 'rgba(255, 255, 255, 0.23)' : 'rgba(0, 0, 0, 0.23)',
9294
passed: {
93-
dark: '#2e5c32',
94-
light: '#a5d6a7',
95+
dark: themeType === 'dark' ? '#2e5c32' : '#4db052',
96+
light: themeType === 'dark' ? '#a5d6a7' : '#c8e6c9',
9597
},
9698
quarantined: {
97-
dark: '#8e5518',
98-
light: '#ffcc80',
99+
dark: themeType === 'dark' ? '#8e5518' : '#e09030',
100+
light: themeType === 'dark' ? '#ffcc80' : '#ffe0b2',
99101
},
100102
rejected: {
101-
dark: '#7d2e2e',
102-
light: '#ef9a9a',
103+
dark: themeType === 'dark' ? '#7d2e2e' : '#d63c3c',
104+
light: themeType === 'dark' ? '#ef9a9a' : '#ffcdd2',
103105
},
104106
errorStatus: {
105-
dark: '#5a5a5a',
106-
light: '#b0b0b0',
107+
dark: themeType === 'dark' ? '#5a5a5a' : '#8a8a8a',
108+
light: themeType === 'dark' ? '#b0b0b0' : '#e0e0e0',
107109
},
108110
allowed: '#4caf50',
109111
blocked: '#f44336',
110-
review: '#ffc107',
112+
review: '#e6a800',
111113
selected: {
112114
border: '#c160ef',
113-
background: '#3d1b4d',
114-
backgroundHover: '#4d2360',
115-
hover: 'rgba(255, 255, 255, 0.1)',
115+
background: themeType === 'dark' ? '#3d1b4d' : '#f3e5f9',
116+
backgroundHover: themeType === 'dark' ? '#4d2360' : '#e9d5f5',
117+
hover: themeType === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.04)',
116118
},
117119
scanBackground: {
118-
default: '#1e1e1e',
119-
light: '#2d2d2d',
120-
dark: '#0a0a0a',
120+
default: themeType === 'dark' ? '#1e1e1e' : '#f5f5f5',
121+
light: themeType === 'dark' ? '#2d2d2d' : '#f0f0f0',
122+
dark: themeType === 'dark' ? '#0a0a0a' : '#fafafa',
121123
},
122124
gray: {
123125
start: '#888888',
@@ -126,7 +128,9 @@ export default function createDefaultTheme(themeType: 'light' | 'dark'): Theme {
126128
gradient: 'linear-gradient(90deg, #888888 0%, #cccccc 50%, #888888 100%)',
127129
},
128130
unenforced: {
129-
stripe: 'repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(255, 255, 255, 0.1) 4px, rgba(255, 255, 255, 0.1) 8px)',
131+
stripe: themeType === 'dark'
132+
? 'repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(255, 255, 255, 0.12) 4px, rgba(255, 255, 255, 0.12) 8px)'
133+
: 'repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(0, 0, 0, 0.12) 4px, rgba(0, 0, 0, 0.12) 8px)',
130134
},
131135
mode: themeType
132136
},

0 commit comments

Comments
 (0)