Not Found Page

src/AppRoutes.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import React from "react";
+import { Redirect, Route, Switch } from "react-router-dom";
 
 import {
   LOGIN_PAGE,
@@ -16,47 +16,46 @@ import {
   FORGOT_PASSWORD_PAGE,
   PROFILE_PAGE,
   CHAT_MESSAGE_PAGE,
-  CHAT_PAGE
-} from './constants/pages';
-import LoginPage from './pages/LoginPage/LoginPage';
-import HomePage from './pages/HomePage/HomePageMUI';
-import NotFoundPage from './pages/ErrorPages/NotFoundPage';
-import ErrorPage from './pages/ErrorPages/ErrorPage';
-import ForgotPasswordPage from './pages/ForgotPasswordPage/ForgotPasswordPage';
-import PrivateRoute from './components/Router/PrivateRoute';
-import MailSent from './pages/ForgotPasswordPage/ForgotPasswordMailSent/MailSent';
-import Register from './pages/RegisterPages/Register/Register';
-import RegisterSuccessful from './pages/RegisterPages/RegisterSuccessful.js/RegisterSuccessful';
-import ResetPasswordPage from './pages/ResetPasswordPage/ResetPasswordPage';
-import CreateOffer from './pages/CreateOffer/CreateOffer';
-import ItemDetailsPage from './pages/ItemDetailsPage/ItemDetailsPageMUI';
-import ProfilePage from './pages/ProfilePage/ProfilePage';
-import ChatMessagesPage from './pages/ChatMessages/ChatMessages';
-import ChatPage from './pages/Chat/Chat';
-
+  CHAT_PAGE,
+} from "./constants/pages";
+import LoginPage from "./pages/LoginPage/LoginPage";
+import HomePage from "./pages/HomePage/HomePageMUI";
+import NotFoundPage from "./pages/ErrorPages/NotFoundPage";
+import ErrorPage from "./pages/ErrorPages/ErrorPage";
+import ForgotPasswordPage from "./pages/ForgotPasswordPage/ForgotPasswordPage";
+import PrivateRoute from "./components/Router/PrivateRoute";
+import MailSent from "./pages/ForgotPasswordPage/ForgotPasswordMailSent/MailSent";
+import Register from "./pages/RegisterPages/Register/Register";
+import RegisterSuccessful from "./pages/RegisterPages/RegisterSuccessful.js/RegisterSuccessful";
+import ResetPasswordPage from "./pages/ResetPasswordPage/ResetPasswordPage";
+import CreateOffer from "./pages/CreateOffer/CreateOffer";
+import ItemDetailsPage from "./pages/ItemDetailsPage/ItemDetailsPageMUI";
+import ProfilePage from "./pages/ProfilePage/ProfilePage";
+import ChatMessagesPage from "./pages/ChatMessages/ChatMessages";
+import ChatPage from "./pages/Chat/Chat";
 
 const AppRoutes = () => {
   return (
-  <Switch>
-    <Route exact path={BASE_PAGE} component={LoginPage} />
-    <Route exact path={LOGIN_PAGE} component={LoginPage} />
-    <Route path={NOT_FOUND_PAGE} component={NotFoundPage} />
-    <Route path={REGISTER_SUCCESSFUL_PAGE} component={RegisterSuccessful} />
-    <Route path={REGISTER_PAGE} component={Register} />
-    <Route path={ERROR_PAGE} component={ErrorPage} />
-    <Route path={FORGOT_PASSWORD_MAIL_SENT} component={MailSent} />
-    <Route path={FORGOT_PASSWORD_PAGE} component={ForgotPasswordPage} />
-    <Route path={RESET_PASSWORD_PAGE} component={ResetPasswordPage}/>
-    <Route path={CREATE_OFFER_PAGE} component={CreateOffer}/>
-    <Route path={ITEM_DETAILS_PAGE} component={ItemDetailsPage} />
-    <Route path={PROFILE_PAGE} component={ProfilePage} />
-    <Route path={HOME_PAGE} component={HomePage} />
-    <PrivateRoute path={CHAT_MESSAGE_PAGE} component={ChatMessagesPage} />
-    <PrivateRoute path={CHAT_PAGE} component={ChatPage} />
-    
-    <Redirect from="*" to={NOT_FOUND_PAGE} />
-  </Switch>
-)};
+    <Switch>
+      <Route exact path={BASE_PAGE} component={LoginPage} />
+      <Route exact path={LOGIN_PAGE} component={LoginPage} />
+      <Route path={NOT_FOUND_PAGE} component={NotFoundPage} />
+      <Route path={REGISTER_SUCCESSFUL_PAGE} component={RegisterSuccessful} />
+      <Route path={REGISTER_PAGE} component={Register} />
+      <Route path={ERROR_PAGE} component={ErrorPage} />
+      <Route path={FORGOT_PASSWORD_MAIL_SENT} component={MailSent} />
+      <Route path={FORGOT_PASSWORD_PAGE} component={ForgotPasswordPage} />
+      <Route path={RESET_PASSWORD_PAGE} component={ResetPasswordPage} />
+      <Route path={CREATE_OFFER_PAGE} component={CreateOffer} />
+      <Route path={ITEM_DETAILS_PAGE} component={ItemDetailsPage} />
+      <Route path={PROFILE_PAGE} component={ProfilePage} />
+      <Route path={HOME_PAGE} component={HomePage} />
+      <PrivateRoute path={CHAT_MESSAGE_PAGE} component={ChatMessagesPage} />
+      <PrivateRoute path={CHAT_PAGE} component={ChatPage} />
 
