Finished #3616

src/assets/images/svg/logo-broken-purple.svg

+<svg width="85" height="84" viewBox="0 0 85 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="50.7617" cy="64.8516" r="10.5693" transform="rotate(-135 50.7617 64.8516)" fill="#5A3984"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.0578 71.2912C36.7593 73.9927 41.1392 73.9927 43.8406 71.2912L57.9946 57.1372C57.9945 57.1371 57.9943 57.137 57.9942 57.1368C53.8666 53.0092 53.8666 46.3171 57.9942 42.1895C62.1006 38.0831 68.7453 38.0621 72.8778 42.1264C74.8238 39.4231 74.5809 35.6315 72.1492 33.1998L43.8407 4.89118C41.1392 2.18972 36.7593 2.18972 34.0578 4.89118L5.74922 33.1998C3.04776 35.9012 3.04777 40.2811 5.74922 42.9826L34.0578 71.2912Z" fill="#5A3984"/>
+</svg>

src/assets/images/svg/logo-image-round.svg

+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="13.1621" width="18.6127" height="18.6127" rx="4.77827" transform="rotate(45 13.1621 0)" fill="#5A3984"/>
+<rect x="26.3213" y="13.1602" width="18.6127" height="18.6127" rx="4.77827" transform="rotate(45 26.3213 13.1602)" fill="#FEB005"/>
+<circle cx="22.2412" cy="17.0786" r="3.65185" transform="rotate(45 22.2412 17.0786)" fill="#FEB005"/>
+<circle cx="17.1602" cy="22.3247" r="3.65185" transform="rotate(45 17.1602 22.3247)" fill="#5A3984"/>
+</svg>

src/components/Cards/FilterCard/FilterCard.js

 import LocationChoser from "./Choser/LocationChoser/LocationChoser";
 import CompanyChoser from "./Choser/CompanyChoser/CompanyChoser";
 import SkeletonFilterCard from "./Skeleton/SkeletonFilterCard";
+import FilterFooter from "./FilterFooter/FilterFooter";
 
 const FilterCard = (props) => {
   const offers = props.offers;
         )}
       </ContentContainer>
 
-      {/* <FilterFooter
+      <FilterFooter
         toggleFilters={props.toggleFilters}
         filters={offers}
         closeAllSections={closeAllSections}
         isMyOffers={props.myOffers}
-      /> */}
+      />
     </FilterCardContainer>
   );
 };

src/components/Cards/FilterCard/FilterFooter/FilterFooter.js

   const { t } = useTranslation();
   const { isMobile } = useIsMobile();
   const filters = props.filters;
-  const handleFilters = () => {
-    filters.paging.changePage(1);
-    // filters.search.clear();
-    filters.applyFilters();
-    props.toggleFilters();
-  };
+  // const handleFilters = () => {
+  //   filters.paging.changePage(1);
+  //   // filters.search.clear();
+  //   filters.applyFilters();
+  //   props.toggleFilters();
+  // };
   const clearFilters = () => {
     if (props.isMyOffers) {
       filters.clear();
           {t("filters.cancel")}
         </PrimaryButton>
       )}
-      <PrimaryButton
+      {/* <PrimaryButton
         variant="outlined"
         fullWidth
         onClick={handleFilters}
         }}
       >
         {t("filters.usefilters")}
-      </PrimaryButton>
+      </PrimaryButton> */}
     </FilterFooterContainer>
   );
 };

src/components/Cards/OfferCard/OfferCard.js

 import {
   ADMIN_ITEM_DETAILS_PAGE,
   ITEM_DETAILS_PAGE,
+  LOGIN_PAGE,
 } from "../../../constants/pages";
 import exchangeStatus from "../../../constants/exchangeStatus";
