Add account_send_confirm styling.

static/styles/portico-signin.css

@@ -76,6 +76,10 @@ html {
     font-weight: 600;
 }
 
+.new-style .inline-block {
+    text-align: left;
+}
+
 .app-main .login-page-header {
     font-size: 1.5em;
     font-weight: 300;
@@ -186,6 +190,26 @@ html {
     margin-top: 0px;
 }
 
+.account-creation {
+    font-weight: 400;
+}
+
+.account-creation .pitch {
+    margin-bottom: 0px;
+}
+
+.account-creation .alert.alert-info {
+    padding: 8px 14px;
+    text-align: left;
+
+    font-size: 1em;
+    line-height: 1.3;
+}
+
+.account-creation .white-box p:last-of-type {
+    margin-bottom: 0px;
+}
+
 .relative {
     position: relative;
 }
@@ -218,7 +242,7 @@ html {
     margin-top: 25px;
 }
 
-.new-style .alert {
+.new-style .alert:not(.alert-info) {
     padding: 0;
     margin-bottom: 0;
 
@@ -364,7 +388,6 @@ html {
     display: block;
 
     top: 66px;
-    left: -4px;
     color: #d26666;
     font-size: 0.7em;
     font-weight: 600;
@@ -493,11 +516,8 @@ html {
     margin-top: 10px;
 }
 
-.register-page-container .lead,
+.new-style .lead {
-.login-page-container .lead,
+    margin: 0px;
-.forgot-password-container .lead {
-    margin: 0;
-    text-align: left;
 }
 
 .portico-page .or {
@@ -703,7 +723,6 @@ button.login-google-button {
     .register-page-container,
     .login-page-container {
         width: 400px;
-        margin-top: 50px;
     }
 
     .split-view .org-header .avatar {
@@ -755,7 +774,9 @@ button.login-google-button {
 
 @media (max-width: 500px) {
     .flex.full-page {
-        margin: 20px 0px;
+        display: block;
+        margin: 0 auto;
+        text-align: center;
     }
 
     .new-style .get-started {
@@ -778,7 +799,17 @@ button.login-google-button {
     .forgot-password-container form button {
         width: 328px;
     }
+
     .white-box {
         box-shadow: none;
     }
+
+    .footer-navigation li,
+    .footer-navigation li a {
+        font-size: 1em;
+    }
+
+    .account-creation {
+        font-weight: 400;
+    }
 }

templates/zerver/accounts_send_confirm.html

@@ -3,19 +3,29 @@
 
 {% block portico_content %}
 <div class="app portico-page">
-    <div class="app-main portico-page-container">
+    <div class="app-main portico-page-container center-block flex full-page account-creation new-style">
-        <h2>{{ _("Thanks for signing up!") }}</h2>
+        <div class="inline-block">
-        <p class="lead">{{ _("Check your email so we can get started.") }}</p>
+            <div class="bg-image"></div>
-        {% if development_environment %}
-        <div class="alert alert-info" style="display:inline-block;">{{ _("In the Zulip development environment, outgoing emails are printed to the run-dev.py console") }}</div>
-        {% endif %}
 
-        <p>{% trans %}Still no email? We can <a href="#" id="resend_email_link">resend it</a>.{% endtrans %}<br/>
+            <div class="get-started">
-        <small>({{ _("Just in case, take a look at your Spam folder.") }})</small></p>
+                <h1>{{ _("Thanks for signing up!") }}</h1>
-        <form id="resend_confirm" action="/accounts/home/" method="post" style="position: absolute;">
+            </div>
-            {{ csrf_input }}
+
-            <input type="hidden" class="email" id="email" value="{{ email }}" name="email"/>&nbsp;
+            <div class="white-box">
-        </form>
+                <p>{{ _("Check your email so we can get started.") }}</p>
+
+                {% if development_environment %}
+                <div class="alert alert-info" style="display:inline-block;">{{ _("In the Zulip development environment, outgoing emails are printed to the run-dev.py console") }}</div>
+                {% endif %}
+
+                <p>{% trans %}Still no email? We can <a href="#" id="resend_email_link">resend it</a>.{% endtrans %}<br/>
+                <small>({{ _("Just in case, take a look at your Spam folder.") }})</small></p>
+                <form id="resend_confirm" action="/accounts/home/" method="post" style="position: absolute;">
+                    {{ csrf_input }}
+                    <input type="hidden" class="email" id="email" value="{{ email }}" name="email"/>&nbsp;
+                </form>
+            </div>
+        </div>
     </div>
 </div>
 {% endblock %}