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,6 +627,9 @@ const SignupPage = () => {
               </div>
             </div>
           </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">
@@ -631,6 +650,8 @@ const SignupPage = () => {
                 </div>
               ))}
             </div>
+            <div className="toggle-arrow-box"></div>
+          </div>
           {showAddAccount && !isBusy ? (
             <div className="show-addaccount-wrapper">
               <div className="show-addaccount-container">

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 {