From 0b1abc9ab0bb5dc7013aef71d789e0268eeb1d86 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Tue, 19 Feb 2019 00:23:15 -0500
Subject: [PATCH] more style fixes

---
 src/app/settings/payment.component.html |  6 +++---
 src/app/settings/payment.component.ts   |  3 +--
 src/scss/styles.scss                    | 21 ++++++++++++++-------
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/app/settings/payment.component.html b/src/app/settings/payment.component.html
index aab5a4ed9b..e4ec35f4aa 100644
--- a/src/app/settings/payment.component.html
+++ b/src/app/settings/payment.component.html
@@ -19,14 +19,14 @@
     <div class="row">
         <div class="form-group col-4">
             <label for="stripe-card-number-element">{{'number' | i18n}}</label>
-            <div id="stripe-card-number-element" class="form-control"></div>
+            <div id="stripe-card-number-element" class="form-control stripe-form-control"></div>
         </div>
         <div class="form-group col-8 d-flex align-items-end">
             <img src="../../images/cards.png" alt="Visa, MasterCard, Discover, AmEx, JCB, Diners Club, UnionPay" width="323" height="32">
         </div>
         <div class="form-group col-4">
             <label for="stripe-card-expiry-element">{{'expiration' | i18n}}</label>
-            <div id="stripe-card-expiry-element" class="form-control"></div>
+            <div id="stripe-card-expiry-element" class="form-control stripe-form-control"></div>
         </div>
         <div class="form-group col-4">
             <label for="stripe-card-cvc-element" class="d-flex">
@@ -35,7 +35,7 @@
                     <i class="fa fa-question-circle-o"></i>
                 </a>
             </label>
-            <div id="stripe-card-cvc-element" class="form-control"></div>
+            <div id="stripe-card-cvc-element" class="form-control stripe-form-control"></div>
         </div>
     </div>
 </ng-container>
diff --git a/src/app/settings/payment.component.ts b/src/app/settings/payment.component.ts
index 3922810b57..1c8b77c5ac 100644
--- a/src/app/settings/payment.component.ts
+++ b/src/app/settings/payment.component.ts
@@ -16,10 +16,9 @@ const Keys = {
 const StripeElementStyle = {
     base: {
         color: '#333333',
-        lineHeight: '21px',
         fontFamily: '"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
             '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-        fontSize: '1rem',
+        fontSize: '14px',
         fontSmoothing: 'antialiased',
     },
     invalid: {
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index ea8214bb19..70cb5b3fc1 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -704,16 +704,23 @@ app-user-billing {
     }
 }
 
-.form-control.is-focused {
-    color: $input-focus-color;
-    background-color: $input-focus-bg;
-    border-color: $input-focus-border-color;
-    outline: 0;
-    box-shadow: $input-focus-box-shadow;
+.form-control.stripe-form-control {
+    padding-top: 0.55rem;
 
+    &.is-focused {
+        color: $input-focus-color;
+        background-color: $input-focus-bg;
+        border-color: $input-focus-border-color;
+        outline: 0;
+        box-shadow: $input-focus-box-shadow;
+    
+        &.is-invalid {
+            box-shadow: 0 0 0 $input-focus-width rgba($form-feedback-invalid-color, .25);
+        }
+    }
+    
     &.is-invalid {
         border-color: $form-feedback-invalid-color;
-        box-shadow: 0 0 0 $input-focus-width rgba($form-feedback-invalid-color, .25);
     }
 }