Merge pull request #871 from dkyeremeh/inputs-fix

Inputs fix

4 files changed, 38 insertions, 19 deletions

diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js
index d2a57a2..382b4fd 100644
--- a/modern/src/components/registration/LoginForm.js
+++ b/modern/src/components/registration/LoginForm.js
@@ -59,7 +59,7 @@ const LoginForm = () => {
 
   return (
     <StartPage>
-      <Grid container direction='column' spacing={3}>
+      <Grid container direction='column' spacing={2}>
         {useMediaQuery(theme.breakpoints.down('md')) &&
           <Grid item className={classes.logoContainer}>
             <svg height="64" width="240">
diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js
index a532d09..b2a8222 100644
--- a/modern/src/components/registration/RegisterForm.js
+++ b/modern/src/components/registration/RegisterForm.js
@@ -8,7 +8,9 @@ import t from './../../common/localization';
 const useStyles = makeStyles(theme => ({
   register: {
     fontSize: theme.spacing(3),
-    fontWeight: 500
+    fontWeight: 500,
+    marginLeft: theme.spacing(2),
+    textTransform: "uppercase"
   },
   link: {
     fontSize: theme.spacing(3),
@@ -52,7 +54,7 @@ const RegisterForm = () => {
         onClose={() => history.push('/login')}
         autoHideDuration={6000}
         message={t('loginCreated')} />    
-      <Grid container direction='column' spacing={3}>
+      <Grid container direction='column' spacing={2}>
         <Grid container item>
           <Grid item>
             <Typography className={classes.link} color='primary'>
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 8055d30..b9817d5 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -4,19 +4,7 @@ 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');
@@ -68,7 +56,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
   }
 
   return (
-    <Grid container spacing={2} className={classes.gridContainer}>
+    <Grid container spacing={2}>
       <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
         <FormControl variant="filled" fullWidth>
           <InputLabel>{t('reportDevice')}</InputLabel>
diff --git a/modern/src/theme/overrides.js b/modern/src/theme/overrides.js
index c8d64a9..cd6c5a5 100644
--- a/modern/src/theme/overrides.js
+++ b/modern/src/theme/overrides.js
@@ -3,14 +3,15 @@ import dimensions from './dimensions';
 export default {
   MuiFormControl: {
     root: {
-      height: dimensions.inputHeight,
+      marginTop: 5,
+      marginBottom: 5
     }
   },
   MuiInputLabel: {
     filled: {
       transform: 'translate(12px, 14px) scale(1)',
         '&$shrink' :{
-          transform: 'translate(12px, -12px) scale(0.75)'
+          transform: 'translate(12px, -14px) scale(0.72)'
         }
     },
   },      
@@ -18,7 +19,7 @@ export default {
     root: {
       height: dimensions.inputHeight,
       borderRadius: dimensions.borderRadius,
-      background: 'rgba(0, 0, 0, 0.035)',
+      backgroundColor: 'rgba(0, 0, 0, 0.035)',
     },
     input: {
       height: dimensions.inputHeight,
@@ -44,6 +45,34 @@ export default {
   MuiButton: {
     root: {
       height: dimensions.inputHeight,
+      marginTop: 5,
+      marginBottom: 5,
+      '&$disabled': {
+        opacity: .4,
+        color: undefined,
+      }
+    },
+    contained: {
+      '&$disabled': {
+        opacity: .4,
+        color: undefined,
+        backgroundColor: undefined
+      }
+    }
+  },
+  MuiFormHelperText: {
+    root: {
+      marginBottom: -10
+    },
+    contained: {
+      marginLeft: 12
+    }
+  },
+  MuiAutocomplete: {
+    inputRoot: {
+      '&.MuiFilledInput-root': {
+        paddingTop: 0
+      }
     }
   }
 };