From 3a0b47c451dc7c50b90ac7c9b0889994fdb5c00f Mon Sep 17 00:00:00 2001
From: Rob Harrington <oeoeaio@gmail.com>
Date: Fri, 8 Sep 2017 11:32:11 +1000
Subject: [PATCH] Add border to Stripe Elements input, make text larger

---
 .../directives/stripe_elements.js.coffee         | 10 +++++++++-
 .../darkswarm/stripe-elements.css.scss           | 16 ++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/stylesheets/darkswarm/stripe-elements.css.scss

diff --git a/app/assets/javascripts/darkswarm/directives/stripe_elements.js.coffee b/app/assets/javascripts/darkswarm/directives/stripe_elements.js.coffee
index c613fb3061..0465a87e79 100644
--- a/app/assets/javascripts/darkswarm/directives/stripe_elements.js.coffee
+++ b/app/assets/javascripts/darkswarm/directives/stripe_elements.js.coffee
@@ -9,7 +9,15 @@ Darkswarm.directive "stripeElements", ($injector, StripeElements) ->
     if $injector.has('stripeObject')
       stripe = $injector.get('stripeObject')
 
-      card = stripe.elements().create('card', {hidePostalCode: false})
+      card = stripe.elements().create 'card',
+        hidePostalCode: false
+        style:
+          base:
+            fontFamily: "Roboto, Arial, sans-serif"
+            fontSize: '16px'
+            color: '#4c4c4c'
+            '::placeholder':
+              color: '#6c6c6c'
       card.mount('#card-element')
 
       # Elements validates user input as it is typed. To help your customers
diff --git a/app/assets/stylesheets/darkswarm/stripe-elements.css.scss b/app/assets/stylesheets/darkswarm/stripe-elements.css.scss
new file mode 100644
index 0000000000..1318aa9b81
--- /dev/null
+++ b/app/assets/stylesheets/darkswarm/stripe-elements.css.scss
@@ -0,0 +1,16 @@
+stripe-elements #card-element {
+  background: white;
+  box-sizing: border-box;
+  font-weight: 400;
+  padding: 0.8rem 0.5rem;
+  border: 1px solid #cccccc;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  border-radius: 0px;
+  color: #32315E;
+  outline: none;
+  height: 48px;
+  line-height: 48px;
+  cursor: text;
+  width: 100%;
+  float: right;
+}