More

src/Components/SignupPage/SignupPage.js

@@ -13,6 +13,7 @@ import { v4 as uuidv4 } from "uuid";
 import { collection, setDoc, doc } from "firebase/firestore";
 import LoadingSpinner from "../../pageElements/LoadingSpinner";
 import { splitEvery } from "../../Utils/Array";
+import { ArrowLeftSquare, ArrowRightSquare } from "react-bootstrap-icons";
 import {
   getFormDataDefaults,
   getValidatedFormData,
@@ -629,7 +630,14 @@ const SignupPage = () => {
           </div>
 
           <div className="radio-group-super">
-            <div className="toggle-arrow-box"></div>
+            <div className="toggle-arrow-box">
+              <ArrowRightSquare
+                className="arrow-left-toggle"
+                color="#1a76c7"
+                size="30px"
+                onClick={handleLeftArrowClick}
+              />
+            </div>
             <div className="radio-group-box">
               {signupRadioFields?.slice(valX, valY).map((option, index) => (
                 <div className="signup-radio-container">
@@ -650,7 +658,14 @@ const SignupPage = () => {
                 </div>
               ))}
             </div>
-            <div className="toggle-arrow-box"></div>
+            <div className="toggle-arrow-box">
+              <ArrowRightSquare
+                className="arrow-left-toggle"
+                color="#1a76c7"
+                size="30px"
+                onClick={handleRightArrowClick}
+              />
+            </div>
           </div>
           {showAddAccount && !isBusy ? (
             <div className="show-addaccount-wrapper">