From 0cc5985f697fed3842fcaee9a4bf4f7d0a66a97e Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Fri, 23 Feb 2024 05:24:03 -0600
Subject: [PATCH] more

---
 src/Components/SignupPage/SignupPage.js | 4 ++--
 src/Constants/Fields/RadioFields.js     | 2 +-
 src/pageElements/Radio.js               | 6 +++---
 src/styles/radio.scss                   | 9 +++++++--
 src/styles/signup.scss                  | 4 +++-
 5 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 481da78..a3cdbb5 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -63,7 +63,7 @@ const SignupPage = () => {
   const [issueText, setIssueText] = useState("");
   const [isAnnual, setIsAnnual] = useState(1);
   const [valX, setValX] = useState(0);
-  const [valY, setValY] = useState(2);
+  const [valY, setValY] = useState(3);
 
   const handleChangeInput = (e, name) => {
     const newData = handleFormDataChange(e, name, data, signupFields);
@@ -612,7 +612,7 @@ const SignupPage = () => {
             </div>
           </div>
           <div className="radio-group-box">
-            {signupRadioFields?.slice(0, 3).map((option, index) => (
+            {signupRadioFields?.slice(valX, valY).map((option, index) => (
               <div className="signup-radio-container">
                 <Radio
                   onClick={handleChangeRadioInput}
diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js
index 9f3632a..409a34a 100644
--- a/src/Constants/Fields/RadioFields.js
+++ b/src/Constants/Fields/RadioFields.js
@@ -26,7 +26,7 @@ export const signupRadioFields = [
       "Documents conform with state rules",
       "Intellidraft AI - downloadable document in minutes",
       "24/7 support",
-      "First month free!",
+      "First month is free!",
     ],
     details: "",
     docsAllowedPerMonth: 1,
diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js
index ae6a993..59d6b71 100644
--- a/src/pageElements/Radio.js
+++ b/src/pageElements/Radio.js
@@ -34,11 +34,11 @@ const Radio = (props) => {
             >
               {value == activeRadioOption && !isUpgrade ? (
                 <div className="radio-circle-box">
-                  <CircleFill color="#1a76c7" size="20px" />
+                  <CircleFill color="#1a76c7" size="14px" />
                 </div>
               ) : (
                 <div className="radio-circle-box">
-                  <Circle color="#1a76c7" size="15px" />
+                  <Circle color="#1a76c7" size="14px" />
                 </div>
               )}
               <div className="radio-name-box"> {`${name}`} </div>
@@ -58,7 +58,7 @@ const Radio = (props) => {
               <div className="radio-description-box">
                 {description.map((item, i) => {
                   const el =
-                    item == "First month free!" && !isUpgrade ? (
+                    item == "First month is free!" && !isUpgrade ? (
                       <div className="offer-div">
                         <p className="signup-feat-item-bold">{item}</p>
                       </div>
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index c6c50bf..c150f0c 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -1,6 +1,9 @@
 .radio-circle-container {
   display: flex;
   flex-direction: column;
+  align-items: center;
+  margin-right: auto;
+  margin-left: auto;
   &.upgrade {
     background-color: rgb(149, 149, 149);
   }
@@ -8,17 +11,19 @@
     background-color: #fff;
   }
   height: 345px;
-  margin: 10px 8px 0px 8px;
   border-radius: 5px;
   border: 1px solid #d4d4d4;
 }
 
 .radio-circle-top {
+  width: 248px;
   height: 40px;
   display: flex;
   flex-direction: row;
-  margin-top: 12px;
+  margin-top: 18px;
   margin-left: 2px;
+  border: 1px solid var(--accent-orange-light);
+  border-radius: 10px;
 }
 
 .radio-circle-lower {
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 26176d0..2c846e1 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -214,11 +214,13 @@
 .offer-div {
   display: flex;
   justify-content: center;
-  align-items: center;
   height: 30px;
   border: 1px solid #fdbe72;
   border-radius: 10px;
   margin-top: 25px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 220px;
 }
 
 .show-addaccount-wrapper {