Transfer previous Modal code

ui/src/Modal.tsx

@@ -0,0 +1,39 @@
+import {useEffect, useRef} from "react";
+
+export function Modal(props: {
+    isOpen: boolean;
+    setClosed: () => void;
+    children: any;
+}){
+
+    const ref = useRef<HTMLDialogElement>();
+    useEffect(() => {
+        if(props.isOpen){
+            // @ts-ignore
+            ref.current.showModal();
+        } else {
+            // @ts-ignore
+            ref.current.close();
+        }
+    }, [props.isOpen])
+
+
+    return(
+        // The style part is just to make sure the dialog is hidden the split second before useEffect runs,
+        // in case the dialog content is derived from whatever determines isOpen
+        <dialog ref={ref} style={!props.isOpen ? {display: 'none'} : null}>
+            <div className="close-button-div" >
+                <button onClick={(e) => {
+                    // we manually trigger a close anyway because the children can get updated before the dialog gets closed otherwise
+                    // @ts-ignore
+                    ref.current.close();
+                    props.setClosed();
+                }}>✕</button>
+            </div>
+            <div>
+                {props.children}
+            </div>
+        </dialog>
+    );
+
+}

ui/src/style.less

@@ -163,4 +163,29 @@
     margin-left: 10px;
     margin-right: 10px;
   }
+}
+
+dialog {
+  border-radius: 10px;
+  z-index: 1;
+
+
+  .close-button-div {
+    display: flex;
+    justify-content: end;
+
+    button {
+      border: 0;
+      background-color: inherit;
+      font-size: 1.5rem;
+      color: #aaaaaa;
+      font-weight: bold;
+
+      &:hover {
+        color: black;
+        cursor: pointer;
+      }
+    }
+  }
+
 }