more

src/Components/SignupPage/SignupPage.js

@@ -24,6 +24,7 @@ import PaymentModal from "../Modals/PaymentModal";
 import Radio from "../../pageElements/Radio";
 import "../../styles/signup.scss";
 import Stripe from "stripe";
+import { stripeApiKey } from "../../secrets";
 
 const SignupPage = () => {
   const navigate = useNavigate();
@@ -39,10 +40,8 @@ const SignupPage = () => {
   const [activeRadioOption, setActiveRadioOption] = useState("monthlyBasic");
   const modalText = "Description of monthly and annual subscriptions";
   const [selectedPlan, setSelectedPlan] = useState({});
-  // this could also go in App.js if needed in the future
-  const stripe = new Stripe(
-    "pk_test_51NNoasBi8p7FeGFrI5SfpM6HuNMoxwImx6NRKyKbgbt6OPxMxQDiZ9I1GqvDa9qUwB3D3jlJOng6MyjPppWofxzP00Exvr8dBy"
-  );
+  // Could also go in App.js if needed in the future
+  const stripe = new Stripe(stripeApiKey);
 
   const apiUrl =
     process.env.NODE_ENV === "development"
@@ -371,9 +370,9 @@ const SignupPage = () => {
       {showSelectPlan ? (
         <div className="select-plan-container">
           <div className="select-sub-left">
-            <div>
+            <div className="select-left-header">
               <h5 className="signup-subheader-text">
-                Select your subscription plan
+                Select a subscription plan
               </h5>
             </div>
             <div className="radio-group-box">

src/pageElements/Toggle.js

@@ -0,0 +1,19 @@
+import ToggleButton from "react-bootstrap/ToggleButton";
+import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup";
+
+function ToggleButtonGroupUncontrolled() {
+  return (
+    <>
+      <ToggleButtonGroup type="radio" name="options" defaultValue={1}>
+        <ToggleButton id="tbg-radio-1" value={1}>
+          ''
+        </ToggleButton>
+        <ToggleButton id="tbg-radio-2" value={2}>
+          ''
+        </ToggleButton>
+      </ToggleButtonGroup>
+    </>
+  );
+}
+
+export default ToggleButtonGroupUncontrolled;

src/styles/signup.scss

@@ -109,6 +109,7 @@
   border-radius: 10px;
   background-color: #fff;
   border: 1px solid #e9e9e9;
+  margin-top: 5px;
   padding: 6px;
 }