Skip to content

Commit fc2386f

Browse files
mbehr1mbehr1
committed
fix(layout): vscode theme colors for icon button
Add primary and secondary color for IconButton. Close buttons use inherit color. Non main-use-case icons use secondary color.
1 parent 216b484 commit fc2386f

File tree

5 files changed

+30
-15
lines changed

5 files changed

+30
-15
lines changed

‎src/webview/src/App.js

+15
Original file line numberDiff line numberDiff line change
@@ -791,6 +791,21 @@ export default class App extends Component {
791791
// looks weird? fontWeightRegular: 'var(--vscode-font-weight)'
792792
},
793793
overrides: {
794+
MuiIconButton: {
795+
colorPrimary: {
796+
color: vscodeStyles.getPropertyValue('--vscode-button-background'),
797+
'&:hover': {
798+
color: vscodeStyles.getPropertyValue('--vscode-button-hoverBackground'),
799+
}
800+
},
801+
colorSecondary: {
802+
color: vscodeStyles.getPropertyValue('--vscode-button-secondaryBackground'),
803+
'&:hover': {
804+
color: vscodeStyles.getPropertyValue('--vscode-button-secondaryHoverBackground'),
805+
}
806+
}
807+
808+
},
794809
MuiRadio: {
795810
colorPrimary: {
796811
color: vscodeStyles.getPropertyValue('--vscode-button-background'),

‎src/webview/src/components/dataProviderEditDialog.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export default function DataProviderEditDialog(props) {
111111
<Dialog fullScreen open={props.open} onClose={handleClose}>
112112
<DialogTitle id="dpEditDialogTitle">
113113
{props.applyMode ? 'Edit appy filter settings...' : 'Edit badge and filter settings...'}
114-
<IconButton onClick={handleClose} color="primary" style={{ position: 'absolute', right: 1 }}>
114+
<IconButton onClick={handleClose} color="inherit" style={{ position: 'absolute', right: 1 }}>
115115
<CloseIcon />
116116
</IconButton>
117117
</DialogTitle>

‎src/webview/src/components/dltFilterAssistant.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -496,7 +496,7 @@ export default function DLTFilterAssistantDialog(props) {
496496
<Dialog fullScreen open={props.open} onClose={handleClose}>
497497
<DialogTitle id="dltFilterAssistantDialogTitle">
498498
DLT filter assistant...
499-
<IconButton onClick={handleClose} color="primary" style={{ position: 'absolute', right: 1 }}>
499+
<IconButton onClick={handleClose} color="inherit" style={{ position: 'absolute', right: 1 }}>
500500
<CloseIcon />
501501
</IconButton>
502502
</DialogTitle>

‎src/webview/src/components/fbaCheckbox.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -240,8 +240,8 @@ export default function FBACheckbox(props) {
240240
expandIcon={<ExpandMoreIcon />}
241241
id="backgroundDescription-textfield-header">
242242
<Typography gutterBottom variant="h6">Background</Typography>
243-
<IconButton size="small" aria-label="edit" onClick={(event) => { event.stopPropagation(); setTextFieldEditOpen(1); }} >
244-
<EditIcon fontSize="small" color="primary" />
243+
<IconButton color="primary" size="small" aria-label="edit" onClick={(event) => { event.stopPropagation(); setTextFieldEditOpen(1); }} >
244+
<EditIcon fontSize="small" />
245245
</IconButton>
246246
</AccordionSummary>
247247
<AccordionDetails>
@@ -263,8 +263,8 @@ export default function FBACheckbox(props) {
263263
expandIcon={<ExpandMoreIcon />}
264264
id="instructions-textfield-header">
265265
<Typography gutterBottom variant="h6">Instructions</Typography>
266-
<IconButton size="small" aria-label="edit" onClick={(event) => { event.stopPropagation(); setTextFieldEditOpen(2); }} >
267-
<EditIcon fontSize="small" color="primary" />
266+
<IconButton color="primary" size="small" aria-label="edit" onClick={(event) => { event.stopPropagation(); setTextFieldEditOpen(2); }} >
267+
<EditIcon fontSize="small" />
268268
</IconButton>
269269
</AccordionSummary>
270270
<AccordionDetails>
@@ -286,8 +286,8 @@ export default function FBACheckbox(props) {
286286
expandIcon={<ExpandMoreIcon />}
287287
id="background-textfield-header">
288288
<Typography gutterBottom variant="h6">Comments</Typography>
289-
<IconButton size="small" aria-label="edit" onClick={(event) => { event.stopPropagation(); setTextFieldEditOpen(3); }} >
290-
<EditIcon fontSize="small" color="primary" />
289+
<IconButton color="primary" size="small" aria-label="edit" onClick={(event) => { event.stopPropagation(); setTextFieldEditOpen(3); }} >
290+
<EditIcon fontSize="small" />
291291
</IconButton>
292292
</AccordionSummary>
293293
<AccordionDetails>
@@ -331,9 +331,9 @@ export default function FBACheckbox(props) {
331331
</Badge>
332332
</Grid>
333333
<Grid>
334-
<IconButton size="small" aria-label="edit" onClick={handleClickOpen} zIndex={2} style={{ 'padding': '4px 0px 2px 0px' }}>
335-
<EditIcon fontSize="small" color="primary" />
336-
</IconButton>
334+
<IconButton color="primary" size="small" aria-label="edit" onClick={handleClickOpen} color="primary" style={{ 'padding': '4px 0px 2px 0px' }}>
335+
<EditIcon fontSize="small" />
336+
</IconButton>
337337
</Grid>
338338
</Grid>
339339
</Box>

‎src/webview/src/components/fishbone/fishboneChart.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ export default function FishboneChart(props) {
143143
{fragment}
144144
</div>
145145
<div style={{position: 'relative', width:'5%'}}>
146-
<IconButton id={`rcMore_${keyFrag}`} onClick={handleMenuClick} size="small"><MoreVertIcon fontSize="small" /></IconButton>
146+
<IconButton id={`rcMore_${keyFrag}`} onClick={handleMenuClick} color="secondary" size="small"><MoreVertIcon fontSize="small" /></IconButton>
147147
<Menu key={`cm_root_causes_${keyFrag}`} anchorEl={menuAnchorEl} keepMounted open={menuOpen === `rcMore_${keyFrag}`} onClose={handleMenuClose}>
148148
{props.rootCauseContextMenu.filter(m => m !== undefined).map((menuItem, index) => <MenuItem onClick={(event) => { handleMenuClose(); menuItem?.cb(props.data, effectIndex, category, rootCause); }}>{menuItem.text}</MenuItem>)}
149149
</Menu>
@@ -178,7 +178,7 @@ export default function FishboneChart(props) {
178178
<OnBlurInputBase style={{ height: '1em' }} margin='dense' value={category.name} onChange={(event) => props.onChange(category, event, 'name')} />
179179
{props.categoryContextMenu && props.categoryContextMenu.length > 0 && /* todo race cond if all items are undefined... */
180180
<React.Fragment>
181-
<IconButton id={`top_cat_${index}`} onClick={handleMenuClick} size="small"><MoreVertIcon fontSize="small" /></IconButton>
181+
<IconButton id={`top_cat_${index}`} onClick={handleMenuClick} color="secondary" size="small"><MoreVertIcon fontSize="small" /></IconButton>
182182
<Menu id={`top_cat_${index}`} anchorEl={menuAnchorEl} keepMounted open={menuOpen === `top_cat_${index}`} onClose={handleMenuClose}>
183183
{props.categoryContextMenu.filter(m => m !== undefined).map((menuItem, index) => <MenuItem onClick={() => { handleMenuClose(); menuItem?.cb(props.data, effectIndex, category); }}>{menuItem.text}</MenuItem>)}
184184
</Menu>
@@ -203,7 +203,7 @@ export default function FishboneChart(props) {
203203
<OnBlurInputBase style={{ height: '1em' }} margin='dense' value={category.name} onChange={(event) => props.onChange(category, event, 'name')} />
204204
{props.categoryContextMenu && props.categoryContextMenu.length > 0 &&
205205
<React.Fragment>
206-
<IconButton id={`bottom_cat_${index}`} onClick={handleMenuClick} size="small"><MoreVertIcon fontSize="small" /></IconButton>
206+
<IconButton id={`bottom_cat_${index}`} onClick={handleMenuClick} color="secondary" size="small"><MoreVertIcon fontSize="small" /></IconButton>
207207
<Menu id={`bottom_cat_${index}`} anchorEl={menuAnchorEl} keepMounted open={menuOpen === `bottom_cat_${index}`} onClose={handleMenuClose}>
208208
{props.categoryContextMenu.filter(m => m !== undefined).map((menuItem, index) => <MenuItem onClick={() => { handleMenuClose(); menuItem?.cb(props.data, effectIndex, category); }}>{menuItem.text}</MenuItem>)}
209209
</Menu>
@@ -237,7 +237,7 @@ export default function FishboneChart(props) {
237237
</div>
238238
{props.effectContextMenu && props.effectContextMenu.length > 0 &&
239239
<React.Fragment>
240-
<IconButton id={`effect_${effectIndex}`} onClick={handleMenuClick} size="small"><MoreVertIcon fontSize="small" /></IconButton>
240+
<IconButton id={`effect_${effectIndex}`} onClick={handleMenuClick} color="secondary" size="small"><MoreVertIcon fontSize="small" /></IconButton>
241241
<Menu anchorEl={menuAnchorEl} keepMounted open={menuOpen === `effect_${effectIndex}`} onClose={handleMenuClose}>
242242
{props.effectContextMenu.filter(e => e !== undefined).map((menuItem, index) => <MenuItem onClick={() => { handleMenuClose(); menuItem?.cb(props.data, effectIndex); }}>{menuItem.text}</MenuItem>)}
243243
</Menu>

0 commit comments

Comments
 (0)