more

src/Constants/Fields/RadioFields.js

@@ -4,7 +4,11 @@ export const signupRadioFields = [
     label: "Monthly - basic",
     value: "monthlyBasic",
   },
-  { name: "Monthly - pro", label: "Monthly - pro", value: "monthlyPro" },
+  {
+    name: "Monthly - pro plan",
+    label: "Monthly - pro plan",
+    value: "monthlyProPlan",
+  },
   {
     name: "Annual - unlimted",
     label: "Annual - unlimte",

src/pageElements/Radio.js

@@ -19,7 +19,45 @@ const Radio = (props) => {
   return (
     <div>
       {options.map((option) => (
-        <>{option.name}</>
+        <div
+          className="option-container"
+          key={option.name}
+          onClick={() => !disabled && onClick && onClick(option)}
+        >
+          {value == option?.value ? (
+            <div className="circle-container">
+              <div> {option.name}</div>
+              <CircleFill
+                className={
+                  value === option.value
+                    ? "clickable-icon-active"
+                    : "clieckable-icon"
+                }
+                color="#1a76c7"
+                size="20px"
+                onClick={(e) => {
+                  !disabled && onClick(e);
+                }}
+              />
+            </div>
+          ) : (
+            <div className="circle-container">
+              <div> {option.name}</div>
+              <Circle
+                className={
+                  value === option.value
+                    ? "clickable-icon-active"
+                    : "clieckable-icon"
+                }
+                color="#1a76c7"
+                size="20px"
+                onClick={(e) => {
+                  !disabled && onClick(e);
+                }}
+              />
+            </div>
+          )}
+        </div>
       ))}
     </div>
   );