3 files changed, 42 insertions, 23 deletions

diff --git a/modern/src/admin/ServerPage.js b/modern/src/admin/ServerPage.js
index 7decac1a..ec0034f5 100644
--- a/modern/src/admin/ServerPage.js
+++ b/modern/src/admin/ServerPage.js
@@ -8,11 +8,11 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import t from '../common/localization';
-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: {
@@ -51,11 +51,9 @@ const ServerPage = () => {
   };
 
   return (
-    <>
-      <MainToolbar />
+    <OptionsLayout>
       <Container maxWidth="xs" className={classes.container}>
-        {item
-          && (
+        {item && (
           <>
             <Accordion defaultExpanded>
               <AccordionSummary expandIcon={<ExpandMoreIcon />}>
@@ -113,7 +111,7 @@ const ServerPage = () => {
               </AccordionDetails>
             </Accordion>
           </>
-          )}
+        )}
         <FormControl fullWidth margin="normal">
           <div className={classes.buttons}>
             <Button type="button" color="primary" variant="outlined" onClick={() => history.goBack()}>
@@ -125,7 +123,7 @@ const ServerPage = () => {
           </div>
         </FormControl>
       </Container>
-    </>
+    </OptionsLayout>
   );
 };
 
diff --git a/modern/src/admin/StatisticsPage.js b/modern/src/admin/StatisticsPage.js
index 131ab7e4..20974f4d 100644
--- a/modern/src/admin/StatisticsPage.js
+++ b/modern/src/admin/StatisticsPage.js
@@ -5,7 +5,7 @@ import {
 import moment from 'moment';
 import t from '../common/localization';
 import { formatDate } from '../common/formatter';
-import ReportLayoutPage from '../reports/ReportLayoutPage';
+import OptionsLayout from '../settings/OptionsLayout';
 
 const Filter = ({ setItems }) => {
   const [period, setPeriod] = useState('today');
@@ -21,24 +21,36 @@ const Filter = ({ setItems }) => {
         selectedTo = moment().endOf('day');
         break;
       case 'yesterday':
-        selectedFrom = moment().subtract(1, 'day').startOf('day');
-        selectedTo = moment().subtract(1, 'day').endOf('day');
+        selectedFrom = moment()
+          .subtract(1, 'day')
+          .startOf('day');
+        selectedTo = moment()
+          .subtract(1, 'day')
+          .endOf('day');
         break;
       case 'thisWeek':
         selectedFrom = moment().startOf('week');
         selectedTo = moment().endOf('week');
         break;
       case 'previousWeek':
-        selectedFrom = moment().subtract(1, 'week').startOf('week');
-        selectedTo = moment().subtract(1, 'week').endOf('week');
+        selectedFrom = moment()
+          .subtract(1, 'week')
+          .startOf('week');
+        selectedTo = moment()
+          .subtract(1, 'week')
+          .endOf('week');
         break;
       case 'thisMonth':
         selectedFrom = moment().startOf('month');
         selectedTo = moment().endOf('month');
         break;
       case 'previousMonth':
-        selectedFrom = moment().subtract(1, 'month').startOf('month');
-        selectedTo = moment().subtract(1, 'month').endOf('month');
+        selectedFrom = moment()
+          .subtract(1, 'month')
+          .startOf('month');
+        selectedTo = moment()
+          .subtract(1, 'month')
+          .endOf('month');
         break;
       default:
         selectedFrom = from;
@@ -46,8 +58,13 @@ const Filter = ({ setItems }) => {
         break;
     }
 
-    const query = new URLSearchParams({ from: selectedFrom.toISOString(), to: selectedTo.toISOString() });
-    const response = await fetch(`/api/statistics?${query.toString()}`, { Accept: 'application/json' });
+    const query = new URLSearchParams({
+      from: selectedFrom.toISOString(),
+      to: selectedTo.toISOString(),
+    });
+    const response = await fetch(`/api/statistics?${query.toString()}`, {
+      Accept: 'application/json',
+    });
     if (response.ok) {
       setItems(await response.json());
     }
@@ -98,7 +115,8 @@ const StatisticsPage = () => {
   const [items, setItems] = useState([]);
 
   return (
-    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+    <OptionsLayout>
+      <Filter setItems={setItems} />
       <TableContainer component={Paper}>
         <Table>
           <TableHead>
@@ -133,7 +151,7 @@ const StatisticsPage = () => {
           </TableBody>
         </Table>
       </TableContainer>
-    </ReportLayoutPage>
+    </OptionsLayout>
   );
 };
 
diff --git a/modern/src/admin/UsersPage.js b/modern/src/admin/UsersPage.js
index fc6e6736..9b51cdd0 100644
--- a/modern/src/admin/UsersPage.js
+++ b/modern/src/admin/UsersPage.js
@@ -3,11 +3,11 @@ import {
   TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton,
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import MainToolbar from '../MainToolbar';
 import t from '../common/localization';
 import { useEffectAsync } from '../reactHelper';
 import EditCollectionView from '../EditCollectionView';
 import { formatBoolean } from '../common/formatter';
+import OptionsLayout from '../settings/OptionsLayout';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
@@ -61,10 +61,13 @@ const UsersView = ({ updateTimestamp, onMenuClick }) => {
 };
 
 const UsersPage = () => (
-  <>
-    <MainToolbar />
-    <EditCollectionView content={UsersView} editPath="/user" endpoint="users" />
-  </>
+  <OptionsLayout>
+    <EditCollectionView
+      content={UsersView}
+      editPath="/user"
+      endpoint="users"
+    />
+  </OptionsLayout>
 );
 
 export default UsersPage;