Change message when deleting a file

okfn · May 2, 2024 · 63cf177 · 63cf177
1 parent 90ec5d7
commit 63cf177
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 11 deletions.
diff --git a/client/components/Application/Dialogs/DeleteFile.tsx b/client/components/Application/Dialogs/DeleteFile.tsx
@@ -11,9 +11,9 @@ export default function DeleteFileDialog() {
     <ConfirmDialog
       open={true}
       title="Delete File"
-      label="Delete"
+      label="OK"
       Icon={DeleteIcon}
-      description={`You are deleting "${path}". Are you sure?`}
+      description={'Are you sure you want to delete this file?'}
       onCancel={() => updateState({ dialog: undefined })}
       onConfirm={async () => {
         await deleteFile(path)

diff --git a/client/components/Parts/Buttons/SimpleButton.tsx b/client/components/Parts/Buttons/SimpleButton.tsx
@@ -0,0 +1,26 @@
+import Typography from '@mui/material/Typography'
+import Button, { ButtonProps } from '@mui/material/Button'
+
+interface SimpleButtonProps extends ButtonProps {
+  label?: string
+  small?: boolean
+}
+
+export default function SimpleButton(props: SimpleButtonProps) {
+  const { label, small, ...others } = props
+  return (
+    <Button
+      fullWidth={!props.small}
+      color={props.color}
+      {...others}
+    >
+      {small ? (
+        <Typography sx={{ fontWeight: 300, textTransform: 'capitalize' }}>
+          {label}
+        </Typography>
+      ) : (
+        label
+      )}
+    </Button>
+  )
+}
diff --git a/client/components/Parts/Dialogs/Confirm.tsx b/client/components/Parts/Dialogs/Confirm.tsx
@@ -3,9 +3,7 @@ import Box from '@mui/material/Box'
 import Dialog from '@mui/material/Dialog'
 import DialogTitle from '@mui/material/DialogTitle'
 import DialogContent from '@mui/material/DialogContent'
-import Cancel from '@mui/icons-material/Cancel'
-import CheckCircleIcon from '@mui/icons-material/CheckCircle'
-import IconButton from '..//Buttons/Icon'
+import SimpleButton from '../Buttons/SimpleButton'
 import Columns from '../Grids/Columns'
 
 export interface ConfirmDialogProps {
@@ -57,20 +55,18 @@ export default function ConfirmDialog(props: ConfirmDialogProps) {
       </DialogContent>
       <Box sx={{ paddingX: 3, paddingY: 1 }}>
         <Columns spacing={2}>
-          <IconButton
+          <SimpleButton
             fullWidth
-            label={`${props.cancelLabel || 'Cancel'} [Esc]`}
+            label={`${props.cancelLabel || 'Cancel'}`}
             sx={{ my: 0.5 }}
             onClick={handleCancel}
             aria-label="cancel"
             color="warning"
             variant="contained"
-            Icon={Cancel}
           />
-          <IconButton
+          <SimpleButton
             fullWidth
-            label={`${props.label || 'Confirm'} [${props.ctrlEnter ? 'Ctrl+' : ''}Enter]`}
-            Icon={props.Icon || CheckCircleIcon}
+            label={`${props.label || 'Confirm'}`}
             sx={{ my: 0.5 }}
             onClick={handleConfirm}
             aria-label="accept"