+      <Redirect from="*" to={NOT_FOUND_PAGE} />
+    </Switch>
+  );
+};
 
 export default AppRoutes;

src/assets/images/svg/error-404.svg

@@ -0,0 +1,6 @@
+<svg width="304" height="140" viewBox="0 0 304 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="193.692" cy="48.1407" r="21.3907" fill="#FEB005"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M208.383 15.0195C200.651 15.0195 194.383 21.2876 194.383 29.0195L194.383 69.5303C194.383 69.5303 194.384 69.5303 194.384 69.5303C206.198 69.5303 215.775 79.1072 215.775 90.921C215.775 102.674 206.296 112.213 194.565 112.311C195.649 118.965 201.423 124.043 208.383 124.043L289.406 124.043C297.138 124.043 303.406 117.775 303.406 110.043L303.407 29.0196C303.407 21.2876 297.139 15.0196 289.407 15.0196L208.383 15.0195Z" fill="#FEB005"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.523 30.1304C6.05444 32.1316 1.62228 39.8083 3.62347 47.2769L24.5939 125.54C26.5951 133.008 34.2719 137.44 41.7404 135.439L120.003 114.469C127.472 112.468 131.904 104.791 129.903 97.3223L119.415 58.1809C119.196 58.2471 118.974 58.3102 118.752 58.3699C107.34 61.4275 95.611 54.6556 92.5534 43.2444C89.4957 31.8331 96.2677 20.1038 107.679 17.0462C107.843 17.0023 108.007 16.9604 108.171 16.9205C105.403 10.7715 98.5101 7.3582 91.7859 9.15996L13.523 30.1304Z" fill="#5A3984"/>
+<circle cx="124.955" cy="78.8511" r="21.3907" transform="rotate(-15 124.955 78.8511)" fill="#5A3984"/>
+</svg>

src/components/Cards/OfferCard/DeleteOffer.styles.js

@@ -17,13 +17,14 @@ export const DeleteOfferContainer = styled(Box)`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0 80px;
+  padding: 0 80px 18px 80px;
   z-index: 150;
 
   @media screen and (max-width: 600px) {
     width: 350px;
+    height: 281px;
     display: block;
-    padding: 0 18px;
+    padding: 0 18px 18px 18px;
     left: calc(50% - 175px);
   }
 `;
