From ab126319e400f2d0eb55821e1e9511ab9b3bbc6e Mon Sep 17 00:00:00 2001
From: Anjith <v-anpal@microsoft.com>
Date: Mon, 5 Aug 2013 18:55:54 +0530
Subject: [PATCH] UI updates for Sign in, Sign up, Sign out pages

Added blue background box for form block,
Structured the sign in , forgot password button block.
---
 .../web/static/foundation/css/codalab.css     | 128 +++++++++++-------
 .../web/static/foundation/sass/_settings.scss |  28 ++++
 codalab/apps/web/templates/account/login.html |  59 ++++----
 .../apps/web/templates/account/logout.html    |   2 +-
 .../apps/web/templates/account/signup.html    |   2 +-
 5 files changed, 142 insertions(+), 77 deletions(-)

diff --git a/codalab/apps/web/static/foundation/css/codalab.css b/codalab/apps/web/static/foundation/css/codalab.css
index 2ca920a09..b2969d607 100644
--- a/codalab/apps/web/static/foundation/css/codalab.css
+++ b/codalab/apps/web/static/foundation/css/codalab.css
@@ -63,80 +63,80 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
   display: block;
 }
 
-/* line 44, ../sass/_settings.scss */
+/* line 45, ../sass/_settings.scss */
 * {
   font-family: Segoe UI,'Segoe UI', Helvetica, Arial,'Trebuchet MS',sans-serif;
   font-size: 100%;
   font-weight: normal;
 }
 
-/* line 50, ../sass/_settings.scss */
+/* line 51, ../sass/_settings.scss */
 .menu-icon {
   background: #3684d6;
 }
 
-/* line 54, ../sass/_settings.scss */
+/* line 55, ../sass/_settings.scss */
 .menu-icon > span, .menu-icon > span a, .menu-icon > span a:hover {
   border-bottom-style: none;
   border: 0px;
   padding: 2px;
 }
 
-/* line 61, ../sass/_settings.scss */
+/* line 62, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section:not(.active) p a:hover {
   color: #ffac31;
 }
 
-/* line 65, ../sass/_settings.scss */
+/* line 66, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section p.title {
   background: transparent;
 }
 
-/* line 68, ../sass/_settings.scss */
+/* line 69, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section.active div.content {
   border: 0px;
 }
 
-/* line 72, ../sass/_settings.scss */
+/* line 73, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section p.title a {
   padding: 2px;
   text-align: right;
   border: 0px;
 }
 
-/* line 78, ../sass/_settings.scss */
+/* line 79, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section p {
   border: 0px;
 }
 
-/* line 82, ../sass/_settings.scss */
+/* line 83, ../sass/_settings.scss */
 td > a > i {
   color: #3684d6;
 }
 
-/* line 86, ../sass/_settings.scss */
+/* line 87, ../sass/_settings.scss */
 a > i {
   height: 100%;
   color: white;
 }
 
-/* line 91, ../sass/_settings.scss */
+/* line 92, ../sass/_settings.scss */
 .competitionsDetailTabArea > section > .title {
   font-size: 19px;
   font-weight: 400;
 }
 
-/* line 96, ../sass/_settings.scss */
+/* line 97, ../sass/_settings.scss */
 .competitionsDetailTabArea > section > .title a:hover {
   color: #ffac31;
 }
 
-/* line 100, ../sass/_settings.scss */
+/* line 101, ../sass/_settings.scss */
 .process_participant_request {
   padding-top: 10px;
 }
 
