New component to search senior (see #12). Enhance responsiveness and solve #10 and #11

src/components/Auth/SignUpForm/SignUpForm.tsx

 import React, { FC } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { Button } from '@material-ui/core';
-
+import {
+  Button,
+  createMuiTheme,
+  responsiveFontSizes,
+  MuiThemeProvider,
+  Grid,
+  Typography,
+  Link,
+  Hidden,
+} from '@material-ui/core';
+import { AuthRoutes, NonAuthRoutes } from 'api/routes';
 import axios from 'axios';
 import { InputField } from 'components/Auth/InputField/InputField';
 import { useStyles } from 'components/Auth/SignUpForm/useStyles';
@@ -21,6 +30,9 @@ export const SignUpForm: FC = () => {
     notes: string;
   };
 
+  let themeResp = createMuiTheme();
+  themeResp = responsiveFontSizes(themeResp);
+
   const { control, errors, handleSubmit } = useForm<FormData>();
 
   const onSubmit: SubmitHandler<FormData> = (values: FormData) => {
@@ -55,166 +67,209 @@ export const SignUpForm: FC = () => {
   const classes = useStyles();
   return (
     <>
+      <header>
+        <MuiThemeProvider theme={themeResp}>
+          <Grid item container>
+            <Grid item xs={12} color="primary" className={classes.paddingTop}>
+              <Typography variant="h1">SIGN UP</Typography>
+            </Grid>
+          </Grid>
+        </MuiThemeProvider>
+      </header>
+
       <form
         className={classes.form}
         onSubmit={handleSubmit(onSubmit)}
         data-testid="Form"
       >
-        <InputField
-          name="email"
-          type="email"
-          control={control}
-          rules={{
-            validate: (value: string) =>
-              /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value),
-            required: {
-              value: true,
-              message: 'Email is not valid',
-            },
-          }}
-          label="Email"
-          error={!!errors.email}
-          errorMessage="Insert email"
-        />
-
-        <InputField
-          name="password"
-          type="password"
-          control={control}
-          rules={{
-            minLength: 8,
-            maxLength: 60,
-            required: {
-              value: true,
-              message: 'Insert valid password',
-            },
-          }}
-          label="Password"
-          error={!!errors.password}
-          errorMessage="Insert valid password"
-        />
-
-        <InputField
-          name="username"
-          type="text"
-          control={control}
-          rules={{
-            maxLength: 150,
-            required: {
-              value: true,
-              message: 'Insert valid username',
-            },
-          }}
-          label="Username"
-          error={!!errors.username}
-          errorMessage="Insert valid username"
-        />
-
-        <InputField
-          name="firstName"
-          type="text"
-          control={control}
-          rules={{
-            maxLength: 150,
-            required: {
-              value: true,
-              message: 'Insert valid first name',
-            },
-          }}
-          label="First name"
-          error={!!errors.firstName}
-          errorMessage="Insert valid first name"
-        />
-
-        <InputField
-          name="lastName"
-          type="text"
-          control={control}
-          rules={{
-            maxLength: 150,
-            required: {
-              value: true,
-              message: 'Insert valid last name',
-            },
-          }}
-          label="Last name"
-          error={!!errors.lastName}
-          errorMessage="Insert valid last name"
-        />
-
-        <InputField
-          name="address"
-          type="text"
-          control={control}
-          rules={{
-            required: {
-              value: true,
-              message: 'Insert valid address',
-            },
-          }}
-          label="Address"
-          error={!!errors.address}
-          errorMessage="Insert valid address"
-        />
-
-        <InputField
-          name="phoneNumber"
-          type="number"
-          control={control}
-          rules={{
-            maxLength: 15,
-            required: {
-              value: true,
-              message: 'Insert valid phone number',
-            },
-          }}
-          label="Phone number"
-          error={!!errors.phoneNumber}
-          errorMessage="Insert valid phone number"
-        />
-
-        <InputField
-          name="memberCardNumber"
-          type="number"
-          control={control}
-          rules={{
-            maxLength: 20,
-            required: {
-              value: true,
-              message: 'Insert valid card number',
-            },
-          }}
-          label="Card number"
-          error={!!errors.memberCardNumber}
-          errorMessage="Insert valid card number"
-        />
-
-        <InputField
-          name="notes"
-          type="text"
-          control={control}
-          rules={{
-            required: {
-              value: true,
-              message: 'Add notes',
-            },
-          }}
-          label="Notes"
-          error={!!errors.notes}
-          errorMessage="Insert notes"
-        />
-
-        <Button
-          data-testid="Submit"
-          type="submit"
-          fullWidth
-          variant="contained"
-          color="primary"
-          className={classes.submit}
-        >
-          Sign Up
-        </Button>
+        <Grid item container>
+          <Grid item xs={12} md={5}>
+            <InputField
+              name="firstName"
+              type="text"
+              control={control}
+              rules={{
+                maxLength: 150,
+                required: {
+                  value: true,
+                  message: 'Insert valid first name',
+                },
+              }}
+              label="First name"
+              error={!!errors.firstName}
+              errorMessage="Insert valid first name"
+            />
+          </Grid>
+
+          <Hidden smDown>
+            <Grid item xs={2} />
+          </Hidden>
+
+          <Grid item xs={12} md={5}>
+            <InputField
+              name="lastName"
+              type="text"
+              control={control}
+              rules={{
+                maxLength: 150,
+                required: {
+                  value: true,
+                  message: 'Insert valid last name',
+                },
+              }}
+              label="Last name"
+              error={!!errors.lastName}
+              errorMessage="Insert valid last name"
+            />
+          </Grid>
+
+          <InputField
+            name="address"
+            type="text"
+            control={control}
+            rules={{
+              required: {
+                value: true,
+                message: 'Insert valid address',
+              },
+            }}
+            label="Address"
+            error={!!errors.address}
+            errorMessage="Insert valid address"
+          />
+
+          <Grid item xs={12} md={5}>
+            <InputField
+              name="phoneNumber"
+              type="number"
+              control={control}
+              rules={{
+                maxLength: 15,
+                required: {
+                  value: true,
+                  message: 'Insert valid phone number',
+                },
+              }}
+              label="Phone number"
+              error={!!errors.phoneNumber}
+              errorMessage="Insert valid phone number"
+            />
+          </Grid>
+
+          <Hidden smDown>
+            <Grid item xs={2} />
+          </Hidden>
+
+          <Grid item xs={12} md={5}>
+            <InputField
+              name="memberCardNumber"
+              type="number"
+              control={control}
+              rules={{
+                maxLength: 20,
+                required: {
+                  value: true,
+                  message: 'Insert valid card number',
+                },
+              }}
+              label="Card number"
+              error={!!errors.memberCardNumber}
+              errorMessage="Insert valid card number"
+            />
+          </Grid>
+
+          <Grid item xs={12} className={classes.paddingBottomSmall}>
+            <InputField
+              name="notes"
+              type="text"
+              control={control}
+              rules={{
+                required: {
+                  value: true,
+                  message: 'Add notes',
+                },
+              }}
+              label="Notes"
+              error={!!errors.notes}
+              errorMessage="Insert notes"
+            />
+          </Grid>
+
+          <InputField
+            name="username"
+            type="text"
+            control={control}
+            rules={{
+              maxLength: 150,
+              required: {
+                value: true,
+                message: 'Insert valid username',
+              },
+            }}
+            label="Username"
+            error={!!errors.username}
+            errorMessage="Insert valid username"
+          />
+
+          <InputField
+            name="email"
+            type="email"
+            control={control}
+            rules={{
+              validate: (value: string) =>
+                /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value),
+              required: {
+                value: true,
+                message: 'Email is not valid',
+              },
+            }}
+            label="Email"
+            error={!!errors.email}
+            errorMessage="Insert email"
+          />
+
+          <InputField
+            name="password"
+            type="password"
+            control={control}
+            rules={{
+              minLength: 8,
+              maxLength: 60,
+              required: {
+                value: true,
+                message: 'Insert valid password',
+              },
+            }}
+            label="Password"
+            error={!!errors.password}
+            errorMessage="Insert valid password"
+          />
+
+          <Button
+            data-testid="Submit"
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            className={classes.submit}
+          >
+            Sign Up
+          </Button>
+        </Grid>
       </form>
+
+      <MuiThemeProvider theme={themeResp}>
+        <Grid item container>
+          <Grid item xs={12} color="primary" className={classes.paddingBottom}>
+            <Typography>
+              Already have an account? &nbsp;
+              <Link href={`${NonAuthRoutes.auth}${NonAuthRoutes.signIn}`}>
+                Log in.
+              </Link>
+            </Typography>
+          </Grid>
+        </Grid>
+      </MuiThemeProvider>
     </>
   );
 };