more

src/Components/SignupPage/SignupPage.js

@@ -381,6 +381,7 @@ const SignupPage = () => {
                   onClick={handleChangeRadioInput}
                   value={option.value}
                   name={option.name}
+                  description={option.description}
                   activeRadioOption={activeRadioOption}
                 />
               ))}

src/Constants/Fields/RadioFields.js

@@ -3,15 +3,18 @@ export const signupRadioFields = [
     name: "Monthly - basic",
     label: "Monthly - basic",
     value: "monthlyBasic",
+    description: "Generate 1 document per month",
   },
   {
     name: "Monthly - pro plan",
     label: "Monthly - pro plan",
     value: "monthlyProPlan",
+    description: "Generate up to 3 documents per month",
   },
   {
-    name: "Annual - unlimted",
-    label: "Annual - unlimte",
+    name: "Annual - unlimted annual",
+    label: "Annual - unlimited annual",
     value: "annualUnlimited",
+    description: "Generate unlimited documents.  Billed annualy",
   },
 ];

src/pageElements/Radio.js

@@ -3,7 +3,8 @@ import "../styles/radio.scss";
 
 const Radio = (props) => {
   console.log("hello");
-  const { name, onClick, value, disabled, activeRadioOption } = props;
+  const { name, description, onClick, value, disabled, activeRadioOption } =
+    props;
   const classCheckbox = "checkbox";
   const classOption = "option";
   console.log("value, activeRadioOption", value, activeRadioOption);
@@ -19,8 +20,8 @@ const Radio = (props) => {
             <div className="radio-circle-box">
               <CircleFill />
             </div>
-
             <div className="radio-name-box"> {`${name}`} </div>
+            <div className="radio-description-box"> {`${description}`} </div>
           </div>
         ) : (
           <div className="radio-circle-container">

src/styles/radio.scss

@@ -13,5 +13,9 @@
 }
 
 .radio-name-box {
-  margin: 12px 8px;
+  font-family: var(--main-font);
+  font-family: Roboto;
+  font-weight: 500;
+  letter-spacing: 0.05rem;
+  margin: 13px 8px;
 }

src/styles/signup.scss

@@ -99,7 +99,6 @@
   padding: 6px;
   width: 100%;
   height: 300px;
-  background-color: #fff;
 }
 
 .select-plan-summary-box {