some Improvements to login styling

made css more modular and improved styling of all elements in login page

6 files changed, 164 insertions, 148 deletions

diff --git a/res/client/css/modules/colors.scss b/res/client/css/modules/colors.scss
index 905d239d..f7d85d8a 100644
--- a/res/client/css/modules/colors.scss
+++ b/res/client/css/modules/colors.scss
@@ -1,3 +1,4 @@
+$white: white;
 $light-grey: #f5f5fa;
 $mid-light-grey: #d4d4d9;
 $mid-grey: #919095;
diff --git a/res/client/css/modules/mixins.scss b/res/client/css/modules/mixins.scss
index 3c431be0..10ff7454 100644
--- a/res/client/css/modules/mixins.scss
+++ b/res/client/css/modules/mixins.scss
@@ -4,6 +4,12 @@
 	        box-shadow: $offset-x $offset-y $blur $spread $color;	
 }
 
+@mixin rz-inset-box-shadow($offset-x, $offset-y, $blur, $color) {
+	-webkit-box-shadow: inset $offset-x $offset-y $blur $color;
+	   -moz-box-shadow: inset $offset-x $offset-y $blur $color;
+	        box-shadow: inset $offset-x $offset-y $blur $color;	
+}
+
 @mixin rz-box-sizing-border() {
 	-webkit-box-sizing: border-box;
 	   -moz-box-sizing: border-box;
diff --git a/res/client/css/partials/graph-view.scss b/res/client/css/partials/graph-view.scss
index 9667a154..abce69a3 100644
--- a/res/client/css/partials/graph-view.scss
+++ b/res/client/css/partials/graph-view.scss
@@ -146,6 +146,7 @@
 
 .notselected {
   opacity: 0.2;
+  -webkit-filter: blur(10px);
 }
 
 .graph.link.temp_and {
diff --git a/res/client/css/partials/login.scss b/res/client/css/partials/login.scss
index 6641d721..2f5b4254 100644
--- a/res/client/css/partials/login.scss
+++ b/res/client/css/partials/login.scss
@@ -1,18 +1,29 @@
+@import '../modules/mixins'; // For box-sizing
+
 .welcome-box {
   margin-left: auto;
   margin-right: auto;
-  padding: 20px 30px;
-  margin-top: 80px;
+  padding: $three-baselines;
+  margin-top: $three-baselines;
   width: 420px;
   background: white;
-  box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.3);
+}
+
+.login-view-section {
+  width: 100%;
+  margin-top: $two-baselines;
+  margin-bottom: $one-baseline;
+  text-align: center;
 }
 
 .login-rhizi-logo {
+  background: url('/static/img/logo-red.png');
+  background-repeat: no-repeat;
   margin-left: auto;
-  display: block;
   margin-right: auto;
-  padding-top: 25px;
+  display: block;
+  width: 54px;
+  height: 30px;
 }
 
 .login-header {
@@ -23,18 +34,15 @@
 }
 
 .login-text {
-  font-size: 16px;
-  margin-left: auto;
-  margin-right: auto;
-  padding-right: 30px;
-  padding-left: 30px;
+  font-size: $h3-size;
+  line-height: 22px;
   text-align: center;
-}
+  margin-bottom: $one-baseline;
 
-.login-view-section {
-  width: 100%;
-  margin-top: 10px;
-  margin-bottom: 10px;
+  em {
+    font-family: $bold-font-family;
+    font-style:normal;
+  }
 }
 
 .clearfix {
@@ -52,38 +60,39 @@
 
 }
 
+.login-form {
+  width: 70%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .login-input {
+  width: 75%;
   border: none;
   font-family: inherit;
   font-size: inherit;
-  left: -10px;
-  margin: 0;
-  position: relative;
-  width: 80%;
-
+  background-color: $light-grey;
+  border: 1px solid $mid-light-grey;
   -webkit-appearance: none;
+  padding: $one-baseline $one-baseline $one-baseline 20%;
+  background-repeat: no-repeat;
+  background-position: 18px 14px;
 
   &:focus {
     outline: none;
+    background-color: $light-grey;
+    border: 1px solid $mid-light-grey;
+    @include rz-inset-box-shadow(0px, 0px, 6px, rgba(0,0,0,0.3) )
   }
 
   &[type="email"] {
-    background: url(../img/mail-icon.png) no-repeat scroll 20px 15px;
-    background-color:$light-grey;
-    border: 1px solid #dcdcdc;
-    padding: 12px 10px;
-    border-radius: 3px 3px 0 0;
-    padding-left:60px;
+    background-image: url(../img/mail-icon.png);
   }
 
   &[type="password"] {
-    background: url(../img/password-icon.png) no-repeat scroll 20px 15px;
-    background-color:$light-grey;
-    border: 1px solid #dcdcdc;
-    padding: 12px 10px;
+    background-image: url(../img/password-icon.png);
+    background-position-x: 22px;
     border-top: none;
-    border-radius: 0px 0px 3px 3px;
-    padding-left:60px;
   }
 }
 
@@ -95,31 +104,28 @@
   }
 }
 
