1 files changed, 15 insertions, 24 deletions
diff --git a/FrontEnd/src/components/dialog/Dialog.tsx b/FrontEnd/src/components/dialog/Dialog.tsx
index b1d66704..bdba9198 100644
--- a/FrontEnd/src/components/dialog/Dialog.tsx
+++ b/FrontEnd/src/components/dialog/Dialog.tsx
@@ -1,6 +1,5 @@
 import { ReactNode, useRef } from "react";
 import ReactDOM from "react-dom";
-import { CSSTransition } from "react-transition-group";
 import classNames from "classnames";
 
 import { ThemeColor } from "../common";
@@ -16,42 +15,34 @@ if (optionalPortalElement == null) {
 const portalElement = optionalPortalElement;
 
 interface DialogProps {
-  color?: ThemeColor;
   children?: ReactNode;
   disableCloseOnClickOnOverlay?: boolean;
 }
 
 export default function Dialog({
-  color,
   children,
   disableCloseOnClickOnOverlay,
 }: DialogProps) {
-  color = color ?? "primary";
-
   const closeDialog = useCloseDialog();
 
-  const nodeRef = useRef(null);
+  const lastPointerDownIdRef = useRef<number | null>(null);
 
   return ReactDOM.createPortal(
-    <CSSTransition
-      nodeRef={nodeRef}
-      mountOnEnter
-      unmountOnExit
-      in
-      timeout={300}
-      classNames="cru-dialog"
-    >
+    <div className={classNames("cru-dialog-overlay")}>
       <div
-        ref={nodeRef}
-        className={classNames("cru-dialog-overlay", `cru-${color}`)}
-      >
-        <div
-          className="cru-dialog-background"
-          onClick={disableCloseOnClickOnOverlay ? undefined : closeDialog}
-        />
-        <div className="cru-dialog-container">{children}</div>
-      </div>
-    </CSSTransition>,
+        className="cru-dialog-background"
+        onPointerDown={(e) => {
+          lastPointerDownIdRef.current = e.pointerId;
+        }}
+        onPointerUp={(e) => {
+          if (lastPointerDownIdRef.current === e.pointerId) {
+            if (!disableCloseOnClickOnOverlay) closeDialog();
+          }
+          lastPointerDownIdRef.current = null;
+        }}
+      />
+      <div className="cru-dialog-container">{children}</div>
+    </div>,
     portalElement,
   );
 }