From 6bc357257c99c2a72018e635f8550a918d93d2ed Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 25 Jan 2024 11:42:37 -0600
Subject: [PATCH] more

---
 src/Components/SignupPage/SignupPage.js |  1 +
 src/pageElements/Radiogroup.js          | 18 ++++++------------
 src/styles/signup.scss                  | 10 ++++++++--
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index e6e7c6a..c3a5a98 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/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>
diff --git a/src/pageElements/Radiogroup.js b/src/pageElements/Radiogroup.js
index 047a194..d14d5c7 100644
--- a/src/pageElements/Radiogroup.js
+++ b/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;
-
-/*
-
-                  */
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 315ec9c..0085e41 100644
--- a/src/styles/signup.scss
+++ b/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;
+}