more

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}

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,

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>

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 {

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 {