1 files changed, 36 insertions, 32 deletions

diff --git a/FrontEnd/src/components/dialog/Dialog.tsx b/FrontEnd/src/components/dialog/Dialog.tsx
index 043a8eec..15c898f1 100644
--- a/FrontEnd/src/components/dialog/Dialog.tsx
+++ b/FrontEnd/src/components/dialog/Dialog.tsx
@@ -1,55 +1,59 @@
 import { ReactNode, useRef } from "react";
-import ReactDOM from "react-dom";
 import classNames from "classnames";
+import { CSSTransition } from "react-transition-group";
 
-import { ThemeColor, UiLogicError } from "../common";
-
-import { useCloseDialog } from "./DialogProvider";
+import { ThemeColor } from "../common";
 
 import "./Dialog.css";
 
-const optionalPortalElement = document.getElementById("portal");
-if (optionalPortalElement == null) {
-  throw new UiLogicError();
-}
-const portalElement = optionalPortalElement;
-
 interface DialogProps {
+  open: boolean;
+  onClose: () => void;
   color?: ThemeColor;
   children?: ReactNode;
   disableCloseOnClickOnOverlay?: boolean;
 }
 
 export default function Dialog({
+  open,
+  onClose,
   color,
   children,
   disableCloseOnClickOnOverlay,
 }: DialogProps) {
-  const closeDialog = useCloseDialog();
-
+  const nodeRef = useRef(null);
   const lastPointerDownIdRef = useRef<number | null>(null);
 
-  return ReactDOM.createPortal(
-    <div
-      className={classNames(
-        `cru-theme-${color ?? "primary"}`,
-        "cru-dialog-overlay",
-      )}
+  return (
+    <CSSTransition
+      nodeRef={nodeRef}
+      mountOnEnter
+      unmountOnExit
+      in={open}
+      timeout={300}
+      classNames="cru-dialog"
     >
       <div
-        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,
+        ref={nodeRef}
+        className={classNames(
+          `cru-theme-${color ?? "primary"}`,
+          "cru-dialog-overlay",
+        )}
+      >
+        <div
+          className="cru-dialog-background"
+          onPointerDown={(e) => {
+            lastPointerDownIdRef.current = e.pointerId;
+          }}
+          onPointerUp={(e) => {
+            if (lastPointerDownIdRef.current === e.pointerId) {
+              if (!disableCloseOnClickOnOverlay) onClose();
+            }
+            lastPointerDownIdRef.current = null;
+          }}
+        />
+        <div className="cru-dialog-container">{children}</div>
+      </div>
+    </CSSTransition>
   );
 }