pwa footer toggles modals

web/src/components/CloseServer.jsx

@@ -1,10 +1,11 @@
 import { useState } from 'react'
-import { Button, Dialog, DialogActions, DialogTitle, ListItemIcon, ListItemText } from '@material-ui/core'
+import { Button, DialogActions, DialogTitle, ListItemIcon, ListItemText } from '@material-ui/core'
+import { StyledDialog, StyledMenuButtonWrapper } from 'style/CustomMaterialUiStyles'
 import { PowerSettingsNew as PowerSettingsNewIcon } from '@material-ui/icons'
 import { shutdownHost } from 'utils/Hosts'
 import { useTranslation } from 'react-i18next'
 import { isStandaloneApp } from 'utils/Utils'
-import { StyledMenuButtonWrapper } from 'style/CustomMaterialUiStyles'
+import useOnStandaloneAppOutsideClick from 'utils/useOnStandaloneAppOutsideClick'
 
 export default function CloseServer({ isOffline, isLoading }) {
   const { t } = useTranslation()
@@ -12,6 +13,8 @@ export default function CloseServer({ isOffline, isLoading }) {
   const closeDialog = () => setOpen(false)
   const openDialog = () => setOpen(true)
 
+  const ref = useOnStandaloneAppOutsideClick(closeDialog)
+
   return (
     <>
       <StyledMenuButtonWrapper disabled={isOffline || isLoading} button key={t('CloseServer')} onClick={openDialog}>
@@ -31,7 +34,7 @@ export default function CloseServer({ isOffline, isLoading }) {
         )}
       </StyledMenuButtonWrapper>
 
-      <Dialog open={open} onClose={closeDialog}>
+      <StyledDialog open={open} onClose={closeDialog} ref={ref}>
         <DialogTitle>{t('CloseServer?')}</DialogTitle>
         <DialogActions>
           <Button variant='outlined' onClick={closeDialog} color='secondary'>
@@ -50,7 +53,7 @@ export default function CloseServer({ isOffline, isLoading }) {
             {t('TurnOff')}
           </Button>
         </DialogActions>
-      </Dialog>
+      </StyledDialog>
     </>
   )
 }