more

src/Components/SignupPage/SignupPage.js

@@ -6,6 +6,7 @@ import Button from "../../pageElements/Button";
 import { db, auth } from "../../firebase";
 import { createUserWithEmailAndPassword } from "firebase/auth";
 import { Link, useNavigate } from "react-router-dom";
+import Toggle from "../../pageElements/Toggle";
 import TextInput from "../../pageElements/TextInput";
 import { v4 as uuidv4 } from "uuid";
 import { collection, setDoc, doc } from "firebase/firestore";
@@ -50,9 +51,7 @@ const SignupPage = () => {
       : process.env.REACT_APP_API_PROD;
 
   const basicPrice = 59;
-
   const proPrice = 139;
-
   const unlimtedAnnualPrice = 169;
 
   const handleChangeInput = (e, name) => {
@@ -167,6 +166,7 @@ const SignupPage = () => {
       return;
     }
   };
+
   async function handleStripeAuthorization(
     user,
     paymentDataValues,
@@ -378,9 +378,12 @@ const SignupPage = () => {
         <div className="select-plan-container">
           <div className="select-sub-left">
             <div className="select-left-header">
-              <h5 className="signup-subheader-text">
+              <div>
-                Select a subscription plan
+                <h5 className="signup-subheader-text">Select a subscription</h5>
-              </h5>
+              </div>
+              <div>
+                <Toggle />
+              </div>
             </div>
             <div className="radio-group-box">
               {signupRadioFields?.map((option, i) => (

src/pageElements/Toggle.js

@@ -1,7 +1,7 @@
 import ToggleButton from "react-bootstrap/ToggleButton";
 import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup";
 
-function ToggleButtonGroupUncontrolled() {
+function Toggle() {
   return (
     <>
       <ToggleButtonGroup type="radio" name="options" defaultValue={1}>
@@ -16,4 +16,4 @@ function ToggleButtonGroupUncontrolled() {
   );
 }
 
-export default ToggleButtonGroupUncontrolled;
+export default Toggle;