From 605f3983ed274eea8e78bfe3ffc078f6d37c5071 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 11 Jan 2024 20:07:02 -0600
Subject: [PATCH 1/7] more

---
 src/styles/signup.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index cf3ac59..794d304 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -45,3 +45,6 @@
 .signup-btn {
   width: 150px;
 }
+
+@media only screen and (max-width: 430px) {
+}

From 88fd2b630c3a6fd9678961fa50b41b5f7e6146bb Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 11 Jan 2024 20:15:42 -0600
Subject: [PATCH 2/7] more

---
 src/Components/SignupPage/SignupPage.js | 84 ++++++++++++++++---------
 1 file changed, 56 insertions(+), 28 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 8990db0..1cf0524 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -23,9 +23,8 @@ import "../../styles/signup.scss";
 const SignupPage = () => {
   const navigate = useNavigate();
   const [notice, setNotice] = useState("");
-
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 440);
   const fieldsChunkSize = 2;
-
   const [isBusy, setIsBusy] = useState(false);
   const [data, setData] = useState(getFormDataDefaults(signupfields));
 
@@ -113,6 +112,60 @@ const SignupPage = () => {
     }
   };
 
+  const MobileForm = () => {
+    return splitEvery(
+      Object.keys(signupfields).slice(0, -2),
+      fieldsChunkSize
+    ).map((names, j) => (
+      <Col key={`row${j}`}>
+        {names.map((name, i) => (
+          <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
+            <TextInput
+              name={name}
+              value={data[name].value}
+              onChange={(e) => handleChangeInput(e, name)}
+              error={data[name].error}
+              message={data[name].message}
+              label={
+                data[name].value.length === 0 ? signupfields[name].label : ""
+              }
+              type={signupfields[name].type}
+              values={signupfields[name].values}
+              disabled={isBusy}
+            />
+          </Col>
+        ))}
+      </Col>
+    ));
+  };
+
+  const DesktopForm = () => {
+    return splitEvery(
+      Object.keys(signupfields).slice(0, -2),
+      fieldsChunkSize
+    ).map((names, j) => (
+      <Row key={`row${j}`}>
+        {names.map((name, i) => (
+          <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
+            <TextInput
+              name={name}
+              value={data[name].value}
+              onChange={(e) => handleChangeInput(e, name)}
+              error={data[name].error}
+              message={data[name].message}
+              label={
+                data[name].value.length === 0 ? signupfields[name].label : ""
+              }
+              type={signupfields[name].type}
+              values={signupfields[name].values}
+              disabled={isBusy}
+            />
+          </Col>
+        ))}
+      </Row>
+    ));
+  };
+
   return (
     <div className="signup-super-container">
       <div className="signup-sub-container">
@@ -120,32 +173,7 @@ const SignupPage = () => {
           <h1 className="signup-header-text">Create a Novodraft account</h1>
         </div>
         <Form className="signup-form">
-          {splitEvery(
-            Object.keys(signupfields).slice(0, -2),
-            fieldsChunkSize
-          ).map((names, j) => (
-            <Row key={`row${j}`}>
-              {names.map((name, i) => (
-                <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
-                  <TextInput
-                    name={name}
-                    value={data[name].value}
-                    onChange={(e) => handleChangeInput(e, name)}
-                    error={data[name].error}
-                    message={data[name].message}
-                    label={
-                      data[name].value.length === 0
-                        ? signupfields[name].label
-                        : ""
-                    }
-                    type={signupfields[name].type}
-                    values={signupfields[name].values}
-                    disabled={isBusy}
-                  />
-                </Col>
-              ))}
-            </Row>
-          ))}
+          {isMobile ? <MobileForm /> : <DesktopForm />}
           <Row>
             <Col className="mb-3">
               <TextInput

From ffc5fd3497f1675fdd6ba99b2719a9d8df4a7eeb Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 11 Jan 2024 20:17:37 -0600
Subject: [PATCH 3/7] more

---
 src/styles/signup.scss | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 794d304..93c7a3e 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -47,4 +47,15 @@
 }
 
 @media only screen and (max-width: 430px) {
+  .signup-sub-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 45px;
+    width: 420px;
+    padding: 12px;
+    border-radius: 10px;
+    background-color: rgb(240, 247, 250);
+    border: 1px solid #e9e9e9;
+  }
 }

From 88b63228dad54859de95a0d3108ca04f8b8834f9 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 11 Jan 2024 20:28:42 -0600
Subject: [PATCH 4/7] more

---
 src/styles/signup.scss | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 93c7a3e..8ee7dbb 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -51,11 +51,17 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 45px;
+    margin-top: 25px;
     width: 420px;
-    padding: 12px;
     border-radius: 10px;
     background-color: rgb(240, 247, 250);
     border: 1px solid #e9e9e9;
   }
+  .signup-header-text {
+    font-size: 1.5rem;
+  }
+
+  .signup-form {
+    width: 380px;
+  }
 }

From 2e1c3ff972e37fc517924bcdcfe99d212c4404a2 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 11 Jan 2024 20:30:34 -0600
Subject: [PATCH 5/7] more

---
 src/styles/signup.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 8ee7dbb..0a3b30d 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -62,6 +62,6 @@
   }
 
   .signup-form {
-    width: 380px;
+    width: 300px;
   }
 }

From 46eac914161177900af15e5d6b2803a0c25e16c8 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 11 Jan 2024 20:33:47 -0600
Subject: [PATCH 6/7] more

---
 src/styles/signup.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 0a3b30d..d32d327 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -62,6 +62,12 @@
   }
 
   .signup-form {
-    width: 300px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-right: auto;
+    margin-left: auto;
+    width: 390px;
   }
 }

From 4c993e44be84da01b13147529dad274f2f0feebb Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 11 Jan 2024 20:35:44 -0600
Subject: [PATCH 7/7] more

---
 src/Components/SignupPage/SignupPage.js | 5 ++++-
 src/styles/signup.scss                  | 4 ++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 1cf0524..1f8e32a 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -119,7 +119,10 @@ const SignupPage = () => {
     ).map((names, j) => (
       <Col key={`row${j}`}>
         {names.map((name, i) => (
-          <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
+          <Col
+            key={`${name}${i + fieldsChunkSize * j}`}
+            className="signup-mobile-column"
+          >
             <TextInput
               name={name}
               value={data[name].value}
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index d32d327..63c5277 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -70,4 +70,8 @@
     margin-left: auto;
     width: 390px;
   }
+
+  .signup-mobile-column {
+    width: 340px;
+  }
 }