4 files changed, 21 insertions, 13 deletions
diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js
index 18638d21..f029cbc3 100644
--- a/modern/src/LoginPage.js
+++ b/modern/src/LoginPage.js
@@ -21,9 +21,9 @@ const useStyles = makeStyles(theme => ({
     alignItems: 'center',
     background: theme.palette.common.purple,
     paddingBottom: theme.spacing(5),
-    width: `${theme.dimensions.sidebarWidth}%`,
+    width: theme.dimensions.sidebarWidth,
     [theme.breakpoints.down('md')]: {
-      width: `${theme.dimensions.minSidebarWidth}px`,
+      width: theme.dimensions.tabletSidebarWidth,
     },
     [theme.breakpoints.down('xs')]: {
       width: '0px',
@@ -35,11 +35,18 @@ const useStyles = makeStyles(theme => ({
     justifyContent: 'center',
     alignItems: 'center',
     flex: 1,
-    //padding: theme.spacing(0, 25, 0, 0),
-    boxShadow: '-2px 0px 16px rgba(0, 0, 0, 0.25)'
+    boxShadow: '-2px 0px 16px rgba(0, 0, 0, 0.25)',
+    [theme.breakpoints.up('lg')]: {
+      padding: theme.spacing(0, 25, 0, 0)
+    },
   },
   form: {
-    maxWidth: theme.dimensions.maxFormWidth,
+    maxWidth: theme.spacing(52),
+    padding: theme.spacing(5),
+    width: "100%",
+  },
+  logo: {
+    textAlign: 'center',
   },
 }));
 
@@ -94,7 +101,7 @@ const LoginPage = () => {
       <Paper className={classes.paper}>
         <form className={classes.form} onSubmit={handleLogin}>
           <Grid container direction='column' spacing={3}>
-            <Grid item>
+            <Grid item className={classes.logo}>
               {matches && <Logo fill='#333366'/>}
             </Grid>
             <Grid item>
diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js
index bc20cb91..e36fc23b 100644
--- a/modern/src/theme/dimensions.js
+++ b/modern/src/theme/dimensions.js
@@ -1,7 +1,6 @@
 export default {
-  inputHeight: 42,
-  borderRadius: 4,
-  maxFormWidth: 335,
-  sidebarWidth: 28,
-  minSidebarWidth: 52 
+  inputHeight: '42px',
+  borderRadius: '4px',
+  sidebarWidth: '28%',
+  tabletSidebarWidth: '52px' 
 };
diff --git a/modern/src/theme/overrides.js b/modern/src/theme/overrides.js
index 021770b7..28ac7467 100644
--- a/modern/src/theme/overrides.js
+++ b/modern/src/theme/overrides.js
@@ -18,6 +18,7 @@ export default {
     root: {
       height: dimensions.inputHeight,
       borderRadius: dimensions.borderRadius,
+      background: 'rgba(0, 0, 0, 0.035)',
     },
     input: {
       height: dimensions.inputHeight,
@@ -43,6 +44,7 @@ export default {
   MuiButton: {
     root: {
       height: dimensions.inputHeight,
+      textTransform: 'none'
     }
   }
 };
diff --git a/modern/src/theme/palette.js b/modern/src/theme/palette.js
index 24aefce1..5a54b77f 100644
--- a/modern/src/theme/palette.js
+++ b/modern/src/theme/palette.js
@@ -1,7 +1,7 @@
 import { deepPurple, green } from '@material-ui/core/colors';
 
-const traccarPurple = deepPurple[500];
-const traccarGreen = green[500];
+const traccarPurple = '#333366';
+const traccarGreen = '#4CAF50';
 const traccarWhite = '#FFF';
 
 export default {