WizardDialog: full screen & prevent accidental escape key hits

src/components/Modal/Modal.tsx

@@ -62,6 +62,7 @@ export default function Modal({
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const [open, setOpen] = useState(true);
+  const [emphasizeCloseButton, setEmphasizeCloseButton] = useState(false);
   const handleClose: NonNullable<DialogProps["onClose"]> = (_, reason) => {
     if (
       (disableBackdropClick && reason === "backdropClick") ||
@@ -76,8 +77,6 @@ export default function Modal({
     setTimeout(() => onClose(setOpen), 300);
   };
 
-  const [emphasizeCloseButton, setEmphasizeCloseButton] = useState(false);
-
   return (
     <Dialog
       open={open}

src/components/TableModals/WizardDialog.tsx

@@ -40,29 +40,41 @@ export default function WizardDialog({
   steps,
   onFinish,
   fullHeight = true,
+  onClose,
   ...props
 }: IWizardDialogProps) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
+  const [emphasizeCloseButton, setEmphasizeCloseButton] = useState(false);
+  const handleClose: NonNullable<DialogProps["onClose"]> = (event, reason) => {
+    if (reason === "backdropClick" || reason === "escapeKeyDown") {
+      setEmphasizeCloseButton(true);
+      return;
+    }
+    setEmphasizeCloseButton(false);
+    if (onClose) setTimeout(() => onClose!(event, reason), 300);
+  };
+
   const [step, setStep] = useState(0);
   const currentStep = steps[step];
 
   const handleNext = () =>
     step < steps.length - 1 ? setStep((s) => s + 1) : onFinish();
   const handleBack = () =>
-    step > 0 ? setStep((s) => s - 1) : props.onClose?.({}, "escapeKeyDown");
+    step > 0 ? setStep((s) => s - 1) : onClose?.({}, "escapeKeyDown");
 
   return (
     <Dialog
       fullWidth
-      fullScreen={isMobile}
-      TransitionComponent={isMobile ? Slide : SlideTransitionMui}
-      TransitionProps={isMobile ? ({ direction: "up" } as any) : undefined}
+      fullScreen
+      TransitionComponent={Slide}
+      TransitionProps={{ direction: "up" } as any}
       aria-labelledby="wizard-title"
       aria-describedby="wizard-step-description"
       maxWidth="md"
       {...props}
+      onClose={handleClose}
       sx={[
         fullHeight && { "& .MuiDialog-paper": { height: "100%" } },
         ...spreadSx(props.sx),
@@ -125,11 +137,17 @@ export default function WizardDialog({
           />
 
           <IconButton
-            onClick={props.onClose as any}
+            onClick={handleClose as any}
             aria-label="Close"
             sx={{
               m: { xs: 1, sm: 1.5 },
               ml: { xs: -1, sm: -1 },
+
+              bgcolor: emphasizeCloseButton ? "error.main" : undefined,
+              color: emphasizeCloseButton ? "error.contrastText" : undefined,
+              "&:hover": emphasizeCloseButton
+                ? { bgcolor: "error.dark" }
+                : undefined,
             }}
             className="dialog-close"
           >