Enhanced Mobile Login Screen (#953)

* Enhanced Mobile Login Screen

* Removed duplicate line of code

* Add support for desktop

* Remove conflict

* Reset button style

* Change Login

ui/src/layout/Login.js

@@ -33,14 +33,17 @@ const useStyles = makeStyles(
     card: {
       minWidth: 300,
       marginTop: '6em',
+      overflow: 'visible',
     },
     avatar: {
       margin: '1em',
       display: 'flex',
       justifyContent: 'center',
+      marginTop: '-3em',
     },
     icon: {
-      width: '40px',
+      backgroundColor: 'transparent',
+      width: '6.3em',
     },
     systemName: {
       marginTop: '1em',
@@ -65,7 +68,10 @@ const useStyles = makeStyles(
     actions: {
       padding: '0 1em 1em 1em',
     },
-    systemNameLink: {},
+    button: {},
+    systemNameLink: {
+      textDecoration: 'none',
+    },
   }),
   { name: 'NDLogin' }
 )

ui/src/themes/dark.js

@@ -17,11 +17,20 @@ export default {
     },
     NDLogin: {
       systemNameLink: {
-        color: '#fff',
+        color: '#0085ff',
       },
+      icon: {},
       welcome: {
         color: '#eee',
       },
+      card: {
+        minWidth: 300,
+        backgroundColor: '#424242ed',
+      },
+      avatar: {},
+      button: {
+        boxShadow: '3px 3px 5px #000000a3',
+      },
     },
   },
   player: {

ui/src/themes/light.js

@@ -17,6 +17,35 @@ export default {
         },
       },
     },
+    NDLogin: {
+      main: {
+        '& .MuiFormLabel-root': {
+          color: '#000000',
+        },
+        '& .MuiFormLabel-root.Mui-focused': {
+          color: '#0085ff',
+        },
+        '& .MuiFormLabel-root.Mui-error': {
+          color: '#f44336',
+        },
+        '& .MuiInput-underline:after': {
+          borderBottom: '2px solid #0085ff',
+        },
+      },
+      card: {
+        minWidth: 300,
+        marginTop: '6em',
+        backgroundColor: '#ffffffe6',
+      },
+      avatar: {},
+      icon: {},
+      button: {
+        boxShadow: '3px 3px 5px #000000a3',
+      },
+      systemNameLink: {
+        color: '#0085ff',
+      },
+    },
   },
   player: {
     theme: 'light',

ui/src/themes/spotify.js

@@ -259,7 +259,6 @@ export default {
       },
       systemNameLink: {
         color: '#fff',
-        textDecoration: 'none',
       },
       systemName: {
         marginTop: '0.5em',
@@ -267,6 +266,7 @@ export default {
       },
       icon: {
         backgroundColor: 'inherit',
+        width: '5em',
       },
       card: {
         background: 'none',