From 5847119754783c0f45433b1f2ba30480ea159683 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Mon, 5 Feb 2024 17:49:07 -0600
Subject: [PATCH 1/4] more

---
 src/Components/SignupPage/SignupPage.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 7ebdfcc..280a4ba 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -43,12 +43,12 @@ const SignupPage = () => {
     getFormDataDefaults(paymentfields)
   );
   const [showPaymentModal, setShowPaymentModal] = useState(false);
-  /*
+
   const [showSelectPlan, setShowSelectPlan] = useState(
     isUpgrade ? true : false
   );
-  */
-  const [showSelectPlan, setShowSelectPlan] = useState(true);
+
+  //const [showSelectPlan, setShowSelectPlan] = useState(true);
   const [activeRadioOption, setActiveRadioOption] = useState("partner");
   const [selectedPlan, setSelectedPlan] = useState([signupRadioFields[1]]);
   const [isAnnual, setIsAnnual] = useState(1);

From 65e794fc4f9fe3c057562f7235216e6f46ba20bb Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Mon, 5 Feb 2024 18:03:21 -0600
Subject: [PATCH 2/4] more

---
 src/styles/features.scss |  2 +-
 src/styles/signup.scss   | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/styles/features.scss b/src/styles/features.scss
index d9106d6..ae64925 100644
--- a/src/styles/features.scss
+++ b/src/styles/features.scss
@@ -114,7 +114,7 @@
 
   .features-top-wrapper {
     flex-direction: column;
-    height: 468px;
+    height: 480px;
     margin-bottom: 12px;
   }
 
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 3fa3f5c..5238389 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -286,3 +286,21 @@
 .signup-proceed-btn {
   width: 240px;
 }
+//
+@media only screen and (max-width: 430px) {
+  .signup-super-container {
+    max-width: 380px;
+  }
+  .signup-header {
+    max-width: 400px;
+  }
+  .signup-sub-container {
+    width: 370px;
+  }
+  .signup-header-text {
+    font-size: 1.75rem;
+    &.trial {
+      font-size: 0.95rem;
+    }
+  }
+}

From a12da072209b5c4e742f6b2ef797421e4b275e5f Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Mon, 5 Feb 2024 19:08:41 -0600
Subject: [PATCH 3/4] more

---
 src/Components/SignupPage/SignupPage.js | 12 ++++---
 src/styles/app.scss                     |  6 +++-
 src/styles/signup.scss                  | 46 ++++++++++++++++++++-----
 3 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 280a4ba..3d1e108 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -430,9 +430,12 @@ const SignupPage = () => {
           Object.keys(signupFields).slice(0, -2),
           fieldsChunkSize
         ).map((names, j) => (
-          <Row key={`row${j}`}>
+          <Row key={`row${j}`} className="signup-form-row">
             {names.map((name, i) => (
-              <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
+              <Col
+                key={`${name}${i + fieldsChunkSize * j}`}
+                className="mb-3 signup-form-column"
+              >
                 <TextInput
                   name={name}
                   value={data[name].value}
@@ -447,12 +450,13 @@ const SignupPage = () => {
                   type={signupFields[name].type}
                   values={signupFields[name].values}
                   disabled={isBusy}
+                  inputClassName="mobile-text-input"
                 />
               </Col>
             ))}
           </Row>
         ))}
-        <Row>
+        <Row className="signup-password-row">
           <Col className="mb-3">
             <TextInput
               id="signupPassword"
@@ -470,7 +474,7 @@ const SignupPage = () => {
             />
           </Col>
         </Row>
-        <Row>
+        <Row className="signup-password-row">
           <Col className="mb-3">
             <TextInput
               id="confirmPassword"
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 3b23349..cde61c5 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -69,7 +69,11 @@ p {
 
 /*** Media Queries  **/
 
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 420px) {
+  .main-container {
+    max-width: 390px;
+  }
+
   .mobile-content-container {
     display: flex;
     flex-direction: column;
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 5238389..e76df48 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -287,20 +287,50 @@
   width: 240px;
 }
 //
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 420px) {
   .signup-super-container {
-    max-width: 380px;
-  }
-  .signup-header {
-    max-width: 400px;
+    width: 360px !important;
   }
   .signup-sub-container {
-    width: 370px;
+    width: 360px !important;
+  }
+  .signup-header {
+    width: 340px !important;
+  }
+  .signup-header-text-trial {
+    display: none;
+  }
+  .signup-sub-container {
+    width: 860px;
   }
   .signup-header-text {
-    font-size: 1.75rem;
+    font-size: 1.35rem;
     &.trial {
-      font-size: 0.95rem;
+      font-size: 0.89rem;
+      display: none;
     }
   }
+  .signup-form {
+    width: 350px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+  }
+  .signup-form-row {
+    width: 340px !important;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .signup-form-column {
+    width: 350px;
+  }
+  .mobile-text-input {
+    width: 320px;
+  }
+  .signup-password-row {
+    width: 345px !important;
+  }
 }

From b6eb2621c89a974f981b490a9b70e705b52ff74f Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Mon, 5 Feb 2024 19:19:07 -0600
Subject: [PATCH 4/4] more

---
 src/Components/SignupPage/SignupPage.js |  6 ++--
 src/styles/signup.scss                  | 48 ++++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 3d1e108..e5890eb 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -43,12 +43,12 @@ const SignupPage = () => {
     getFormDataDefaults(paymentfields)
   );
   const [showPaymentModal, setShowPaymentModal] = useState(false);
-
+  /*
   const [showSelectPlan, setShowSelectPlan] = useState(
     isUpgrade ? true : false
   );
-
-  //const [showSelectPlan, setShowSelectPlan] = useState(true);
+*/
+  const [showSelectPlan, setShowSelectPlan] = useState(true);
   const [activeRadioOption, setActiveRadioOption] = useState("partner");
   const [selectedPlan, setSelectedPlan] = useState([signupRadioFields[1]]);
   const [isAnnual, setIsAnnual] = useState(1);
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index e76df48..6e20303 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -301,7 +301,7 @@
     display: none;
   }
   .signup-sub-container {
-    width: 860px;
+    width: 360px;
   }
   .signup-header-text {
     font-size: 1.35rem;
@@ -333,4 +333,50 @@
   .signup-password-row {
     width: 345px !important;
   }
+  .select-plan-container {
+    width: 360px;
+  }
+
+  .select-plan-header {
+    width: 350px;
+    flex-direction: column;
+    height: 90px;
+  }
+
+  .plan-header-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    width: 350px;
+    padding: 0px;
+  }
+
+  .plan-header-left {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    width: 350px;
+    padding: 0px;
+  }
+
+  .radio-group-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
 }