fix(frontend): fix menu overflow bug

Author: Aksh-Bansal-dev

frontend/src/App.css

@@ -1,5 +1,6 @@
 html,
 body {
+  width: 100vw;
   margin: 0;
   padding: 0;
   overflow-x: hidden;

frontend/src/components/Buttons/BackButton.tsx

@@ -0,0 +1,23 @@
+import { IconButton, IconButtonProps } from "@material-ui/core";
+import { ArrowBack } from "@material-ui/icons";
+import React from "react";
+import { useHistory } from "react-router";
+
+type BackButtonProps = {
+  //
+} & IconButtonProps;
+const BackButton: React.FC<BackButtonProps> = ({ ...props }) => {
+  const history = useHistory();
+  const handleClick = () => {
+    history.push("/");
+  };
+  return (
+    <>
+      <IconButton onClick={handleClick} {...props}>
+        <ArrowBack />
+      </IconButton>
+    </>
+  );
+};
+
+export default BackButton;

frontend/src/components/Navs/navLinks/style.module.css

@@ -1,4 +1,4 @@
-li {
+.Link li {
   color: #c7c7c7;
   /* color: white; */
   font-size: 1.1rem;
@@ -31,7 +31,7 @@ li {
 }
 
 @media only screen and (max-width: 1180px) {
-  li {
+  .Link li {
     width: 100vw;
     padding: 2.5vh 0;
     text-align: center;

frontend/src/components/RegistrationForm/index.tsx

@@ -5,14 +5,20 @@ import Login from "./Login";
 import Signup from "./Signup";
 import GoogleButton from "../Buttons/GoogleButton";
 import ResetPassword from "./ResetPassword";
+import BackButton from "../Buttons/BackButton";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     title: {
-      margin: "4vh",
+      margin: "3vh",
       fontWeight: "bold",
       fontSize: "1.4rem",
     },
+    flexbox: {
+      paddingLeft: "2vh",
+      display: "flex",
+      alignItems: "center",
+    },
     main: {
       width: "30vw",
       [theme.breakpoints.down("sm")]: {
@@ -37,9 +43,12 @@ const RegistrationForm: React.FC = () => {
 
   return (
     <Paper className={classes.main}>
-      <Typography className={classes.title} align="center">
-        {heading[page]}
-      </Typography>
+      <div className={classes.flexbox}>
+        <BackButton />
+        <Typography className={classes.title} align="center">
+          {heading[page]}
+        </Typography>
+      </div>
       <GoogleButton />
       <Typography className={classes.or} align="center">
         OR