Render SelectFields as MUI Selects

src/backend/main.ts

@@ -5,7 +5,6 @@ import {
   GameSettings,
   DiskSpaceData,
   StatusPromise,
-  GamepadInputEvent,
   Runner
 } from 'common/types'
 import * as path from 'path'
@@ -1282,7 +1281,11 @@ ipcMain.handle('gamepadAction', async (event, args) => {
   const mainWindow = getMainWindow()!
 
   const { action, metadata } = args
-  const inputEvents: GamepadInputEvent[] = []
+  const inputEvents: (
+    | Electron.MouseInputEvent
+    | Electron.MouseWheelInputEvent
+    | Electron.KeyboardInputEvent
+  )[] = []
 
   /*
    * How to extend:
@@ -1368,6 +1371,32 @@ ipcMain.handle('gamepadAction', async (event, args) => {
         keyCode: 'Esc'
       })
       break
+    case 'tab':
+      inputEvents.push(
+        {
+          type: 'keyDown',
+          keyCode: 'Tab'
+        },
+        {
+          type: 'keyUp',
+          keyCode: 'Tab'
+        }
+      )
+      break
+    case 'shiftTab':
+      inputEvents.push(
+        {
+          type: 'keyDown',
+          keyCode: 'Tab',
+          modifiers: ['shift']
+        },
+        {
+          type: 'keyUp',
+          keyCode: 'Tab',
+          modifiers: ['shift']
+        }
+      )
+      break
   }
 
   if (inputEvents.length) {

src/common/types.ts

@@ -347,30 +347,6 @@ export interface GOGImportData {
   dlcs: string[]
 }
 
-export type GamepadInputEvent =
-  | GamepadInputEventKey
-  | GamepadInputEventWheel
-  | GamepadInputEventMouse
-
-interface GamepadInputEventKey {
-  type: 'keyDown' | 'keyUp' | 'char'
-  keyCode: string
-}
-
-interface GamepadInputEventWheel {
-  type: 'mouseWheel'
-  deltaY: number
-  x: number
-  y: number
-}
-
-interface GamepadInputEventMouse {
-  type: 'mouseDown' | 'mouseUp'
-  x: number
-  y: number
-  button: 'left' | 'middle' | 'right'
-}
-
 export interface SteamRuntime {
   path: string
   type: 'sniper' | 'scout' | 'soldier'
@@ -541,6 +517,8 @@ interface GamepadActionArgsWithoutMetadata {
     | 'back'
     | 'altAction'
     | 'esc'
+    | 'tab'
+    | 'shiftTab'
   metadata?: undefined
 }
 

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,75 @@ 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 [focusOnClose, setFocusOnClose] = useState<HTMLElement | null>(null)
+  const [open, setOpen] = useState(true)
   const { disableDialogBackdropClose } = useContext(ContextProvider)
 
   useEffect(() => {
-    setFocusOnClose(document.querySelector<HTMLElement>('*:focus'))
+    // HACK: Focussing the dialog using JS does not seem to work
+    //       Instead, simulate one or two tab presses
+    // One tab to focus the dialog
+    window.api.gamepadAction({ action: 'tab' })
+    // Second tab to skip the close button if it's shown
+    if (showCloseButton) window.api.gamepadAction({ action: 'tab' })
   }, [])
 
-  const close = () => {
-    onCloseRef.current()
-    if (focusOnClose) {
-      setTimeout(() => focusOnClose.focus(), 200)
-    }
-  }
+  const close = useCallback(() => {
+    setOpen(false)
+    onClose()
+  }, [onClose])
 
-  useEffect(() => {
-    const dialog = dialogRef.current
-    if (dialog) {
-      const cancel = () => {
+  return (
+    <MuiDialog
+      open={open}
+      onClose={(e, reason) => {
+        if (disableDialogBackdropClose && reason === 'backdropClick') return
         close()
-      }
-      dialog.addEventListener('cancel', cancel)
-
-      if (disableDialogBackdropClose) {
-        dialog['showPopover']()
-
-        return () => {
-          dialog.removeEventListener('cancel', cancel)
-          dialog['hidePopover']()
+      }}
+      scroll="paper"
+      maxWidth="md"
+      PaperComponent={StyledPaper}
+      PaperProps={{
+        className
+      }}
+      sx={{
+        '& .Dialog__element': {
+          maxWidth: 'min(700px, 85vw)',
+          paddingTop: 'var(--dialog-margin-vertical)'
         }
-      } 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()
-    }
-  }
-
-  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}
-      >
+      }}
+    >
+      <>
         {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/components/UI/Dialog/components/DialogContent.tsx

@@ -9,5 +9,5 @@ export const DialogContent: React.FC<Props> = ({
   children,
   className
 }: Props) => {
-  return <div className={`Dialog__content ${className}`}>{children}</div>
+  return <div className={className}>{children}</div>
 }

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

@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react'
+import { DialogTitle } from '@mui/material'
 
 interface DialogHeaderProps {
   onClose?: () => void
@@ -7,8 +8,15 @@ interface DialogHeaderProps {
 
 export const DialogHeader: React.FC<DialogHeaderProps> = ({ children }) => {
   return (
-    <div className="Dialog__header">
-      <h1 className="Dialog__headerTitle">{children}</h1>
-    </div>
+    <DialogTitle
+      sx={{
+        fontFamily: 'var(--primary-font-family)',
+        fontSize: 'var(--text-xl)',
+        fontWeight: 'var(--bold)',
+        paddingLeft: 0
+      }}
+    >
+      {children}
+    </DialogTitle>
   )
 }

src/frontend/components/UI/LanguageSelector/index.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { configStore } from 'frontend/helpers/electronStores'
 import ContextProvider from 'frontend/state/ContextProvider'
 import { SelectField } from '..'
+import { MenuItem } from '@mui/material'
 
 const storage: Storage = window.localStorage
 
@@ -132,9 +133,9 @@ export default function LanguageSelector({
     if (flagPossition === FlagPosition.APPEND) label = `${label} ${flag}`
 
     return (
-      <option key={lang} value={lang}>
+      <MenuItem key={lang} value={lang}>
         {label}
-      </option>
+      </MenuItem>
     )
   }
 

src/frontend/components/UI/SelectField/index.css

@@ -4,7 +4,8 @@
 }
 
 .selectFieldWrapper select,
-.selectStyle {
+.selectStyle,
+.selectFieldWrapper .MuiOutlinedInput-root {
   border-radius: var(--space-3xs);
   grid-area: select;
   width: 100%;
@@ -13,7 +14,6 @@
   font-family: var(--primary-font-family), 'Noto Color Emoji';
   font-weight: normal;
   font-size: var(--text-md);
-  line-height: 19px;
   color: var(--text-secondary);
   text-indent: 22px;
   border: none;
@@ -44,6 +44,15 @@
   min-width: 100px;
 }
 
+.MuiPopover-root .MuiPaper-root {
+  color: var(--text-secondary);
+  background-color: var(--input-background);
+
+  .MuiMenuItem-root {
+    font-family: var(--primary-font-family);
+  }
+}
+
 .selectStyle {
   padding-inline-end: 4rem;
 }