...

1 files changed, 22 insertions, 41 deletions

diff --git a/FrontEnd/src/components/dialog/FullPageDialog.tsx b/FrontEnd/src/components/dialog/FullPageDialog.tsx
index b0a39ee3..44ea2a7b 100644
--- a/FrontEnd/src/components/dialog/FullPageDialog.tsx
+++ b/FrontEnd/src/components/dialog/FullPageDialog.tsx
@@ -1,10 +1,8 @@
-import { ReactNode, useRef } from "react";
-import classNames from "classnames";
-import { CSSTransition } from "react-transition-group";
+import { ReactNode } from "react";
 
 import { ThemeColor } from "../common";
 import { IconButton } from "../button";
-import InPortal from "../InPortal";
+import DialogOverlay from "./DialogOverlay";
 
 import "./FullPageDialog.css";
 
@@ -12,8 +10,8 @@ interface FullPageDialogProps {
   open: boolean;
   onClose: () => void;
   color?: ThemeColor;
-  contentContainerClassName?: string;
-  children: ReactNode;
+  children?: ReactNode;
+  disableCloseOnClickOnOverlay?: boolean;
 }
 
 export default function FullPageDialog({
@@ -21,42 +19,25 @@ export default function FullPageDialog({
   onClose,
   color,
   children,
-  contentContainerClassName,
+  disableCloseOnClickOnOverlay,
 }: FullPageDialogProps) {
-  const nodeRef = useRef(null);
-
   return (
-    <InPortal>
-      <CSSTransition
-        nodeRef={nodeRef}
-        mountOnEnter
-        unmountOnExit
-        in={open}
-        timeout={300}
-        classNames="cru-dialog-full-page"
-      >
-        <div
-          ref={nodeRef}
-          className={`cru-dialog-full-page cru-theme-${color ?? "primary"}`}
-        >
-          <div className="cru-dialog-full-page-top-bar">
-            <IconButton
-              icon="arrow-left"
-              color="light"
-              className="cru-dialog-full-page-back-button"
-              onClick={onClose}
-            />
-          </div>
-          <div
-            className={classNames(
-              "cru-dialog-full-page-content-container",
-              contentContainerClassName,
-            )}
-          >
-            {children}
-          </div>
-        </div>
-      </CSSTransition>
-    </InPortal>
+    <DialogOverlay
+      open={open}
+      onClose={onClose}
+      transitionClassNames="cru-dialog-full-page"
+      overlayClassName={`cru-dialog-full-page cru-theme-${color ?? "primary"}`}
+      disableCloseOnClickOnOverlay={disableCloseOnClickOnOverlay}
+    >
+      <div className="cru-dialog-full-page-content">
+        <IconButton
+          icon="x-lg"
+          color={color ?? "primary"}
+          className="cru-dialog-full-page-back"
+          onClick={onClose}
+        />
+        {children}
+      </div>
+    </DialogOverlay>
   );
 }