App now works

src/components/Cards/FilterCard/Choser/SubcategoryChoser/SubcategoryChoser.js

       if (
         (filters.category.selectedCategoryLocally &&
           !("_id" in filters.category.selectedCategoryLocally)) ||
-        filters.category.selectedCategoryLocally?._id === 0
+        filters.category.selectedCategoryLocally?._id === 0 ||
+        !filters.category.selectedCategoryLocally
       ) {
         setIsOpened(false);
         setIsDisabled(true);

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

                 fullWidth
                 checked={
                   (props?.selected && !("_id" in props?.selected)) ||
-                  props?.selected?._id === 0
+                  props?.selected?._id === 0 || !props?.selected
                 }
                 onChange={props.setSelected}
               />

src/components/Cards/LittleOfferCard/LittleOfferCard.styled.js

     display: flex;
     flex-direction: row;
     position: relative;
+    @media (max-width: 600px) {
+        width: 211px;
+    }
 `
 export const OfferImage = styled.img`
     width: 54px;
 `
 export const OfferDetails = styled(Box)`
     display: flex;
+    text-align: left;
     flex-direction: column;
     margin-top: 25px;
     margin-left: 9px;
     position: relative;
     top: 1.5px;
     right: 2px;
+    & path {
+        stroke-width: 1;
+    }
 `
 export const OfferSwapsIconContainer = styled(Icon)`
     width: 40px;
         width: 40px;
         height: 40px;
     }
+    @media (max-width: 600px) {
+        width: 32px;
+        height: 32px;
+        top: -15px;
+        right: -15px;
+    }
 `
 export const OfferSwapsIcon = styled(Swaps)`
     width: 18px;
     height: 18px;
     position: relative;
     top: 10px;
+    @media (max-width: 600px) {
+        width: 14px;
+        height: 14px;
+        top: 2px;
+        left: -4px;
+    }
 `

src/components/Cards/MessageCard/MessageCard.styled.js

   overflow: hidden;
   border-radius: 100%;
   @media (max-width: 600px) {
-    display: none;
+    width: 18px;
+    height: 18px;
+    min-width: 18px;
   }
 `;
 export const MessageContent = styled(Box)`
   min-width: 110px;
   @media (max-width: 600px) {
     width: 100%;
+    margin: 0;
+    ${props => props.ismymessage ? "margin-right: 9px;" : "margin-left: 9px;"}
   }
 `;
 export const MessageText = styled(Typography)`

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

 import useIsMobile from "../../../../hooks/useIsMobile";
 import { getImageUrl, variants } from "../../../../util/helpers/imageUrlGetter";
 import { selectQueryString } from "../../../../store/selectors/queryStringSelectors";
-import OfferDescription from "./OfferDescription/OfferDescription";
 import CancelButton from "./CancelButton/CancelButton";
 import SaveButton from "./SaveButton/SaveButton";
 import { closeModal } from "../../../../store/actions/modal/modalActions";
   ITEM_DETAILS_PAGE,
   PROFILE_PAGE,
 } from "../../../../constants/pages";
+import { OfferDescriptionContainer } from "./DeleteOfferLabeledCard/DeleteOfferLabeledCard.styled";
 
 const DeleteOffer = (props) => {
   const dispatch = useDispatch();
               )}
             />
           </OfferImageContainer>
-          <OfferDescription
+          <OfferDescriptionContainer
             offerName={props.offer.name}
             categoryName={props.offer.category.name}
           />

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

   border-radius: 2px;
 
   @media screen and (max-width: 600px) {
-    margin-right: 13px;
+    /* margin-right: 13px; */
   }
 `;
 

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

 import React from "react";
 import PropTypes from "prop-types";
 import {
+  OfferDescriptionContainer,
   OfferImage,
   OfferImageContainer,
   OfferInfo,
   getImageUrl,
   variants,
 } from "../../../../../util/helpers/imageUrlGetter";
