Merge pull request #102 from MargoMarm/bagfix/errorPage

Bagfix/error page
MargoMarm · Sep 28, 2023 · e3804d3 · e3804d3
2 parents c0893dd + 7eb5ce8
commit e3804d3
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 15 deletions.
diff --git a/src/assets/sprite.svg b/src/assets/sprite.svg
diff --git a/src/components/headersComp/Header/Header.jsx b/src/components/headersComp/Header/Header.jsx
@@ -8,9 +8,24 @@ import { UseAuth } from '../../../hooks/useAuth';
 
 export const Header = () => {
   const { isLoggedIn } = UseAuth();
-  const { pathname } = useLocation();
+	const { pathname } = useLocation();
+	const isMatchingRoute = [
+    '/',
+    '/signin',
+    '/signup',
+    '/params',
+    '/profile',
+    '/diary',
+    '/exercises',
+    '/products',
+	].some(route => pathname === route);
+
   const isBorderToRender = isLoggedIn && pathname !== '/params';
 
+  if (!isMatchingRoute) {
+    return null;
+  }
+
   return (
     <HeaderContainer isBorderToRender={isBorderToRender}>
       <Logo />

diff --git a/src/components/headersComp/Logo/Logo.jsx b/src/components/headersComp/Logo/Logo.jsx
@@ -1,19 +1,15 @@
 import { WrapLogo, Svg } from './Logo.styled';
 import sprite from '../../../assets/sprite.svg';
 import 'animate.css';
-
 import { UseAuth } from '../../../hooks/useAuth';
 import { NavLink } from 'react-router-dom';
 
 export const Logo = () => {
   const { isLoggedIn } = UseAuth();
-
   return (
     <>
       <WrapLogo>
-        <NavLink
-          to={isLoggedIn ? '/diary' : '/'}
-        >
+        <NavLink to={isLoggedIn ? '/diary' : '/'}>
           <Svg>
             <use href={sprite + `#logo-big`}></use>
           </Svg>{' '}

diff --git a/src/pages/Error/Error.jsx b/src/pages/Error/Error.jsx
@@ -1,11 +1,31 @@
 import CustomBtn from '../../components/CustomNavLink/CustomNavLink';
-import { Container, Content, Title, Text } from './Error.styled';
-// import { Wrapper } from '../Home/Home.styled';
+import {
+  Container,
+  Content,
+  Title,
+  Text,
+  BGImg,
+  WrapLogo,
+  Logo,
+  LogoText,
+} from './Error.styled';
+import sprite from '../../assets/sprite.svg';
+import { UseAuth } from '../../hooks/useAuth';
 
 const Error = () => {
+  const { isLoggedIn } = UseAuth();
+
   return (
     <Container>
       <Content>
+        <WrapLogo>
+          <Logo>
+            <use href={sprite + `#icon-logo_error`}></use>
+          </Logo>
+          <LogoText>
+            <use href={sprite + `#icon-PowerPulse`}></use>
+          </LogoText>
+        </WrapLogo>
         <Title>404</Title>
         <Text>
           Sorry, you have reached a page that we could not find. It seems that
@@ -14,8 +34,15 @@ const Error = () => {
           another dimension. We apologize for this inconvenience.
         </Text>
 
-        <CustomBtn type="button" text={'Go Home'} isorange={'true'} to={'/'} />
+        <CustomBtn
+          type="button"
+          text={'Go Home'}
+          isorange={'true'}
+          to={isLoggedIn ? '/diary' : '/'}
+        />
       </Content>
+
+      <BGImg />
     </Container>
   );
 };

diff --git a/src/pages/Error/Error.styled.jsx b/src/pages/Error/Error.styled.jsx
@@ -1,10 +1,10 @@
 import styled from '@emotion/styled';
-
+import imgDx2 from '../../assets/images/exercises_desk_2x.jpeg';
 import { colors, mq } from '../../utils';
 
 export const Container = styled.div`
   display: flex;
-
+  position: relative;
   ${mq.mobile} {
     width: 375px;
   }
@@ -21,11 +21,13 @@ export const Container = styled.div`
 export const Content = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: flex-start;
   height: 100vh;
 
-  padding: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 20px;
   background-color: ${colors.orange};
 
   ${mq.mobile} {
@@ -34,12 +36,18 @@ export const Content = styled.div`
 
   ${mq.tablet} {
     width: 420px;
-    padding: 32px;
+    padding-left: 32px;
+    padding-right: 32px;
+    padding-bottom: 32px;
+    height: 100%;
   }
 
   ${mq.desktop} {
     width: 670px;
-    padding: 96px;
+    padding-left: 96px;
+    padding-right: 96px;
+    padding-bottom: 96px;
+    height: 100vh;
   }
 `;
 
@@ -86,3 +94,49 @@ export const Text = styled.p`
     width: 447px;
   }
 `;
+
+export const BGImg = styled.div`
+  display: none;
+  ${mq.mobile} {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: -1;
+    display: block;
+
+    width: 135px;
+    height: 100vh;
+    background: linear-gradient(89deg, #040404 1.1%, rgba(4, 4, 4, 0) 70.79%);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 446px auto;
+    background-image: url(${imgDx2});
+  }
+
+  ${mq.tablet} {
+    width: 348px;
+    background-size: cover;
+    height: 100%;
+  }
+
+  ${mq.desktop} {
+    width: 670px;
+    height: 100vh;
+  }
+`;
+
+export const WrapLogo = styled.div`
+  margin-top: 24px;
+  margin-bottom: 125px;
+`;
+
+export const Logo = styled.svg`
+  width: 44px;
+  height: 17px;
+  margin-right: 8px;
+`;
+
+export const LogoText = styled.svg`
+  width: 100px;
+  height: 17px;
+`;
diff --git a/src/utils/index.js b/src/utils/index.js
@@ -6,3 +6,4 @@ export { default as pageContentToRender } from './pageContentToRender';
 export { default as mg } from './titleMargins';
 export { default as handleLogout } from './handleLogout';
 export { default as isTheSameForm } from './isTheSameForm';
+