From 570be3804de0573f84bb19f5ae9d18cab326e4b4 Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Mon, 28 Mar 2022 14:04:44 +0500 Subject: [PATCH] error page added --- src/App.js | 2 ++ src/components/global/Error.js | 18 +++++++++++++++++ src/images/error-cross.png | Bin 0 -> 5230 bytes src/pages/ErrorPage.js | 22 +++++++++++++++++++++ src/styles/_recovery.scss | 34 +++++++++++++++++++++++++++++++-- 5 files changed, 74 insertions(+), 2 deletions(-) create mode 100644 src/components/global/Error.js create mode 100644 src/images/error-cross.png create mode 100644 src/pages/ErrorPage.js diff --git a/src/App.js b/src/App.js index 1015ede..3c80611 100644 --- a/src/App.js +++ b/src/App.js @@ -17,6 +17,7 @@ import ContactUs from "./pages/ContactUs"; import Recovery from "./pages/Recovery"; import Profile from "./pages/Profile"; import SuccessPage from "./pages/SuccessPage"; +import ErrorPage from "./pages/ErrorPage"; // IMPORT PAGES import Main from "./pages/Main"; @@ -63,6 +64,7 @@ const App = () => { } /> } /> } /> + } /> diff --git a/src/components/global/Error.js b/src/components/global/Error.js new file mode 100644 index 0000000..590d424 --- /dev/null +++ b/src/components/global/Error.js @@ -0,0 +1,18 @@ +// IMPORT MODULES +import React from "react"; + +// IMPORT IMAGES +import error from "../../images/error-cross.png"; + +const Error = ({ message }) => { + return ( +
+
+ error +
+

{message}

+
+ ); +}; + +export default Error; diff --git a/src/images/error-cross.png b/src/images/error-cross.png new file mode 100644 index 0000000000000000000000000000000000000000..96356818671b41fd3dd6ed35e6d7174e29b3e001 GIT binary patch literal 5230 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 literal 0 HcmV?d00001 diff --git a/src/pages/ErrorPage.js b/src/pages/ErrorPage.js new file mode 100644 index 0000000..40fd6f8 --- /dev/null +++ b/src/pages/ErrorPage.js @@ -0,0 +1,22 @@ +// IMPORT MODULES +import React, { useEffect } from "react"; +import { useNavigate } from "react-router-dom"; + +// IMPORT COMPONENTS +import Error from "../components/global/Error"; + +const ErrorPage = () => { + const navigate = useNavigate(); + useEffect(() => { + setTimeout(() => { + navigate("/home"); + }, 1900); + }, []); + return ( +
+ +
+ ); +}; + +export default ErrorPage; diff --git a/src/styles/_recovery.scss b/src/styles/_recovery.scss index 9b30bc4..1778354 100644 --- a/src/styles/_recovery.scss +++ b/src/styles/_recovery.scss @@ -89,8 +89,38 @@ } .success { - color: $base-green; - font-size: 2.2rem; + h1 { + color: $base-green; + font-size: 2.2rem; + } + + &.error { + .wrapper { + animation: fade-in 2s infinite ease; + width: 9.6rem; + height: 9.6rem; + img { + width: 100%; + height: 100%; + } + } + h1 { + color: rgb(222, 41, 38); + } + } +} + +// ANIMO +@keyframes fade-in { + 0% { + opacity: 0; + transform: translateY(5rem); + } + + 100% { + opacity: 1; + transform: translateY(0rem); + } } // MEDIA