more

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(
+          {isMobile ? <MobileForm /> : <DesktopForm />}
-            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>
-          ))}
           <Row>
             <Col className="mb-3">
               <TextInput