ux(reset_password): tight-form -> gf-form

public/app/partials/reset_password.html

@@ -1,11 +1,10 @@
-<div class="container">
+<div class="login-container container">
 
 	<div class="login-box">
 
 		<div class="login-box-logo">
-			<a href="login">
-				<img src="img/logo_transparent_200x75.png">
-			</a>
+			<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">
@@ -15,76 +14,50 @@
 				</button>
 			</div>
 
-			<form name="sendResetForm" class="login-form" ng-show="mode === 'send'">
-				<div class="tight-form last">
-					<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.userOrEmail' placeholder="email or username" style="width: 253px">
-						</li>
-					</ul>
-					<div class="clearfix"></div>
+			<form name="sendResetForm" class="login-form gf-form-group" ng-show="mode === 'send'">
+				<div class="gf-form">
+						<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.userOrEmail' placeholder="email or username">
 				</div>
 
-				<div class="login-submit-button-row">
-					<button type="submit" class="btn" ng-click="sendResetEmail();" ng-class="{'btn-inverse': !sendResetForm.$valid, 'btn-primary': sendResetForm.$valid}">
+				<div class="gf-form-button-row">
+					<button type="submit" class="btn btn-large" ng-click="sendResetEmail();" ng-class="{'btn-inverse': !sendResetForm.$valid, 'btn-primary': sendResetForm.$valid}">
 						Send reset instructions
 					</button>
 				</div>
 			</form>
 
-			<h5 ng-if="mode === 'email-sent'" style="text-align: center; padding: 20px;">
+			<h5 style="text-align: center; padding: 20px;" ng-if="mode === 'email-sent'">
 				An email with a reset link as been sent to the email address, you should receive it shortly.
 			</h5>
 
-			<form name="resetForm" class="login-form" ng-show="mode === 'reset'">
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 125px">
-							<strong>New Password</strong>
-						</li>
-						<li>
-							<input type="password" name="NewPassword" class="tight-form-input last" required ng-minlength="4" ng-model='formModel.newPassword' placeholder="password" style="width: 207px" watch-change="formModel.newPassword = inputValue;">
-						</li>
-					</ul>
-					<div class="clearfix"></div>
+			<form name="resetForm" class="login-form gf-form-group" ng-show="mode === 'reset'">
+				<div class="gf-form">
+					<span class="gf-form-label width-10">New Password</span>
+					<input type="password" name="NewPassword" class="gf-form-input max-width-14" required ng-minlength="4" ng-model='formModel.newPassword' placeholder="password" watch-change="formModel.newPassword = inputValue;">
 				</div>
-				<div class="tight-form last">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 125px">
-							<strong>Confirm Password</strong>
-						</li>
-						<li>
-							<input type="password" name="ConfirmPassword" class="tight-form-input last" required ng-minlength="4" ng-model='formModel.confirmPassword' placeholder="confirm password" style="width: 207px">
-						</li>
-					</ul>
-					<div class="clearfix"></div>
+				<div class="gf-form">
+					<span class="gf-form-label width-10">Confirm Password</span>
+					<input type="password" name="ConfirmPassword" class="gf-form-input max-width-14" required ng-minlength="4" ng-model='formModel.confirmPassword' placeholder="confirm password">
 				</div>
 
 				<div style="margin-left: 141px; width: 207px;">
 					<password-strength password="formModel.newPassword"></password-strength>
 				</div>
 
-				<div class="login-submit-button-row">
+				<div class="gf-form-button-row">
 					<button type="submit" class="btn" ng-click="submitReset();" ng-class="{'btn-inverse': !resetForm.$valid, 'btn-primary': resetForm.$valid}">
 						Reset Password
 					</button>
 				</div>
 			</form>
-
-			<div class="clearfix"></div>
 		</div>
 
-		<div class="row" style="margin-top: 40px">
+		<div class="row" style="margin-top: 20px">
 			<div class="text-center">
-				<a href="login">
-					Back to login
-				</a>
+				<a href="login">Back to login</a>
 			</div>
 		</div>
-
 	</div>
 </div>