From cae975cb39519b03570c5aa08c13326fd57eb2ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Thu, 18 Feb 2016 14:44:36 +0100
Subject: [PATCH] ux(): fixed login, signup, signup step2 and invite views

---
 .../app/features/org/partials/orgUsers.html   |  1 +
 public/app/partials/login.html                | 65 ++++---------
 public/app/partials/signup_invited.html       | 85 +++++------------
 public/app/partials/signup_step2.html         | 93 ++++++-------------
 public/sass/_variables.dark.scss              |  1 -
 public/sass/_variables.light.scss             |  3 +-
 public/sass/_variables.scss                   |  1 +
 public/sass/components/_buttons.scss          | 21 ++++-
 public/sass/components/_gf-form.scss          |  1 +
 public/sass/mixins/_buttons.scss              | 47 ++++++++++
 public/sass/pages/_login.scss                 | 34 ++++---
 11 files changed, 163 insertions(+), 189 deletions(-)

diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html
index 229b341c775..e2f88613e8d 100644
--- a/public/app/features/org/partials/orgUsers.html
+++ b/public/app/features/org/partials/orgUsers.html
@@ -77,6 +77,7 @@
 				</table>
 			</tab>
 		</tabset>
+
 	</div>
 </div>
 
diff --git a/public/app/partials/login.html b/public/app/partials/login.html
index 0cdd6c790c1..3880f2c1989 100644
--- a/public/app/partials/login.html
+++ b/public/app/partials/login.html
@@ -17,47 +17,23 @@
 				</button>
 			</div>
 
-      <form name="loginForm" class="login-form" style="margin-top: 25px;">
-				<div class="tight-form-container">
-					<div class="tight-form" ng-if="loginMode">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 78px">
-								<strong>User</strong>
-							</li>
-							<li>
-								<input type="text" name="username" class="tight-form-input last" required ng-model='formModel.user' placeholder={{loginHint}} style="width: 253px">
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
-					<div class="tight-form" ng-if="loginMode">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 78px">
-								<strong>Password</strong>
-							</li>
-							<li>
-								<input type="password" name="password" class="tight-form-input last" required ng-model="formModel.password" id="inputPassword" style="width: 253px" placeholder="password">
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
-
-					<div class="tight-form" ng-if="!loginMode">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 79px">
-								<strong>Email</strong>
-							</li>
-							<li>
-								<input type="email" class="tight-form-input last" required ng-model='formModel.email' placeholder="email" style="width: 253px">
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
-
+      <form name="loginForm" class="login-form gf-form-group">
+				<div class="gf-form" ng-if="loginMode">
+					<span class="gf-form-label gf-size-sm">User</span>
+					<input type="text" name="username" class="gf-form-input gf-size-max-xl" required ng-model='formModel.user' placeholder={{loginHint}}>
+				</div>
+				<div class="gf-form" ng-if="loginMode">
+					<span class="gf-form-label gf-size-sm">Password</span>
+					<input type="password" name="password" class="gf-form-input gf-size-max-xl" required ng-model="formModel.password" id="inputPassword" placeholder="password">
 				</div>
 
-				<div class="login-submit-button-row">
-					<button type="submit" class="btn" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
+				<div class="gf-form" ng-if="!loginMode">
+						<span class="gf-form-label gf-size-sm">Email</span>
+						<input type="email" class="gf-form-input gf-size-max-xl" required ng-model='formModel.email' placeholder="email">
+				</div>
+
+				<div class="gf-form-button-row">
+					<button type="submit" class="btn btn-large" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
 						{{submitBtnText}}
 					</button>
 				</div>
@@ -65,9 +41,9 @@
 
 			<div class="text-center login-divider" ng-if="oauthEnabled">
 				<div class="login-divider-line">
-				  <span class="login-divider-text">
-				    Or login with
-				  </span>
+					<span class="login-divider-text">
+						Or login with
+					</span>
 				</div>
 			</div>
 
@@ -95,15 +71,14 @@
 			</div>
 		</div>
 
-
-
 		<div class="row" style="margin-top: 50px">
 			<div class="version-footer text-center small">
 				Grafana version: {{buildInfo.version}}, commit: {{buildInfo.commit}},
 				build date: {{buildInfo.buildstamp | date: 'yyyy-MM-dd HH:mm:ss' }}
 			</div>
 		</div>
-
 	</div>
 
+</div>
+
 
diff --git a/public/app/partials/signup_invited.html b/public/app/partials/signup_invited.html
index ead9b9c0317..9eadd6218d3 100644
--- a/public/app/partials/signup_invited.html
+++ b/public/app/partials/signup_invited.html
@@ -6,7 +6,8 @@
 	<div class="login-box">
 
 		<div class="login-box-logo">
