From 86c8e1a3f136404c0715edbcfb02c1fff790d9e9 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Fri, 26 Jan 2024 17:02:58 -0600
Subject: [PATCH] more

---
 src/Components/SignupPage/SignupPage.js | 11 +++++------
 src/pageElements/Toggle.js              | 19 +++++++++++++++++++
 src/styles/signup.scss                  |  1 +
 3 files changed, 25 insertions(+), 6 deletions(-)
 create mode 100644 src/pageElements/Toggle.js

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 52100b0..30d0b7f 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/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">
diff --git a/src/pageElements/Toggle.js b/src/pageElements/Toggle.js
new file mode 100644
index 0000000..68799eb
--- /dev/null
+++ b/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;
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 941400a..179a5ac 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -109,6 +109,7 @@
   border-radius: 10px;
   background-color: #fff;
   border: 1px solid #e9e9e9;
+  margin-top: 5px;
   padding: 6px;
 }