1 files changed, 73 insertions, 37 deletions
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 164dbf9..8055d30 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -1,10 +1,22 @@
 import React, { useState } from 'react';
-import { FormControl, InputLabel, Select, MenuItem, Button, TextField, ButtonGroup } from '@material-ui/core';
-import t from '../common/localization';
+import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography, makeStyles } from '@material-ui/core';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
+import t from '../common/localization';
+
+const useStyles = makeStyles(theme => ({
+  gridContainer: {
+    margin: theme.spacing(0, -1),
+    '& > .MuiGrid-item': {
+      padding: theme.spacing(1.5, 1)
+    }
+  } 
+}));
 
 const ReportFilter = ({ children, handleSubmit, showOnly }) => {
+
+  const classes = useStyles();
+
   const devices = useSelector(state => Object.values(state.devices.items));
   const [deviceId, setDeviceId] = useState();
   const [period, setPeriod] = useState('today');
@@ -56,56 +68,80 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
   }
 
   return (
-    <>
-      <FormControl variant="filled" margin="normal" fullWidth>
-        <InputLabel>{t('reportDevice')}</InputLabel>
-        <Select value={deviceId} onChange={(e) => setDeviceId(e.target.value)}>
-          {devices.map((device) => (
-            <MenuItem value={device.id}>{device.name}</MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-      <FormControl variant="filled" margin="normal" fullWidth>
-        <InputLabel>{t('reportPeriod')}</InputLabel>
-        <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
-          <MenuItem value="today">{t('reportToday')}</MenuItem>
-          <MenuItem value="yesterday">{t('reportYesterday')}</MenuItem>
-          <MenuItem value="thisWeek">{t('reportThisWeek')}</MenuItem>
-          <MenuItem value="previousWeek">{t('reportPreviousWeek')}</MenuItem>
-          <MenuItem value="thisMonth">{t('reportThisMonth')}</MenuItem>
-          <MenuItem value="previousMonth">{t('reportPreviousMonth')}</MenuItem>
-          <MenuItem value="custom">{t('reportCustom')}</MenuItem>
-        </Select>
-      </FormControl>
-      {period === 'custom' && (
+    <Grid container spacing={2} className={classes.gridContainer}>
+      <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
+        <FormControl variant="filled" fullWidth>
+          <InputLabel>{t('reportDevice')}</InputLabel>
+          <Select value={deviceId} onChange={(e) => setDeviceId(e.target.value)}>
+            {devices.map((device) => (
+              <MenuItem value={device.id}>{device.name}</MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </Grid>
+      <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
+        <FormControl variant="filled" fullWidth>
+          <InputLabel>{t('reportPeriod')}</InputLabel>
+          <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
+            <MenuItem value="today">{t('reportToday')}</MenuItem>
+            <MenuItem value="yesterday">{t('reportYesterday')}</MenuItem>
+            <MenuItem value="thisWeek">{t('reportThisWeek')}</MenuItem>
+            <MenuItem value="previousWeek">{t('reportPreviousWeek')}</MenuItem>
+            <MenuItem value="thisMonth">{t('reportThisMonth')}</MenuItem>
+            <MenuItem value="previousMonth">{t('reportPreviousMonth')}</MenuItem>
+            <MenuItem value="custom">{t('reportCustom')}</MenuItem>
+          </Select>
+        </FormControl>
+      </Grid>
+      {period === 'custom' && <Grid item xs={12} sm={3}>
         <TextField
-          margin="normal"
           variant="filled"
           label={t('reportFrom')}
           type="datetime-local"
           value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)}
           onChange={e => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
           fullWidth />
-      )}
-      {period === 'custom' && (
+      </Grid>}
+      {period === 'custom' && <Grid item xs={12} sm={3}>
         <TextField
-          margin="normal"
           variant="filled"
           label={t('reportTo')}
           type="datetime-local"
           value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)}
           onChange={e => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
           fullWidth />
-      )}
+      </Grid>}
       {children}
-      <FormControl margin="normal" fullWidth>
-        <ButtonGroup color="primary" orientation="vertical" disabled={!deviceId}>
-          <Button onClick={() => handleClick(false, true)}>{t('reportShow')}</Button>
-          {!showOnly && <Button onClick={() => handleClick(false, false)}>{t('reportExport')}</Button>}
-          {!showOnly && <Button onClick={() => handleClick(true, false)}>{t('reportEmail')}</Button>}
-        </ButtonGroup>
-      </FormControl>
-    </>
+      <Grid item xs={!showOnly ? 4 : 12} sm={!showOnly ? 2 : 6}>
+        <Button 
+          onClick={() => handleClick(false, true)}
+          variant='outlined'
+          color='secondary'
+          fullWidth>
+          {t('reportShow')}
+        </Button>
+      </Grid>
+      {!showOnly && 
+        <Grid item xs={4} sm={2}>
+            <Button 
+              onClick={() => handleClick(false, false)}
+              variant='outlined'
+              color='secondary'
+              fullWidth>
+              {t('reportExport')}
+            </Button>
+        </Grid>}
+      {!showOnly && 
+        <Grid item xs={4} sm={2}>
+            <Button 
+              onClick={() => handleClick(true, false)}
+              variant='outlined'
+              color='secondary'
+              fullWidth>
+              <Typography variant="button" noWrap>{t('reportEmail')}</Typography>
+            </Button>
+        </Grid>}
+    </Grid>
   );
 }