more

src/Components/SignupPage/SignupPage.js

@@ -62,8 +62,8 @@ const SignupPage = () => {
   const [showPromoModal, setShowPromoModal] = useState(false);
   const [issueText, setIssueText] = useState("");
   const [isAnnual, setIsAnnual] = useState(1);
-  const [valX, setValX] = useState(0);
-  const [valY, setValY] = useState(3);
+  const [valX, setValX] = useState(1);
+  const [valY, setValY] = useState(4);
 
   const handleChangeInput = (e, name) => {
     const newData = handleFormDataChange(e, name, data, signupFields);
@@ -107,6 +107,22 @@ const SignupPage = () => {
     setActiveRadioOption(tempPlan[0].value);
   };
 
+  const handleLeftArrowClick = () => {
+    console.log("left");
+    if (valX == 0) {
+      return;
+    } else {
+      const tempx = valX - 1;
+      const tempy = valY - 1;
+      setValX(tempx);
+      setValY(tempy);
+    }
+  };
+
+  const handleRightArrowClick = () => {
+    console.log("left");
+  };
+
   const vals = [
     [1, 2, 3, 4, 5, 6, 7, 8],
     [1, 2],
@@ -611,25 +627,30 @@ const SignupPage = () => {
               </div>
             </div>
           </div>
-          <div className="radio-group-box">
-            {signupRadioFields?.slice(valX, valY).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 className="radio-group-super">
+            <div className="toggle-arrow-box"></div>
+            <div className="radio-group-box">
+              {signupRadioFields?.slice(valX, valY).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>
+            <div className="toggle-arrow-box"></div>
           </div>
           {showAddAccount && !isBusy ? (
             <div className="show-addaccount-wrapper">

src/styles/signup.scss

@@ -115,6 +115,10 @@
 .select-plan-container {
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-right: auto;
+  margin-left: auto;
   margin-top: 24px;
   width: 920px;
   min-height: 540px;
@@ -164,11 +168,26 @@
   flex-direction: column;
 }
 
+.radio-group-super {
+  width: 912px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  background-color: red;
+}
+
 .radio-group-box {
   display: flex;
   flex-direction: row;
   justify-content: center;
-  padding: 6px;
+  padding: 2px;
+  background-color: yellow;
+  width: 815px;
+}
+
+.toggle-arrow-box {
+  width: 10px;
+  background-color: red;
 }
 
 .select-plan-summary-box {
@@ -195,7 +214,7 @@
 }
 
 .signup-radio-container {
-  width: 280px;
+  width: 270px;
 }
 
 .signup-feat-item {