From c75314c605c2fc8899d7c4b68df85c22809c20c3 Mon Sep 17 00:00:00 2001
From: Dnouv <61188295+Dnouv@users.noreply.github.com>
Date: Mon, 26 Apr 2021 06:39:23 +0530
Subject: [PATCH] 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   | 10 ++++++++--
 ui/src/themes/dark.js    | 11 ++++++++++-
 ui/src/themes/light.js   | 29 +++++++++++++++++++++++++++++
 ui/src/themes/spotify.js |  2 +-
 4 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/ui/src/layout/Login.js b/ui/src/layout/Login.js
index 13c203ca..66dd7a13 100644
--- a/ui/src/layout/Login.js
+++ b/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' }
 )
diff --git a/ui/src/themes/dark.js b/ui/src/themes/dark.js
index 7e7f8067..aa6a6d58 100644
--- a/ui/src/themes/dark.js
+++ b/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: {
diff --git a/ui/src/themes/light.js b/ui/src/themes/light.js
index 15a49ee4..18e3d46e 100644
--- a/ui/src/themes/light.js
+++ b/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',
diff --git a/ui/src/themes/spotify.js b/ui/src/themes/spotify.js
index c0501777..6019e149 100644
--- a/ui/src/themes/spotify.js
+++ b/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',