new design for login

public/app/partials/login.html

@@ -1,85 +1,83 @@
 <div class="login-container container">
 
-	<div class="login-box">
+  <div class="login-box">
 
-		<div class="login-box-logo">
-			<img class="logo-icon" src="public/img/grafana_icon.svg"></img><br>
-			<i class="icon-gf icon-gf-grafana_wordmark"></i>
-		</div>
+    <div class="login-box-logo">
+      <img class="logo-icon" src="public/img/grafana_icon.svg"></img>
+      <br>
+      <i class="icon-gf icon-gf-grafana_wordmark"></i>
+
+    </div>
 
     <div class="login-inner-box">
-			<div class="login-tab-header">
-				<button class="btn-login-tab" ng-click="loginMode = true;" ng-class="{active: loginMode}">
-					Log in
-				</button>
-				<button class="btn-login-tab" ng-click="loginMode = false;" ng-class="{active: !loginMode}" ng-show="!disableUserSignUp">
-					Sign up
-				</button>
-			</div>
 
-      <form name="loginForm" class="login-form gf-form-group" ng-hide="disableLoginForm">
-				<div class="gf-form" ng-if="loginMode">
-					<span class="gf-form-label width-7">User</span>
-					<input type="text" name="username" class="gf-form-input max-width-14" required ng-model='formModel.user' placeholder={{loginHint}} autofocus>
-				</div>
-				<div class="gf-form" ng-if="loginMode">
-					<span class="gf-form-label width-7">Password</span>
-					<input type="password" name="password" class="gf-form-input max-width-14" required ng-model="formModel.password" id="inputPassword" placeholder="password">
-				</div>
+      <form name="loginForm" class="login-form-group gf-form-group" ng-hide="disableLoginForm">
+        <div class="login-form">
+          <input type="text" name="username" class="gf-form-input login-form-input" required ng-model='formModel.user' placeholder={{loginHint}}
+            autofocus>
+        </div>
 
-				<div class="gf-form" ng-if="!loginMode">
-						<span class="gf-form-label width-7">Email</span>
-						<input type="email" class="gf-form-input max-width-14" required ng-model='formModel.email' placeholder="email">
-				</div>
+        <div class="login-form">
+          <input type="password" name="password" class="gf-form-input login-form-input" required ng-model="formModel.password" id="inputPassword"
+            placeholder="password">
+        </div>
 
-				<div class="gf-form-button-row">
-					<button type="submit" class="btn btn-large p-x-3" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
-						{{submitBtnText}}
-					</button>
-				</div>
-			</form>
+        <div class="login-button-group">
+          <button type="submit" class="btn btn-medium p-x-2" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
+            Login
+          </button>
+          <div class="small" style="display:flex; align-items:center">
+            <a href="user/password/send-reset-email">
+              Forgot your password?
+            </a>
+          </div>
+        </div>
 
-			<div ng-if="loginMode">
-				<div class="text-center login-divider" ng-show="oauthEnabled">
-					<div class="login-divider-line">
-						<span class="login-divider-text">
-							<span ng-hide="disableLoginForm">Or</span> Login With
-						</span>
-					</div>
-				</div>
+      </form>
 
-				<div class="clearfix"></div>
+      <div class="text-center login-divider" ng-show="oauthEnabled">
+        <div>
+          <div class="login-divider-line">
+          </div>
+        </div>
+        <div>
+          <span class="login-divider-text">
+            <span ng-hide="disableLoginForm">Or</span>
+          </span>
+        </div>
+        <div>
+          <div class="login-divider-line">
+          </div>
+        </div>
+      </div>
 
-				<div class="login-oauth text-center" ng-show="oauthEnabled">
-					<a class="btn btn-large btn-google" href="login/google" target="_self" ng-if="oauth.google">
-						<i class="fa fa-google"></i>
-						Google
-					</a>
-					<a class="btn btn-large btn-github" href="login/github" target="_self" ng-if="oauth.github">
-						<i class="fa fa-github"></i>
-						GitHub
-					</a>
-					<a class="btn btn-large btn-grafana-com" href="login/grafana_com" target="_self" ng-if="oauth.grafana_com">
-						<img src="public/img/grafana_com_auth_icon.svg"></img>
-						<span>Grafana.com</span>
-					</a>
-					<a class="btn btn-large btn-generic-oauth" href="login/generic_oauth" target="_self" ng-if="oauth.generic_oauth">
-						<i class="fa fa-gear"></i>
-						{{oauth.generic_oauth.name}}
-					</a>
-				</div>
-			</div>
-		</div>
+      <div class="clearfix"></div>
 
