UX: Make styling consistent with everything else (#134)

assets/javascripts/discourse/components/payment-plan.js

@@ -4,6 +4,8 @@ import discourseComputed from "discourse-common/utils/decorators";
 const RECURRING = "recurring";
 
 export default Component.extend({
+  tagName: "",
+
   @discourseComputed("selectedPlan")
   selectedClass(planId) {
     return planId === this.plan.id ? "btn-primary" : "";

assets/javascripts/discourse/templates/components/payment-plan.hbs

@@ -1,6 +1,8 @@
 <DButton
-  @action={{action "planClick"}} @class={{concat "btn-discourse-subscriptions-subscribe " selectedClass}}>
-  <div class="interval">
+  @action={{action "planClick"}}
+  @class={{concat-class "btn-discourse-subscriptions-subscribe" selectedClass}}
+>
+  <span class="interval">
     {{#if this.recurringPlan}}
       {{i18n
         (concat
@@ -11,7 +13,7 @@
     {{else}}
       {{i18n "discourse_subscriptions.one_time_payment"}}
     {{/if}}
-  </div>
+  </span>
 
   <span class="amount">
     {{format-currency this.plan.currency this.plan.amountDollars}}

assets/javascripts/discourse/templates/subscribe/show.hbs

@@ -30,14 +30,13 @@
       {{else if isAnonymous}}
         {{login-required}}
       {{else}}
-        <div class="promo-code">
-          {{input
-            type="text"
-            name="promo_code"
-            placeholder=(i18n "discourse_subscriptions.subscribe.promo_code")
-            value=promoCode
-          }}
-        </div>
+        {{input
+          type="text"
+          name="promo_code"
+          placeholder=(i18n "discourse_subscriptions.subscribe.promo_code")
+          value=promoCode
+          class="subscribe-promo-code"
+        }}
 
         {{d-button
           disabled=loading

assets/stylesheets/common/subscribe.scss

@@ -1,10 +1,12 @@
 .subscribe-buttons {
+  align-items: stretch;
   display: flex;
   flex-flow: row wrap;
   justify-content: left;
 
   .btn-discourse-subscriptions-subscribe {
     flex-direction: column;
+    flex-grow: 1;
     margin: 0.25em;
     padding: 1em;
     width: 6em;
@@ -24,9 +26,9 @@
 
   padding: 10px;
   height: 40px;
-  margin-bottom: 20px;
+  margin-bottom: 9px;
 
-  border: 1px solid var(--primary);
+  border: 1px solid var(--primary-medium);
   background-color: var(--secondary);
 
   font-size: $base-font-size;
@@ -34,7 +36,9 @@
 }
 
 .StripeElement--focus {
+  border-color: var(--tertiary);
   box-shadow: shadow("focus");
+  outline: 1px solid var(--tertiary);
 }
 
 .StripeElement--invalid {
@@ -44,3 +48,7 @@
 .StripeElement--webkit-autofill {
   color: var(--quaternary);
 }
+
+.subscribe-promo-code {
+  width: 100%;
+}