-			<img src="img/logo_transparent_200x75.png">
+			<img class="logo-icon" src="public/img/grafana_icon.svg"></img><br>
+			<i class="icon-gf icon-gf-grafana_wordmark"></i>
 		</div>
 
     <div class="invite-box">
@@ -14,82 +15,40 @@
 				Hello {{greeting}}.
 			</h3>
 
-			<div class="modal-tagline">
+			<div class="modal-tagline p-b-2">
 				<em>{{invitedBy}}</em> has invited you to join Grafana and the organization <span class="highlight-word">{{contextSrv.user.orgName}}</span></br>Please complete the following to accept your invitation and continue:
 			</div>
 
-      <form name="inviteForm" class="login-form">
-				<div class="tight-form-container">
-					<div class="tight-form">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 128px">
-								Email
-							</li>
-							<li>
-								<input type="email" name="email" class="tight-form-input last" required ng-model='formModel.email' placeholder="Email" style="width: 253px">
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
-					<div class="tight-form">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 128px">
-								Name
-							</li>
-							<li>
-								<input type="text" name="name" class="tight-form-input last" ng-model='formModel.name' placeholder="Name (optional)" style="width: 253px">
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
-					<div class="tight-form">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 128px">
-								Username
-							</li>
-							<li>
-								<input type="text" name="username" class="tight-form-input last" required ng-model='formModel.username' placeholder="Username" style="width: 253px">
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
-
-					<div class="tight-form">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 128px">
-								Password
-							</li>
-							<li>
-								<input type="password" name="password" class="tight-form-input last" required ng-model="formModel.password" id="inputPassword" style="width: 253px" placeholder="password">
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
+			<form name="inviteForm" class="login-form gf-form-group">
+				<div class="gf-form">
+					<span class="gf-form-label gf-size-sm">Email</span>
+					<input type="email" name="email" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.email' placeholder="Email">
+				</div>
+				<div class="gf-form">
+					<span class="gf-form-label gf-size-sm">Name</span>
+					<input type="text" name="name" class="gf-form-input gf-size-max-xxl" ng-model='formModel.name' placeholder="Name (optional)">
+				</div>
+				<div class="gf-form">
+					<span class="gf-form-label gf-size-sm">Username</span>
+					<input type="text" name="username" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.username' placeholder="Username">
+				</div>
+				<div class="gf-form">
+					<span class="gf-form-label gf-size-sm">Password</span>
+					<input type="password" name="password" class="gf-form-input gf-size-max-xxl" required ng-model="formModel.password" id="inputPassword" placeholder="password">
 				</div>
 
-				<div style="margin-left: 147px; width: 254px;">
+				<div style="margin-left: 7.5rem; width: 254px;">
 					<password-strength password="formModel.password"></password-strength>
 				</div>
 
-				<div class="login-submit-button-row">
-					<button type="submit" class="btn" ng-click="submit();" ng-class="{'btn-inverse': !inviteForm.$valid, 'btn-primary': inviteForm.$valid}">
+				<div class="gf-form-button-row">
+					<button type="submit" class="btn btn-inverse" ng-click="submit();" ng-class="{'btn-inverse': !inviteForm.$valid, 'btn-primary': inviteForm.$valid}">
 						Continue
 					</button>
 				</div>
 			</form>
 
-			<div class="clearfix"></div>
 		</div>
-
-		<div class="row" style="margin-top: 50px">
-			<div class="version-footer text-center small">
-				Grafana version: {{buildInfo.version}}, commit: {{buildInfo.commit}},
-				build date: {{buildInfo.buildstamp | date: 'yyyy-MM-dd HH:mm:ss' }}
-			</div>
-		</div>
-
 	</div>
 
-</div>
-
 
diff --git a/public/app/partials/signup_step2.html b/public/app/partials/signup_step2.html
index 58cecab1cbf..fc0de0a92e8 100644
--- a/public/app/partials/signup_step2.html
+++ b/public/app/partials/signup_step2.html
@@ -6,7 +6,8 @@
 	<div class="login-box">
 
 		<div class="login-box-logo">
-			<img src="public/img/logo_transparent_200x75.png">
+			<img class="logo-icon" src="public/img/grafana_icon.svg"></img><br>
+			<i class="icon-gf icon-gf-grafana_wordmark"></i>
 		</div>
 
     <div class="invite-box">
@@ -24,90 +25,50 @@
 						<span class="large">{{formModel.email}}</span>
 					</div>
 			</div>
-
+			<br>
 			<br>
 
-			<form name="signUpForm" class="login-form">
+			<form name="signUpForm" class="login-form gf-form-group">
 
