From b8a1dcdf0dacee616be83cd98ebbb4c4ee9abc4a Mon Sep 17 00:00:00 2001
From: Brock Whittaker <brock@zulipchat.com>
Date: Tue, 23 Aug 2016 18:13:56 -0700
Subject: [PATCH] Restyle registration pages.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The registration pages — both the landing page and the follow through
page after receiving an email have been restyled to be more linear in
nature and centered using flex box.
---
 static/styles/portico.css           | 85 ++++++++++++++++++++++++++++-
 templates/zerver/accounts_home.html |  9 +--
 2 files changed, 89 insertions(+), 5 deletions(-)

diff --git a/static/styles/portico.css b/static/styles/portico.css
index 94841f71fa..b87b6b2b43 100644
--- a/static/styles/portico.css
+++ b/static/styles/portico.css
@@ -431,6 +431,10 @@ a.bottom-signup-button {
     padding-top: 40px !important;
 }
 
+.portico-page-container {
+    padding-top: 0px !important;
+}
+
 .hello-footer {
     height: 54px !important;
 }
@@ -812,7 +816,7 @@ a.bottom-signup-button {
 }
 
 .footer-padder {
-    height: 94px;
+    height: 54px;
 }
 
 .footer-main {
@@ -929,6 +933,58 @@ a.bottom-signup-button {
     margin-top: 30px;
 }
 
+.center-container {
+    height: calc(100vh - 94px);
+    min-height: 500px;
+    display: flex;
+    align-items: center;
+    -wekbit-box-align: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.center-block .submit-button-box .controls {
+  margin: 0px;
+}
+
+.center-block {
+    text-align: left;
+    display: inline-block;
+}
+
+.center-block .pitch {
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.center-block .control-group {
+    margin-bottom: 10px;
+}
+
+.center-block .control-group label {
+    width: 100%;
+    display: block;
+    margin: 0;
+    text-align: left;
+}
+
+.center-block .control-group .controls {
+    margin: 0;
+    text-align: left;
+}
+
+.center-block #send_confirm input[type=text] {
+  margin-top: 20px;
+}
+
+.center-block .button {
+    margin-top: 20px;
+    padding: 5px 10px;
+    border-radius: 2px;
+    font-size: 16px;
+    font-weight: 300;
+}
+
 @media (max-height: 600px) {
     .password-container {
         margin-top: 10px;
@@ -1040,6 +1096,33 @@ a.bottom-signup-button {
 }
 
 @media (max-width: 500px) {
+  .app-main,
+  .header-main,
+  .footer-main {
+      min-width: auto;
+  }
+
+  .header {
+      padding: 0;
+  }
+
+  .header-main {
+      max-width: 100vw;
+  }
+
+  .footer-navigation {
+      font-size: 12px;
+  }
+
+  .app-main {
+      padding: 0px;
+  }
+
+  .footer {
+      position: fixed;
+      bottom: 0px;
+  }
+
   .main-headline-text .tagline {
       font-size: 32px;
       line-height: 34px;
diff --git a/templates/zerver/accounts_home.html b/templates/zerver/accounts_home.html
index 6e741b913c..b57fde63d5 100644
--- a/templates/zerver/accounts_home.html
+++ b/templates/zerver/accounts_home.html
@@ -9,10 +9,10 @@ $(function () {
     autofocus('#email');
 });
 </script>
-
 <div class="app register-page">
   <div class="app-main register-page-container">
-
+    <div class="center-container">
+      <div class="center-block">
         <div class="register-form">
             <p class="lead">
               <div class="register-page-header">{{ _("Let's get started") }}…</div>
@@ -22,7 +22,7 @@ $(function () {
                 {{ csrf_input }}
                 <input type="text" class="email required" placeholder="{{ _("Enter your work email address") }}"
                        id="email" name="email"/>
-                <input type="submit" class="btn btn-primary btn-large register-button" value="{{ _("Sign up") }}"/>
+                <input type="submit" class="button btn btn-primary btn-large register-button" value="{{ _("Sign up") }}"/>
             </form>
             <div id="errors"></div>
             {% if form.email.errors %}
@@ -40,7 +40,8 @@ $(function () {
                 </div>
             {% endif %}
         </div>
-
+      </div>
+    </div>
 </div>
 <div class="footer-padder"></div>
 </div>