billing: Style upgrade page.

This styles /upgrade.

static/styles/landing-page.scss

@@ -3088,6 +3088,95 @@ nav ul li.active::after {
 
     .support-link {
         margin: 10px 20px;
+        a,
+        a:hover,
+        a:visited {
+            color: hsl(170, 47%, 33%);
+            font-weight: 500;
+        }
+    }
+
+    .payment-schedule {
+        label {
+            display: inline-block;
+        }
+        input[type="radio"] {
+            display: none;
+            &:checked {
+                + .box {
+                    background: #69b190;
+                    color: white;
+                    border-color: #438667;
+                }
+            }
+        }
+        .box {
+            width: 100px;
+            height: 70px;
+            background: #efefef;
+            transition: all .2s ease;
+            display: inline-block;
+            text-align: center;
+            cursor: pointer;
+            position: relative;
+            border: 1px solid #e7e7e7;
+            border-radius: 8px;
+            margin: 0 10px 5px 0;
+            padding: 30px 20px;
+            vertical-align: top;
+            &:hover {
+                background: #e7e7e7;
+                border-color: #cbcbcb;
+            }
+            .schedule-time {
+                font-weight: bold;
+                font-size: 1.2em;
+                margin-top: 10px;
+            }
+            .schedule-amount {
+                margin-top: 5px;
+                font-size: 1.1em;
+                height: 50px;
+            }
+            .schedule-amount-2 {
+                font-size: 0.9em;
+            }
+        }
+    }
+
+    .stripe-button-el {
+        padding: 11px 25px 11px 25px;
+        font-weight: 400;
+        color: white;
+        background: #61b1b8;
+        background: linear-gradient(145deg, rgb(76, 181, 205), rgb(37, 177, 151));
+        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
+        border: 0;
+        width: 150px;
+        height: 40px;
+        margin: 5px 0 0 0;
+        span {
+            background: 0;
+            box-shadow: none;
+            -webkit-box-shadow: none;
+            font-family: 'Source Sans Pro', Helvetica, Arial;
+            font-size: 1.4em;
+            line-height: 20px;
+        }
+    }
+
+    .stripe-button-el:hover {
+        background: rgb(37, 177, 151);
+        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
+    }
+
+    .stripe-button-el:active {
+         background: rgb(25, 139, 118);
+         span {
+            background: 0;
+            box-shadow: none;
+            -webkit-box-shadow: none;
+         }
     }
 }
 
@@ -4025,6 +4114,15 @@ nav ul li.active::after {
         font-size: 90%;
         text-align: left;
     }
+
+   .billing-upgrade-page {
+        .payment-schedule {
+            .box {
+                width: 100px;
+                height: 80px;
+            }
+        }
+    }
 }
 
 @media (max-width: 450px) {

templates/zilencer/upgrade.html

@@ -1,31 +1,49 @@
-{% extends "zerver/base.html" %}
+{% extends "zerver/portico.html" %}
 
 {% block customhead %}
-{% stylesheet 'portico' %}
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+{{ render_bundle('landing-page') }}
 {% endblock %}
 
 {% block content %}
 <div class="app portico-page">
 
+    {% include 'zerver/billing_nav.html' %}
+
     {{ render_bundle('translations') }}
 
+    <div class="portico-landing billing-upgrade-page">
+        <div class="hero small-hero"></div>
+
         <div class="page-content">
+            <div class="main">
                 <h1>{% trans %}Upgrade to {{ plan }}{% endtrans %}</h1>
                 <form method="post">
                     {{ csrf_input }}
                     <input type="hidden" name="seat_count" value="{{ seat_count }}">
                     <div class="payment-schedule">
                         <h3>{{ _("Payment schedule") }}</h3>
+                        <label>
                             <input type="radio" name="plan" value="{{ nickname_annual }}" checked />
-                {{ _("Pay annually") }} | $80/user/year <br/>
+                            <div class="box">
-                <input type="radio" name="plan" value="{{ nickname_monthly }}" />
+                                <div class="schedule-time">{{ _("Pay annually") }}</div>
-                {{ _("Pay monthly") }} | $8/user/month <br/>
+                                <div class="schedule-amount">
+                                    $6.67/user/month
+                                    <div class="schedule-amount-2">
+                                        ($80/user/year)
                                     </div>
-            <p>
+                                </div>
-                You'll initially be charged <b><span id="charged_amount">XXX</span></b>
+                            </div>
-                for <b>{{ seat_count }}</b> users. You'll receive prorated charges
+                        </label>
-                and credits as users are added, deactivated, or become inactive.
+                        <label>
-            </p>
+                            <input type="radio" name="plan" value="{{ nickname_monthly }}" />
+                            <div class="box">
+                                <div class="schedule-time">{{ _("Pay monthly") }}</div>
+                                <div class="schedule-amount">$8/user/month</div>
+                            </div>
+                        </label>
+                    </div>
+                    <p>You&rsquo;ll initially be charged <b><span id="charged_amount">XXX</span></b> for <b>{{ seat_count }}</b> users. You&rsquo;ll receive prorated charges and credits as users are added, deactivated, or become inactive.</p>
                     <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                     data-key="{{ publishable_key }}"
                     data-image="/static/images/logo/zulip-icon-128x128.png"
@@ -37,14 +55,13 @@
                     data-panel-label="Make payment"
                     data-email="{{ email }}"
                     data-label="{{ _('Add card') }}"
-                data-allow-remember-me="false">
+                    data-allow-remember-me="false"
+                    >
                     </script>
                 </form>
-        <p>
+                <p>We can also bill by invoice for annual contracts over $2,000. Contact <a href="mailto:support@zulipchat.com">support@zulipchat.com</a> to pay by invoice or for any other billing questions.</p>
-            We can also bill by invoice for annual contracts over
+            </div>
-            $2000. Contact support@zulipchat.com to pay by invoice or for
+        </div>
-            any other billing questions.
-        </p>
     </div>
 </div>
 {% endblock %}