@@ -69,13 +70,19 @@ export const OfferDescriptionTitle = styled(Typography)`
   font-size: 16px;
   font-weight: 600;
   color: ${selectedTheme.primaryPurple};
+
+  @media screen and (max-width: 600px) {
+    font-size: 14px;
+  }
 `;
 
 export const OfferDescriptionCategory = styled(Typography)`
   font-size: 12px;
+  letter-spacing: 2%;
 `;
 
 export const CategoryIcon = styled(Icon)`
+  margin-right: 4px;
   & svg {
     width: 14px;
     position: relative;
@@ -91,7 +98,10 @@ export const DeleteQuestion = styled(Typography)`
   margin: 36px 0;
 
   @media screen and (max-width: 600px) {
-    margin-left: calc(50% - 104px);
+    font-size: 14px;
+    margin: 27px 0;
+    text-align: center;
+    width: 100%;
   }
 `;
 
@@ -111,9 +121,13 @@ export const RemoveIconBorder = styled(IconButton)`
   }
 `;
 
-export const RemoveIconContainer = styled(RemoveIconBorder)``;
+export const RemoveIconContainer = styled(RemoveIconBorder)`
+  cursor: default;
+`;
 
-export const RemoveIcon = styled(Remove)``;
+export const RemoveIcon = styled(Remove)`
+  cursor: default;
+`;
 
 export const ButtonsContainer = styled(Box)`
   display: flex;
