more

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