From ad84d3e56d2126fd82feb0c4c448be564bf58d6a Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Fri, 26 Jan 2024 19:08:04 -0600
Subject: [PATCH] m,ore

---
 src/Components/SignupPage/SignupPage.js |  9 +++++----
 src/pageElements/Radio.js               |  4 ++--
 src/styles/signup.scss                  | 14 ++++++++++++++
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 2c22c7c..9f2d71f 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -385,10 +385,11 @@ const SignupPage = () => {
                 </h5>
               </div>
               <div className="plan-header-left">
-                <div className="select-toggle-box"></div>
-                <p>Billed annually</p>
-                <Toggle />
-                <p>Billed montly</p>
+                <div className="select-toggle-box">
+                  <p className="select-billing-text">Billed annually</p>
+                  <Toggle />
+                  <p className="select-billing-text">Billed montly</p>
+                </div>
               </div>
             </div>
             <div className="radio-group-box">
diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js
index bfa37eb..8495cea 100644
--- a/src/pageElements/Radio.js
+++ b/src/pageElements/Radio.js
@@ -38,7 +38,7 @@ const Radio = (props) => {
               <div className="radio-circle-lower">
                 <div className="radio-description-box">
                   {description.map((item) => {
-                    return <li>{item}</li>;
+                    return <p>{item}</p>;
                   })}
                 </div>
                 <div className="radio-description-box">{`${details}`} </div>
@@ -60,7 +60,7 @@ const Radio = (props) => {
               <div className="radio-circle-lower">
                 <div className="radio-description-box">
                   {description.map((item) => {
-                    return <li>{item}</li>;
+                    return <p>{item}</p>;
                   })}
                 </div>
                 <div className="radio-description-box">{`${details}`} </div>
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 975ab46..52887af 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -106,6 +106,20 @@
   padding: 6px;
 }
 
+.select-toggle-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 2px;
+  width: 240px;
+  height: 20px;
+}
+
+.select-billing-text {
+  font-size: 0.85rem;
+}
+
 .signup-radio-wrapper {
   background-color: #fff;
   display: flex;