Merge pull request #5 from kjannette/rise5

Rise5

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,14 +112,38 @@ const SignupPage = () => {
     }
   };
 
-  return (
-    <div className="signup-super-container">
-      <div className="signup-sub-container">
-        <div className="signup-header">
-          <h1 className="signup-header-text">Create a Novodraft account</h1>
-        </div>
-        <Form className="signup-form">
-          {splitEvery(
+  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="signup-mobile-column"
+          >
+            <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) => (
@@ -134,9 +157,7 @@ const SignupPage = () => {
               error={data[name].error}
               message={data[name].message}
               label={
-                      data[name].value.length === 0
-                        ? signupfields[name].label
-                        : ""
+                data[name].value.length === 0 ? signupfields[name].label : ""
               }
               type={signupfields[name].type}
               values={signupfields[name].values}
@@ -145,7 +166,17 @@ const SignupPage = () => {
           </Col>
         ))}
       </Row>
-          ))}
+    ));
+  };
+
+  return (
+    <div className="signup-super-container">
+      <div className="signup-sub-container">
+        <div className="signup-header">
+          <h1 className="signup-header-text">Create a Novodraft account</h1>
+        </div>
+        <Form className="signup-form">
+          {isMobile ? <MobileForm /> : <DesktopForm />}
           <Row>
             <Col className="mb-3">
               <TextInput

src/styles/signup.scss

@@ -45,3 +45,33 @@
 .signup-btn {
   width: 150px;
 }
+
+@media only screen and (max-width: 430px) {
+  .signup-sub-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 25px;
+    width: 420px;
+    border-radius: 10px;
+    background-color: rgb(240, 247, 250);
+    border: 1px solid #e9e9e9;
+  }
+  .signup-header-text {
+    font-size: 1.5rem;
+  }
+
+  .signup-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-right: auto;
+    margin-left: auto;
+    width: 390px;
+  }
+
+  .signup-mobile-column {
+    width: 340px;
+  }
+}