-import OfferDescription from "../OfferDescription/OfferDescription";
 import useIsMobile from "../../../../../hooks/useIsMobile";
 
 const DeleteOfferLabeledCard = (props) => {
           )}
         />
       </OfferImageContainer>
-      <OfferDescription
+      <OfferDescriptionContainer
         offerName={props.offer.name}
         categoryName={props.offer.category.name}
       />

src/components/Cards/OfferCard/DeleteOffer/DeleteOfferLabeledCard/DeleteOfferLabeledCard.styled.js

 import selectedTheme from "../../../../../themes";
 import { ReactComponent as Remove } from "../../../../../assets/images/svg/trash-gold.svg";
 import { IconButton } from "../../../../Buttons/IconButton/IconButton";
+import OfferDescription from "../OfferDescription/OfferDescription";
 export const OfferInfo = styled(Box)`
   width: 211px;
   height: 90px;
   border-radius: 2px;
 
   @media screen and (max-width: 600px) {
-    margin-right: 13px;
+    /* margin-right: 13px; */
   }
 `;
 
 export const RemoveIcon = styled(Remove)`
   cursor: default;
 `;
+export const OfferDescriptionContainer = styled(OfferDescription)`
+  margin-left: 0;
+`

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

 
 const OfferDescription = (props) => {
   return (
-    <OfferDescriptionContainer>
+    <OfferDescriptionContainer className={props?.className}>
       <OfferDescriptionTitle>{props.offerName}</OfferDescriptionTitle>
       <OfferCategoryContainer>
         <CategoryIconContainer
 OfferDescription.propTypes = {
   offerName: PropTypes.string,
   categoryName: PropTypes.string,
+  className: PropTypes.string,
 };
 
 export default OfferDescription;

src/components/Cards/RequestExchangeCard/RequestExchangeCard.styled.js

   min-width: 110px;
   @media (max-width: 600px) {
     width: 100%;
+    margin: 0;
+    ${props => props.ismymessage ? "margin-right: 9px;" : "margin-left: 9px;"}
   }
 `;
 export const MessageText = styled(Typography)`

src/components/Cards/UserReviewsCard/UserReviewsSingleCard/ReviewQuote/ReviewQuote.styled.js

 export const ThumbContainer = styled(Grid)`
   max-width: 20px;
 `;
-export const ReviewQuoteTextContainer = styled(Grid)``;
+export const ReviewQuoteTextContainer = styled(Box)`
+  flex: 1;
+`;
 export const ReviewQuoteText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;

src/components/CreateReview/CreateReview.styled.js

     max-width: 100vw;
     left: 0;
     top: 0;
-    padding: 0 30px;
+    padding: 0 18px;
   }
 `;
 export const NextButton = styled(PrimaryButton)`
   @media (max-width: 600px) {
     height: 42px;
     position: absolute;
-    bottom: 15px;
-    width: calc(100% - 48px);
+    bottom: 9px;
+    width: calc(100vw - 36px);
     left: 0;
-    margin-left: 24px;
+    margin-left: 9px;
   }
 `;
 export const CloseButton = styled(IconButton)`
   top: 36px;
   right: 36px;
   @media (max-width: 600px) {
-    top: 24px;
-    right: 24px;
+    top: 32px;
+    right: 22px;
   }
 `;
 export const CloseIcon = styled(Close)`
   left: 36px;
 
   @media (max-width: 600px) {
-    top: 24px;
+    top: 40px;
     left: 24px;
     width: 18px;
     height: 18px;
     margin-bottom: 24px;
   }
 `;
+export const CreateReviewFlexContainer = styled(Box)`
+  @media (max-width: 600px) {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+`

src/components/CreateReview/FirstStep/FirstStepCreateReview.js

 const FirstStepCreateReview = (props) => {
   const offer = props.offer;
   const interlocutor = props.interlocutor;
+  console.log(props);
   const { t } = useTranslation();
   const handleSubmit = (values) => {
     props.goToNextStep(values);
           )}
         />
       </ProfileImageContainer>
-      <ProfileName>{interlocutor.name}</ProfileName>
+      <ProfileName>{interlocutor.company.name}</ProfileName>
       <LittleOfferCard
         image={offer?.images[0]}
         name={offer?.name}

src/components/CreateReview/FirstStep/FirstStepCreateReview.styled.js

   text-align: center;
   padding: 36px;
   @media (max-width: 600px) {
-    padding: 18px;
+    padding: 0;
+    padding-top: 36px;
+    flex: 1;
   }
 `;
 export const CreateReviewTitle = styled(Typography)`
   text-align: left;
   ${props => props.exchange && `background-color: ${selectedTheme.colors.backgroundSponsoredColor};`}
   @media (max-width: 600px) {
-    height: 33px;
+    height: 40px;
     font-size: 14px;
-    margin-bottom: 12px;
+    margin-bottom: 18px;
   }
 `;
 export const SelectOption = styled(Option)`

src/components/CreateReview/SecondStep/SecondStepCreateReview.js

           : t("reviews.modalTitle")}
       </CreateReviewTitle>
       <ReviewCard
-        givingReview
-        profileReviews={[
-          {
-            name: mineProfile?.company?.name,
-            image: mineProfile?.image,
-            offerName: props?.offer?.name,
-            offerImage: props?.offer?.images[0],
-            isGoodCommunication: props.review?.correctCommunication,
-            isSuccessfulSwap: props.review?.exchangeSucceed,
-            quote: props.review.comment,
-          },
-        ]}
+        givingReview={{
+          name: mineProfile?.company?.name,
+          image: mineProfile?.image,
+          offerName: props?.offer?.name,
+          offerImage: props?.offer?.images[0],
+          isGoodCommunication: props.review?.correctCommunication,
+          isSuccessfulSwap: props.review?.exchangeSucceed,
+          quote: props.review.comment,
+        }}
+      />
+      <NextButton
+        removingReview={props.removingReview}
+        onClick={goToNextStep}
       />
-      <NextButton removingReview={props.removingReview} onClick={goToNextStep} />
     </SecondStepCreateReviewContainer>
   );
 };

src/components/CreateReview/SecondStep/SecondStepCreateReview.styled.js

 export const SecondStepCreateReviewContainer = styled(Box)`
   padding: 36px;
   @media (max-width: 600px) {
-    padding: 18px;
+    padding: 0;
+    padding-top: 36px;
   }
 `;
 export const ReviewCard = styled(UserReviews)`
       margin: 0;
     }
   }
