From aa98f0781ecf31850b152b7373e6cce0beaee367 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Fri, 12 Nov 2021 17:23:39 +1100
Subject: [PATCH] Modal: emphasize close button if backdrop click or escape key
 disabled

---
 src/components/Modal/index.tsx | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index e8a55dae..cebaf1e4 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -24,6 +24,7 @@ import ScrollableDialogContent, {
 export interface IModalProps extends Partial<Omit<DialogProps, "title">> {
   onClose: () => void;
   disableBackdropClick?: boolean;
+  disableEscapeKeyDown?: boolean;
 
   title: ReactNode;
   header?: ReactNode;
@@ -45,6 +46,7 @@ export interface IModalProps extends Partial<Omit<DialogProps, "title">> {
 export default function Modal({
   onClose,
   disableBackdropClick,
+  disableEscapeKeyDown,
   title,
   header,
   footer,
@@ -60,13 +62,22 @@ export default function Modal({
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const [open, setOpen] = useState(true);
-  const handleClose = (_, reason?: string) => {
-    if (disableBackdropClick && reason === "backdropClick") return;
+  const handleClose: NonNullable<DialogProps["onClose"]> = (_, reason) => {
+    if (
+      (disableBackdropClick && reason === "backdropClick") ||
+      (disableEscapeKeyDown && reason === "escapeKeyDown")
+    ) {
+      setEmphasizeCloseButton(true);
+      return;
+    }
 
     setOpen(false);
+    setEmphasizeCloseButton(false);
     setTimeout(() => onClose(), 300);
   };
 
+  const [emphasizeCloseButton, setEmphasizeCloseButton] = useState(false);
+
   return (
     <Dialog
       open={open}
@@ -99,11 +110,17 @@ export default function Modal({
 
         {!hideCloseButton && (
           <IconButton
-            onClick={handleClose}
+            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"
           >