2 files changed, 50 insertions, 2 deletions
diff --git a/FrontEnd/src/views/common/dailog/Dialog.css b/FrontEnd/src/views/common/dailog/Dialog.css
index e69de29b..abce04fd 100644
--- a/FrontEnd/src/views/common/dailog/Dialog.css
+++ b/FrontEnd/src/views/common/dailog/Dialog.css
@@ -0,0 +1,22 @@
+.cru-dialog-overlay {
+  position: fixed;
+  z-index: 1040;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.92);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cru-dialog-container {
+  max-width: 100%;
+
+  border: var(--cru-primary-color) 1px solid;
+  border-radius: 5px;
+  padding: 1.5em;
+  background-color: white;
+}
diff --git a/FrontEnd/src/views/common/dailog/Dialog.tsx b/FrontEnd/src/views/common/dailog/Dialog.tsx
index 5a3902c4..ee58080f 100644
--- a/FrontEnd/src/views/common/dailog/Dialog.tsx
+++ b/FrontEnd/src/views/common/dailog/Dialog.tsx
@@ -1,13 +1,39 @@
 import React from "react";
+import ReactDOM from "react-dom";
+
+import "./Dialog.css";
 
 export interface DialogProps {
   onClose: () => void;
   open?: boolean;
   children?: React.ReactNode;
+  disableCloseOnClickOnOverlay?: boolean;
 }
 
 export default function Dialog(props: DialogProps): React.ReactElement | null {
-  const { open, onClose, children } = props;
+  const { open, onClose, children, disableCloseOnClickOnOverlay } = props;
 
-  return <div>{children}</div>;
+  return open
+    ? ReactDOM.createPortal(
+        <div
+          className="cru-dialog-overlay"
+          onClick={
+            disableCloseOnClickOnOverlay
+              ? undefined
+              : () => {
+                  onClose();
+                }
+          }
+        >
+          <div
+            className="cru-dialog-container"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {children}
+          </div>
+        </div>,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        document.getElementById("portal")!
+      )
+    : null;
 }