+  & * {
+    overflow:hidden;
+  }
+  @media (max-width: 600px) {
+    position: relative;
+    top: -24px;
+    & > div {
+      position: static;
+      margin-top: 0px;
+    }
+  }
 `;

src/components/DirectChat/DirectChat.js

 import { convertLocalDateToUTCDate } from "../../util/helpers/dateHelpers";
 import requesterStatus from "../../constants/requesterStatus";
 import exchangeStatus from "../../constants/exchangeStatus";
+import { NEW_CHAT } from "../../constants/chatConstants";
 
 const DirectChat = () => {
   const chat = useSelector(selectSelectedChat);
   }, [allChats, routeMatch, requester]);
 
   const refreshChat = () => {
-    if (routeMatch.params?.chatId === "newMessage") {
+    if (routeMatch.params?.chatId === NEW_CHAT) {
       dispatch(fetchOneOffer(location.state.offerId));
       dispatch(setOneChat({}));
     } else {

src/components/DirectChat/DirectChatContent/DirectChatContent.styled.js

   /* justify-content: flex-end; */
   /* align-items: flex-end; */
   @media (max-width: 600px) {
-    padding: 18px 0;
+    padding: 18px 18px;
   }
   &::-webkit-scrollbar {
     width: 5px;

src/components/DirectChat/DirectChatContent/DirectChatContentHeader/DirectChatContentHeader.js

         <DirectChatHeaderStatusContainer>
           <DirectChatHeaderStatusText>
             {props.exchangeState === exchangeStatus.I_OFFERED
-              ? t("messages.requestSentLong")
+              ? isMobile
+                ? t("messages.requestSentShort")
+                : t("messages.requestSentLong")
+              : isMobile
+              ? t("messages.requestSuccessfulShort")
               : t("messages.requestSuccessfulLong")}
           </DirectChatHeaderStatusText>
         </DirectChatHeaderStatusContainer>

src/components/DirectChat/DirectChatContent/DirectChatContentHeader/DirectChatContentHeader.styled.js

   height: 39px;
   width: 100%;
   padding: 9px 36px;
+  @media (max-width: 600px) {
+    height: 36px;
+    padding: 8px 18px;
+  }
 `;
 export const DirectChatHeaderStatusText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
   line-height: 21px;
   color: white;
