Merge pull request #90 from kjannette/mobile2

Mobile2

src/Components/SignupPage/SignupPage.js

@@ -588,7 +588,7 @@ const SignupPage = () => {
                     </select>
                   </div>
                 </div>
-                <div className="details-button-box">
+                <div className="details-foo-box ">
                   <Button
                     className="secondary-button"
                     onClick={handleCancelAdd}
@@ -612,7 +612,7 @@ const SignupPage = () => {
               <>
                 {showAddAccountBtn ? (
                   <Button
-                    className="secondary-button cancel-add-account-btn"
+                    className="secondary-button signup-addacct-button"
                     type="button"
                     size="lg"
                     onClick={handleAddAccounts}

src/styles/homepage.scss

@@ -858,7 +858,12 @@ li.nav-item {
   }
 
   .card-section-container {
+    display: flex;
     flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
   }
 
   img.img-1 {

src/styles/signup.scss

@@ -350,6 +350,15 @@
     width: 360px;
   }
 
+  .signup-button-box {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+  }
+
   .select-plan-header {
     width: 350px;
     flex-direction: column;
@@ -414,6 +423,15 @@
     margin-bottom: 0px;
   }
 
+  .signup-addacct-button {
+    margin-bottom: 12px;
+  }
+
+  .signup-proceed {
+    width: 160px;
+    margin-left: 3px;
+  }
+
   .signup-select-wrapper {
     flex-direction: column;
     justify-content: center;
@@ -427,18 +445,19 @@
     margin: 10px auto;
   }
 
-  .details-button-box {
-    width: 180px !important;
+  .details-foo-box {
+    display: flex;
     flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
   }
 
   .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;
   }