settings dialog content separated from sidebar button

web/src/components/Settings.jsx

@@ -13,26 +13,13 @@ import Button from '@material-ui/core/Button'
 import { FormControlLabel, InputLabel, Select, Switch } from '@material-ui/core'
 import { settingsHost, setTorrServerHost, getTorrServerHost } from 'utils/Hosts'
 import { useTranslation } from 'react-i18next'
-import { ThemeProvider } from '@material-ui/core/styles'
 
-import { lightTheme } from '../style/materialUISetup'
+const SettingsDialog = ({ handleClose }) => {
-
-export default function SettingsDialog() {
   const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
+
   const [settings, setSets] = useState({})
   const [show, setShow] = useState(false)
   const [tsHost, setTSHost] = useState(getTorrServerHost())
-
-  const handleClickOpen = () => setOpen(true)
-  const handleClose = () => setOpen(false)
-  const handleSave = () => {
-    setOpen(false)
-    const sets = JSON.parse(JSON.stringify(settings))
-    sets.CacheSize *= 1024 * 1024
-    axios.post(settingsHost(), { action: 'set', sets })
-  }
-
   useEffect(() => {
     axios
       .post(settingsHost(), { action: 'get' })
@@ -43,6 +30,12 @@ export default function SettingsDialog() {
       .catch(() => setShow(false))
   }, [tsHost])
 
+  const handleSave = () => {
+    handleClose()
+    const sets = JSON.parse(JSON.stringify(settings))
+    sets.CacheSize *= 1024 * 1024
+    axios.post(settingsHost(), { action: 'set', sets })
+  }
   const onInputHost = ({ target: { value } }) => {
     const host = value.replace(/\/$/gi, '')
     setTorrServerHost(host)
@@ -95,16 +88,7 @@ export default function SettingsDialog() {
   } = settings
 
   return (
-    <div>
+    <Dialog open onClose={handleClose} aria-labelledby='form-dialog-title' fullWidth>
-      <ListItem button key={t('Settings')} onClick={handleClickOpen}>
-        <ListItemIcon>
-          <SettingsIcon />
-        </ListItemIcon>
-        <ListItemText primary={t('Settings')} />
-      </ListItem>
-
-      <ThemeProvider theme={lightTheme}>
-        <Dialog open={open} onClose={handleClose} aria-labelledby='form-dialog-title' fullWidth>
       <DialogTitle id='form-dialog-title'>{t('Settings')}</DialogTitle>
       <DialogContent>
         <TextField
@@ -291,7 +275,26 @@ export default function SettingsDialog() {
         </Button>
       </DialogActions>
     </Dialog>
-      </ThemeProvider>
+  )
+}
+
+export default function Settings() {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  const handleClickOpen = () => setOpen(true)
+  const handleClose = () => setOpen(false)
+
+  return (
+    <div>
+      <ListItem button key={t('Settings')} onClick={handleClickOpen}>
+        <ListItemIcon>
+          <SettingsIcon />
+        </ListItemIcon>
+        <ListItemText primary={t('Settings')} />
+      </ListItem>
+
+      {open && <SettingsDialog handleClose={handleClose} />}
     </div>
   )
 }