more

src/Components/SignupPage/SignupPage.js

@@ -165,6 +165,7 @@ const SignupPage = () => {
     if (dataValues === null) {
       return;
     }
+    setShowSelectPlan(true);
   };
 
   async function handleStripeAuthorization(
@@ -377,11 +378,14 @@ const SignupPage = () => {
       {showSelectPlan ? (
         <div className="select-plan-container">
           <div className="select-sub-left">
-            <div className="select-left-header">
+            <div className="select-plan-header">
-              <div>
+              <div className="plan-header-right">
-                <h5 className="signup-subheader-text">Select a subscription</h5>
+                <h5 className="signup-subheader-text">
+                  Select a subscription plan
+                </h5>
               </div>
-              <div>
+              <div className="plan-header-left">
+                <div className="select-toggle-box"></div>
                 <p>Billed annually</p>
                 <Toggle />
                 <p>Billed montly</p>
@@ -401,25 +405,6 @@ const SignupPage = () => {
               ))}
             </div>
           </div>
-          <div className="select-sub-right">
-            <div className="select-plan-summary-box ">
-              <div>Order summary</div>
-              <div>{`{subVar} subscription type`}</div>
-              <div>{`{subVar} subscription mini description`}</div>
-              <div>{`Total billed today: {subVar} `}</div>
-              <div>Plus aplicable sales tax -toooltip</div>
-            </div>
-            <div className="selectplan-payment-button-wrapper">
-              <Button
-                className="primary-button signup-proceed"
-                type="button"
-                size="lg"
-                onClick={handleProceedToPayment}
-                disabled={isBusy}
-                labelText="Proceed to Payment"
-              />
-            </div>
-          </div>
         </div>
       ) : (
         <></>
@@ -444,3 +429,26 @@ const SignupPage = () => {
 };
 
 export default SignupPage;
+
+/*
+
+          <div className="select-sub-right">
+            <div className="select-plan-summary-box ">
+              <div>Order summary</div>
+              <div>{`{subVar} subscription type`}</div>
+              <div>{`{subVar} subscription mini description`}</div>
+              <div>{`Total billed today: {subVar} `}</div>
+              <div>Plus aplicable sales tax -toooltip</div>
+            </div>
+            <div className="selectplan-payment-button-wrapper">
+              <Button
+                className="primary-button signup-proceed"
+                type="button"
+                size="lg"
+                onClick={handleProceedToPayment}
+                disabled={isBusy}
+                labelText="Proceed to Payment"
+              />
+            </div>
+          </div>
+        */

src/styles/signup.scss

@@ -64,11 +64,33 @@
   height: 600px;
 }
 
+.select-plan-header {
+  display: flex;
+  flex-direction: row;
+  width: 900px;
+}
+
+.plan-header-right {
+  background-color: red;
+  padding: 12px 0px;
+  width: 50%;
+}
+
+.plan-header-left {
+  background-color: red;
+  padding: 12px 0px;
+  width: 50%;
+}
+
 .select-sub-left {
-  width: 60%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 45px;
+  width: 100%;
+  padding: 12px;
   border-radius: 10px;
   background-color: rgb(240, 247, 250);
-  margin-right: 8px;
   border: 1px solid #e9e9e9;
   padding: 6px;
 }