Revamp login page

webui-src/app/login.js

@@ -11,15 +11,16 @@ function renderLoginPage(callback) {
 
 let loginComponent = {
   view: function() {
-    return m('.tab.frame-center', [
-      m('img.logo[src=../../data/retroshare.svg][alt=retroshare_icon][width=10%]'),
-      m('input.field[type=text][placeholder=Username][id=uname]'),
-      m('input.field[type=password][placeholder=Password][id=passwd]'),
-      m('button.submit-btn', {
-        onclick: verifyLogin
-      }, 'Login'),
-      m('p.error[id=error]'),
-    ]);
+    return m('.login-page',
+      m('.login-container', [
+        m('img.logo[src=../../data/retroshare.svg][alt=retroshare_icon][width=30%]'),
+        m('input.field[type=text][placeholder=Username][id=uname]'),
+        m('input.field[type=password][placeholder=Password][id=passwd]'),
+        m('button.submit-btn', {
+          onclick: verifyLogin
+        }, 'Login'),
+        m('p.error[id=error]'),
+      ]));
   }
 };
 

webui-src/app/theme.css

@@ -11,9 +11,8 @@ input, textarea {
     font-size: 1.2em;
     font-weight: 500;
     border-radius: 5px;
-    padding: 0.5em;
+    padding: 0.3em;
     border: 2px solid #3ba4d7;
-    margin-bottom: 1em;
 }
 
 button {
@@ -86,9 +85,32 @@ li {
 }
 
 /******************************
-Target specific elements
+Target specific sections
 ******************************/
 
+/* Login */
+.login-page {
+    background-image: linear-gradient(-45deg, #118fec, #7bccff);
+    height: 100%;
+}
+.login-container {
+    margin: 0 auto;
+    position: relative;
+    top: 100px;
+    max-width: 30%;
+    height: 50%;
+    border-radius: 5px;
+
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    align-items: center;
+    background-color: white;
+}
+.login-container * {
+    margin-top: 10px;
+}
+
 /* Navbar */
 .tab-container {
     padding: 1em 1em;