Login: Added forgot password btn and fixed create account button

3 files changed, 42 insertions, 34 deletions

diff --git a/res/client/css/partials/login.scss b/res/client/css/partials/login.scss
index 2f5b4254..55d75cd4 100644
--- a/res/client/css/partials/login.scss
+++ b/res/client/css/partials/login.scss
@@ -61,7 +61,7 @@
 }
 
 .login-form {
-  width: 70%;
+  width: 80%;
   margin-left: auto;
   margin-right: auto;
 }
@@ -163,27 +163,33 @@
 }
 
 .login-form_button {
-    cursor: pointer;
-    background-color: $magenta;
-    color: $white;
-    font-size: $h3-size;
-    margin-top: $two-baselines;
-    padding: $one-baseline;
-    width: 100%;
+  cursor: pointer;
+  background-color: $magenta;
+  color: $white;
+  font-size: $h3-size;
+  margin-top: $two-baselines;
+  padding: $one-baseline;
+  width: 100%;
+
+  &:hover {
+    background-color: $dark-magenta;
+  }
 
-    &:hover {
-      background-color: $dark-magenta;
-    }
+  &:focus {
+    background-color: $dark-magenta; 
+  }
 }
 
-.create-account-button {
-  color: $mid-grey;
-  background: none;
-  margin: $one-baseline auto $one-baseline auto;
-  width: 70%;
-  
+#login-page_forgot-password-button {
+  margin-top: $one-baseline;
+}
+
+#login-page_create-account-button {
+  color: $light-grey;
+  background-color: $mid-grey;
+  padding: $one-baseline 0;
+
   &:hover {
-      color: $dark-grey;
-      background: none;
+      background-color: $dark-grey;
   }
 }
diff --git a/res/client/css/style.css b/res/client/css/style.css
index ae58ef0e..12466a9b 100644
--- a/res/client/css/style.css
+++ b/res/client/css/style.css
@@ -185,7 +185,7 @@ table {
     clear: both; }
 
 .login-form {
-  width: 70%;
+  width: 80%;
   margin-left: auto;
   margin-right: auto; }
 
@@ -272,15 +272,18 @@ table {
   width: 100%; }
   .login-form_button:hover {
     background-color: #d10a40; }
+  .login-form_button:focus {
+    background-color: #d10a40; }
 
-.create-account-button {
-  color: #919095;
-  background: none;
-  margin: 12px auto 12px auto;
-  width: 70%; }
-  .create-account-button:hover {
-    color: #363636;
-    background: none; }
+#login-page_forgot-password-button {
+  margin-top: 12px; }
+
+#login-page_create-account-button {
+  color: #f5f5fa;
+  background-color: #919095;
+  padding: 12px 0; }
+  #login-page_create-account-button:hover {
+    background-color: #363636; }
 
 .btn-regular {
   cursor: pointer;
diff --git a/res/templates/login.html b/res/templates/login.html
index a670f0e2..c2e84790 100644
--- a/res/templates/login.html
+++ b/res/templates/login.html
@@ -42,17 +42,16 @@ body {
 		<div id="failed-login" style="display: none">
 			 <b>Login Failed</b>
 		</div>
+		<div class="login-text" id="login-page_forgot-password-button" title="Forgot your password"><a href="/password_reset">Forgot your password?</a></div>
 	</div>
-	<div class="login-view-section">
-	<div id="create-account-section">
-		<div class="login-view-section section-divider">or</div>
+	<div id="create-account-section" class="login-view-section login-form">
+		<div class="section-divider">or</div>
 		<a href="/signup">
-		<div class="login-form_button create-account-button" id="login-page_create-account-button" title="Create Account">Create Account</div>
+			<div class="login-form_button" id="login-page_create-account-button" title="Create Account">Create Account</div>
 		</a>
-		</div>
 	</div>
 	<div class="login-view-section">
-		<div class="login-view-section section-divider magenta-divider"><span class="contact-us-icon"></span></div>
+		<div class="section-divider magenta-divider"><span class="contact-us-icon"></span></div>
 		<p class="login-text contact-us-text"><a class="contact-us-link" href="mailto:feedback_CRI@rhizi.net?subject=Rhizi%20User%20Feedback">Email us</a> with your feedback,<br>we would love to hear your suggestions!</p>
 	</div>
 </div>