-				<div style="display: inline-block; margin-bottom: 25px; width: 300px" ng-if="verifyEmailEnabled">
-					<div class="editor-option">
-						<label class="small">Email verification code: (sent to your email)</label>
-						<input type="text" class="input input-xlarge text-center" ng-model="formModel.code" required></input>
-					</div>
+				<div class="gf-form" ng-if="verifyEmailEnabled">
+					<span class="gf-form-label gf-size-md">
+						Email code<tip>Email verification code (sent to your email)</tip>
+					</span>
+					<input type="text" class="gf-form-input gf-size-max-xl" ng-model="formModel.code" required></input>
 				</div>
 
-				<div class="tight-form-container">
-					<div class="tight-form" ng-if="!autoAssignOrg">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 128px">
-								Organization name
-							</li>
-							<li>
-								<input type="text" name="orgName" class="tight-form-input last" ng-model='formModel.orgName' placeholder="Name your organization" style="width: 253px">
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
-
-					<div class="tight-form">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 128px">
-								Your name
-							</li>
-							<li>
-								<input type="text" name="name" class="tight-form-input last" ng-model='formModel.name' placeholder="(optional)" style="width: 253px">
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
-					<div class="tight-form">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 128px">
-								Username
-							</li>
-							<li>
-								<input type="text" class="tight-form-input last" required ng-model='formModel.username' placeholder="Username" style="width: 253px" autocomplete="off">
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
-
-					<div class="tight-form">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 128px">
-								Password
-							</li>
-							<li>
-								<input type="password" class="tight-form-input last" required ng-model="formModel.password" id="inputPassword" style="width: 253px" placeholder="password" autocomplete="off">
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
+				<div class="gf-form" ng-if="!autoAssignOrg">
+					<span class="gf-form-label gf-size-md">Org. name</span>
+					<input type="text" name="orgName" class="gf-form-input gf-size-max-xl" ng-model='formModel.orgName' placeholder="Name your organization">
 				</div>
 
-				<div style="margin-left: 147px; width: 254px;">
+				<div class="gf-form">
+					<span class="gf-form-label gf-size-md">Your name</span>
+					<input type="text" name="name" class="gf-form-input gf-size-max-xl" ng-model='formModel.name' placeholder="(optional)">
+				</div>
+				<div class="gf-form">
+					<span class="gf-form-label gf-size-md">Username</span>
+					<input type="text" class="gf-form-input gf-size-max-xl" required ng-model='formModel.username' placeholder="Username" autocomplete="off">
+				</div>
+				<div class="gf-form">
+					<span class="gf-form-label gf-size-md">Password</span>
+					<input type="password" class="gf-form-input gf-size-max-xl" required ng-model="formModel.password" id="inputPassword" placeholder="password" autocomplete="off">
+				</div>
+
+				<div style="margin-left: 7.5rem; width: 254px;">
 					<password-strength password="formModel.password"></password-strength>
 				</div>
 
-				<div class="login-submit-button-row">
+				<div class="gf-form-button-row">
 					<button type="submit" class="btn" ng-click="ctrl.submit();" ng-class="{'btn-inverse': !signUpForm.$valid, 'btn-primary': signUpForm.$valid}">
 						Continue
 					</button>
 				</div>
 			</form>
-
-			<div class="clearfix"></div>
 		</div>
 
-		<div class="row" style="margin-top: 50px">
-			<div class="version-footer text-center small">
-				Grafana version: {{buildInfo.version}}, commit: {{buildInfo.commit}},
-				build date: {{buildInfo.buildstamp | date: 'yyyy-MM-dd HH:mm:ss' }}
-			</div>
-		</div>
 
 	</div>
-
 </div>
 
 
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 3484d4584cb..e256e931666 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -141,7 +141,6 @@ $input-bg-disabled:              #555;
 
 $input-color:                    $gray-light;
 $input-border-color:             lighten($gray-dark,5%);
-$input-btn-border-width:         1px;
 $input-box-shadow:               inset 0 1px 1px rgba(0,0,0,.075) !default;
 $input-border-focus:             $input-border-color !default;
 $input-box-shadow-focus:         rgba(102,175,233,.6) !default;
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 8d0e133f168..a4e4123492c 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -158,12 +158,11 @@ $input-bg-disabled:              $gray-lighter;
 
 $input-color:                    #020202;
 $input-border-color:             $gray-lighter;
-$input-btn-border-width:         1px;
 $input-box-shadow:               inset 0 1px 1px rgba(0,0,0,.075) !default;
 $input-border-focus:             #66afe9 !default;
 $input-box-shadow-focus:         rgba(102,175,233,.6) !default;
 $input-color-placeholder:        #999 !default;
-$input-label-bg:				 #f8f8f8;
+$input-label-bg:		        		 #f8f8f8;
 
 // Sidemenu
 // -------------------------
diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss
index aff7cce94af..f2579926847 100644
--- a/public/sass/_variables.scss
+++ b/public/sass/_variables.scss
@@ -169,6 +169,7 @@ $input-padding-x:                .75rem !default;
 $input-padding-y:                .6rem !default;
 $input-line-height:              1.35rem !default;
 
+$input-btn-border-width:         1px;
 $input-border-radius:            $border-radius !default;
 $input-border-radius-lg:         $border-radius-lg !default;
 $input-border-radius-sm:         $border-radius-sm !default;
diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss
index 9fe32a29f9f..8fc6e18fbbf 100644
--- a/public/sass/components/_buttons.scss
+++ b/public/sass/components/_buttons.scss
@@ -14,7 +14,7 @@
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
-  border: none;
+  border: $input-btn-border-width solid transparent;
 
   @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
 
@@ -92,6 +92,25 @@
   border: 1px solid $tight-form-func-highlight-bg;
 }
 
+.btn-outline-primary {
+  @include button-outline-variant($btnPrimaryBackground);
+}
+.btn-outline-secondary {
+  @include button-outline-variant($btnInverseBackground);
+}
+.btn-outline-info {
+  @include button-outline-variant($btnInfoBackground);
+}
+.btn-outline-success {
+  @include button-outline-variant($btnSuccessBackground);
+}
+.btn-outline-warning {
+  @include button-outline-variant($btnWarningBackground);
+}
+.btn-outline-danger {
+  @include button-outline-variant($btnDangerBackground);
+}
+
 .btn-text {
   color: $btnText;
   margin: 0;
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index c47b432e189..d3ab196dd30 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -6,6 +6,7 @@ $gf-form-margin: 0.4rem;
   display: flex;
   flex-direction: row;
   align-items: center;
+  text-align: left;
 
   .checkbox-label {
     display: inline;
diff --git a/public/sass/mixins/_buttons.scss b/public/sass/mixins/_buttons.scss
index 3999fafa05e..cc74a0b2c3e 100644
--- a/public/sass/mixins/_buttons.scss
+++ b/public/sass/mixins/_buttons.scss
@@ -22,3 +22,50 @@
   font-size: $font-size;
   @include border-radius($border-radius);
 }
+
+@mixin button-outline-variant($color) {
+  color: $color;
+  background-image: none;
+  background-color: transparent;
+  border-color: $color;
+
+  @include hover {
+    color: #fff;
+    background-color: $color;
+        border-color: $color;
+  }
+
+  &:focus,
+  &.focus {
+    color: #fff;
+    background-color: $color;
+        border-color: $color;
+  }
+
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: #fff;
+    background-color: $color;
+        border-color: $color;
+
+    &:hover,
+    &:focus,
+    &.focus {
+      color: #fff;
+      background-color: darken($color, 17%);
+          border-color: darken($color, 25%);
+    }
+  }
+
+  &.disabled,
+  &:disabled {
+    &:focus,
+    &.focus {
+      border-color: lighten($color, 20%);
+    }
+    @include hover {
+      border-color: lighten($color, 20%);
+    }
+  }
+}
diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss
index 09fcfde56fb..94a32c91f7f 100644
--- a/public/sass/pages/_login.scss
+++ b/public/sass/pages/_login.scss
@@ -1,38 +1,37 @@
 
 .login-form {
-  width: 50%;
-  float: left;
-  margin-left: 25%;
-  margin-right: 25%;
-  padding-top: 25px;
+  display: inline-block;
+  max-width: 24rem;
 }
 
 .login-box {
-  width: 700px;
-  margin: 70px auto 0 auto;
+  max-width: 700px;
+  margin: $spacer * 2 auto 0 auto;
 }
 
 .login-box-logo {
   text-align: center;
   img {
-    width: 125px;
+    width: 6rem;
   }
   .icon-gf-grafana_wordmark {
     color: $link-color;
     position: relative;
-    top: -90px;
-    font-size: 3rem;
+    top: -4.5rem;
+    font-size: 2.5rem;
     text-shadow: 3px 3px 5px black;
   }
 }
 
 .login-inner-box {
   background: $panel-bg;
+  text-align: center;
 }
 
 .login-tab-header {
   background: $tight-form-bg;
   text-align: center;
+  margin-bottom: 3rem;
 }
 
 .btn-login-tab {
@@ -145,7 +144,7 @@
   text-align: center;
   border: 1px solid $tight-form-func-bg;
 	background-color: $panel-bg;
-  width: 800px;
+  max-width: 800px;
   margin-left: auto;
   margin-right: auto;
 
@@ -167,3 +166,16 @@
     font-size: 16px;
   }
 }
+
+@include media-breakpoint-up(md) {
+  .login-box-logo {
+    img {
+      width: 125px;
+    }
+    .icon-gf-grafana_wordmark {
+      top: -90px;
+      font-size: 3rem;
+    }
+  }
+}
+