Better Sign In Page

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,14 @@ export const SignInForm: FC = () => {
   const classes = useStyles();
   return (
     <>
+      <MuiThemeProvider theme={themeResp}>
+        <Grid item container>
+          <Grid item xs={12} color="primary" className={classes.paddingTop}>
+            <Typography variant="h1">SIGN IN</Typography>
+          </Grid>
+        </Grid>
+      </MuiThemeProvider>
+
       <form
         className={classes.form}
         onSubmit={handleSubmit(onSubmit)}
@@ -79,7 +98,7 @@ export const SignInForm: FC = () => {
               message: 'Username is not valid',
             },
           }}
-          label="username"
+          label="Username"
           type="username"
           error={!!errors.username}
           errorMessage="Insert username"
@@ -112,6 +131,19 @@ export const SignInForm: FC = () => {
         >
           Sign In
         </Button>
+
+        <MuiThemeProvider theme={themeResp}>
+          <Grid item container>
+            <Grid item xs={12} color="primary">
+              <Typography>
+                New here? &nbsp;
+                <Link href={`${NonAuthRoutes.auth}${NonAuthRoutes.signUp}`}>
+                  Create an account.
+                </Link>
+              </Typography>
+            </Grid>
+          </Grid>
+        </MuiThemeProvider>
       </form>
     </>
   );

src/components/Auth/SignInForm/useStyles.ts

@@ -14,5 +14,8 @@ export const useStyles = makeStyles((theme: Theme) =>
     submit: {
       margin: theme.spacing(3, 0, 2),
     },
+    paddingTop: {
+      paddingTop: theme.spacing(10),
+    },
   }),
 );