From 60f2a30fa51abb8863808a24c03e25c85e3e978f Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Mon, 5 Feb 2024 16:40:28 -0600
Subject: [PATCH] more

---
 src/Components/SignupPage/SignupPage.js | 160 ++++++++++++++----------
 src/styles/signup.scss                  |   2 -
 2 files changed, 94 insertions(+), 68 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 8bfa0ab..7ebdfcc 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -525,82 +525,110 @@ const SignupPage = () => {
               </div>
             </div>
           </div>
-          <div className="select-sub-left">
-            <div className="radio-group-box">
-              {signupRadioFields?.map((option, index) => (
-                <div className="signup-radio-container">
-                  <Radio
-                    onClick={handleChangeRadioInput}
-                    value={option.value}
-                    name={option.name}
-                    description={option.description}
-                    details={option.details}
-                    activeRadioOption={activeRadioOption}
-                    price={option.pricing}
-                    isAnnual={isAnnual}
-                    isUpgrade={index < disableIndex ? true : false}
-                    disabled={index < disableIndex ? true : false}
-                    currentPlan={currentPlan}
-                    parentIndex={index}
-                  />
+          <div className="radio-group-box">
+            {signupRadioFields?.map((option, index) => (
+              <div className="signup-radio-container">
+                <Radio
+                  onClick={handleChangeRadioInput}
+                  value={option.value}
+                  name={option.name}
+                  description={option.description}
+                  details={option.details}
+                  activeRadioOption={activeRadioOption}
+                  price={option.pricing}
+                  isAnnual={isAnnual}
+                  isUpgrade={index < disableIndex ? true : false}
+                  disabled={index < disableIndex ? true : false}
+                  currentPlan={currentPlan}
+                  parentIndex={index}
+                />
+              </div>
+            ))}
+          </div>
+          {showAddAccount && !isBusy ? (
+            <div className="show-addaccount-wrapper">
+              <div className="show-addaccount-container">
+                <div className="plan-header-right-lower">
+                  <h5 className="signup-button-wrapper-text">
+                    Add additional accounts
+                  </h5>
+                  <p className="signup-accounts-info">
+                    User profiles will be setup later
+                  </p>
                 </div>
-              ))}
-            </div>
-            {showAddAccount && !isBusy ? (
-              <div className="show-addaccount-wrapper">
-                <div className="show-addaccount-container">
-                  <div className="plan-header-right-lower">
-                    <h5 className="signup-button-wrapper-text">
-                      Add additional accounts
-                    </h5>
-                    <p className="signup-accounts-info">
-                      User profiles will be setup later
-                    </p>
-                  </div>
-                  <div className="signup-select-wrapper">
-                    <div className="signup-select-box">
-                      <select
-                        id="accountNo"
-                        className={`form-select`}
-                        value={numberOfAccountsToAdd}
-                        name={"addAccountsSelect"}
-                        onChange={(e) =>
-                          handleChangeAccountSelect(e, "addAccountsSelect")
-                        }
-                      >
+                <div className="signup-select-wrapper">
+                  <div className="signup-select-box">
+                    <select
+                      id="accountNo"
+                      className={`form-select`}
+                      value={numberOfAccountsToAdd}
+                      name={"addAccountsSelect"}
+                      onChange={(e) =>
+                        handleChangeAccountSelect(e, "addAccountsSelect")
+                      }
+                    >
+                      <option
+                        id="ddlProducts"
+                        className={`select-option`}
+                        value=""
+                      ></option>
+                      {selectAdditionalAccountValues.map((item, i) => (
                         <option
                           id="ddlProducts"
                           className={`select-option`}
-                          value=""
-                        ></option>
-                        {selectAdditionalAccountValues.map((item, i) => (
-                          <option
-                            id="ddlProducts"
-                            className={`select-option`}
-                            key={`item${i}`}
-                          >
-                            {item}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
+                          key={`item${i}`}
+                        >
+                          {item}
+                        </option>
+                      ))}
+                    </select>
                   </div>
-                  <div className="details-button-box">
+                </div>
+                <div className="details-button-box">
+                  <Button
+                    className="secondary-button back-button"
+                    onClick={handleCancelAdd}
+                    labelText="Cancel"
+                  />
+                  <div className="upload-button-box">
                     <Button
-                      className="secondary-button back-button"
-                      onClick={handleCancelAdd}
-                      labelText="Cancel"
+                      className="p-2 mr-2 primary-button signup-proceed-btn"
+                      onClick={handleAdd}
+                      labelText="Add And Proceed To Payment"
                     />
-                    <div className="upload-button-box">
-                      <Button
-                        className="p-2 mr-2 primary-button signup-proceed-btn"
-                        onClick={handleAdd}
-                        labelText="Add And Proceed To Payment"
-                      />
-                    </div>
                   </div>
                 </div>
               </div>
+            </div>
+          ) : (
+            <></>
+          )}
+          <div className="signup-button-box">
+            {!showAddAccount && !isBusy ? (
+              <>
+                {showAddAccountBtn ? (
+                  <Button
+                    className="secondary-button cancel-add-account-btn"
+                    type="button"
+                    size="lg"
+                    onClick={handleAddAccounts}
+                    disabled={isBusy}
+                    labelText="Add Account(s)"
+                    style={{ marginTight: "12px;" }}
+                  />
+                ) : (
+                  <></>
+                )}
+
+                <Button
+                  className="primary-button signup-proceed"
+                  type="button"
+                  size="lg"
+                  onClick={handleProceedToPayment}
+                  disabled={isBusy}
+                  labelText="Proceed to Payment"
+                />
+              </>
             ) : (
               <></>
             )}
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 59174ab..3fa3f5c 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -126,7 +126,6 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 45px;
   width: 100%;
 }
 
@@ -170,7 +169,6 @@
   flex-wrap: wrap;
   padding: 6px;
   width: 100%;
-  height: 340px;
 }
 
 .select-plan-summary-box {