Merge pull request #3958 from bergquist/ux_login

Login: UX improvements

public/app/partials/login.html

@@ -65,26 +65,38 @@
 
 
 			<div class="clearfix"></div>
 			<div class="clearfix"></div>
 
 
+			<div class="text-center login-divider">
+				<div class="login-divider-line">
+				  <span class="login-divider-text">
+				    Or login with
+				  </span>
+				</div>
+			</div>
+
+			<div class="clearfix"></div>
+
 			<div class="login-oauth text-center">
 			<div class="login-oauth text-center">
-				<a class="btn btn-google" href="login/google" target="_self" ng-if="googleAuthEnabled">
+				<a class="btn btn-large btn-google" href="login/google" target="_self" ng-if="googleAuthEnabled">
 					<i class="fa fa-google"></i>
 					<i class="fa fa-google"></i>
 					with Google
 					with Google
 				</a>
 				</a>
-				<a class="btn btn-github" href="login/github" target="_self" ng-if="githubAuthEnabled">
+				<a class="btn btn-large btn-github" href="login/github" target="_self" ng-if="githubAuthEnabled">
 					<i class="fa fa-github"></i>
 					<i class="fa fa-github"></i>
 					with Github
 					with Github
 				</a>
 				</a>
 			</div>
 			</div>
-		</div>
 
 
-		<div class="row" style="margin-top: 40px">
-			<div class="text-center">
-				<a href="user/password/send-reset-email">
-					Forgot your password?
-				</a>
+			<div class="text-center password-recovery">
+				<div class="text-center">
+					<a href="user/password/send-reset-email">
+						Forgot your password?
+					</a>
+				</div>
 			</div>
 			</div>
 		</div>
 		</div>
 
 
+
+
 		<div class="row" style="margin-top: 50px">
 		<div class="row" style="margin-top: 50px">
 			<div class="version-footer text-center small">
 			<div class="version-footer text-center small">
 				Grafana version: {{buildInfo.version}}, commit: {{buildInfo.commit}},
 				Grafana version: {{buildInfo.version}}, commit: {{buildInfo.commit}},

public/less/login.less

@@ -76,21 +76,23 @@
 
 
 .login-submit-button-row {
 .login-submit-button-row {
   text-align: center;
   text-align: center;
-  margin-top: 40px;
+  margin-top: 30px;
   button {
   button {
-    padding: 9px 7px;
-    font-size: 14px;
+    padding: 14px 23px;
+    font-size: 16px;
     font-weight: bold;
     font-weight: bold;
     min-width: 150px;
     min-width: 150px;
     display: inline-block;
     display: inline-block;
     border: 1px solid lighten(@btnInverseBackground, 10%);
     border: 1px solid lighten(@btnInverseBackground, 10%);
+    color: @grayLight;
   }
   }
 }
 }
 
 
 .login-oauth {
 .login-oauth {
-  margin-top: 30px;
-  padding: 10px;
-  background: @grafanaTargetBackground;
+  .btn {
+    margin: 5px;
+  }
+
   .btn-google {
   .btn-google {
     background: #dd4b39;
     background: #dd4b39;
     color: white;
     color: white;
@@ -101,6 +103,33 @@
   }
   }
 }
 }
 
 
+.password-recovery {
+  background: @grafanaTargetBackground;
+  margin-top: 30px;
+  padding: 10px;
+  a {
+    color: @grayLight;
+  }
+}
+
+.login-divider {
+  float: left;
+  width: 50%;
+  margin: 5px 25% 25px 25%;
+
+  .login-divider-line {
+    width: 100%;
+    height: 10px;
+    border-bottom: 1px solid @gray;
+
+    .login-divider-text {
+      background-color: @grayDarker;
+      color: @grayLight;
+      padding: 0 10px;
+    }
+  }
+}
+
 .signup-page-background {
 .signup-page-background {
   position: fixed;
   position: fixed;
   top: 0;
   top: 0;