diff --git a/app/assets/javascripts/darkswarm/directives/stripe_elements.js.coffee b/app/assets/javascripts/darkswarm/directives/stripe_elements.js.coffee index 0465a87e79..d325b6f962 100644 --- a/app/assets/javascripts/darkswarm/directives/stripe_elements.js.coffee +++ b/app/assets/javascripts/darkswarm/directives/stripe_elements.js.coffee @@ -15,7 +15,7 @@ Darkswarm.directive "stripeElements", ($injector, StripeElements) -> base: fontFamily: "Roboto, Arial, sans-serif" fontSize: '16px' - color: '#4c4c4c' + color: '#5c5c5c' '::placeholder': color: '#6c6c6c' card.mount('#card-element') diff --git a/app/assets/stylesheets/darkswarm/stripe-elements.css.scss b/app/assets/stylesheets/darkswarm/stripe-elements.css.scss index 1318aa9b81..5ef854746a 100644 --- a/app/assets/stylesheets/darkswarm/stripe-elements.css.scss +++ b/app/assets/stylesheets/darkswarm/stripe-elements.css.scss @@ -1,16 +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; +stripe-elements { + margin-bottom: 15px; + display: block; + + #card-element { + background: white; + box-sizing: border-box; + font-weight: 400; + padding: 0.6rem 0.5rem; + border: 1px solid #cccccc; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + border-radius: 0px; + height: 42px; + width: 100%; + } } diff --git a/app/views/spree/users/_new_card_form.html.haml b/app/views/spree/users/_new_card_form.html.haml index e410d9cc98..af780ace8f 100644 --- a/app/views/spree/users/_new_card_form.html.haml +++ b/app/views/spree/users/_new_card_form.html.haml @@ -1,9 +1,4 @@ %form{ novalidate: true, "ng-submit" => "storeCard()" } - .row - .small-12.columns - %label - = t(:card_details) - %stripe-elements .row .small-6.columns %label @@ -15,6 +10,11 @@ %label = t(:last_name) %input#last_name{type: :text, "ng-model" => "secrets.last_name", "ng-disabled" => "!allow_name_change", "ng-value" => "order.bill_address.lastname"} + .row + .small-12.columns + %label + = t(:card_details) + %stripe-elements .row .small-4.columns %p