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

src/components/Auth/SignInForm/SignInForm.tsx

@@ -3,13 +3,24 @@ import axios from 'axios';
 import { useCookie } from 'hooks/useCookie';
 import { AuthRoutes, NonAuthRoutes } from 'api/routes';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { Button } from '@material-ui/core';
+import {
+  Button,
+  createMuiTheme,
+  responsiveFontSizes,
+  MuiThemeProvider,
+  Grid,
+  Typography,
+  Link,
+} from '@material-ui/core';
 import { useHistory } from 'react-router-dom';
 import { AuthContext } from 'components/Auth/AuthContext';
 import { InputField } from 'components/Auth/InputField/InputField';
 import { useStyles } from './useStyles';
 import { CredentialsType } from './CredentialsType';
 
+let themeResp = createMuiTheme();
+themeResp = responsiveFontSizes(themeResp);
+
 const defaultValues = {
   username: '',
   password: '',
@@ -65,6 +76,16 @@ export const SignInForm: 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 IN</Typography>
+            </Grid>
+          </Grid>
+        </MuiThemeProvider>
+      </header>
+
       <form
         className={classes.form}
         onSubmit={handleSubmit(onSubmit)}
@@ -79,7 +100,7 @@ export const SignInForm: FC = () => {
               message: 'Username is not valid',
             },
           }}
-          label="username"
+          label="Username"
           type="username"
           error={!!errors.username}
           errorMessage="Insert username"
@@ -112,6 +133,24 @@ export const SignInForm: FC = () => {
         >
           Sign In
         </Button>
+
+        <MuiThemeProvider theme={themeResp}>
+          <Grid item container>
+            <Grid
+              item
+              xs={12}
+              color="primary"
+              className={classes.paddingBottom}
+            >
+              <Typography>
+                New here? &nbsp;
+                <Link href={`${NonAuthRoutes.auth}${NonAuthRoutes.signUp}`}>
+                  Create an account.
+                </Link>
+              </Typography>
+            </Grid>
+          </Grid>
+        </MuiThemeProvider>
       </form>
     </>
   );