+  @media (max-width: 600px) {
+    font-size: 14px;
+  }
 `;

src/components/Header/Drawer/Buttons/MyProfileButton/MyProfileButton.js

 import { selectProfileName } from "../../../../../store/selectors/profileSelectors";
 import { selectUserId } from "../../../../../store/selectors/loginSelectors";
 import history from "../../../../../store/utils/history";
+import { PROFILE_PAGE } from "../../../../../constants/pages";
+import { replaceInRoute } from "../../../../../util/helpers/routeHelpers";
 
 const MyProfileButton = (props) => {
   const name = useSelector(selectProfileName);
   const { t } = useTranslation();
   const handleClick = () => {
     props.toggleDrawer();
-    history.push(`/profile/${userId}`);
+    history.push(
+      replaceInRoute(PROFILE_PAGE, {
+        profileId: userId,
+      })
+    );
   };
   return (
     <DrawerButton onClick={handleClick}>

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.js

   DIRECT_CHAT_PAGE,
   PROFILE_PAGE,
 } from "../../../constants/pages";
+import { NEW_CHAT } from "../../../constants/chatConstants";
 
 const ItemDetailsHeaderCard = (props) => {
   const history = useHistory();
       });
     } else {
       if (offer?.user?._id !== userId) {
-        history.push(`/messages/newMessage`, {
-          offerId: offer?._id,
+        history.push({
+          pathname: replaceInRoute(DIRECT_CHAT_PAGE, {
+            chatId: NEW_CHAT,
+          }),
+          state: {
+            offerId: offer?._id,
+          },
         });
       }
     }

src/components/Popovers/MyMessages/MyMessages.js

   }, [chats]);
   const goToMessages = () => {
     if (lastChats.length !== 0) {
-      history.push(`/messages/${chats[0].chat?._id}`);
+      console.log(chats);
+      history.push({
+        pathname: replaceInRoute(DIRECT_CHAT_PAGE, {
+          chatId: chats[0]._id,
+        }),
+      });
       props.closePopover();
     } else {
       makeErrorToastMessage(t("messages.noMessagesToast"));

src/components/UserReviews/UserReviews.js

       return mineUserId;
     }
     return offer?.user?._id;
-  }, [offer]);
+  }, [offer, routeMatch.params]);
 
   useEffect(() => {
     if (!props?.givingReview && userId) {
     }
   }, [props.givingReview, userId]);
 
+  console.log(props);
   const lastThreeReviews = useMemo(() => {
+    if (props.givingReview) return [props.givingReview];
     if (props.isProfileReviews && Array.isArray(reviews) && !props.isAdmin) {
       return reviews.filter((singleReview) => {
         let userWhoRecievedReview =
   };
 
   return (
-    <UserReviewsContainer className={props.className}>
+    <UserReviewsContainer
+      className={props.className}
+      givingReview={props.givingReview}
+    >
       {!props.givingReview &&
       (isLoadingReview || isLoadingReview === undefined) ? (
         <SkeletonUserReviews />

src/components/UserReviews/UserReviews.styled.js

 import selectedTheme from "../../themes";
 import { ReactComponent as DownArrow } from "../../assets/images/svg/up-arrow.svg";
 
-export const UserReviewsContainer = styled(Box)``;
+export const UserReviewsContainer = styled(Box)`
+  ${(props) => props.givingReview && `overflow: hidden;`}
+`;
 
 export const ReviewsBox = styled(Box)`
   width: 100%;

