login page: redesign, add create account button

3 files changed, 136 insertions, 92 deletions

diff --git a/res/client/css/partials/login.scss b/res/client/css/partials/login.scss
index 7c2a94eb..6641d721 100644
--- a/res/client/css/partials/login.scss
+++ b/res/client/css/partials/login.scss
@@ -1,19 +1,9 @@
-* {
-    box-sizing: border-box;
-
-    &:before,
-    &:after {
-      box-sizing: border-box;
-    }
-
-  }
-
 .welcome-box {
   margin-left: auto;
   margin-right: auto;
-  padding-bottom: $three-baselines;
+  padding: 20px 30px;
   margin-top: 80px;
-  width: 470px;
+  width: 420px;
   background: white;
   box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.3);
 }
@@ -41,18 +31,12 @@
   text-align: center;
 }
 
-.login-form {
+.login-view-section {
+  width: 100%;
   margin-top: 10px;
-  margin-bottom: 25px;
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-  padding: 20px;
-  width: 300px;
-  position: relative;
+  margin-bottom: 10px;
 }
 
-
 .clearfix {
   *zoom: 1;
 
@@ -72,32 +56,22 @@
   border: none;
   font-family: inherit;
   font-size: inherit;
+  left: -10px;
   margin: 0;
+  position: relative;
+  width: 80%;
+
   -webkit-appearance: none;
+
   &:focus {
     outline: none;
   }
-  &[type="submit"] {
-    width: 100%;
-    cursor: pointer;
-    background: #ee3654;
-    border-radius: 3px;
-    color: #fff;
-    float: right;
-    font-weight: bold;
-    margin-top: 20px;
-    margin-bottom: 15px;
-    padding: 12px 20px;
-    &:hover {
-      background: $dark-magenta;
-    }
-  }
+
   &[type="email"] {
     background: url(../img/mail-icon.png) no-repeat scroll 20px 15px;
     background-color:$light-grey;
     border: 1px solid #dcdcdc;
     padding: 12px 10px;
-    width: 100%;
     border-radius: 3px 3px 0 0;
     padding-left:60px;
   }
@@ -107,7 +81,6 @@
     background-color:$light-grey;
     border: 1px solid #dcdcdc;
     padding: 12px 10px;
-    width: 100%;
     border-top: none;
     border-radius: 0px 0px 3px 3px;
     padding-left:60px;
@@ -122,8 +95,13 @@
   }
 }
 