@@ -124,11 +138,13 @@ export const ButtonsContainer = styled(Box)`
 export const CancelButton = styled(PrimaryButton)`
   @media screen and (max-width: 600px) {
     width: 140px;
+    height: 45px;
   }
 `;
 
 export const SaveButton = styled(PrimaryButton)`
   @media screen and (max-width: 600px) {
     width: 140px;
+    height: 45px;
   }
 `;

src/components/ProfileCard/EditProfile.js

@@ -1,10 +1,10 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import { FieldLabel } from "../Cards/CreateOfferCard/FirstPart/FirstPartCreateOffer.styled";
 import BackdropComponent from "../MUI/BackdropComponent";
 import {
   EditProfileContainer,
   ProfileImageContainer,
+  InputFieldLabel,
   InputField,
   BackButton,
   CloseButton,
@@ -13,7 +13,6 @@ import {
   BasicInfo,
   DetailsInfo,
   ButtonsContainer,
-  MobileInfo,
   ErrorMessage,
   ProfileImagePicker,
 } from "./EditProfile.styled";
@@ -33,13 +32,22 @@ import { useRouteMatch } from "react-router-dom";
 
 const EditProfile = (props) => {
   const [profileImage, setProfileImage] = useState(props.profile.image);
-  const [showDetails, setShowDetails] = useState(false);
+  const [showBasic, setShowBasic] = useState(true);
+  const [showDetails, setShowDetails] = useState(true);
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const dimensions = useScreenDimensions();
   const routeMatch = useRouteMatch();
   const userId = routeMatch.params.idProfile;
 
+  useEffect(() => {
+    if (dimensions.width < 600) {
+      setShowDetails(false);
+    } else {
+      setShowDetails(true);
+    }
+  }, [dimensions.width]);
+
   const handleApiResponseSuccess = () => {
     dispatch(fetchMineProfile(userId));
     props.reFetchProfile();
@@ -83,6 +91,7 @@ const EditProfile = (props) => {
 
   const showDetailsHandler = () => {
     setShowDetails(!showDetails);
+    setShowBasic(!showBasic);
   };
 
   const setImage = (image) => {
@@ -97,7 +106,7 @@ const EditProfile = (props) => {
         position="fixed"
       />
       <EditProfileContainer component="form" onSubmit={formik.handleSubmit}>
-        {showDetails && (
+        {!showBasic && (
           <BackButton onClick={showDetailsHandler}>
             <ArrowBack />
           </BackButton>
@@ -112,9 +121,9 @@ const EditProfile = (props) => {
         <CloseButton onClick={closeEditModalHandler}>
           <CloseIcon />
         </CloseButton>
-        {dimensions.width > 600 ? (
-          <>
-            <FieldLabel leftText={t("common.labelFirm").toUpperCase()} />
+        {showBasic && (
+          <BasicInfo>
+            <InputFieldLabel leftText={t("common.labelFirm").toUpperCase()} />
             <InputField
               name="firmName"
               value={formik.values.firmName}
@@ -124,7 +133,7 @@ const EditProfile = (props) => {
               margin="normal"
               fullWidth
             />
-            <FieldLabel leftText={t("common.labelPIB")} />
+            <InputFieldLabel leftText={t("common.labelPIB")} />
             <InputField
               name="firmPIB"
               value={formik.values.firmPIB}
@@ -134,7 +143,9 @@ const EditProfile = (props) => {
               margin="normal"
               fullWidth
             />
-            <FieldLabel leftText={t("common.labelLocation").toUpperCase()} />
+            <InputFieldLabel
+              leftText={t("common.labelLocation").toUpperCase()}
+            />
             <InputField
               name="firmLocation"
               value={formik.values.firmLocation}
@@ -146,7 +157,13 @@ const EditProfile = (props) => {
               margin="normal"
               fullWidth
             />
-            <FieldLabel leftText={t("editProfile.website").toUpperCase()} />
+          </BasicInfo>
+        )}
+        {showDetails && (
+          <DetailsInfo>
+            <InputFieldLabel
+              leftText={t("editProfile.website").toUpperCase()}
+            />
             <InputField
               name="firmWebsite"
               value={formik.values.firmWebsite}
@@ -154,100 +171,30 @@ const EditProfile = (props) => {
               margin="normal"
               fullWidth
             />
-            <FieldLabel leftText={t("editProfile.applink").toUpperCase()} />
+            <InputFieldLabel
+              leftText={t("editProfile.applink").toUpperCase()}
+            />
             <InputField
               name="firmApplink"
               values={formik.values.firmApplink}
               margin="normal"
               fullWidth
             />
-            <FieldLabel leftText={t("editProfile.phoneNumber").toUpperCase()} />
+            <InputFieldLabel
+              leftText={t("editProfile.phoneNumber").toUpperCase()}
+            />
             <InputField
               name="firmPhone"
               value={formik.values.firmPhone}
               onChange={formik.handleChange}
               error={formik.touched.firmPhone && formik.errors.firmPhone}
-              // helperText={formik.touched.firmPhone && formik.errors.firmPhone}
+              // helperText={
+              //   formik.touched.firmPhone && formik.errors.firmPhone
+              // }
               margin="normal"
               fullWidth
             />
-          </>
-        ) : (
-          <MobileInfo>
-            {!showDetails && (
-              <BasicInfo>
-                <FieldLabel leftText={t("common.labelFirm").toUpperCase()} />
-                <InputField
-                  name="firmName"
-                  value={formik.values.firmName}
-                  onChange={formik.handleChange}
-                  error={formik.touched.firmName && formik.errors.firmName}
-                  // helperText={formik.touched.firmName && formik.errors.firmName}
-                  margin="normal"
-                  fullWidth
-                />
-                <FieldLabel leftText={t("common.labelPIB")} />
-                <InputField
-                  name="firmPIB"
-                  value={formik.values.firmPIB}
-                  onChange={formik.handleChange}
-                  error={formik.touched.firmPIB && formik.errors.firmPIB}
-                  // helperText={formik.touched.firmPIB && formik.errors.firmPIB}
-                  margin="normal"
-                  fullWidth
-                />
-                <FieldLabel
-                  leftText={t("common.labelLocation").toUpperCase()}
-                />
-                <InputField
-                  name="firmLocation"
-                  value={formik.values.firmLocation}
-                  onChange={formik.handleChange}
-                  error={
-                    formik.touched.firmLocation && formik.errors.firmLocation
-                  }
-                  // helperText={
-                  //   formik.touched.firmLocation && formik.errors.firmLocation
-                  // }
-                  margin="normal"
-                  fullWidth
-                />
-              </BasicInfo>
-            )}
-            {showDetails && (
-              <DetailsInfo>
-                <FieldLabel leftText={t("editProfile.website").toUpperCase()} />
-                <InputField
-                  name="firmWebsite"
-                  value={formik.values.firmWebsite}
-                  onChange={formik.handleChange}
-                  margin="normal"
-                  fullWidth
-                />
-                <FieldLabel leftText={t("editProfile.applink").toUpperCase()} />
-                <InputField
-                  name="firmApplink"
-                  values={formik.values.firmApplink}
-                  margin="normal"
-                  fullWidth
-                />
-                <FieldLabel
-                  leftText={t("editProfile.phoneNumber").toUpperCase()}
-                />
-                <InputField
-                  name="firmPhone"
-                  value={formik.values.firmPhone}
-                  onChange={formik.handleChange}
-                  error={formik.touched.firmPhone && formik.errors.firmPhone}
-                  // helperText={
-                  //   formik.touched.firmPhone && formik.errors.firmPhone
-                  // }
-                  margin="normal"
-                  fullWidth
-                />
-              </DetailsInfo>
-            )}
-          </MobileInfo>
+          </DetailsInfo>
         )}
 
         {formik.errors.firmName && formik.touched.firmName ? (
@@ -263,22 +210,24 @@ const EditProfile = (props) => {
         )}
 
         {dimensions.width > 600 ? (
-          <SaveButton
-            type="submit"
-            variant="contained"
-            height="48px"
-            fullWidth
-            buttoncolor={selectedTheme.primaryPurple}
-            textcolor="white"
-          >
-            {t("editProfile.saveChanges")}
-          </SaveButton>
+          <ButtonsContainer>
+            <SaveButton
+              type="submit"
+              variant="contained"
+              height="48px"
+              width="335px"
+              buttoncolor={selectedTheme.primaryPurple}
+              textcolor="white"
+            >
+              {t("editProfile.saveChanges")}
+            </SaveButton>
+          </ButtonsContainer>
         ) : (
           <ButtonsContainer>
             <SaveButton
               // type="submit"
               // variant="outlined"
-              height="48px"
+              height="44px"
               width="155px"
               buttoncolor={selectedTheme.primaryPurple}
               textcolor={selectedTheme.primaryPurple}
@@ -291,7 +240,7 @@ const EditProfile = (props) => {
             <SaveButton
               type="submit"
               variant="contained"
-              height="48px"
+              height="44px"
               width="155px"
               buttoncolor={selectedTheme.primaryPurple}
               textcolor="white"

src/components/ProfileCard/EditProfile.styled.js

@@ -2,6 +2,7 @@ import styled from "styled-components";
 import { Box, TextField, Typography } from "@mui/material";
 import ImagePicker from "../ImagePicker/ImagePicker";
 import { PrimaryButton } from "../Buttons/PrimaryButton/PrimaryButton";
+import { Label } from "../CheckBox/Label";
 
 export const EditProfileContainer = styled(Box)`
   background-color: #fff;