src/constants/chatConstants.js

+export const NEW_CHAT = "newChat"

src/i18n/resources/rs.js

     acceptedRequest: "Prihvaćeno",
     declineRequest: "Odbij",
     requestSuccessfulLong: "Uspešno ste ostvarili trampu sa ovom kompanijom.",
+    requestSuccessfulShort: "Uspešno ste otvarili trampu.",
     requestSentLong: "Ponudili ste trampu kompaniji. Čeka se odgovor...",
+    requestSentShort: "Ponudili ste trampu kompaniji.",
   },
   editProfile: {
     website: "Web Sajt",

src/pages/AdminHomePage/AdminLocationsPage/AdminLocationsPage.styled.js

     padding: 18px;
     min-height: (100vh - 72px);
     padding-bottom: 100px;
-    top: 65px;
+    top: 38px;
   }
 `;
 export const AdminLocationsHeader = styled(Header)`
   top: 0;
   @media (max-width: 600px) {
-    top: -5px;
+    top: 0px;
     margin-top: 0px;
     & > div {
-      margin-top: -10px;
+      margin-top: 0px;
     }
-    & > div > div > div:nth-child(1) {
-      top: 15px;
+    & > div > div > div {
+      top: 25px;
       left: 0;
     }
   }

src/request/index.js

   // baseURL: "http://192.168.88.175:3005/",
   // 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: "https://trampa-api-test.dilig.net/",
+  // baseURL: "http://localhost:3001/",
   // baseURL: process.env.REACT_APP_BASE_API_URL,
   headers: {
     "Content-Type": "application/json",

src/store/middleware/accessTokensMiddleware.js

 // const baseURL = "http://192.168.88.143:3001/"; // DULE
 // const baseURL = "http://192.168.88.175:3005/";
 // const baseURL = "https://trampa-api.dilig.net/";
-// const baseURL = "https://trampa-api-test.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 = "http://localhost:3001/";
 // const baseURL = process.env.REACT_APP_BASE_API_URL
 
 //Interceptor unique name

src/util/helpers/chatHelper.js

+import { NEW_CHAT } from "../../constants/chatConstants";
 import { DIRECT_CHAT_PAGE } from "../../constants/pages";
 import history from "../../store/utils/history";
 import { replaceInRoute } from "./routeHelpers";
     history.push(replaceInRoute(DIRECT_CHAT_PAGE, { chatId: chatItem?._id }));
   } else {
     if (offer?.user?._id !== userId) {
-      history.push(`/messages/newMessage`, {
-        offerId: offer?._id,
+      history.push({
+        pathname: replaceInRoute(DIRECT_CHAT_PAGE, {
+          chatId: NEW_CHAT,
+        }),
+        state: {
+          offerId: offer?._id,
+        },
       });
     }
   }

src/util/helpers/messageHelper.js

+import { NEW_CHAT } from "../../constants/chatConstants";
 import { DIRECT_CHAT_PAGE } from "../../constants/pages";
 import history from "../../store/utils/history";
 import { replaceInRoute } from "./routeHelpers";
     );
   } else {
     if (offer?.offer?.userId !== userId) {
-      history.push(replaceInRoute(DIRECT_CHAT_PAGE, { chatId: "newMessage" }), {
-        offerId: offer?.offer?._id,
+      history.push({
+        pathname: replaceInRoute(DIRECT_CHAT_PAGE, { chatId: NEW_CHAT }),
+        state: {
+          offerId: offer?.offer?._id,
+        },
       });
     }
   }