Rearrange new card inputs on account page

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')

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%;
+  }
 }

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