Finalizing reports implemetations

1 files changed, 13 insertions, 2 deletions

diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 0e5ab69..c7835e7 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -1,11 +1,22 @@
 import React, { useState } from 'react';
-import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography } from '@material-ui/core';
+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');
@@ -57,7 +68,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
   }
 
   return (
-    <Grid container spacing={3}>
+    <Grid container spacing={2} className={classes.gridContainer}>
       <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
         <FormControl variant="filled" fullWidth>
           <InputLabel>{t('reportDevice')}</InputLabel>