-
-
- 
+ {title}
);
diff --git a/src/components/utilityComponents/GoBack.js b/src/components/utilityComponents/GoBack.js
index 97c6d39..36768d8 100644
--- a/src/components/utilityComponents/GoBack.js
+++ b/src/components/utilityComponents/GoBack.js
@@ -1,10 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import { makeStyles, Tooltip, Button } from '@material-ui/core/';
+import { makeStyles, Tooltip, Button, Typography } from '@material-ui/core/';
import cls from 'classnames';
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
headerContainer: {
display: 'flex',
justifyContent: 'space-between',
@@ -13,8 +14,12 @@ const useStyles = makeStyles(() => ({
},
backIcon: {
fontSize: '2rem',
- color: '#111',
cursor: 'pointer',
+ color: theme.palette.text.primary,
+ },
+ iconTextStyle: {
+ color: theme.palette.primary.main,
+ fontSize: theme.typography.pxToRem(22),
},
'@media screen and (max-width: 600px)': {
backIcon: {
@@ -28,14 +33,25 @@ const useStyles = makeStyles(() => ({
const GoBack = (props) => {
const classes = useStyles();
- const { toolTipTitle } = props;
+ const { toolTipTitle, iconText } = props;
+ const history = useHistory();
+
+ const onGoBackClick = () => {
+ history.goBack();
+ };
+
return (
{
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
- // flexDirection: "column",
}}
>
-
+
+
@@ -41,7 +42,7 @@ const AnimeWatchlistStatsView = (props) => {
xs={isMobile ? 12 : 11}
className={isMobile ? classes.noGridStyle : classes.rightGridStyle}
>
- Here are rest
+
diff --git a/src/views/Auth/AuthView.js b/src/views/Auth/AuthView.js
index 3236f0d..2fc4277 100644
--- a/src/views/Auth/AuthView.js
+++ b/src/views/Auth/AuthView.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core';
import Logo from '../../components/utilityComponents/Logo';
import AuthContainer from '../../containers/Auth/AuthContainer';
-import LoginImg from '../../assets/test.jpg';
+import LoginImg from '../../assets/login-image.jpg';
const useStyles = makeStyles((theme) => ({
backgroundCover: {
diff --git a/src/views/HomeView/404View.js b/src/views/HomeView/404View.js
new file mode 100644
index 0000000..47b3eab
--- /dev/null
+++ b/src/views/HomeView/404View.js
@@ -0,0 +1,119 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { makeStyles, Typography, Button } from '@material-ui/core';
+import Lottie from 'react-lottie';
+import notFound404Animation from 'assets/animation/not-found-404.json';
+import Logo from 'components/utilityComponents/Logo';
+
+const useStyles = makeStyles((theme) => ({
+ errorContainer: {
+ width: '100vw',
+ height: '100vh',
+ background: theme.palette.background.default,
+ overflow: 'auto',
+ },
+ errorContainerInner: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ errorTextContainer: {
+ padding: '1rem',
+ },
+ heading: {
+ color: theme.palette.primary.main,
+ fontSize: '6rem',
+ },
+ subHeadingOne: {
+ fontSize: '2rem',
+ color: theme.palette.text.primary,
+ },
+ subHeadingTwo: {
+ fontSize: '1rem',
+ color: theme.palette.text.primary,
+ },
+ homeButton: {
+ padding: '0.4rem 0.8rem',
+ color: '#fff',
+ background: theme.button.background.light,
+ border: 'none',
+ outline: 'none',
+ cursor: 'pointer',
+ borderRadius: '20px',
+ fontSize: '0.7rem',
+ fontWeight: 'bold',
+ marginTop: '1rem',
+ boxShadow: `10px 13px 45px rgba(0, 0, 0, 0.1)`,
+ '&:hover': {
+ opacity: 0.9,
+ },
+ '&:disabled': {
+ background: theme.button.background.light,
+ cursor: 'no-drop',
+ opacity: '0.5',
+ },
+ },
+ '@media screen and (max-width: 600px)': {
+ errorContainer: {
+ padding: '1rem',
+ },
+ errorContainerInner: {
+ flexDirection: 'column',
+ },
+ heading: {
+ fontSize: '3rem',
+ },
+ subHeadingOne: {
+ fontSize: '1.2rem',
+ },
+ subHeadingTwo: {
+ fontSize: '0.8rem',
+ },
+ },
+}));
+
+const NotFound404 = () => {
+ const classes = useStyles();
+ const history = useHistory();
+ const defaultOptions = {
+ loop: true,
+ autoplay: true,
+ animationData: notFound404Animation,
+ rendererSettings: {
+ preserveAspectRatio: 'xMidYMid slice',
+ },
+ };
+
+ const handleHomeClick = () => {
+ history.push('/');
+ };
+
+ return (
+ <>
+
@@ -109,18 +111,26 @@ const SlideContent = (props) => {
place to manage all your favourite animes.
);
diff --git a/src/views/index.js b/src/views/index.js
index 9f32860..2e04e1c 100644
--- a/src/views/index.js
+++ b/src/views/index.js
@@ -4,3 +4,4 @@ export { default as AuthView } from './Auth/AuthView';
export { default as VerifyAccountView } from './Auth/VerifyAccountView';
export { default as Dashboard } from './Dashboard/Dashboard';
export { default as AnimeDetailsView } from './AnimeDetailsView/AnimeDetailsView';
+export { default as PageNotFoundView } from './HomeView/404View';
history.push('/')}>
{isBackButtonRequired && (
diff --git a/src/constants/logoConstant.js b/src/constants/logoConstant.js
index 7b2c99a..a741fc9 100644
--- a/src/constants/logoConstant.js
+++ b/src/constants/logoConstant.js
@@ -2,12 +2,13 @@ export const logoStyleObject = {
width: 110,
height: 70,
zIndex: 100,
- margin: "1rem",
+ margin: '1rem',
+ cursor: 'pointer',
};
export const logoStyleMobileView = {
width: 70,
height: 50,
zIndex: 100,
- margin: "1rem",
+ margin: '1rem',
};
diff --git a/src/containers/AnimeStatisticsGraph/AnimeStatisticsGraphContainer.js b/src/containers/AnimeStatisticsGraph/AnimeStatisticsGraphContainer.js
new file mode 100644
index 0000000..5839d93
--- /dev/null
+++ b/src/containers/AnimeStatisticsGraph/AnimeStatisticsGraphContainer.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Redirect } from 'react-router-dom';
+import Header from 'components/Header/Header';
+import { useAuthentication } from 'custom-hooks/authHook';
+
+const AnimeStatisticsGraphContainer = () => {
+ const { isAuthenticated } = useAuthentication();
+
+ if (!isAuthenticated) {
+ return
+
+
+ );
+};
+
+export default NotFound404;
diff --git a/src/views/HomeView/HomeView.js b/src/views/HomeView/HomeView.js
index eabba57..8234228 100644
--- a/src/views/HomeView/HomeView.js
+++ b/src/views/HomeView/HomeView.js
@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles, Typography, Button } from '@material-ui/core';
import { Link } from 'react-router-dom';
+import { useAuthentication } from 'custom-hooks/authHook';
import AwesomeSlider from 'react-awesome-slider';
import withAutoplay from 'react-awesome-slider/dist/autoplay';
import 'react-awesome-slider/dist/styles.css';
@@ -102,6 +103,7 @@ const useStyles = makeStyles((theme) => ({
const SlideContent = (props) => {
const { classes } = props;
+ const { isAuthenticated } = useAuthentication();
return (
+
+ 404
+
+ UH OH! You are lost.
+
+
+ The page you are looking for is not found. Maybe it has been
+ removed or your in the wrong path.
+
+
+
+
+
-
-
-
-
-
-
+ {!isAuthenticated ? (
+ <>
+
+
+
+
+
+
+
+ ) : (
+
+
+
+ )}