+import useIsLoggedIn from "../../../hooks/useIsLoggedIn";
 
 const OfferCard = (props) => {
   const dispatch = useDispatch();
   const history = useHistory();
   const userId = useSelector(selectUserId);
   const { isMobile } = useIsMobile();
+  const { isLoggedIn } = useIsLoggedIn();
   const date = formatDateLocale(new Date(props.offer?._created));
   const { t } = useTranslation();
 
   };
   const messageUser = (event) => {
     event.stopPropagation();
-    props.messageUser(props.offer);
+    if (!isLoggedIn) {
+      history.push({
+        pathname: LOGIN_PAGE,
+      });
+    } else {
+      props.messageUser(props.offer);
+    }
   };
   const makeReview = (event) => {
     event.stopPropagation();

src/components/Header/Header.js

   AuthButtonsContainer,
   HeaderContainer,
   LogoContainer,
+  LogoImage,
   MarketplaceLinkRoute,
   MarketplaceLinkRouteContainer,
+  SmallScreenMessagesContainer,
   ToolsButtonsContainer,
   ToolsContainer,
 } from "./Header.styled";
 import { clearFilters } from "../../store/actions/filters/filtersActions";
 import { selectLatestChats } from "../../store/selectors/chatSelectors";
 import useIsLoggedIn from "../../hooks/useIsLoggedIn";
+import useIsMobile from "../../hooks/useIsMobile";
 
 const Header = () => {
   const theme = useTheme();
   const [shouldShow, setShouldShow] = useState(true);
   const routeMatch = useRouteMatch();
   const { isTablet } = useIsTablet();
+  const { isMobile } = useIsMobile();
   const [logoClicked, setLogoClicked] = useState(false);
   const [badge, setBadge] = useState(0);
   const { isLoggedIn } = useIsLoggedIn();
-  console.log(isLoggedIn);
   const { t } = useTranslation();
   const allChats = useSelector(selectLatestChats);
   const seenLastChat = allChats[0]?.participants?.filter(
       dispatch(fetchMineProfile());
     }
   }, []);
