1 files changed, 81 insertions, 30 deletions
diff --git a/modern/src/admin/ServerPage.js b/modern/src/admin/ServerPage.js
index 43664e54..c33a6316 100644
--- a/modern/src/admin/ServerPage.js
+++ b/modern/src/admin/ServerPage.js
@@ -6,26 +6,26 @@ import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography,
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
-import MainToolbar from '../MainToolbar';
 import { sessionActions } from '../store';
 import EditAttributesView from '../attributes/EditAttributesView';
 import deviceAttributes from '../attributes/deviceAttributes';
 import userAttributes from '../attributes/userAttributes';
+import OptionsLayout from '../settings/OptionsLayout';
 
 const useStyles = makeStyles(theme => ({
   container: {
-    marginTop: theme.spacing(2),
+    marginTop: theme.spacing(2)
   },
   buttons: {
     display: 'flex',
     justifyContent: 'space-evenly',
     '& > *': {
-      flexBasis: '33%',
-    },
+      flexBasis: '33%'
+    }
   },
   details: {
-    flexDirection: 'column',
-  },
+    flexDirection: 'column'
+  }
 }));
 
 const ServerPage = () => {
@@ -34,13 +34,14 @@ const ServerPage = () => {
   const classes = useStyles();
 
   const item = useSelector(state => state.session.server);
-  const setItem = (updatedItem) => dispatch(sessionActions.updateServer(updatedItem));
+  const setItem = updatedItem =>
+    dispatch(sessionActions.updateServer(updatedItem));
 
   const handleSave = async () => {
     const response = await fetch('/api/server', {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(item),
+      body: JSON.stringify(item)
     });
 
     if (response.ok) {
@@ -49,10 +50,9 @@ const ServerPage = () => {
   };
 
   return (
-    <>
-      <MainToolbar />
-      <Container maxWidth='xs' className={classes.container}>
-        {item &&
+    <OptionsLayout>
+      <Container maxWidth="xs" className={classes.container}>
+        {item && (
           <>
             <Accordion defaultExpanded>
               <AccordionSummary expandIcon={<ExpandMoreIcon />}>
@@ -64,9 +64,12 @@ const ServerPage = () => {
                 <TextField
                   margin="normal"
                   value={item.announcement || ''}
-                  onChange={event => setItem({...item, announcement: event.target.value})}
+                  onChange={event =>
+                    setItem({ ...item, announcement: event.target.value })
+                  }
                   label={t('serverAnnouncement')}
-                  variant="filled" />
+                  variant="filled"
+                />
               </AccordionDetails>
             </Accordion>
             <Accordion>
@@ -77,17 +80,55 @@ const ServerPage = () => {
               </AccordionSummary>
               <AccordionDetails className={classes.details}>
                 <FormControlLabel
-                  control={<Checkbox checked={item.registration} onChange={event => setItem({...item, registration: event.target.checked})} />}
-                  label={t('serverRegistration')} />
+                  control={
+                    <Checkbox
+                      checked={item.registration}
+                      onChange={event =>
+                        setItem({ ...item, registration: event.target.checked })
+                      }
+                    />
+                  }
+                  label={t('serverRegistration')}
+                />
                 <FormControlLabel
-                  control={<Checkbox checked={item.readonly} onChange={event => setItem({...item, readonly: event.target.checked})} />}
-                  label={t('serverReadonly')} />
+                  control={
+                    <Checkbox
+                      checked={item.readonly}
+                      onChange={event =>
+                        setItem({ ...item, readonly: event.target.checked })
+                      }
+                    />
+                  }
+                  label={t('serverReadonly')}
+                />
                 <FormControlLabel
-                  control={<Checkbox checked={item.deviceReadonly} onChange={event => setItem({...item, deviceReadonly: event.target.checked})} />}
-                  label={t('userDeviceReadonly')} />
+                  control={
+                    <Checkbox
+                      checked={item.deviceReadonly}
+                      onChange={event =>
+                        setItem({
+                          ...item,
+                          deviceReadonly: event.target.checked
+                        })
+                      }
+                    />
+                  }
+                  label={t('userDeviceReadonly')}
+                />
                 <FormControlLabel
-                  control={<Checkbox checked={item.limitCommands} onChange={event => setItem({...item, limitCommands: event.target.checked})} />}
-                  label={t('userLimitCommands')} />
+                  control={
+                    <Checkbox
+                      checked={item.limitCommands}
+                      onChange={event =>
+                        setItem({
+                          ...item,
+                          limitCommands: event.target.checked
+                        })
+                      }
+                    />
+                  }
+                  label={t('userLimitCommands')}
+                />
               </AccordionDetails>
             </Accordion>
             <Accordion>
@@ -99,26 +140,36 @@ const ServerPage = () => {
               <AccordionDetails className={classes.details}>
                 <EditAttributesView
                   attributes={item.attributes}
-                  setAttributes={attributes => setItem({...item, attributes})}
-                  definitions={{...userAttributes, ...deviceAttributes}}
+                  setAttributes={attributes => setItem({ ...item, attributes })}
+                  definitions={{ ...userAttributes, ...deviceAttributes }}
                   />
               </AccordionDetails>
             </Accordion>
           </>
-        }
-        <FormControl fullWidth margin='normal'>
+        )}
+        <FormControl fullWidth margin="normal">
           <div className={classes.buttons}>
-            <Button type='button' color='primary' variant='outlined' onClick={() => history.goBack()}>
+            <Button
+              type="button"
+              color="primary"
+              variant="outlined"
+              onClick={() => history.goBack()}
+            >
               {t('sharedCancel')}
             </Button>
-            <Button type='button' color='primary' variant='contained' onClick={handleSave}>
+            <Button
+              type="button"
+              color="primary"
+              variant="contained"
+              onClick={handleSave}
+            >
               {t('sharedSave')}
             </Button>
           </div>
         </FormControl>
       </Container>
-    </>
+    </OptionsLayout>
   );
-}
+};
 
 export default ServerPage;