From 0ec79e04116ece7081753ac62d0d044bde005f36 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Mon, 1 Aug 2016 11:54:03 -0400
Subject: [PATCH] (html,css) Use fab button on login page

---
 UI/Templates/MainUI/SOGoRootPage.wox          | 30 ++++++++++---------
 UI/WebServerResources/scss/views/LoginUI.scss | 22 +++++++++++---
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/UI/Templates/MainUI/SOGoRootPage.wox b/UI/Templates/MainUI/SOGoRootPage.wox
index b8fbacbfe..c18cbf6b4 100644
--- a/UI/Templates/MainUI/SOGoRootPage.wox
+++ b/UI/Templates/MainUI/SOGoRootPage.wox
@@ -51,13 +51,6 @@
               <input type="password" ng-model="app.creds.password" ng-required="true"/>
             </md-input-container>
 
-            <!-- CONNECT BUTTON -->
-            <div layout="row" layout-align="end center">
-              <md-button type="submit" ng-disabled='app.loginForm.$invalid' sg-ripple-click="loginContent">
-                <var:string label:value="Connect"/>
-              </md-button>
-            </div>
-
             <!-- LANGUAGES SELECT -->
             <div layout="row" layout-align="start end">
               <md-icon>language</md-icon>
@@ -94,14 +87,23 @@
                 <var:string label:value="Remember username"/>
               </md-switch>
             </div>
+
+            <!-- CONNECT BUTTON -->
+            <div layout="row" layout-align="space-between center">
+              <md-button class="md-icon-button"
+                         label:aria-label="About"
+                         ng-click="app.showAbout()">
+                <md-icon>info</md-icon>
+              </md-button>
+              <md-button class="md-fab md-accent md-hue-2" type="submit"
+                         label:aria-label="Connect"
+                         ng-disabled='app.loginForm.$invalid' sg-ripple-click="loginContent">
+                <md-icon>arrow_forward</md-icon>
+              </md-button>
+            </div>
+
           </form>
-          <div layout="row" layout-align="end end" ng-cloak="ng-cloak">
-            <md-button class="md-icon-button"
-                       label:aria-label="About"
-                       ng-click="app.showAbout()">
-              <md-icon class="md-fg">info</md-icon>
-            </md-button>
-          </div>
+
           <sg-ripple class="md-default-theme md-accent md-bg"
                      ng-class="{ 'md-warn': app.loginState == 'error' }"><!-- ripple background --></sg-ripple>
           <sg-ripple-content class="md-flex ng-hide"
diff --git a/UI/WebServerResources/scss/views/LoginUI.scss b/UI/WebServerResources/scss/views/LoginUI.scss
index 6c24b58e4..c75535a84 100644
--- a/UI/WebServerResources/scss/views/LoginUI.scss
+++ b/UI/WebServerResources/scss/views/LoginUI.scss
@@ -8,8 +8,24 @@ $sg-login-width: grid-step(5);
     margin: auto;
     overflow: hidden;
 
-    .sg-logo img {
-      width: grid-step(5);
+    .sg-logo {
+      // Center image
+      margin: auto;
+      img {
+        height: 100%;
+        width: grid-step(5);
+      }
+    }
+
+    // Overwrite Chrome autofill yellow background
+    @-webkit-keyframes autofill {
+      to {
+        background: transparent;
+      }
+    }
+    input:-webkit-autofill {
+      -webkit-animation-name: autofill;
+      -webkit-animation-fill-mode: both;
     }
 
     /**
@@ -21,8 +37,6 @@ $sg-login-width: grid-step(5);
         min-height: 100%;
       }
       .sg-logo {
-        // Center content
-        margin: auto;
         img {
           margin: auto;
           height: 100%;