-		<div class="clearfix"></div>
+      <div class="login-oauth text-center" ng-show="oauthEnabled" style="width:100%">
+        <a class="btn btn-medium btn-google login-btn" href="login/google" target="_self" ng-if="oauth.google">
+          Sign in with Google
+        </a>
+        <a class="btn btn-medium btn-github login-btn" href="login/github" target="_self" ng-if="oauth.github">
+          Sign in with GitHub
+        </a>
+        <a class="btn btn-medium btn-grafana-com login-btn" href="login/grafana_com" target="_self" ng-if="oauth.grafana_com">
+          Sign in with Grafana.com
+        </a>
+        <a class="btn btn-medium btn-generic-oauth login-btn" href="login/generic_oauth" target="_self" ng-if="oauth.generic_oauth">
+          Sign in with {{oauth.generic_oauth.name}}
+        </a>
+      </div>
 
-		<div class="text-center password-recovery" ng-hide="disableLoginForm">
-			<div class="text-center">
-				<a href="user/password/send-reset-email">
-					Forgot your password?
-				</a>
-			</div>
-		</div>
+      <div class="login-signup-box">
+        <div style="padding-right:1rem">
+          New user?
+        </div>
+        <a class="btn btn-medium" style="color:#fafafa; border: 1px solid #fafafa">
+          Sign up
+        </a>
+      </div>
+    </div>
 
-	</div>
+    <div class="clearfix"></div>
+  </div>
 </div>

public/sass/pages/_login.scss

@@ -1,42 +1,92 @@
 .login-container {
   background-position: left;
-  background-size: 60%;
+  min-height: 100%;
   background-repeat: no-repeat;
   min-width: 100%;
   margin-left: 0;
-  margin-top: -26px; /* BAD HACK - experiement to see how it looks */
-  padding-top: $spacer * 5; /* BAD HACK - experiement to see how it looks */
+  background-color: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0px 1000px black inset;
+  -webkit-text-fill-color: #fafafa !important;
+}
+
+.login-form-group {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
 }
 
 .login-form {
-  display: inline-block;
-  max-width: 24rem;
+  margin-bottom: .5rem;
+  width: 100%;
+}
+
+.login-form-input {
+  border: 1px solid #fafafa !important;
+  border-radius: 4px !important;
+}
+
+.login-button-group {
+  display:flex;
+  align-items: center;
+  justify-content:space-between;
+  width: 100%;
+  margin-top: 1rem
+}
+
+.login-text {
+  font-size: $font-size-sm;
 }
 
 .login-box {
   max-width: 700px;
-  margin: 0 auto; /* was $spacer * 2 auto 0 auto; */
+  display: flex;
+  align-items: stretch;
+  flex-direction: row;
 }
 
 .login-box-logo {
-  text-align: center;
-  margin-bottom: $spacer * 2;
+  width: 45%;
+  padding: 4rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-right: 1px solid #fafafa;
   img {
-    width: 6rem;
+    width: 12rem;
   }
   .icon-gf-grafana_wordmark {
     color: $link-color;
     position: relative;
-    top: -4.5rem;
-    font-size: 2.5rem;
+    font-size: 4rem;
     text-shadow: 3px 3px 5px black;
   }
 }
 
 .login-inner-box {
-  background: $panel-bg;
   text-align: center;
-  padding-bottom: 3rem;
+  padding: 2rem 4rem;
+  display: flex;
+  flex-direction: column;
+  width: 55%;
+  align-items: center;
+  justify-content: center;
 }
 
 .login-tab-header {
@@ -134,13 +184,15 @@
 
 .login-divider {
   float: left;
-  width: 50%;
+  width: 100%;
   margin: 5px 25% 25px 25%;
+  display: flex;
+  justify-content: space-between;
 
   .login-divider-line {
-    width: 100%;
+    width: 110px;
     height: 10px;
-    border-bottom: 1px solid $gray-1;
+    border-bottom: 1px solid #fafafa;
 
     .login-divider-text {
       background-color: $panel-bg;
@@ -150,6 +202,18 @@
   }
 }
 
+.login-signup-box {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  margin-top: 2rem
+}
+
+.login-btn {
+  width: 100%; margin: 0 0 1rem;
+}
+
 .signup-page-background {
   position: fixed;
   top: 0;
@@ -190,14 +254,38 @@
   }
 }
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-down(md) {
   .login-box-logo {
     img {
       width: 125px;
     }
     .icon-gf-grafana_wordmark {
       top: -5px;
-      font-size: 3rem;
+      font-size: 2rem;
+    }
+  }
+}
+
+@include media-breakpoint-down(xs) {
+  .login-box {
+    flex-direction: column;
+
+  }
+  .login-box-logo {
+    border: none;
+    width: 100%;
+    padding: 0;
+  }
+  .login-inner-box {
+    width: 100%;
+  }
+  .login-box-logo {
+    img {
+      width: 5rem;
+    }
+    .icon-gf-grafana_wordmark {
+      top: -5px;
+      font-size: 2rem;
     }
   }
 }

public/views/index.template.html

@@ -35,9 +35,7 @@
 				</div>
 			</div>
 
-			<div  class="main-view">
-        <div ng-view></div>
-
+			<div  class="main-view" ng-view>
         <!-- <footer class="footer"> -->
         <!--   <div class="row text&#45;center"> -->
         <!--     <ul> -->