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

---
 src/Components/SignupPage/SignupPage.js | 19 +++++++++++--------
 src/pageElements/Radiogroup.js          |  7 ++++++-
 src/styles/signup.scss                  | 16 ++++++++++++++++
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 56b1d53..e6e7c6a 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -402,14 +402,17 @@ const SignupPage = () => {
             </div>
           </div>
           <div className="select-sub-right">
-            <Button
-              className="primary-button signup-proceed"
-              type="button"
-              size="lg"
-              onClick={handleProceedToPayment}
-              disabled={isBusy}
-              labelText="Select A Plan"
-            />
+            <div className="select-plan-summary-box "></div>
+            <div className="selectplan-payment-button-wrapper">
+              <Button
+                className="primary-button signup-proceed"
+                type="button"
+                size="lg"
+                onClick={handleProceedToPayment}
+                disabled={isBusy}
+                labelText="Proceed to Payment"
+              />
+            </div>
           </div>
         </div>
       ) : (
diff --git a/src/pageElements/Radiogroup.js b/src/pageElements/Radiogroup.js
index 1892347..047a194 100644
--- a/src/pageElements/Radiogroup.js
+++ b/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)}
             >
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 74436a8..315ec9c 100644
--- a/src/styles/signup.scss
+++ b/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;
+}