more

src/Components/SignupPage/SignupPage.js

@@ -396,6 +396,7 @@ const SignupPage = () => {
                   value={"data.clientPosition.value"}
                   disabled={isBusy}
                   dynamicClassName={"signup-option-div"}
+                  optionContainerDynamicClass={"signup-option"}
                   onClick={(e) => handleChangeRadioInput(e, "clientPosition")}
                 />
               </div>

src/pageElements/Radiogroup.js

@@ -27,6 +27,8 @@ const Radiogroup = (props) => {
     ? optionContainerDynamicClass
     : "";
 
+  console.log("optionContainerDynamic", optionContainerDynamic);
+
   return (
     <div className="radio-option-container">
       {title && <div className="checkbox-title">{title}</div>}
@@ -35,13 +37,13 @@ const Radiogroup = (props) => {
           options?.length &&
           options.map((option, index) => (
             <div
-              className={`option-container ${optionContainerDynamic}`}
+              className={`option-container`}
               key={option.name}
               onClick={() => !disabled && onClick && onClick(option)}
             >
               <div className="checked-icon">
                 {value === option.value ? (
-                  <div className="zora">
+                  <div className={`zora ${optionContainerDynamic}`}>
                     <div className="circle-container">
                       <CircleFill
                         className={
@@ -58,14 +60,14 @@ const Radiogroup = (props) => {
                     </div>
 
                     <div
-                      className="option-label"
+                      className={`option-label ${optionContainerDynamic}`}
                       htmlFor={"helper-radio-" + index}
                     >
                       {option.name}
                     </div>
                   </div>
                 ) : (
-                  <div className="zora">
+                  <div className={`zora ${optionContainerDynamic}`}>
                     <div className="circle-container">
                       <Circle
                         className={
@@ -96,12 +98,4 @@ const Radiogroup = (props) => {
   );
 };
 
-/**
- * A radio button is a quick way to extract a single coded answer from our users by presenting multiple possibilities and allowing only one option to be chosen.
- */
-
 export default Radiogroup;
-
-/*
-
-                  */

src/styles/signup.scss

@@ -105,9 +105,11 @@
 .select-plan-summary-box {
   display: flex;
   flex-direction: column;
-  height: 200px;
+  height: 250px;
   width: 100%;
-  background-color: red;
+  border-radius: 10px;
+  background-color: #fff;
+  border: 1px solid #e9e9e9;
   padding: 6px;
 }
 
@@ -117,3 +119,7 @@
   margin: 6px;
   padding: 6px;
 }
+
+.signup-option {
+  width: 200px !important;
+}