Simplify the new upgrade page

This way we're able to put the features and the upgrade process together, but benefit from all the error handling that's already in the login & reg pages without a complete rewrite.

This is not proposed as the final solution, but a mid-way point to allow us to test.

public/css/help.css

@@ -700,6 +700,10 @@ h6:hover .anchor span:before {
   code {
     word-wrap: break-word;
   }
+
+  .status {
+    display: none;
+  }
 }
 
 #comments {

public/css/upgrade.css

@@ -759,11 +759,32 @@ input.actionButton-small, button.actionButton-small {
   }
   .upgrade-feature-wrapper table {
     margin: 0 auto;
-  }
+  
+    width: 100%;
 }
-@media (min-width: 768px) and (max-width: 1023px) {
-  .upgrade-feature-wrapper table td:nth-child(2),
-  .upgrade-feature-wrapper table th:nth-child(2) {
-    /*display: none;*/
+
+  .upgrade-feature-wrapper table td:nth-child(1),
+  .upgrade-feature-wrapper table th:nth-child(1) {
+    min-width: 150px;
+    font-size: 0.9rem;
+    line-height: 1.3rem;
   }
+
+
+  .upgrade-feature-wrapper table td:nth-child(2),
+  .upgrade-feature-wrapper table th:nth-child(2)
+  
+/*   .upgrade-feature-wrapper table td:nth-child(2), */
+/*   .upgrade-feature-wrapper table th:nth-child(2) */{
+    display: none;
+  }
+
+  .upgrade-payment-wrapper {
+    padding: 0 10px;
+  }
+
+  .form-container form {
+    padding: 10px 5px 10px;
+  }
+
 }

views/partials/payment.html

@@ -68,7 +68,7 @@
 
 
 <section>
-  <button class="actionButton actionButton-rounded actionButton-primary actionButton-jumbo" id="pay">Upgrade!</button>
+  <button class="actionButton actionButton-rounded actionButton-primary actionButton-jumbo" {{#unless user}}disabled{{/unless}} id="pay">Upgrade!</button>
   <input type="hidden" name="_csrf" value="{{csrf}}">
 </section>
 

views/upgrade.html

@@ -3,55 +3,53 @@
 
 <div class="upgrade-wrapper">
   <div class="upgrade-form-wrapper form-container">
-    <h1>Pro registration</h1>
+    <h1>Pro Upgrade</h1>
 
     <form action="/upgrade" method="post" id="payment-form">
 
       {{#unless user}}
         <div class="upgrade-details">
-          <h2 class="upgrade-summary">Authentication</h2>
-          <div class="upgrade-details-content">
-            <div class="upgrade-signin-wrapper">
-              <a class="btn-github" href="{{root}}/auth/github">
-                <img src="{{static}}/images/github-32.png">
-                Login or Register via GitHub
+          <h3>1. Sign in</h3>
+          <div class="upgrade-signin-wrapper">
+            <a class="btn-github" href="{{root}}/auth/github">
+              <img src="{{static}}/images/github-32.png">
+              Login or Register via GitHub
+            </a>
+            <span class="login-group">
+              or
+              <a class="btn-login" href="{{root}}/login" id="btn-login">sign in with your email address</a>
+            </span>
+          </div>
+
+          <div class="form-container login" id="form-login">
+            <div class="tabs">
+              <a class="tab register" href="{{root}}/register">
+                <span>New to JS Bin</span>
+                Register
               </a>
-              <span class="login-group">
-                or
-                <a class="btn-login" href="{{root}}/login" id="btn-login">sign in with your email address</a>
-              </span>
+              <a class="tab login" href="#">
+                <span>Existing users</span>
+                Login
+              </a>
+            </div>
+            <fieldset class="upgrade-fieldset register" disabled="disabled">
+              {{> register}}
+              <input type="hidden" value="1" name="register">
+            </fieldset>
+            <fieldset class="upgrade-fieldset login">
+              {{> login}}
+              <input type="hidden" value="1" name="login">
+            </fieldset>
+
+            <div class="upgrade-next">
+              <input type="button" value="next" class="upgrade-details-button upgrade-details-next">
             </div>
 
-            <div class="form-container login" id="form-login">
-              <div class="tabs">
-                <a class="tab register" href="{{root}}/register">
-                  <span>New to JS Bin</span>
-                  Register
-                </a>
-                <a class="tab login" href="#">
-                  <span>Existing users</span>
-                  Login
-                </a>
-              </div>
-              <fieldset class="upgrade-fieldset register" disabled="disabled">
-                {{> register}}
-                <input type="hidden" value="1" name="register">
-              </fieldset>
-              <fieldset class="upgrade-fieldset login">
-                {{> login}}
-                <input type="hidden" value="1" name="login">
-              </fieldset>
-
-              <div class="upgrade-next">
-                <input type="button" value="next" class="upgrade-details-button upgrade-details-next">
-              </div>
-
-              <div class="upgrade-center">
-                <span class="login-group">
-                  or
-                  <a class="btn-login" href="{{root}}/auth/github">sign in via GitHub</a>
-                </span>
-              </div>
+            <div class="upgrade-center">
+              <span class="login-group">
+                or
+                <a class="btn-login" href="{{root}}/auth/github">sign in via GitHub</a>
+              </span>
             </div>
           </div>
         </div>
@@ -62,11 +60,9 @@
       {{/if}}
 
       <div class="upgrade-details">
-        <h2 class="upgrade-summary">Payment</h2>
-        <div class="upgrade-details-content">
-          <div class="upgrade-payment-wrapper">
-            {{> payment}}
-          </div>
+        {{#unless user}}<h3>2. Payment</h3>{{/unless}}
+        <div class="upgrade-payment-wrapper">
+          {{> payment}}
         </div>
       </div>
 
@@ -105,6 +101,5 @@
 </script>
 <script src="{{static}}/js/vendor/polyfills.js{{cacheBust}}"></script>
 <script src="{{static}}/js/vendor/jquery-1.11.0.min.js"></script>
-<script src="{{static}}/js/account/upgrade.js{{cacheBust}}"></script>
 <script src="{{static}}/js/vendor/jquery.payment.js{{cacheBust}}"></script>
 <script src="{{static}}/js/account/pay.js{{cacheBust}}"></script>