Merged with edit-delete

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/assets/images/svg/logo-broken.svg

@@ -0,0 +1,4 @@
+<svg width="171" height="170" viewBox="0 0 171 170" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="69.7051" cy="38.546" r="21.3907" transform="rotate(45 69.7051 38.546)" fill="#FEB005"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M103.513 25.5128C98.0459 20.0454 89.1816 20.0454 83.7143 25.5128L55.0688 54.1582C55.0691 54.1584 55.0694 54.1587 55.0696 54.159C63.4232 62.5126 63.4232 76.0564 55.0696 84.41C46.7589 92.7208 33.3109 92.7634 24.9475 84.5379C21.009 90.009 21.5004 97.6828 26.4218 102.604L83.7142 159.897C89.1816 165.364 98.0459 165.364 103.513 159.897L160.806 102.604C166.273 97.1369 166.273 88.2726 160.806 82.8052L103.513 25.5128Z" fill="#FEB005"/>
+</svg>

src/components/Cards/ChatCard/ChatCard.styled.js

@@ -61,6 +61,9 @@ export const Col = styled(Box)`
   flex-direction: row;
   gap: 18px;
   flex: 1;
+  @media (max-width: 600px) {
+    ${props => props.mobileDisappear && 'display: none;'}
+  }
 `;
 export const UserName = styled(Typography)`
   margin-bottom: 12px;

src/components/Cards/FilterCard/FilterDropdown/Radio/FilterRadioDropdown.js

@@ -117,6 +117,7 @@ const FilterRadioDropdown = (props) => {
           </DropdownItem>
         )}
         {dataToShow.map((item) => {
+          console.log(item);
           return (
             <DropdownItem
               key={item.name}
@@ -124,7 +125,7 @@ const FilterRadioDropdown = (props) => {
             >
               <RadioButton
                 value={item}
-                label={item.name ? item.name : item}
+                label={item?.name ? item?.name : item?.length > 0 ? item : ""}
                 number={item.offerCount}
                 fullWidth
                 checked={

src/components/Cards/ItemDetailsCard/ItemDetailsCard.js

@@ -72,17 +72,21 @@ const ItemDetailsCard = (props) => {
         <PostDate>{date}</PostDate>
       </OfferInfo>
 
-      <OfferDetails offer={offer}/>
+      <OfferDetails
+        offer={offer}
+        showExchangeButton={props.showExchangeButton}
+        showPublishButton={props.showPublishButton}
+      />
 
       {!props.halfwidth && props.showExchangeButton && (
-          <CheckButton
-            variant={props.sponsored ? "contained" : "outlined"}
-            buttoncolor={selectedTheme.primaryPurple}
-            textcolor={props.sponsored ? "white" : selectedTheme.primaryPurple}
-            onClick={startExchange}
-          >
-            {t("itemDetailsCard.startExchangeButton")}
-          </CheckButton>
+        <CheckButton
+          variant={props.sponsored ? "contained" : "outlined"}
+          buttoncolor={selectedTheme.primaryPurple}
+          textcolor={props.sponsored ? "white" : selectedTheme.primaryPurple}
+          onClick={startExchange}
+        >
+          {t("itemDetailsCard.startExchangeButton")}
+        </CheckButton>
       )}
     </ItemDetailsCardContainer>
   );

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/Header/Header.js

@@ -183,7 +183,6 @@ const Header = (props) => {
     searchRef.current.removeEventListener("keyup", listener);
   };
   const handleSearch = (value) => {
-    if (value.length === 0) return;
     search.searchOffers(value);
   };
   const toggleFilters = () => {

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.js

@@ -51,8 +51,8 @@ const ItemDetailsHeaderCard = (props) => {
           <OfferTitle isMyProfile={props.isMyProfile} onClick={handleGoProfile}>
             {offer?.companyData?.company?.name}
           </OfferTitle>
-          <PIBDetail offer={props.offer}/>
-          <CategoryDetail offer={props.offer}/>
+          <PIBDetail offer={props.offer} isMyProfile={props.isMyProfile}/>
+          <CategoryDetail offer={props.offer} isMyProfile={props.isMyProfile}/>
         </OfferDetails>
         {props.isMyProfile ? (
           <UserIconContainer onClick={handleGoProfile}>

src/components/MarketPlace/Offers/Offers.js

@@ -8,6 +8,7 @@ import { selectLatestChats } from "../../../store/selectors/chatSelectors";
 import { selectUserId } from "../../../store/selectors/loginSelectors";
 import { startChat } from "../../../util/helpers/chatHelper";
 import useOffers from "../../../hooks/useOffers";
+import OffersNotFound from "./OffersNotFound";
 
 const Offers = (props) => {
   const chats = useSelector(selectLatestChats);
@@ -20,25 +21,30 @@ const Offers = (props) => {
   };
 
   return (
-    <OffersContainer ref={offersRef}>
-      {offers.allOffersToShow.map((item) => {
-        return (
-          <OfferCard
-            key={item._id}
-            offer={item}
-            halfwidth={props.isGrid}
-            messageUser={messageOneUser}
+    <>
+      {offers.allOffersToShow.length === 0 ? (
+        <OffersNotFound />
+      ) : (
+        <OffersContainer ref={offersRef}>
+          {offers.allOffersToShow.map((item) => {
+            return (
+              <OfferCard
+                key={item._id}
+                offer={item}
+                halfwidth={props.isGrid}
+                messageUser={messageOneUser}
+              />
+            );
+          })}
+          <Paging
+            totalElements={offers.totalOffers}
+            elementsPerPage={10}
+            current={offers.page}
+            changePage={offers.handleDifferentPage}
           />
-        );
-      })}
-      {offers.allOffersToShow?.length === 0 && <>akjshdkjhadsjkasjhkd</>}
-      <Paging
-        totalElements={offers.totalOffers}
-        elementsPerPage={10}
-        current={offers.page}
-        changePage={offers.handleDifferentPage}
-      />
-    </OffersContainer>
+        </OffersContainer>
+      )}
+    </>
   );
 };
 

src/components/MarketPlace/Offers/OffersNotFound.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { ReactComponent as LogoBroken } from "../../../assets/images/svg/logo-broken.svg";
+import {
+  Button,
+  OffersNotFoundContainer,
+  OffersNotFoundDescription,
+  OffersNotFoundHeading,
+} from "./OffersNotFound.styled";
+import selectedTheme from "../../../themes";
+import { Trans, useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import { HOME_PAGE } from "../../../constants/pages";
+import { useDispatch } from "react-redux";
+import { fetchOffers } from "../../../store/actions/offers/offersActions";
+
+const OffersNotFound = () => {
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const { t } = useTranslation();
+
+  const showAllOffersHandler = () => {
+    dispatch(fetchOffers({ queryString: "" }));
+    history.replace({
+      pathname: HOME_PAGE,
+      state: {
+        from: history.location.pathname,
+      },
+    });
+  };
+
+  return (
+    <OffersNotFoundContainer>
+      <LogoBroken />
+      <OffersNotFoundHeading>
+        {t("offersNotFound.notFound")}
+      </OffersNotFoundHeading>
+      <OffersNotFoundDescription>
+        <Trans i18nKey="offersNotFound.errorMessage" />
+      </OffersNotFoundDescription>
+      <Button
+        variant="contained"
+        width="190px"
+        height="49px"
+        buttoncolor={selectedTheme.primaryYellow}
+        textcolor="black"
+        onClick={showAllOffersHandler}
+      >
+        {t("offersNotFound.showAllOffers")}
+      </Button>
+    </OffersNotFoundContainer>
+  );
+};
+
+export default OffersNotFound;

src/components/MarketPlace/Offers/OffersNotFound.styled.js

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import { Typography } from "@mui/material";
+import { Box } from "@mui/system";
+import selectedTheme from "../../../themes";
+import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
+
+export const OffersNotFoundContainer = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 70vh;
+`;
+
+export const OffersNotFoundHeading = styled(Typography)`
+  font-family: "Open Sans";
+  font-size: 72px;
+  font-weight: 700;
+  color: ${selectedTheme.primaryPurple};
+`;
+
+export const OffersNotFoundDescription = styled(Typography)`
+  font-family: "Open Sans";
+  font-size: 16px;
+  color: #818181;
+  margin: 9px 0 46px 0;
+  text-align: center;
+`;
+
+export const Button = styled(PrimaryButton)`
+  font-weight: 600;
+  letter-spacing: 1.5px;
+`;

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/hooks/useSearch.js

