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 = ({
- Includes 10% discount for convenient annual billing + Includes 15% discount for convenient annual billing
) : ( @@ -108,7 +108,7 @@ const PaymentModal = ({
{splitEvery(Object.keys(paymentfields), fieldsChunkSize).map( (names, j) => ( - + {j === 2 ? (
Card Expiration Date
) : ( 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 = () => {
diff --git a/src/styles/modals.scss b/src/styles/modals.scss index cbcc0ef..133bf3f 100644 --- a/src/styles/modals.scss +++ b/src/styles/modals.scss @@ -129,3 +129,63 @@ 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 6e20303..7d15e97 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,58 @@ 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; + } + + .paymodal-summary-left-bonus { + margin-top: 3px; + } }