From b4c2e4283c704007051301a4d5e63e04e886efbf Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Mon, 5 Feb 2024 19:55:13 -0600
Subject: [PATCH 1/3] more

---
 src/Components/SignupPage/SignupPage.js |  4 +-
 src/styles/signup.scss                  | 81 ++++++++++++++++++++++---
 2 files changed, 74 insertions(+), 11 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index e5890eb..6a7dfe9 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -590,7 +590,7 @@ const SignupPage = () => {
                 </div>
                 <div className="details-button-box">
                   <Button
-                    className="secondary-button back-button"
+                    className="secondary-button"
                     onClick={handleCancelAdd}
                     labelText="Cancel"
                   />
@@ -598,7 +598,7 @@ const SignupPage = () => {
                     <Button
                       className="p-2 mr-2 primary-button signup-proceed-btn"
                       onClick={handleAdd}
-                      labelText="Add And Proceed To Payment"
+                      labelText="Proceed To Payment"
                     />
                   </div>
                 </div>
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 6e20303..93f335c 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -224,17 +224,22 @@
 
 .show-addaccount-wrapper {
   display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-left: auto;
+  margin-right: auto;
+  width: 800px;
 }
 
 .show-addaccount-container {
   display: flex;
   flex-direction: column;
-  width: 578px;
+  width: 100%;
+  margin-top: 12px;
   min-height: 200px;
-  margin-right: 14px;
+  margin-left: auto;
+  margin-right: auto;
   padding: 12px;
   border-radius: 10px;
   background-color: #fff;
@@ -250,15 +255,23 @@
 
 .signup-select-wrapper {
   display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-left: auto;
+  margin-right: auto;
   width: 100%;
   margin: 6px 0px;
 }
 
 .signup-select-box {
-  width: 230px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   margin-left: auto;
+  margin-right: auto;
+  width: 35%;
   margin-top: 12px;
   margin-bottom: 12px;
 }
@@ -284,7 +297,7 @@
 }
 
 .signup-proceed-btn {
-  width: 240px;
+  width: 190px;
 }
 //
 @media only screen and (max-width: 420px) {
@@ -379,4 +392,54 @@
     margin-top: 0px;
     margin-bottom: 0px;
   }
+
+  .show-addaccount-container {
+    display: flex;
+    flex-direction: column;
+    width: 340px !important;
+    justify-content: center;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
+    width: 360px;
+  }
+
+  .show-addaccount-wrapper {
+    width: 340px !important;
+    justify-content: center;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+
+  .signup-select-wrapper {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+  }
+
+  .signup-select-box {
+    width: 180px !important;
+    padding: 12px 0px;
+    margin: 10px auto;
+  }
+
+  .details-button-box {
+    width: 180px !important;
+    flex-direction: column;
+  }
+
+  .upload-button-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-right: 8px;
+    padding-right: 12px;
+    width: 180px !important;
+    margin-top: 18px;
+  }
 }

From a1643efd58210380b30fd4c1197667fce68b1882 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Mon, 5 Feb 2024 20:18:17 -0600
Subject: [PATCH 2/3] more

---
 src/Components/Modals/PaymentModal.js |  4 +-
 src/styles/modals.scss                | 57 +++++++++++++++++++++++++++
 src/styles/signup.scss                |  4 ++
 3 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js
index 61550b5..9c84c19 100644
--- a/src/Components/Modals/PaymentModal.js
+++ b/src/Components/Modals/PaymentModal.js
@@ -96,7 +96,7 @@ const PaymentModal = ({
               <div className="payment-modal-text-wrapper">
                 <div className="paymodal-summary-right"></div>
                 <div className="paymodal-summary-left-bonus">
-                  Includes 10% discount for convenient annual billing
+                  Includes 15% discount for convenient annual billing
                 </div>
               </div>
             ) : (
@@ -108,7 +108,7 @@ const PaymentModal = ({
         <Form className="payment-form">
           {splitEvery(Object.keys(paymentfields), fieldsChunkSize).map(
             (names, j) => (
-              <Row key={`row${j}-modal`}>
+              <Row key={`row${j}-modal`} className="payment-order-row">
                 {j === 2 ? (
                   <div className="exp-date-hearder">Card Expiration Date</div>
                 ) : (
diff --git a/src/styles/modals.scss b/src/styles/modals.scss
index cbcc0ef..2af2d11 100644
--- a/src/styles/modals.scss
+++ b/src/styles/modals.scss
@@ -129,3 +129,60 @@
   margin-left: 13px;
   padding-left: 7px;
 }
+
+@media only screen and (max-width: 820px) {
+  .modal-body {
+    width: 580px !important;
+  }
+
+  .payment-order-row {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .order-summary-container {
+    width: 420px;
+    flex-direction: unset;
+    justify-content: center;
+    margin: 0px;
+    padding: 0px;
+    margin-bottom: 12px;
+  }
+
+  .payment-order-row {
+    width: 420px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .payment-form {
+    width: 620px !important;
+  }
+}
+
+@media only screen and (max-width: 420px) {
+  .modal-body {
+    width: 380px;
+  }
+
+  .order-summary-container {
+    flex-direction: column;
+  }
+
+  .order-summary-container {
+    justify-content: center;
+    margin: 0px;
+    padding: 0px;
+    margin-bottom: 12px;
+  }
+  .payment-form {
+    width: 320px !important;
+  }
+  .payment-order-row {
+    display: flex;
+    flex-direction: column;
+  }
+  .short-column {
+    margin: 4px 0px;
+  }
+}
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 93f335c..7d15e97 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -442,4 +442,8 @@
     width: 180px !important;
     margin-top: 18px;
   }
+
+  .paymodal-summary-left-bonus {
+    margin-top: 3px;
+  }
 }

From 826fec95acee2dfd42259c1dce58870a7b33da2b Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Mon, 5 Feb 2024 20:19:00 -0600
Subject: [PATCH 3/3] more

---
 src/styles/modals.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/styles/modals.scss b/src/styles/modals.scss
index 2af2d11..133bf3f 100644
--- a/src/styles/modals.scss
+++ b/src/styles/modals.scss
@@ -175,13 +175,16 @@
     padding: 0px;
     margin-bottom: 12px;
   }
+
   .payment-form {
     width: 320px !important;
   }
+
   .payment-order-row {
     display: flex;
     flex-direction: column;
   }
+
   .short-column {
     margin: 4px 0px;
   }