@@ -3,7 +3,14 @@ import { useQueryString } from "./useQueryString";
 export const useSearch = () => {
   const queryStringHook = useQueryString();
   const searchOffers = (searchString) => {
-    queryStringHook.appendToQueryString("oname", searchString);
+    if (searchString?.length !== 0) {
+      queryStringHook.appendToQueryString("oname", searchString);
+    } else {
+      const newQueryString = new URLSearchParams(queryStringHook.queryString);
+      if (newQueryString.has("oname")) {
+        queryStringHook.deleteFromQueryString("oname");
+      }
+    }
   };
 
   return {

src/i18n/resources/rs.js

@@ -222,5 +222,17 @@ export default {
     successfulExchanges: " uspešnih trampi",
     correctCommunications: " korektna komunikacija",
     headerTitle: "Nazad na objave"
-  }
+  },
+  notFound: {
+    error404: "Greška 404",
+    errorMessage:
+      "Stranica koju tražite ne postoji <br /> ili je u međuvremenu obirsana.",
+    showAllOffers: "Pogledaj sve objave",
+  },
+  offersNotFound: {
+    notFound: "Objave nisu pronađene",
+    errorMessage:
+      "Nažalost ne postoji ni jedna objava <br /> za unete kriterijume.",
+    showAllOffers: "Pogledaj sve objave",
+  },
 };

src/pages/ErrorPages/NotFoundPage.js

@@ -1,19 +1,50 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-// 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>
-        </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,9 +1,10 @@
-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) => {

src/store/saga/offersSaga.js

@@ -44,6 +44,8 @@ import {
   selectPinnedOffers,
   selectTotalOffers,
 } from "../selectors/offersSelectors";
+import history from "../utils/history";
+import { NOT_FOUND_PAGE } from "../../constants/pages";
 
 function* fetchOffers(payload) {
   try {
@@ -114,7 +116,10 @@ function* fetchOneOffer(payload) {
     console.log(data.data);
     yield put(setOffer(data.data));
   } catch (e) {
-    console.log(e);
+    console.log(e.response.status);
+    if (e.response.status === 400) {
+      yield call(history.push, NOT_FOUND_PAGE);
+    }
   }
 }
 
@@ -137,6 +142,9 @@ function* fetchProfileOffers(payload) {
     yield put(setProfileOffers(data.data));
   } catch (e) {
     console.log(e);
+    if (e.response.status === 400) {
+      yield call(history.push, NOT_FOUND_PAGE);
+    }
   }
 }