diff --git a/src/components/Navbar/Auth/LoginForm.js b/src/components/Navbar/Auth/LoginForm.js index b67d1629..afdb3d3f 100644 --- a/src/components/Navbar/Auth/LoginForm.js +++ b/src/components/Navbar/Auth/LoginForm.js @@ -1,6 +1,7 @@ import React, { useState } from "react"; import PropTypes from "prop-types"; import { login } from "../../../services/auth"; +import { RouterLink } from "../../../utils"; import { useForm } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; import LoginSchema from "./LoginSchema"; @@ -13,11 +14,16 @@ import { DialogActions, Button, FormHelperText, + Typography, } from "@material-ui/core"; + +import { useMobile } from "../../../utils/media-queries"; + import useToggle from "../../../hooks/useToggle"; const LoginForm = ({ toggleAuthModal, updateSessionInfo, setRecoveryRequestPage }) => { - const classes = useAuthStyles(); + const isMobile = useMobile(); + const classes = useAuthStyles({ isMobile }); const { register, handleSubmit, formState: { errors } } = useForm({ mode: "onBlur", @@ -90,15 +96,36 @@ const LoginForm = ({ toggleAuthModal, updateSessionInfo, setRecoveryRequestPage {loginError || " "} - +
+ + Lost your password? + +
+
+ + Don't have an account? + + +
+ + } + ); diff --git a/src/components/Navbar/navbarStyles.js b/src/components/Navbar/navbarStyles.js index 1a9cc85b..f258e5d7 100644 --- a/src/components/Navbar/navbarStyles.js +++ b/src/components/Navbar/navbarStyles.js @@ -5,11 +5,9 @@ export default makeStyles((theme) => ({ navbar: ({ isMobile }) => ({ paddingTop: theme.spacing(isMobile ? 0 : 3), }), - toolbar: { + toolbar: ({ isMobile }) => ({ display: "flex", - }, - homePageLink: ({ isMobile }) => ({ - marginLeft: theme.spacing(isMobile ? 0 : 3), + paddingInline: theme.spacing(isMobile ? 1 : 6), }), linkStyle: ({ desktopLayout }) => ({ textDecoration: "none",