-.login-view-section {
-  text-align: center;
-}
 
-.login-view-section-div {
-  color: #ee3654;
+.section-divider {
+  color: $mid-grey;
 
   &:before {
     content: "";
     width: 112px;
-    margin-top: 10px;
+    margin-top: $one-baseline;
     position: absolute;
     height: 0;
     margin-left: -118px;
-    border-top: 1px solid $magenta;
+    border-top: 1px solid $mid-grey;
   }
 
   &:after {
     content: "";
     width: 112px;
-    margin-top: 10px;
+    margin-top: $one-baseline;
     position: absolute;
     margin-left: 4px;
     height: 0;
-    border-top: 1px solid $magenta;
+    border-top: 1px solid $mid-grey;
   }
 }
 
@@ -144,41 +150,40 @@
   text-decoration: underline;
 }
 
+.magenta-divider {
+
+  &:before {
+    border-top: 1px solid $magenta;
+  }
+
+  &:after {
+    border-top: 1px solid $magenta;
+  }
+
+}
+
 .login-form_button {
     cursor: pointer;
-    background: #ee3654;
-    border-radius: 3px;
-    color: #fff;
-    font-size: 18px;
-    font-weight: bold;
-    margin: 15px;
-    padding: 12px 20px;
+    background-color: $magenta;
+    color: $white;
+    font-size: $h3-size;
+    margin-top: $two-baselines;
+    padding: $one-baseline;
+    width: 100%;
 
     &:hover {
-      background: darken( #ee3654, 10% );
+      background-color: $dark-magenta;
     }
 }
 
-#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;
+.create-account-button {
+  color: $mid-grey;
+  background: none;
+  margin: $one-baseline auto $one-baseline auto;
+  width: 70%;
   
   &:hover {
-      background: darken( #4478FF, 10% );
+      color: $dark-grey;
+      background: none;
   }
 }
diff --git a/res/client/css/style.css b/res/client/css/style.css
index 63893106..09284b13 100644
--- a/res/client/css/style.css
+++ b/res/client/css/style.css
@@ -141,17 +141,25 @@ table {
 .welcome-box {
   margin-left: auto;
   margin-right: auto;
-  padding: 20px 30px;
-  margin-top: 80px;
+  padding: 36px;
+  margin-top: 36px;
   width: 420px;
-  background: white;
-  box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.3); }
+  background: white; }
+
+.login-view-section {
+  width: 100%;
+  margin-top: 24px;
+  margin-bottom: 12px;
+  text-align: center; }
 
 .login-rhizi-logo {
+  background: url("/static/img/logo-red.png");
+  background-repeat: no-repeat;
   margin-left: auto;
-  display: block;
   margin-right: auto;
-  padding-top: 25px; }
+  display: block;
+  width: 54px;
+  height: 30px; }
 
 .login-header {
   margin-top: 35px;
@@ -160,17 +168,13 @@ table {
   color: #ee3654; }
 
 .login-text {
-  font-size: 16px;
-  margin-left: auto;
-  margin-right: auto;
-  padding-right: 30px;
-  padding-left: 30px;
-  text-align: center; }
-
-.login-view-section {
-  width: 100%;
-  margin-top: 10px;
-  margin-bottom: 10px; }
+  font-size: 18px;
+  line-height: 22px;
+  text-align: center;
+  margin-bottom: 12px; }
+  .login-text em {
+    font-family: "Source_Bold", sans-serif;
+    font-style: normal; }
 
 .clearfix {
   *zoom: 1; }
@@ -180,32 +184,35 @@ table {
   .clearfix:after {
     clear: both; }
 
+.login-form {
+  width: 70%;
+  margin-left: auto;
+  margin-right: auto; }
+
 .login-input {
+  width: 75%;
   border: none;
   font-family: inherit;
   font-size: inherit;
-  left: -10px;
-  margin: 0;
-  position: relative;
-  width: 80%;
-  -webkit-appearance: none; }
+  background-color: #f5f5fa;
+  border: 1px solid #d4d4d9;
+  -webkit-appearance: none;
+  padding: 12px 12px 12px 20%;
+  background-repeat: no-repeat;
+  background-position: 18px 14px; }
   .login-input:focus {
-    outline: none; }
-  .login-input[type="email"] {
-    background: url(../img/mail-icon.png) no-repeat scroll 20px 15px;
+    outline: none;
     background-color: #f5f5fa;
-    border: 1px solid #dcdcdc;
-    padding: 12px 10px;
-    border-radius: 3px 3px 0 0;
-    padding-left: 60px; }
+    border: 1px solid #d4d4d9;
+    -webkit-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.3);
+    -moz-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  .login-input[type="email"] {
+    background-image: url(../img/mail-icon.png); }
   .login-input[type="password"] {
-    background: url(../img/password-icon.png) no-repeat scroll 20px 15px;
-    background-color: #f5f5fa;
-    border: 1px solid #dcdcdc;
-    padding: 12px 10px;
-    border-top: none;
-    border-radius: 0px 0px 3px 3px;
-    padding-left: 60px; }
+    background-image: url(../img/password-icon.png);
+    background-position-x: 22px;
+    border-top: none; }
 
 .forgot-password {
   color: #919095;
@@ -213,27 +220,24 @@ table {
   .forgot-password:hover {
     color: #363636; }
 
-.login-view-section {
-  text-align: center; }
-
-.login-view-section-div {
-  color: #ee3654; }
-  .login-view-section-div:before {
+.section-divider {
+  color: #919095; }
+  .section-divider:before {
     content: "";
     width: 112px;
-    margin-top: 10px;
+    margin-top: 12px;
     position: absolute;
     height: 0;
     margin-left: -118px;
-    border-top: 1px solid #ee3654; }
-  .login-view-section-div:after {
+    border-top: 1px solid #919095; }
+  .section-divider:after {
     content: "";
     width: 112px;
-    margin-top: 10px;
+    margin-top: 12px;
     position: absolute;
     margin-left: 4px;
     height: 0;
-    border-top: 1px solid #ee3654; }
+    border-top: 1px solid #919095; }
 
 .contact-us-icon {
   text-align: center;
@@ -253,36 +257,30 @@ table {
   color: #ee3654;
   text-decoration: underline; }
 
+.magenta-divider:before {
+  border-top: 1px solid #ee3654; }
+.magenta-divider:after {
+  border-top: 1px solid #ee3654; }
+
 .login-form_button {
   cursor: pointer;
-  background: #ee3654;
-  border-radius: 3px;
-  color: #fff;
+  background-color: #ee3654;
+  color: white;
   font-size: 18px;
-  font-weight: bold;
-  margin: 15px;
-  padding: 12px 20px; }
+  margin-top: 24px;
+  padding: 12px;
+  width: 100%; }
   .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; }
+    background-color: #d10a40; }
 
-#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; }
+.create-account-button {
+  color: #919095;
+  background: none;
+  margin: 12px auto 12px auto;
+  width: 70%; }
+  .create-account-button:hover {
+    color: #363636;
+    background: none; }
 
 .btn-regular {
   cursor: pointer;
@@ -452,7 +450,8 @@ body.debug .debug-ui-right {
 
 /* Selected parts of the graph, right now by clicking, later with search. */
 .notselected {
-  opacity: 0.2; }
+  opacity: 0.2;
+  -webkit-filter: blur(10px); }
 
 .graph.link.temp_and {
   stroke-dasharray: 3,3; }
diff --git a/res/templates/login.html b/res/templates/login.html
index aeb3acfc..a670f0e2 100644
--- a/res/templates/login.html
+++ b/res/templates/login.html
@@ -20,14 +20,18 @@ body {
 {% endblock %}
 {% 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>
+	<div class="login-view-section">
+		<div class="login-rhizi-logo"></div>
+	</div>
+	<div class="login-view-section">
+		<h1 class="login-header">Welcome to Rhizi</h1>
+	</div>
 	<div class="login-view-section" id="login-view-section_intro-text">
-			<p class="login-text">Rhizi is a collaborative knowledge editor.</p>
+			<p class="login-text"><em>Rhizi is a collaborative knowledge editor.</em></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 class="login-view-section login-form">
 		<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">
@@ -41,14 +45,14 @@ body {
 	</div>
 	<div class="login-view-section">
 	<div id="create-account-section">
-		<div class="login-view-section-div">or</div>
+		<div class="login-view-section section-divider">or</div>
 		<a href="/signup">
-		<span class="login-form_button" id="login-page_create-account-button" title="Create Account">Create Account</span>
+		<div class="login-form_button create-account-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-div"><span class="contact-us-icon"></span></div>
+		<div class="login-view-section 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>