F #3951: Fix close button dialog as x (#965)

OpenNebula · Mar 12, 2021 · 3e019b0 · 3e019b0
1 parent f200922
commit 3e019b0
Showing 1 changed file with 26 additions and 20 deletions.
diff --git a/src/fireedge/src/client/components/Dialogs/DialogConfirmation.js b/src/fireedge/src/client/components/Dialogs/DialogConfirmation.js
@@ -3,14 +3,15 @@ import PropTypes from 'prop-types'
 
 import {
   useMediaQuery,
-  Button,
   Dialog,
   DialogTitle,
   DialogContent,
   DialogActions,
   Typography,
+  IconButton,
   makeStyles
 } from '@material-ui/core'
+import { Close as CloseIcon } from '@material-ui/icons'
 
 import { SubmitButton } from 'client/components/FormControl'
 import { Tr } from 'client/components/HOC'
@@ -25,6 +26,11 @@ const useStyles = makeStyles(theme => ({
       width: '100%',
       height: '100%'
     }
+  },
+  closeButton: {
+    position: 'absolute',
+    right: '0.5em',
+    top: '0.5em'
   }
 }))
 
@@ -59,30 +65,30 @@ const DialogConfirmation = memo(
         <DialogTitle disableTypography>
           <Typography variant='h6'>{title}</Typography>
           {subheader && <Typography variant='subtitle1'>{subheader}</Typography>}
+          {handleCancel && (
+            <IconButton
+              aria-label="close"
+              className={classes.closeButton}
+              onClick={handleCancel}
+              data-cy='dg-cancel-button'
+              {...cancelButtonProps}
+            >
+              <CloseIcon />
+            </IconButton>
+          )}
         </DialogTitle>
         <DialogContent dividers {...contentProps}>
           {children}
         </DialogContent>
-        {(handleCancel || handleAccept) && (
+        {handleAccept && (
           <DialogActions>
-            {handleCancel && (
-              <Button
-                onClick={handleCancel}
-                data-cy='dg-cancel-button'
-                {...cancelButtonProps}
-              >
-                {Tr(T.Cancel)}
-              </Button>
-            )}
-            {handleAccept && (
-              <SubmitButton
-                color='secondary'
-                data-cy='dg-accept-button'
-                onClick={handleAccept}
-                label={Tr(T.Accept)}
-                {...acceptButtonProps}
-              />
-            )}
+            <SubmitButton
+              color='secondary'
+              data-cy='dg-accept-button'
+              onClick={handleAccept}
+              label={Tr(T.Accept)}
+              {...acceptButtonProps}
+            />
           </DialogActions>
         )}
       </Dialog>