more

src/Components/SignupPage/SignupPage.js

@@ -474,7 +474,7 @@ const SignupPage = () => {
       )}
     </div>
   );
-
+  const magicIndex = currentPlan === "associate" ? 1 : 2;
   return (
     <div className="signup-super-container">
       {!isUpgrade ? signupForm : <></>}
@@ -496,7 +496,7 @@ const SignupPage = () => {
               </div>
             </div>
             <div className="radio-group-box">
-              {signupRadioFields?.map((option, i) => (
+              {signupRadioFields?.map((option, index) => (
                 <div className="signup-radio-container">
                   <Radio
                     onClick={handleChangeRadioInput}
@@ -507,7 +507,7 @@ const SignupPage = () => {
                     activeRadioOption={activeRadioOption}
                     price={option.pricing}
                     isAnnual={isAnnual}
-                    isUpgrade={isUpgrade}
+                    isUpgrade={index < magicIndex ? true : false}
                     currentPlan={currentPlan}
                   />
                 </div>

src/pageElements/Radio.js

@@ -20,8 +20,9 @@ const Radio = (props) => {
   const classCheckbox = "checkbox";
   const classOption = "option";
   const index = isAnnual === 1 ? Number("1") : Number("0");
+  console.log("isUpgrade", isUpgrade);
   const upgradeClass = isUpgrade ? "upgrade" : "not-upgrade";
-
+  console.log("upgradeClass", upgradeClass);
   return (
     <div className="radio-container">
       <div className="radio-option-container" key={name}>

src/styles/radio.scss

@@ -1,6 +1,12 @@
 .radio-circle-container {
   display: flex;
   flex-direction: column;
+  &.upgrade {
+    background-color: rgb(149, 149, 149);
+  }
+  &.not-upgrade {
+    background-color: #fff;
+  }
   height: 290px;
   margin: 10px 8px 0px 8px;
   border-radius: 5px;