Merge branch '20219-log-api' into main. Closes #20219

[arvados.git] / src / views / process-panel / process-details-card.tsx

diff --git a/src/views/process-panel/process-details-card.tsx b/src/views/process-panel/process-details-card.tsx
index 15728eb61f971bc48d484064f121934bec20517e..37f01dd70163c2a51c9a5c08220dada138f853ba 100644 (file)
--- a/src/views/process-panel/process-details-card.tsx
+++ b/src/views/process-panel/process-details-card.tsx
@@ -16,7 +16,7 @@ import {
     Button,
 } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
-import { CloseIcon, MoreOptionsIcon, ProcessIcon, StartIcon, StopIcon } from 'components/icon/icon';
+import { CloseIcon, MoreVerticalIcon, ProcessIcon, StartIcon, StopIcon } from 'components/icon/icon';
 import { Process, isProcessRunnable, isProcessResumable, isProcessCancelable } from 'store/processes/process';
 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
 import { ProcessDetailsAttributes } from './process-details-attributes';
@@ -59,10 +59,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         fontSize: '0.78rem',
     },
     cancelButton: {
-        color: theme.customs.colors.red900,
-        borderColor: theme.customs.colors.red900,
+        color: theme.palette.common.white,
+        backgroundColor: theme.customs.colors.red900,
         '&:hover': {
-            borderColor: theme.customs.colors.red900,
+            backgroundColor: theme.customs.colors.red900,
         },
         '& svg': {
             fontSize: '22px',
@@ -126,7 +126,7 @@ export const ProcessDetailsCard = withStyles(styles)(
                         {isProcessCancelable(process) &&
                             <Button
                                 data-cy="process-cancel-button"
-                                variant="outlined"
+                                variant="contained"
                                 size="small"
                                 color="primary"
                                 className={classNames(classes.actionButton, classes.cancelButton)}
@@ -139,13 +139,13 @@ export const ProcessDetailsCard = withStyles(styles)(
                             <IconButton
                                 aria-label="More options"
                                 onClick={event => onContextMenu(event)}>
-                                <MoreOptionsIcon />
+                                <MoreVerticalIcon />
                             </IconButton>
                         </Tooltip>
-                        { doHidePanel &&
-                        <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
-                            <IconButton onClick={doHidePanel}><CloseIcon /></IconButton>
-                        </Tooltip> }
+                        {doHidePanel &&
+                            <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
+                                <IconButton onClick={doHidePanel}><CloseIcon /></IconButton>
+                            </Tooltip>}
                     </div>
                 } />
             <CardContent className={classes.content}>