From 947ec4338e7c38b6160f81c866f3b247978156d9 Mon Sep 17 00:00:00 2001
From: Rimian Perkins <hello@rimian.com.au>
Date: Fri, 29 Nov 2019 15:08:51 +1100
Subject: [PATCH] css the card

---
 .../controllers/patrons-subscribe-show.js.es6 |  1 +
 .../templates/patrons/subscribe/show.hbs      | 25 ++++++++----------
 .../stylesheets/common/discourse-patrons.scss |  4 ---
 assets/stylesheets/common/stripe.scss         | 26 +++++++++++++++++++
 plugin.rb                                     |  1 +
 5 files changed, 39 insertions(+), 18 deletions(-)
 create mode 100644 assets/stylesheets/common/stripe.scss

diff --git a/assets/javascripts/discourse/controllers/patrons-subscribe-show.js.es6 b/assets/javascripts/discourse/controllers/patrons-subscribe-show.js.es6
index 10f5225..50af763 100644
--- a/assets/javascripts/discourse/controllers/patrons-subscribe-show.js.es6
+++ b/assets/javascripts/discourse/controllers/patrons-subscribe-show.js.es6
@@ -8,6 +8,7 @@ export default Ember.Controller.extend({
       Stripe(Discourse.SiteSettings.discourse_patrons_public_key)
     );
     const elements = this.get("stripe").elements();
+
     this.set("cardElement", elements.create("card", { hidePostalCode: true }));
   },
 
diff --git a/assets/javascripts/discourse/templates/patrons/subscribe/show.hbs b/assets/javascripts/discourse/templates/patrons/subscribe/show.hbs
index f9aa99c..521a616 100644
--- a/assets/javascripts/discourse/templates/patrons/subscribe/show.hbs
+++ b/assets/javascripts/discourse/templates/patrons/subscribe/show.hbs
@@ -10,26 +10,23 @@
   </div>
   <div class="section-column">
     {{#unless model.product.subscribed}}
-
-      {{combo-box valueAttribute="id" content=model.plans value=model.product.plan}}
-
-      {{#d-button
-        disabled=loading
-        action="stripePaymentHandler"
-        class="btn btn-primary btn-payment btn-discourse-patrons"}}
-        {{i18n 'discourse_patrons.subscribe.buttons.subscribe'}}
-      {{/d-button}}
-
-      <hr>
-
-      <h4>
+      <h2>
         {{i18n 'discourse_patrons.subscribe.card.title'}}
-      </h4>
+      </h2>
 
       {{subscribe-card cardElement=cardElement}}
 
       {{#if loading}}
         {{loading-spinner}}
+      {{else}}
+        {{combo-box valueAttribute="id" content=model.plans value=model.product.plan}}
+
+        {{#d-button
+          disabled=loading
+          action="stripePaymentHandler"
+          class="btn btn-primary btn-payment btn-discourse-patrons pull-right"}}
+          {{i18n 'discourse_patrons.subscribe.buttons.subscribe'}}
+          {{/d-button}}
       {{/if}}
 
     {{/unless}}
diff --git a/assets/stylesheets/common/discourse-patrons.scss b/assets/stylesheets/common/discourse-patrons.scss
index 4032525..293b598 100644
--- a/assets/stylesheets/common/discourse-patrons.scss
+++ b/assets/stylesheets/common/discourse-patrons.scss
@@ -43,10 +43,6 @@ table.discourse-patrons-user-table {
   background-color: $primary-very-low;
 }
 
-#card-element {
-  padding: 20px 0;
-}
-
 .discourse-patrons-payment-details {
   border: 1px $primary-low-mid solid;
   background-color: $primary-low;
diff --git a/assets/stylesheets/common/stripe.scss b/assets/stylesheets/common/stripe.scss
new file mode 100644
index 0000000..dd8b25d
--- /dev/null
+++ b/assets/stylesheets/common/stripe.scss
@@ -0,0 +1,26 @@
+
+.StripeElement {
+  box-sizing: border-box;
+
+  padding: 10px;
+  height: 40px;
+  margin-bottom: 20px;
+
+  border: 1px $primary solid;
+  background-color: $secondary;
+
+  font-size: $base-font-size;
+  font-family: $base-font-family;
+}
+
+.StripeElement--focus {
+  box-shadow: shadow("focus");
+}
+
+.StripeElement--invalid {
+  border-color: $danger;
+}
+
+.StripeElement--webkit-autofill {
+  color: $quaternary;
+}
diff --git a/plugin.rb b/plugin.rb
index f920e4d..da1360a 100644
--- a/plugin.rb
+++ b/plugin.rb
@@ -12,6 +12,7 @@ gem 'stripe', '5.11.0'
 
 register_asset "stylesheets/common/discourse-patrons.scss"
 register_asset "stylesheets/common/discourse-patrons-layout.scss"
+register_asset "stylesheets/common/stripe.scss"
 register_asset "stylesheets/mobile/discourse-patrons.scss"
 register_svg_icon "credit-card" if respond_to?(:register_svg_icon)