-
   useEffect(() => {
     if (logoClicked) {
       console.log("clicked");
 
   // Handling search when user is on marketplace and when he is not
   const handleSearch = (value) => {
+    // search.searchOffersImmediately(value);
     if (!isLoggedIn) {
       search.searchOffersImmediately(value);
+      if (history.location.pathname.includes("/offer")) {
+        const newQueryString = new URLSearchParams({ search: value });
+        history.push({
+          pathname: MARKETPLACE_PAGE,
+          search: newQueryString.toString(),
+        });
+      }
     }
     if (isAdminRoute()) {
       search.setSearchStringManually(value);
         <Toolbar sx={{ p: "15px" }}>
           <ToolsContainer>
             <LogoContainer onClick={() => handleLogoClick()}>
-              <LogoHorizontal />
+              {isMobile ? <LogoImage /> : <LogoHorizontal />}
             </LogoContainer>
 
             {!history.location.pathname.includes("messages") &&
               <ToolsButtonsContainer
                 mobile={matches}
                 shrink={routeMatches(ABOUT_PAGE)}
+                isTablet={isTablet}
               >
                 {matches ? (
-                  <OpenDrawerButton
-                    onClick={drawerRef.current?.handleToggleDrawer}
-                  />
+                  <>
+                    <SmallScreenMessagesContainer>
+                      {isTablet && (
+                        <MyMessagesButton badge={badge} setBadge={setBadge} />
+                      )}
+                    </SmallScreenMessagesContainer>
+                    <OpenDrawerButton
+                      onClick={drawerRef.current?.handleToggleDrawer}
+                    />
+                  </>
                 ) : (
                   <React.Fragment>
                     {!routeMatches(ABOUT_PAGE) && (

src/components/Header/Header.styled.js

 import styled from "styled-components";
 import selectedTheme from "../../themes";
 import Link from "../Link/Link";
+import { ReactComponent as LogoImageSvg } from "../../assets/images/svg/logo-image-round.svg";
 
 export const DrawerContainer = styled(Box)`
   display: flex;
   display: flex;
   flex: ${(props) => (props.shrink ? "none" : "4")};
   justify-content: flex-end;
-  gap: 2.5rem;
+  gap: ${(props) => (props.isTablet ? "15px" : "2.5rem")};
   min-width: ${(props) =>
     props.mobile ? "40px" : props.shrink ? "0" : "600px"};
   max-width: 600px;
     display: none;
   }
 `;
+
+export const LogoImage = styled(LogoImageSvg)`
+  width: 40px;
+`;
+
+export const SmallScreenMessagesContainer = styled(Box)``;

src/components/Header/SearchInput/SearchInput.js

 // import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { routeMatches } from "../../../util/helpers/routeHelpers";
-import { ABOUT_PAGE, BASE_PAGE, HOME_PAGE } from "../../../constants/pages";
+import {
+  ABOUT_PAGE,
+  BASE_PAGE,
+  HOME_PAGE,
+  MARKETPLACE_PAGE,
+} from "../../../constants/pages";
 import { debounceHelper } from "../../../util/helpers/debounceHelper";
 import useIsLoggedIn from "../../../hooks/useIsLoggedIn";
 
   const { t } = useTranslation();
   const { isLoggedIn } = useIsLoggedIn();
   const handleSearch = () => {
-    if (routeMatches(HOME_PAGE) || routeMatches(BASE_PAGE)) {
+    if (
+      routeMatches(HOME_PAGE) ||
+      routeMatches(BASE_PAGE) ||
+      routeMatches(MARKETPLACE_PAGE)
+    ) {
       console.log("uslo unutra");
       debounceHelper(() => props.handleSearch(ref.current.value), 500);
     }

src/components/Header/SearchInput/SearchInput.styled.js

   background-color: ${selectedTheme.colors.primaryBackgroundColor};
   flex: 1;
   max-width: 520px;
+  margin-left: 25px;
   font-family: ${selectedTheme.fonts.textFont};
-  @media (max-width: 1700px) {
+  /* @media (max-width: 1700px) {
     margin-left: 15%;
   }
   @media (max-width: 1550px) {
   }
   @media (max-width: 1250px) {
     margin-left: 5%;
-  }
+  } */
   @media (max-width: 550px) {
     display: block;
     width: 80%;
+    max-width: 50%;
     height: 46px;
-    ${props => props.wider && `flex: 3;`}
+    margin-left: 1px;
+    ${(props) => props.wider && `flex: 3;`}
     font-family: ${selectedTheme.fonts.textFont};
     & div {
       height: 46px;
     }
   }
 `;
-export const EndIcon = styled(Icon)`
-`;
+export const EndIcon = styled(Icon)``;
 export const SearchIcon = styled(Search)`
   position: relative;
   top: 11px;

src/components/Popovers/HeaderPopover/HeaderPopover.styled.js

   width: 100%;
   min-width: 270px;
   font-family: ${selectedTheme.fonts.textFont};
+  @media (max-width: 600px) {
+    min-width: 227px;
+    font-size: 14px;
+  }
 `;
 export const PopoverList = styled(List)`
   width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    @media (max-width: 600px) {
+      font-size: 14px;
+    }
   }
   & p {
     overflow: hidden;
       position: relative;
       top: 2px;
     }
+    @media (max-width: 600px) {
+      font-size: 10px;
+    }
   }
 `;
 export const SettingsIcon = styled(Settings)``;

src/components/UserReviews/NoReviews/NoReviews.js

 import React from "react";
 import PropTypes from "prop-types";
 import {
+  Logo,
   NoReviewsAltText,
   NoReviewsContainer,
   NoReviewsText,
 } from "./NoReviews.styled";
-import UserReviewsSkeleton from "./UserReviewsSkeleton/UserReviewsSkeleton";
 import { useTranslation } from "react-i18next";
-import useIsMobile from "../../../hooks/useIsMobile";
-const NoReviews = () => {
-  const { isMobile } = useIsMobile();
+
+const NoReviews = (props) => {
   const { t } = useTranslation();
   return (
-    <NoReviewsContainer>
+    <NoReviewsContainer fullHeight={props.fullHeight}>
+      <Logo />
       <NoReviewsText>{t("reviews.title")}</NoReviewsText>
       <NoReviewsAltText>{t("reviews.altTitle")}</NoReviewsAltText>
-      <UserReviewsSkeleton noReviews numOfElements={isMobile ? 1 : 2} />
     </NoReviewsContainer>
   );
 };
 
 NoReviews.propTypes = {
   children: PropTypes.node,
+  fullHeight: PropTypes.bool,
 };
 
 export default NoReviews;

src/components/UserReviews/NoReviews/NoReviews.styled.js

-import { Box, Typography } from "@mui/material"
-import styled from "styled-components"
-import selectedTheme from "../../../themes"
+import { Box, Typography } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../themes";
+import { ReactComponent as LogoBroken } from "../../../assets/images/svg/logo-broken-purple.svg";
 
 export const NoReviewsContainer = styled(Box)`
-  text-align: center;
   margin-top: 36px;
-`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  ${(props) => props.fullHeight && `height: 70vh;`}
+`;
 export const NoReviewsText = styled(Typography)`
   color: ${selectedTheme.colors.primaryPurple};
   font-size: 24px;
   text-align: center;
   font-weight: 700;
   width: 229px;
-  
-`
+  margin-top: 20px;
+`;
 export const NoReviewsAltText = styled(Typography)`
   font-size: 12px;
   color: ${selectedTheme.colors.primaryDarkText};
   text-align: center;
   width: 100%;
   margin-bottom: 36px;
-`
+`;
+
+export const Logo = styled(LogoBroken)``;

src/components/UserReviews/UserReviews.js

   PROFILE_PAGE,
 } from "../../constants/pages";
 import { selectUserId } from "../../store/selectors/loginSelectors";
+import { reviewEnum } from "../../enums/reviewEnum";
 
 const UserReviews = (props) => {
   const [isGiven, setIsGiven] = useState(true);
+  const [positiveReviews, setPositiveReviews] = useState(false);
+  const [negativeReviews, setNegativeReviews] = useState(false);
+  const [filteredReviews, setFilteredReviews] = useState();
   const { t } = useTranslation();
   const offer = useSelector(selectOffer);
   const reviews = useSelector(selectSelectedReviews);
   const listRef = useRef(null);
   const sortRef = useRef(null);
   const mineUserId = useSelector(selectUserId);
-
   const isLoadingReview = useSelector(
     selectIsLoadingByActionType(
       props.givingReview ? ONE_OFFER_SCOPE : REVIEW_GET_SCOPE
     )
   );
 
+  useEffect(() => {
+    if (!positiveReviews && !negativeReviews) setFilteredReviews(reviews);
+    if (positiveReviews)
+      setFilteredReviews(
+        reviews.filter(
+          (review) =>
+            review.succeeded === reviewEnum.YES.backendText &&
+            review.communication === reviewEnum.YES.backendTextSecond
+        )
+      );
+    if (negativeReviews)
+      setFilteredReviews(
+        reviews.filter(
+          (review) => review.succeeded === reviewEnum.NO.backendText
+        )
+      );
+  }, [reviews, positiveReviews, negativeReviews]);
+
   const userId = useMemo(() => {
     if (
       dynamicRouteMatches(PROFILE_PAGE) ||
       } else {
         setIsGiven(false);
       }
+    } else {
+      if (newSortOption.value === 1) {
+        setPositiveReviews(true);
+        setNegativeReviews(false);
+      }
+      if (newSortOption.value === 2) {
+        setNegativeReviews(true);
+        setPositiveReviews(false);
+      }
     }
   };
 
             </ReviewsHeader>
           )}
           <ReviewList ref={listRef} isProfileReviews={props.isProfileReviews}>
-            {lastThreeReviews?.length > 0 ? (
-              lastThreeReviews?.map((review, index) => (
+            {filteredReviews?.length > 0 ? (
+              filteredReviews?.map((review, index) => (
                 <UserReviewsCard
                   showRemoveIcon={props.isAdmin}
                   review={review}
                 />
               ))
             ) : (
-              <NoReviews></NoReviews>
+              <NoReviews fullHeight={props.fullHeight} />
             )}
           </ReviewList>
         </ReviewsBox>
   offer: PropTypes.any,
   isAdmin: PropTypes.bool,
   rightReviews: PropTypes.bool,
+  fullHeight: PropTypes.bool,
 };
 UserReviews.defaultProps = {
   isProfileReviews: false,

src/enums/reviewEnum.js

 };
 
 export const reviewSortEnum = {
-    INITIAL: {
-        value: 0,
-        mainText: "Sortiraj po",
-        queryString: ""
-    },
-    POSITIVE: {
-        value: 1,
-        mainText: "Pozitivne",
-    },
-    NEGATIVE: {
-        value: 2,
-        mainText: "Negativne",
-    },
-}
+  INITIAL: {
+    value: 0,
+    mainText: "Filtriraj",
+    queryString: "",
+  },
+  POSITIVE: {
+    value: 1,
+    mainText: "Pozitivne",
+  },
+  NEGATIVE: {
+    value: 2,
+    mainText: "Negativne",
+  },
+};

src/pages/ProfilePage/ProfilePage.js

     <ProfilePageContainer>
       <ProfileLayout
         content={<Profile />}
-        rightCard={<UserReviews isProfileReviews />}
+        rightCard={<UserReviews isProfileReviews fullHeight />}
         profile
       />
     </ProfilePageContainer>

src/request/index.js

   // baseURL: "http://192.168.88.143:3001/", // DULE
   // baseURL: "https://trampa-api.dilig.net/",
   // baseURL: "https://trampa-api-test.dilig.net/",
-  // baseURL: "http://localhost:3001/",
-  baseURL: process.env.REACT_APP_BASE_API_URL,
+  baseURL: "http://localhost:3001/",
+  // baseURL: process.env.REACT_APP_BASE_API_URL,
   headers: {
     "Content-Type": "application/json",
   },

src/store/middleware/accessTokensMiddleware.js

 // const baseURL = "https://trampa-api.dilig.net/";
 // const baseURL = "https://trampa-api-test.dilig.net/";
 // const baseURL = "http://192.168.88.150:3001/"; // DJOLE
-// const baseURL = "http://localhost:3001/";
-const baseURL = process.env.REACT_APP_BASE_API_URL
+const baseURL = "http://localhost:3001/";
+// const baseURL = process.env.REACT_APP_BASE_API_URL
 
 //Interceptor unique name
 export const accessTokensMiddlewareInterceptorName = "ACCESS_TOKEN_INTERCEPTOR";
       // If refresh token is expired, log out user
       if (new Date() > new Date(refreshTokenDecoded?.exp * 1000)) {
         dispatch(logoutUser());
-        return Promise.resolve(response)
+        return Promise.resolve(response);
       }
       // If access token is expired, refresh access token
       if (new Date() > new Date(jwtTokenDecoded.exp * 1000)) {

src/store/middleware/loadingMiddleware.js

 
 const promiseTypes = [FETCH, UPDATE, DELETE, SUBMIT];
 
-
 export default ({ dispatch }) =>
   (next) =>
   (action) => {

src/util/helpers/messageHelper.js

 
 export const messageUserHelper = (chats, userId, offer) => {
   const chatItem = chats.find(
-    (item) => item.chat.offerId === offer?.offer?._id
+    (item) => item?.chat?.offerId === offer?.offer?._id
   );
+  if (chatItem.chat === undefined) return;
   if (chatItem !== undefined) {
     history.push(
       replaceInRoute(DIRECT_CHAT_PAGE, { chatId: chatItem.chat._id })

src/util/helpers/reviewsHelper.js

 import { reviewEnum } from "../../enums/reviewEnum";
 
 export const sortReviews = (reviews = [], positive = false) => {
+  console.log(reviews);
   let newReviews;
   if (!Array.isArray(reviews)) return [];
   if (positive) {