Merge pull request #89 from kjannette/mobilesign

Mobilesign

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>
                 ) : (

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>

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

src/styles/signup.scss

@@ -224,17 +224,22 @@
 
 .show-addaccount-wrapper {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
-  justify-content: flex-end;
+  justify-content: center;
-  width: 100%;
+  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;
+  flex-direction: column;
-  justify-content: flex-end;
+  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;
+  }
 }