Use MUI Dialogs to render our Dialogs

This will definitely break things, but it makes selects work

src/frontend/components/UI/Dialog/components/Dialog.tsx

@@ -1,16 +1,20 @@
-import { faXmark } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import ContextProvider from 'frontend/state/ContextProvider'
 import React, {
-  KeyboardEvent,
   ReactNode,
-  SyntheticEvent,
   useCallback,
   useContext,
   useEffect,
-  useRef,
   useState
 } from 'react'
+import {
+  Dialog as MuiDialog,
+  DialogContent,
+  IconButton,
+  Paper,
+  styled
+} from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
+
+import ContextProvider from 'frontend/state/ContextProvider'
 
 interface DialogProps {
   className?: string
@@ -19,100 +23,72 @@ interface DialogProps {
   onClose: () => void
 }
 
+const StyledPaper = styled(Paper)(() => ({
+  backgroundColor: 'var(--modal-background)',
+  color: 'var(--text-default)',
+  maxWidth: '100%',
+  '&:has(.settingsDialogContent)': {
+    height: '80%'
+  }
+}))
+
 export const Dialog: React.FC<DialogProps> = ({
   children,
   className,
   showCloseButton = false,
   onClose
 }) => {
-  const dialogRef = useRef<HTMLDialogElement | null>(null)
-  const onCloseRef = useRef(onClose)
-  onCloseRef.current = onClose
+  const [open, setOpen] = useState(true)
   const [focusOnClose, setFocusOnClose] = useState<HTMLElement | null>(null)
   const { disableDialogBackdropClose } = useContext(ContextProvider)
 
   useEffect(() => {
     setFocusOnClose(document.querySelector<HTMLElement>('*:focus'))
   }, [])
 
-  const close = () => {
-    onCloseRef.current()
+  const close = useCallback(() => {
+    setOpen(false)
+    onClose()
     if (focusOnClose) {
       setTimeout(() => focusOnClose.focus(), 200)
     }
-  }
-
-  useEffect(() => {
-    const dialog = dialogRef.current
-    if (dialog) {
-      const cancel = () => {
-        close()
-      }
-      dialog.addEventListener('cancel', cancel)
-
-      if (disableDialogBackdropClose) {
-        dialog['showPopover']()
-
-        return () => {
-          dialog.removeEventListener('cancel', cancel)
-          dialog['hidePopover']()
-        }
-      } else {
-        dialog.showModal()
-
-        return () => {
-          dialog.removeEventListener('cancel', cancel)
-          dialog.close()
-        }
-      }
-    }
-    return
-  }, [dialogRef.current, disableDialogBackdropClose])
-
-  const onDialogClick = useCallback(
-    (e: SyntheticEvent) => {
-      if (e.target === dialogRef.current) {
-        const ev = e.nativeEvent as MouseEvent
-        const tg = e.target as HTMLElement
-        if (
-          ev.offsetX < 0 ||
-          ev.offsetX > tg.offsetWidth ||
-          ev.offsetY < 0 ||
-          ev.offsetY > tg.offsetHeight
-        ) {
-          close()
-        }
-      }
-    },
-    [onClose]
-  )
-
-  const closeIfEsc = (event: KeyboardEvent<HTMLDialogElement>) => {
-    if (event.key === 'Escape') {
-      close()
-    }
-  }
+  }, [onClose, focusOnClose])
 
   return (
-    <div className="Dialog">
-      <dialog
-        className={`Dialog__element ${className}`}
-        ref={dialogRef}
-        onClick={onDialogClick}
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore, this feature is new and not yet typed
-        popover="manual"
-        onKeyUp={closeIfEsc}
-      >
+    <MuiDialog
+      open={open}
+      onClose={close}
+      scroll="paper"
+      maxWidth="md"
+      PaperComponent={StyledPaper}
+      PaperProps={{
+        className
+      }}
+      disableEscapeKeyDown={disableDialogBackdropClose}
+      sx={{
+        '& .Dialog__element': {
+          maxWidth: 'min(700px, 85vw)',
+          paddingTop: 'var(--dialog-margin-vertical)'
+        }
+      }}
+    >
+      <>
         {showCloseButton && (
-          <div className="Dialog__Close">
-            <button className="Dialog__CloseButton" onClick={close}>
-              <FontAwesomeIcon className="Dialog__CloseIcon" icon={faXmark} />
-            </button>
-          </div>
+          <IconButton
+            aria-label="close"
+            onClick={close}
+            sx={{
+              position: 'absolute',
+              right: 8,
+              top: 8,
+              color: 'var(--text-default)'
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
         )}
-        {children}
-      </dialog>
-    </div>
+        <DialogContent>{children}</DialogContent>
+      </>
+    </MuiDialog>
   )
 }

src/frontend/screens/Settings/components/SettingsModal/index.scss

@@ -10,17 +10,3 @@
     width: 100%;
   }
 }
-
-.InstallModal__dialog:has(.settingsDialogContent) {
-  margin-top: max(2rem, 13vh);
-  @media screen and (max-height: 800px) {
-    margin-top: max(2rem, 8vh);
-    .settingsDialogContent {
-      min-height: 70vh;
-    }
-  }
-
-  @media screen and (max-height: 700px) {
-    margin-top: max(2rem, 6vh);
-  }
-}