From ecf1da4942f71e43f5a297635ac5b32ab3266a46 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Tue, 30 Jan 2024 15:41:55 -0600
Subject: [PATCH] more

---
 src/Components/Modals/PaymentModal.js | 5 +++++
 src/styles/modals.scss                | 9 ++++++++-
 src/styles/text-input.scss            | 4 ++--
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js
index c5f62bc..61550b5 100644
--- a/src/Components/Modals/PaymentModal.js
+++ b/src/Components/Modals/PaymentModal.js
@@ -109,6 +109,11 @@ const PaymentModal = ({
           {splitEvery(Object.keys(paymentfields), fieldsChunkSize).map(
             (names, j) => (
               <Row key={`row${j}-modal`}>
+                {j === 2 ? (
+                  <div className="exp-date-hearder">Card Expiration Date</div>
+                ) : (
+                  <></>
+                )}
                 {names.map((name, i) => (
                   <Col
                     key={`${name}${i + fieldsChunkSize * j}-modal`}
diff --git a/src/styles/modals.scss b/src/styles/modals.scss
index cb5a3e9..abebf9d 100644
--- a/src/styles/modals.scss
+++ b/src/styles/modals.scss
@@ -118,6 +118,13 @@
 
 .short-column {
   max-width: 120px !important;
-  margin-right: 1.4rem;
+  margin-right: 2.3rem;
   margin-bottom: 1rem;
 }
+
+.exp-date-hearder {
+  margin-top: -14px;
+  margin-bottom: 9px;
+  margin-left: 13px;
+  padding-left: 7px;
+}
diff --git a/src/styles/text-input.scss b/src/styles/text-input.scss
index 1da302d..0f14e3b 100644
--- a/src/styles/text-input.scss
+++ b/src/styles/text-input.scss
@@ -13,9 +13,9 @@
 }
 
 .skinny-input {
-  width: 120px;
+  width: 140px;
 }
 
 .skinny-column {
-  width: 120px !important;
+  width: 140px !important;
 }