more

src/Components/SignupPage/SignupPage.js

@@ -402,14 +402,17 @@ const SignupPage = () => {
             </div>
           </div>
           <div className="select-sub-right">
-            <Button
+            <div className="select-plan-summary-box "></div>
-              className="primary-button signup-proceed"
+            <div className="selectplan-payment-button-wrapper">
-              type="button"
+              <Button
-              size="lg"
+                className="primary-button signup-proceed"
-              onClick={handleProceedToPayment}
+                type="button"
-              disabled={isBusy}
+                size="lg"
-              labelText="Select A Plan"
+                onClick={handleProceedToPayment}
-            />
+                disabled={isBusy}
+                labelText="Proceed to Payment"
+              />
+            </div>
           </div>
         </div>
       ) : (

src/pageElements/Radiogroup.js

@@ -13,6 +13,7 @@ const Radiogroup = (props) => {
     options,
     disabled,
     dynamicClassName,
+    optionContainerDynamicClass,
   } = props;
   const classCheckbox = "checkbox";
   const classOption = "option";
@@ -22,6 +23,10 @@ const Radiogroup = (props) => {
       ? dynamicClassName
       : "checkbox-option-div";
 
+  const optionContainerDynamic = optionContainerDynamicClass
+    ? optionContainerDynamicClass
+    : "";
+
   return (
     <div className="radio-option-container">
       {title && <div className="checkbox-title">{title}</div>}
@@ -30,7 +35,7 @@ const Radiogroup = (props) => {
           options?.length &&
           options.map((option, index) => (
             <div
-              className="option-container"
+              className={`option-container ${optionContainerDynamic}`}
               key={option.name}
               onClick={() => !disabled && onClick && onClick(option)}
             >

src/styles/signup.scss

@@ -101,3 +101,19 @@
   height: 300px;
   background-color: #fff;
 }
+
+.select-plan-summary-box {
+  display: flex;
+  flex-direction: column;
+  height: 200px;
+  width: 100%;
+  background-color: red;
+  padding: 6px;
+}
+
+.selectplan-payment-button-wrapper {
+  display: flex;
+  flex-direction: row-reverse;
+  margin: 6px;
+  padding: 6px;
+}