@@ -9,14 +10,15 @@ export const EditProfileContainer = styled(Box)`
   top: 50px;
   left: calc(50% - 310px);
   z-index: 150;
-  padding: 0 144px;
-  width: 600px;
+  padding: 36px 144px;
+  width: 623px;
   max-height: 90vh;
   overflow-y: auto;
 
   @media screen and (max-width: 600px) {
     width: 375px;
-    padding: 0 30px;
+    height: 653px;
+    padding: 38px 18px;
     top: 60px;
     left: calc(50% - 187px);
   }
@@ -31,31 +33,18 @@ export const ProfileImageContainer = styled(Box)`
 
 export const ProfileImagePicker = styled(ImagePicker)`
   background: none;
-  margin: 36px;
   background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%235A3984FF' stroke-width='2' stroke-dasharray='7%2c 12' stroke-dashoffset='44' stroke-linecap='square'/%3e%3c/svg%3e");
   border-radius: 100px;
   overflow: hidden;
   position: relative;
   margin-bottom: 5px;
 `;
-export const ProfilePicture = styled.img`
-  position: absolute;
-  left: 36px;
-  top: 24px;
-  z-index: 0;
-`;
-
-export const ProfileImage = styled.img`
-  width: 144px;
-  height: 144px;
-  border-radius: 100%;
-`;
 
 export const ProfileHeader = styled(Typography)`
   font-family: "Open Sans";
   font-size: 24px;
-  font-weight: bold;
-  margin-top: 6px;
+  font-weight: 700;
+  margin-top: 9px;
 
   @media screen and (max-width: 600px) {
     font-size: 18px;
@@ -69,6 +58,7 @@ export const BackButton = styled(Box)`
   left: 40px;
 
   @media screen and (max-width: 600px) {
+    left: 22px;
     svg {
       width: 20px;
       height: 20px;
@@ -79,10 +69,11 @@ export const BackButton = styled(Box)`
 export const CloseButton = styled(Box)`
   cursor: pointer;
   position: absolute;
-  top: 40px;
-  right: 40px;
+  top: 42px;
+  right: 42px;
 
   @media screen and (max-width: 600px) {
+    right: 22px;
     svg {
       width: 20px;
       height: 20px;
@@ -90,19 +81,53 @@ export const CloseButton = styled(Box)`
   }
 `;
 
+export const InputFieldLabel = styled(Label)`
+  position: relative;
+  bottom: -14px;
+  & label {
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 20px;
+    color: #808080;
+    cursor: auto;
+    letter-spacing: 0.2px;
+  }
+
+  @media screen and (max-width: 600px) {
+    & label {
+      font-size: 9px;
+      margin-top: -3px;
+    }
+  }
+`;
+
 export const InputField = styled(TextField)`
   & input {
     padding: 10px 16px;
+    font-size: 16px;
+  }
+
+  @media screen and (max-width: 600px) {
+    & input {
+      padding: 12px 18px;
+      font-size: 12px;
+    }
   }
 `;
 
 export const SaveButton = styled(PrimaryButton)`
-  margin: 16px 0;
+  font-size: 12px;
+  letter-spacing: 1.5px;
 `;
 
 export const ButtonsContainer = styled(Box)`
   display: flex;
-  margin-top: 108px;
+  margin-top: 28px;
+
+  @media screen and (max-width: 600px) {
+    margin-top: 100px;
+    justify-content: space-between;
+  }
 `;
 
 export const ErrorMessage = styled(Typography)`
@@ -113,8 +138,6 @@ export const ErrorMessage = styled(Typography)`
   font-size: 14px;
 `;
 
-export const MobileInfo = styled(Box)``;
-
 export const BasicInfo = styled(Box)``;
 
 export const DetailsInfo = styled(Box)``;

src/i18n/resources/rs.js

@@ -192,4 +192,10 @@ export default {
     cancel: "Otkaži",
     delete: "Obriši",
   },
+  notFound: {
+    error404: "Greška 404",
+    errorMessage:
+      "Stranica koju tražite ne postoji <br /> ili je u međuvremenu obirsana.",
+    showAllOffers: "Pogledaj sve objave",
+  },
 };

src/pages/ErrorPages/NotFoundPage.js

@@ -1,26 +1,50 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import Button from '../../components/Buttons/Button';
-import Section from '../../components/Section/Section';
+import React from "react";
+import { Trans, useTranslation } from "react-i18next";
+import {
+  Container,
+  ErrorContainer,
+  ErrorHeading,
+  ErrorMessage,
+  Button,
+} from "./NotFoundPage.styles";
+import { ReactComponent as Error404 } from "../../assets/images/svg/error-404.svg";
+import selectedTheme from "../../themes";
+import { useHistory } from "react-router-dom";
+import { HOME_PAGE } from "../../constants/pages";
 
 const NotFoundPage = () => {
   const { t } = useTranslation();
+  const history = useHistory();
+
+  const showAllOffersHandler = () => {
+    history.push({
+      pathname: HOME_PAGE,
+      state: {
+        from: history.location.pathname,
+      },
+    });
+  };
 
   return (
-    <div className="c-error-page">
-      <Section className="c-error-page__content-container">
-        <div className="c-error-page__content">
-          <h1 className="c-error-page__title">404</h1>
-          <p className="c-error-page__text">{t('notFound.text')}</p>
-          <Button
-            className="c-error-page__button"
-            variant="primary-outlined"
-          >
-            {t('notFound.goBack')}
-          </Button>
-        </div>
-      </Section>
-    </div>
+    <Container>
+      <ErrorContainer>
+        <Error404 />
+        <ErrorHeading>{t("notFound.error404")}</ErrorHeading>
+        <ErrorMessage>
+          <Trans i18nKey="notFound.errorMessage" />
+        </ErrorMessage>
+        <Button
+          variant="contained"
+          width="190px"
+          height="49px"
+          buttoncolor={selectedTheme.primaryYellow}
+          textcolor="black"
+          onClick={showAllOffersHandler}
+        >
+          {t("notFound.showAllOffers")}
+        </Button>
+      </ErrorContainer>
+    </Container>
   );
 };
 

src/pages/ErrorPages/NotFoundPage.styles.js

@@ -0,0 +1,43 @@
+import { Typography } from "@mui/material";
+import { Box } from "@mui/system";
+import styled from "styled-components";
+import { PrimaryButton } from "../../components/Buttons/PrimaryButton/PrimaryButton";
+// import Section from "../../components/Section/Section";
+import selectedTheme from "../../themes";
+
+export const Container = styled(Box)`
+  width: 100%;
+  height: 100vh;
+`;
+
+export const ErrorContainer = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #000;
+  height: 100vh;
+`;
+
+export const ErrorHeading = styled(Typography)`
+  font-family: "Open Sans";
+  font-size: 72px;
+  font-weight: 700;
+  color: ${selectedTheme.primaryPurple};
+
+  @media screen and (max-width: 420px) {
+    font-size: 62px;
+  }
+`;
+
+export const ErrorMessage = styled(Typography)`
+  font-family: "Open Sans";
+  font-size: 16px;
+  font-weight: 400;
+  color: #818181;
+  margin-bottom: 45px;
+`;
+
+export const Button = styled(PrimaryButton)`
+  font-weight: 600;
+`;

src/store/middleware/internalServerErrorMiddleware.js

@@ -1,16 +1,17 @@
-import { ERROR_PAGE } from '../../constants/pages';
-import { attachPostRequestListener } from '../../request';
-import history from '../utils/history';
+import { ERROR_PAGE } from "../../constants/pages";
+import { attachPostRequestListener } from "../../request";
+import history from "../utils/history";
 
 //Interceptor unique name
-export const serverErrorMiddlewareInterceptorName = "INTERNAL_SERVER_ERROR_MIDDLEWARE_INTERCEPTOR";
+export const serverErrorMiddlewareInterceptorName =
+  "INTERNAL_SERVER_ERROR_MIDDLEWARE_INTERCEPTOR";
 
 export default () => (next) => (action) => {
   attachPostRequestListener((error) => {
     if (!error.response) {
       return Promise.reject(error);
     }
-    if (error.response.status === 500) {
+    if (error.response.status === 5000) {
       return history.push(ERROR_PAGE);
     }
     return Promise.reject(error);