-.contact-us-div {
+.login-view-section {
   text-align: center;
+}
+
+.login-view-section-div {
+  color: #ee3654;
+
   &:before {
     content: "";
     width: 112px;
@@ -133,6 +111,7 @@
     margin-left: -118px;
     border-top: 1px solid $magenta;
   }
+
   &:after {
     content: "";
     width: 112px;
@@ -163,4 +142,43 @@
 .contact-us-link {
   color: $magenta;
   text-decoration: underline;
-}
\ No newline at end of file
+}
+
+.login-form_button {
+    cursor: pointer;
+    background: #ee3654;
+    border-radius: 3px;
+    color: #fff;
+    font-size: 18px;
+    font-weight: bold;
+    margin: 15px;
+    padding: 12px 20px;
+
+    &:hover {
+      background: darken( #ee3654, 10% );
+    }
+}
+
+#login-form {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  width: 300px;
+}
+
+#login-view-section_intro-text {
+  margin-bottom: 40px;
+}
+
+#login-page_create-account-button {
+  display: inline-block;
+  background-color: #4478FF;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  top: 5px;
+  
+  &:hover {
+      background: darken( #4478FF, 10% );
+  }
+}
diff --git a/res/client/css/style.css b/res/client/css/style.css
index 38917696..8c80fcaf 100644
--- a/res/client/css/style.css
+++ b/res/client/css/style.css
@@ -49,6 +49,9 @@ a:hover {
 a:active {
   color: #919095; }
 
+button {
+  border: none; }
+
 input {
   background-color: white;
   color: #363636;
@@ -138,17 +141,12 @@ table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-* {
-  box-sizing: border-box; }
-  *:before, *:after {
-    box-sizing: border-box; }
-
 .welcome-box {
   margin-left: auto;
   margin-right: auto;
-  padding-bottom: 36px;
+  padding: 20px 30px;
   margin-top: 80px;
-  width: 470px;
+  width: 420px;
   background: white;
   box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.3); }
 
@@ -172,15 +170,10 @@ table {
   padding-left: 30px;
   text-align: center; }
 
-.login-form {
+.login-view-section {
+  width: 100%;
   margin-top: 10px;
-  margin-bottom: 25px;
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-  padding: 20px;
-  width: 300px;
-  position: relative; }
+  margin-bottom: 10px; }
 
 .clearfix {
   *zoom: 1; }
@@ -194,29 +187,18 @@ table {
   border: none;
   font-family: inherit;
   font-size: inherit;
+  left: -10px;
   margin: 0;
+  position: relative;
+  width: 80%;
   -webkit-appearance: none; }
   .login-input:focus {
     outline: none; }
-  .login-input[type="submit"] {
-    width: 100%;
-    cursor: pointer;
-    background: #ee3654;
-    border-radius: 3px;
-    color: #fff;
-    float: right;
-    font-weight: bold;
-    margin-top: 20px;
-    margin-bottom: 15px;
-    padding: 12px 20px; }
-    .login-input[type="submit"]:hover {
-      background: #d10a40; }
   .login-input[type="email"] {
     background: url(../img/mail-icon.png) no-repeat scroll 20px 15px;
     background-color: #f5f5fa;
     border: 1px solid #dcdcdc;
     padding: 12px 10px;
-    width: 100%;
     border-radius: 3px 3px 0 0;
     padding-left: 60px; }
   .login-input[type="password"] {
@@ -224,7 +206,6 @@ table {
     background-color: #f5f5fa;
     border: 1px solid #dcdcdc;
     padding: 12px 10px;
-    width: 100%;
     border-top: none;
     border-radius: 0px 0px 3px 3px;
     padding-left: 60px; }
@@ -235,9 +216,12 @@ table {
   .forgot-password:hover {
     color: #363636; }
 
-.contact-us-div {
+.login-view-section {
   text-align: center; }
-  .contact-us-div:before {
+
+.login-view-section-div {
+  color: #ee3654; }
+  .login-view-section-div:before {
     content: "";
     width: 112px;
     margin-top: 10px;
@@ -245,7 +229,7 @@ table {
     height: 0;
     margin-left: -118px;
     border-top: 1px solid #ee3654; }
-  .contact-us-div:after {
+  .login-view-section-div:after {
     content: "";
     width: 112px;
     margin-top: 10px;
@@ -272,6 +256,37 @@ table {
   color: #ee3654;
   text-decoration: underline; }
 
+.login-form_button {
+  cursor: pointer;
+  background: #ee3654;
+  border-radius: 3px;
+  color: #fff;
+  font-size: 18px;
+  font-weight: bold;
+  margin: 15px;
+  padding: 12px 20px; }
+  .login-form_button:hover {
+    background: #de1334; }
+
+#login-form {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  width: 300px; }
+
+#login-view-section_intro-text {
+  margin-bottom: 40px; }
+
+#login-page_create-account-button {
+  display: inline-block;
+  background-color: #4478FF;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  top: 5px; }
+  #login-page_create-account-button:hover {
+    background: #1153ff; }
+
 .btn-regular {
   cursor: pointer;
   background-color: white;
@@ -424,7 +439,7 @@ body.debug .debug-ui-right {
   fill: #8b3ab0; }
 
 .circle.project {
-  fill: #40c200; }
+  fill: #40C200; }
 
 .circle.third-internship-proposal {
   fill: #33c2e0; }
@@ -665,7 +680,7 @@ body.debug .debug-ui-right {
   border-top: 6px solid #363636; }
 
 .info.type-project {
-  border-top: 6px solid #40c200; }
+  border-top: 6px solid #40C200; }
 
 .info .info-card-attr {
   display: block;
@@ -745,8 +760,8 @@ body.debug .debug-ui-right {
   width: 100%;
   min-height: 48px;
   text-align: center;
-  background-color: #d3f2f8;
-  color: #1d6e7f;
+  background-color: #D3F2F8;
+  color: #1D6E7F;
   border-top: 1px solid #8eb6bf;
   border-bottom: 1px solid #8eb6bf; }
 
@@ -968,3 +983,5 @@ p {
 
 svg text::selection {
   background: none; }
+
+/*# sourceMappingURL=style.css.map */
diff --git a/res/templates/login.html b/res/templates/login.html
index a03bf73c..767385b7 100644
--- a/res/templates/login.html
+++ b/res/templates/login.html
@@ -21,26 +21,35 @@ body {
 {% block content %}
 <div class="welcome-box">
 	<img src="/static/img/logo-red.png" class="login-rhizi-logo">
-	<h1 class="login-header"> Welcome to Rhizi!</h1>
-	<p class="login-text">Rhizi is a collaborative knowledge editor.</p>
-	<p class="login-text">Upload your internship proposals for review.</p>
-	<p class="login-text">Share the skills, interests and project you participate in.</p>
-	<br>
-	<p class="login-text">The resulting interactome allows the entire CRI to better collaborate with AIV students</p>
-	<div id="login_form_panel" class="login-form">
-		<fieldset>
+	<h1 class="login-header">Welcome to Rhizi!</h1>
+	<div class="login-view-section">
+			<p class="login-text">Rhizi is a collaborative knowledge editor.</p>
+			<p class="login-text">Upload your internship proposals for review. Share the skills, interests and project you participate in.</p>
+			<p class="login-text">The resulting interactome allows the entire CRI to better collaborate with AIV students</p>
+	</div>
+	<div class="login-view-section">
+		<div id="login-form">
 			<form action="javascript:void(0);" method="get" onsubmit="submit_login_form();" id="login_form">
 				<input class="login-input" type="email" id="login_email_address" placeholder="Email">
 				<input class="login-input" type="password" id="login_password" placeholder="Password">
-				<input class="login-input" type="submit" value="Sign in">
-				<a class="forgot-password">Forgot your password?</a>
+				<input class="login-form_button" type="submit" value="Sign in">
 			</form>
-		</fieldset>
-		<div id="failed-login" style="display: none">
-			<b>Login Failed</b>
 		</div>
+	<div id="failed-login" style="display: none">
+		<b>Login Failed</b>
+	</div>
+	</div>
+	<div class="login-view-section">
+	<div id="create-account-section">
+		<div class="login-view-section-div">or</div>
+		<a href="/signup">
+		<span class="login-form_button" id="login-page_create-account-button" title="Create Account">Create Account</span>
+		</a>
+		</div>
+	</div>
+	<div class="login-view-section">
+		<div class="login-view-section-div"><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 class="contact-us-div"><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>
 {% endblock %}