-/* line 105, ../sass/_settings.scss */
+/* line 106, ../sass/_settings.scss */
 .competitionUserBlock {
   border: solid 1px #ccc;
   margin-bottom: 10px;
@@ -144,44 +144,44 @@ a > i {
   padding: 0;
 }
 
-/* line 112, ../sass/_settings.scss */
+/* line 113, ../sass/_settings.scss */
 .competitionUserBlock p {
   font-size: 13px;
 }
 
-/* line 116, ../sass/_settings.scss */
+/* line 117, ../sass/_settings.scss */
 .user_results, .competition_results {
   padding-top: 10px;
 }
 
-/* line 119, ../sass/_settings.scss */
+/* line 120, ../sass/_settings.scss */
 .globalBlueButton a, .globalBlueButton a:hover {
   color: white;
 }
 
-/* line 123, ../sass/_settings.scss */
+/* line 124, ../sass/_settings.scss */
 .content > h3 {
   font-size: 14px;
   font-weight: 700;
 }
 
-/* line 128, ../sass/_settings.scss */
+/* line 129, ../sass/_settings.scss */
 .content > p {
   font-size: 13px;
 }
 
-/* line 132, ../sass/_settings.scss */
+/* line 133, ../sass/_settings.scss */
 .section-container.vertical-tabs > section > .content {
   border: 0px;
   color: #3b3b3b;
 }
 
-/* line 137, ../sass/_settings.scss */
+/* line 138, ../sass/_settings.scss */
 .competitionProcessHeader > ul > li {
   height: 100%;
 }
 
-/* line 140, ../sass/_settings.scss */
+/* line 141, ../sass/_settings.scss */
 .competitionProcessHeader > ul > li > a {
   color: white;
   font-size: 13px;
@@ -189,21 +189,21 @@ a > i {
   padding-right: 40px;
 }
 
-/* line 147, ../sass/_settings.scss */
+/* line 148, ../sass/_settings.scss */
 .competition-preview {
   border: 1px solid #cccccc;
   margin-top: 5px;
   margin-bottom: 5px;
 }
 
-/* line 153, ../sass/_settings.scss */
+/* line 154, ../sass/_settings.scss */
 .competition-summary {
   background: #fafafa;
   height: 100px;
   overflow: hidden;
 }
 
-/* line 159, ../sass/_settings.scss */
+/* line 160, ../sass/_settings.scss */
 .competition-preview > .columns > .button.small {
   vertical-align: middle;
   margin-bottom: 5px;
@@ -213,13 +213,13 @@ a > i {
   border-color: #ffac31;
 }
 
-/* line 168, ../sass/_settings.scss */
+/* line 169, ../sass/_settings.scss */
 .competition-summary > .columns {
   margin: 0px;
   padding: 0px;
 }
 
-/* line 173, ../sass/_settings.scss */
+/* line 174, ../sass/_settings.scss */
 .competition-label {
   height: 100px;
   background: #3684d6;
@@ -228,7 +228,7 @@ a > i {
   padding-left: 0px;
 }
 
-/* line 181, ../sass/_settings.scss */
+/* line 182, ../sass/_settings.scss */
 .competition-image {
   padding: 0px;
   margin: 0px;
@@ -236,33 +236,33 @@ a > i {
   vertical-align: middle;
 }
 
-/* line 188, ../sass/_settings.scss */
+/* line 189, ../sass/_settings.scss */
 .competition-info .columns {
   padding: 0px;
   margin: 0px;
 }
 
-/* line 192, ../sass/_settings.scss */
+/* line 193, ../sass/_settings.scss */
 .competition-title {
   color: #333333;
   text-align: left;
   font-size: 15px;
 }
 
-/* line 198, ../sass/_settings.scss */
+/* line 199, ../sass/_settings.scss */
 .large-12 > .competition-label {
   margin: 0px;
   padding: 0px;
   width: 30px;
 }
 
-/* line 204, ../sass/_settings.scss */
+/* line 205, ../sass/_settings.scss */
 .competition-description, .competition-owner {
   font-size: small;
   color: #999999;
 }
 
-/* line 209, ../sass/_settings.scss */
+/* line 210, ../sass/_settings.scss */
 .slider {
   color: white;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
@@ -278,26 +278,26 @@ a > i {
   vertical-align: middle;
 }
 
-/* line 224, ../sass/_settings.scss */
+/* line 225, ../sass/_settings.scss */
 .subheader {
   height: auto;
   padding-bottom: 10px;
 }
 
-/* line 229, ../sass/_settings.scss */
+/* line 230, ../sass/_settings.scss */
 #footer, #footer a, #footer a:hover {
   font-size: small;
   background: #3684d6;
   color: white;
 }
 
-/* line 235, ../sass/_settings.scss */
+/* line 236, ../sass/_settings.scss */
 .topbar-title {
   font-size: x-large;
   font-weight: light;
 }
 
-/* line 240, ../sass/_settings.scss */
+/* line 241, ../sass/_settings.scss */
 .header {
   position: fixed;
   left: 0;
@@ -306,13 +306,13 @@ a > i {
   z-index: 1000;
 }
 
-/* line 248, ../sass/_settings.scss */
+/* line 249, ../sass/_settings.scss */
 .container {
   padding-top: 45px;
   padding-bottom: 20px;
 }
 
-/* line 253, ../sass/_settings.scss */
+/* line 254, ../sass/_settings.scss */
 p.competition-paragraph {
   font-size: 11px;
   color: #666666;
@@ -320,48 +320,84 @@ p.competition-paragraph {
   margin-bottom: 0;
 }
 
-/* line 260, ../sass/_settings.scss */
+/* line 261, ../sass/_settings.scss */
 .competition-info {
   height: 90px;
   overflow: hidden;
   padding-top: 5px;
 }
 
-/* line 266, ../sass/_settings.scss */
+/* line 267, ../sass/_settings.scss */
 .competition-image > img {
   height: 90px;
   margin-top: 5px;
 }
 
-/* line 271, ../sass/_settings.scss */
+/* line 272, ../sass/_settings.scss */
 .competition-preview.panel {
   background: #fafafa;
 }
 
-/* line 275, ../sass/_settings.scss */
+/* line 276, ../sass/_settings.scss */
 .competition-tile {
   margin-bottom: 10px;
 }
 
-/* line 279, ../sass/_settings.scss */
+/* line 280, ../sass/_settings.scss */
 .competition-tile h3 {
   font-size: 16px;
   color: #333333;
 }
 
-/* line 284, ../sass/_settings.scss */
+/* line 285, ../sass/_settings.scss */
 .articleHeadingContainer h3 {
   margin: 0;
   line-height: 100%;
 }
 
-/* line 289, ../sass/_settings.scss */
+/* line 290, ../sass/_settings.scss */
 .articleHeadingContainer label {
   color: #a4a4a4;
   margin-bottom: 14px;
   font-size: 12px;
 }
 
+/* line 296, ../sass/_settings.scss */
+.signin-centered-container {
+  margin: auto !important;
+  float: none !important;
+  background: #eff2f9;
+  padding: 25px;
+}
+
+/* line 303, ../sass/_settings.scss */
+.small-6.pull-6.columns > .globalBlueButton {
+  float: right;
+}
+
+/* line 306, ../sass/_settings.scss */
+.signin-formfields p:nth-child(3) > input {
+  float: left;
+  position: relative;
+  top: -20px;
+}
+
+/* line 311, ../sass/_settings.scss */
+.signin-formfields p:nth-child(3) > label {
+  padding-left: 20px;
+}
+
+/* line 315, ../sass/_settings.scss */
+.globalBlueButton, .globalBlueButtonBig, .globalBlueButtonInput, .globalBlueButtonAtag > a, .globalBlueButtonSmallAtag > a, .globalBlueButtonSmall, .globalBlueButtonSmallFlexi, .buttonAccept {
+  box-shadow: none;
+  white-space: nowrap;
+}
+
+/* line 319, ../sass/_settings.scss */
+.signin-centered-container > p > a {
+  display: inline-block;
+}
+
 /* font-face */
 @font-face {
   font-family: "GeneralFoundicons";
diff --git a/codalab/apps/web/static/foundation/sass/_settings.scss b/codalab/apps/web/static/foundation/sass/_settings.scss
index 5a3c4e196..5b044c2b2 100644
--- a/codalab/apps/web/static/foundation/sass/_settings.scss
+++ b/codalab/apps/web/static/foundation/sass/_settings.scss
@@ -8,6 +8,7 @@ $light-gray: #ccc;
 $light-medium-gray: #a4a4a4;
 $medium-light-gray: #999;
 $dark-gray: #333;
+$light-background-blue:#eff2f9;
 
 $body-font-color: $gray;
 $header-font-color: $gray;
@@ -290,4 +291,31 @@ p.competition-paragraph {
 	color:$light-medium-gray;
 	margin-bottom:14px;
 	font-size:12px;
+}
+
+.signin-centered-container {
+	margin:auto !important;
+	float:none !important;
+	background:$light-background-blue;
+	padding:25px;
+}
+
+.small-6.pull-6.columns > .globalBlueButton {
+	float:right
+}
+.signin-formfields p:nth-child(3) > input {
+	float:left;
+	position:relative;
+	top:-20px;
+}
+.signin-formfields p:nth-child(3) > label {
+	padding-left:20px;
+}
+
+.globalBlueButton, .globalBlueButtonBig, .globalBlueButtonInput, .globalBlueButtonAtag > a, .globalBlueButtonSmallAtag > a, .globalBlueButtonSmall, .globalBlueButtonSmallFlexi, .buttonAccept {
+	box-shadow:none;
+	white-space:nowrap;
+}
+.signin-centered-container > p > a {
+	display:inline-block;
 }
\ No newline at end of file
diff --git a/codalab/apps/web/templates/account/login.html b/codalab/apps/web/templates/account/login.html
index fab25d150..8719070dd 100644
--- a/codalab/apps/web/templates/account/login.html
+++ b/codalab/apps/web/templates/account/login.html
@@ -5,43 +5,44 @@
 {% load url from future %}
 
 {% block head_title %}{% trans "Sign In" %}{% endblock %}
-{% block subheader %}<H4>{% trans "Sign In" %}</h4>{% endblock subheader %}
+{% block subheader %}<h4>{% trans "Sign In" %}</h4>
+{% endblock subheader %}
 
 {% block content %}
-	<div class="small-3 columns account_widget">
-		{% if socialaccount.providers  %}
+	<div class="small-3 columns account_widget signin-centered-container">
+        {% if socialaccount.providers  %}
 			<p>
-				{% blocktrans with site.name as site_name %}Please sign in with one
-				of your existing third party accounts. Or, <a href="{{ signup_url }}">sign up</a> 
-				for a {{site_name}} account and sign in below:{% endblocktrans %}
-			</p>
+                {% blocktrans with site.name as site_name %}Please sign in with one
+				of your existing third party accounts. Or, <a href="{{ signup_url }}">sign up</a>
+                for a {{site_name}} account and sign in below:{% endblocktrans %}
+            </p>
 
-			<div class="socialaccount_ballot">
-				<ul class="socialaccount_providers">
-					{% include "socialaccount/snippets/provider_list.html" %}
-				</ul>
-				<div class="login-or">{% trans 'or' %}</div>
-			</div>
+        <div class="socialaccount_ballot">
+            <ul class="socialaccount_providers">
+                {% include "socialaccount/snippets/provider_list.html" %}
+            </ul>
+            <div class="login-or">{% trans 'or' %}</div>
+        </div>
 
-			{% include "socialaccount/snippets/login_extra.html" %}
+        {% include "socialaccount/snippets/login_extra.html" %}
 		{% endif %}
 
 		<form class="login" method="POST" action="{% url 'account_login' %}">
-			{% csrf_token %}
-			{{ form.as_p }}
-			{% if redirect_field_value %}
+            
+            {% csrf_token %}<div class="row signin-formfields">
+			{{ form.as_p }}</div>
+			{% if redirect_field_value %} 
 			<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
-			{% endif %}
+            {% endif %}
+               
 			<div class="row">
-				<div class="small-6 push-6 columns">
-					<div class="globalBlueButtonAtag">
-						<a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
-					</div>
-				</div>
-				<div class="small-6 pull-6 columns">
-					<button class="primaryAction globalBlueButton" type="submit">{% trans "Sign In" %}</button>
-				</div>
-			</div>
-		</form>
+                    <div class="globalBlueButtonAtag">
+                        <a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
+                        <button class="primaryAction globalBlueButton" type="submit">{% trans "Sign In" %}</button>
+                    </div>
+                    
+            </div>
+        </form>
+    </div>
 {% endblock %}
-</div>
+
diff --git a/codalab/apps/web/templates/account/logout.html b/codalab/apps/web/templates/account/logout.html
index bf8a8c0c8..3f9170f24 100644
--- a/codalab/apps/web/templates/account/logout.html
+++ b/codalab/apps/web/templates/account/logout.html
@@ -7,7 +7,7 @@
 {% block subheader %}<h4>{% trans "Sign Out" %}</h4>{% endblock subheader %}
 
 {% block content %}
-	<div class="small-3 columns account_widget">
+	<div class="small-3 columns account_widget  signin-centered-container">
 
 		<p>
 			{% trans 'Are you sure you want to sign out?' %}
diff --git a/codalab/apps/web/templates/account/signup.html b/codalab/apps/web/templates/account/signup.html
index 8174416ff..55e6156e4 100644
--- a/codalab/apps/web/templates/account/signup.html
+++ b/codalab/apps/web/templates/account/signup.html
@@ -7,7 +7,7 @@
 {% block subheader %}<h4>{% trans "Sign Up" %}</h4>{% endblock subheader %}
 
 {% block content %}
-	<div class="small-3 columns account_widget">
+	<div class="small-3 columns account_widget signin-centered-container">
 		<p>
 			{% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">sign in</a>.{% endblocktrans %}
 		</p>