Fixed feature 628

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

@@ -98,6 +98,7 @@ export const OfferTitle = styled(Typography)`
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
   max-height: 33px;
   margin-bottom: 28px;
   @media (max-width: 550px) {
@@ -109,10 +110,12 @@ export const OfferTitle = styled(Typography)`
       `
       display: flex;
       flex: none;
+      max-height: 44px;
       position: relative;
       line-height: 22px; 
       margin-top: 5px;
       font-size: 18px;
+      margin-bottom: 0px;
 
     `}
   }
@@ -134,8 +137,6 @@ export const OfferAuthorName = styled(Typography)`
       `
         line-height: 19px;
         font-size: 14px;
-        position: absolute;
-        bottom: 125px;
     `}
   }
 `;
@@ -148,9 +149,7 @@ export const OfferLocation = styled(Typography)`
     props.vertical &&
     `
     font-size: 12px;
-    margin-top: 5px;
-    position: absolute;
-    bottom: 105px;
+    margin-top: -17px;
   `}
 `;
 export const OfferDetails = styled(Box)`
@@ -173,8 +172,8 @@ export const OfferCategory = styled(Box)`
   ${(props) =>
     props.vertical &&
     `
-    position: absolute;
-    bottom: 60px;
+    // position: absolute;
+    // bottom: 60px;
   `}
 `;
 export const OfferPackage = styled(Box)`
@@ -303,9 +302,9 @@ export const RemoveIconContainer = styled(MessageIcon)`
 
   @media screen and (max-width: 600px) {
     display: block;
-    position: absolute;
-    left: 59px;
-    top: 325px;
+    position: ${props => props.vertical && "absolute"};
+    top: ${props => props.vertical && "325px"};
+    left: ${props => props.vertical && "59px"};
   }
 `;
 export const RemoveIcon = styled(Remove)``;
@@ -317,8 +316,9 @@ export const EditIconContainer = styled(MessageIcon)`
   @media screen and (max-width: 600px) {
     position: absolute;
     display: block;
-    top: 325px;
-    left: 18px;
+    right: ${props => !props.vertical && "64px"};
+    top: ${props => props.vertical && "325px"};
+    left: ${props => props.vertical && "18px"};
   }
 `;
 export const EditIcon = styled(Edit)``;
@@ -341,6 +341,10 @@ export const LikeIcon = styled(Like)`
         ? selectedTheme.colors.primaryPurpleDisabled
         : selectedTheme.colors.primaryPurple};
   }
+  @media (max-width: 600px) {
+    position: relative;
+    top: -1px;
+  }
 `;
 export const PinIcon = styled(Pin)`
   position: absolute;

src/components/Cards/ProfileCard/ProfileCard.js

@@ -61,10 +61,7 @@ const ProfileCard = () => {
   }, [idProfile]);
 
   useEffect(() => {
-    console.log(userId === idProfile);
-    console.log(idProfile);
-    if (userId === idProfile) setIsMyProfile(true);
-    else setIsMyProfile(false);
+    setIsMyProfile(userId === idProfile);
   }, [userId, idProfile]);
 
   const reFetchProfile = () => {

src/components/Cards/ProfileCard/ProfileCard.styled.js

@@ -44,6 +44,10 @@ export const MessageButton = styled(EditButton)`
   background: ${selectedTheme.colors.primaryPurple};
   width: 40px;
   height: 40px;
+  @media (max-width: 600px) {
+    width: 32px;
+    height: 32px;
+  }
 `;
 
 export const ProfileCardWrapper = styled(Card)`
@@ -247,16 +251,17 @@ export const MessageIcon = styled(Mail)`
   width: 19.5px;
   height: 19.5px;
   position: relative;
-  left: 2.5px;
-  top: 3.5px;
+  left: 1px;
+  top: 3px;
   & path {
     stroke: ${selectedTheme.colors.primaryYellow};
   }
   @media (max-width: 600px) {
-    width: 14px;
-    height: 14px;
-    right: 0.5px;
-  }
+    width: 16px;
+    height: 16px;
+    left: -1px;
+    top: 1px;
+}
 `;
 
 export const ProfileInfoContainer = styled(Grid)`

src/components/ChatColumn/ChatColumn.js

@@ -5,7 +5,6 @@ import {
   HeaderBack,
   HeaderSelect,
   ListContainer,
-  ListHeader,
   SelectOption,
   TitleSortContainer,
 } from "./ChatColumn.styled";
@@ -102,7 +101,6 @@ export const ChatColumn = () => {
           })}
         </HeaderSelect>
       </TitleSortContainer>
-      <ListHeader enableSort={true} />
       <ListContainer>
         {chats.map((item, index) => (
           <ChatCard key={index} chat={item} />

src/components/ChatColumn/ChatColumn.styled.js

@@ -16,7 +16,7 @@ export const ListContainer = styled(Box)`
   gap: 12px;
   @media (max-width: 600px) {
     gap: 18px;
-    margin-top: 20px;
+    margin-top: 10px;
   }
 `;
 

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

@@ -60,6 +60,12 @@ export const PhoneIcon = styled(Phone)`
     position: relative;
     top: 2.5px;
     left: 1.5px;
+    @media (max-width: 600px) {
+        width: 14px;
+        height: 14px;
+        top: -2px;
+        left: -2px;
+    }
 `
 export const PhoneIconContainer = styled(IconButton)`
     background-color: white;
@@ -74,4 +80,8 @@ export const PhoneIconContainer = styled(IconButton)`
         background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
         cursor: pointer;
     }
+    @media (max-width: 600px) {
+        width: 32px;
+        height: 32px;
+    }
 `

src/components/MarketPlace/Header/Header.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import {
+  ButtonContainer,
   CategoryHeaderIcon,
   HeaderAltLocation,
   HeaderButton,
@@ -9,10 +10,12 @@ import {
   HeaderLocation,
   HeaderOptions,
   HeaderSelect,
+  HeaderText,
   IconStyled,
-  MySwapsTitle,
-  RefreshIcon,
+  PageTitleContainer,
   SelectOption,
+  SwapsIcon,
+  SwapsTitle,
 } from "./Header.styled";
 import { ReactComponent as GridSquare } from "../../../assets/images/svg/offer-grid-square.svg";
 import { ReactComponent as GridLine } from "../../../assets/images/svg/offer-grid-line.svg";
@@ -24,6 +27,9 @@ import { Tooltip } from "@mui/material";
 import SkeletonHeader from "./SkeletonHeader/SkeletonHeader";
 import { useSelector } from "react-redux";
 import { selectHeaderString } from "../../../store/selectors/filtersSelectors";
+import useIsMobile from "../../../hooks/useIsMobile";
+import { ArrowButton } from "../../Buttons/ArrowButton/ArrowButton";
+import history from "../../../store/utils/history";
 
 const DownArrow = (props) => (
   <IconStyled {...props}>
@@ -35,6 +41,7 @@ const Header = (props) => {
   const { t } = useTranslation();
   const sorting = props.sorting;
   const headerString = useSelector(selectHeaderString);
+  const { isMobile } = useIsMobile();
   // Changing header string on refresh or on load
 
   const showAltString = useMemo(() => {
@@ -46,21 +53,15 @@ const Header = (props) => {
   }, [sorting.selectedSortOption]);
 
   const handleChangeSelect = (event) => {
-    // let chosenOption;
     sorting.changeSorting(event.target.value);
-    // for (const sortOption in sortEnum) {
-    //   if (sortEnum[sortOption].value === event.target.value) {
-    //     chosenOption = sortEnum[sortOption];
-    //     sorting.changeSorting(chosenOption);
-    //   }
-    // }
+  };
+  const goBack = () => {
+    history.goBack();
   };
 
   return (
     <>
-      <SkeletonHeader
-        skeleton={props.skeleton}
-      />
+      <SkeletonHeader skeleton={props.skeleton} />
       <HeaderContainer skeleton={props.skeleton}>
         {/* Setting appropriate header title if page is market place or my offers */}
         <Tooltip title={headerString}>
@@ -76,9 +77,10 @@ const Header = (props) => {
                 )}
               </>
             ) : (
-              <MySwapsTitle>
-                <RefreshIcon /> {t("header.myOffers")}
-              </MySwapsTitle>
+              <ButtonContainer onClick={goBack}>
+                <ArrowButton side={"left"}></ArrowButton>
+                <HeaderText>{t("profile.backToHome")}</HeaderText>
+              </ButtonContainer>
             )}
           </>
         </Tooltip>
@@ -122,9 +124,10 @@ const Header = (props) => {
             }
             IconComponent={DownArrow}
             onChange={handleChangeSelect}
+            myOffers={props.myOffers}
           >
             <SelectOption style={{ display: "none" }} value="default">
-             {t("reviews.sortBy")}
+              {t("reviews.sortBy")}
             </SelectOption>
             {Object.keys(sortEnum).map((property) => {
               if (sortEnum[property].value === 0) return;
@@ -141,6 +144,14 @@ const Header = (props) => {
           {/* ^^^^^^ */}
         </HeaderOptions>
       </HeaderContainer>
+      {isMobile && (
+        <PageTitleContainer>
+          <SwapsIcon />
+          <SwapsTitle>
+            {props.myOffers ? t("header.myOffers") : t("offer.offers")}
+          </SwapsTitle>
+        </PageTitleContainer>
+      )}
     </>
   );
 };

src/components/MarketPlace/Header/Header.styled.js

@@ -1,4 +1,4 @@
-import { Box, MenuItem, Typography } from "@mui/material";
+import { Box, Link, MenuItem, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
 import { IconButton } from "../../Buttons/IconButton/IconButton";
@@ -9,7 +9,7 @@ import { ReactComponent as CategoryHeader } from "../../../assets/images/svg/cat
 
 export const HeaderContainer = styled(Box)`
   margin-top: 20px;
-  display: ${props => props.skeleton ? "none" : "flex"};
+  display: ${(props) => (props.skeleton ? "none" : "flex")};
   justify-content: space-between;
   align-items: center;
 `;
@@ -32,7 +32,7 @@ export const HeaderLocation = styled(Box)`
     }
   }
   @media (max-width: 600px) {
-    font-size: 14px;
+    font-size: 12px;
     padding-top: 3px;
   }
 `;
@@ -65,6 +65,8 @@ export const HeaderSelect = styled(Select)`
     width: 144px;
     height: 30px;
     font-size: 14px;
+    top: 60px;
+    left: ${props => props.myOffers ? "-7px" : "0"};
   }
 `;
 export const SelectItem = styled(MenuItem)`
@@ -115,4 +117,47 @@ export const MySwapsTitle = styled(Typography)`
   left: 9px;
 `;
 export const CategoryHeaderIcon = styled(CategoryHeader)`
-`
+  @media (max-width: 600px) {
+    width: 12px;
+    height: 12px;
+    position: relative;
+    top: 1px;
+  }
+`;
+export const PageTitleContainer = styled(Box)`
+  position: relative;
+  left: 6px;
+  margin-top: 36px;
+  width: 100px;
+`;
+export const SwapsIcon = styled(RefreshIcon)`
+  width: 12px;
+  height: 12px;
+  top: 1px;
+`;
+export const SwapsTitle = styled(Typography)`
+  font-family: ${selectedTheme.fonts.textFont};
+  font-size: 12px;
+  line-height: 16px;
+  color: ${selectedTheme.colors.primaryText};
+`;
+export const ButtonContainer = styled(Link)`
+  width: fit-content;
+  cursor: pointer;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: 12px;
+  text-decoration: none;
+  min-width: 200px;
+`;
+export const HeaderText = styled(Typography)`
+  font-family: ${selectedTheme.fonts.textFont};
+  line-height: 22px;
+  font-size: 16px;
+  color: ${selectedTheme.colors.primaryPurple};
+  border-bottom: 1px dotted ${selectedTheme.colors.primaryPurple};
+  @media (max-width: 600px) {
+    font-size: 14px;
+  }
+`;

src/components/MarketPlace/MarketPlace.styled.js

@@ -6,5 +6,7 @@ export const MarketPlaceContainer = styled(Box)`
   margin: 0 70px;
   @media (max-width: 550px) {
     margin: -30px 1.8rem;
+    margin-left: 18px;
+    margin-right: 18px;
   }
 `;

src/components/MarketPlace/Offers/HeaderMyOffers.js/HeadersMyOffers.styled.js

@@ -9,7 +9,7 @@ export const HeadersMyOffersContainer = styled(Box)``;
 export const EndIcon = styled(Icon)``;
 export const SearchIcon = styled(Search)`
   position: relative;
-  top: 11px;
+  top: 10px;
   left: 4px;
   cursor: pointer;
   color: ${selectedTheme.colors.primaryPurple};
@@ -25,11 +25,17 @@ export const SearchIcon = styled(Search)`
 `;
 export const SearchInput = styled(TextField)`
   & div {
-    height: 40px;
+    height: 46px;
     background-color: white;
   }
+  & div div input::placeholder {
+    font-style: italic;
+    font-size: 14px;
+    position: relative;
+    top: -2px;
+  }
   @media (max-width: 600px) {
-    width: 90%;
+    width: 100%;
     height: 36px;
   }
 `;

src/components/MarketPlace/Offers/Offers.js

@@ -28,15 +28,15 @@ const Offers = (props) => {
 
   return (
     <>
-      <FilterContainer
-        onClick={toggleFilters}
-        number={offers.filters.numOfFiltersChosen}
-        myOffers={props.myOffers}
-      >
-        <FilterIcon />
-      </FilterContainer>
       {!props.skeleton ? (
         <>
+          <FilterContainer
+            onClick={toggleFilters}
+            number={offers.filters.numOfFiltersChosen}
+            myOffers={props.myOffers}
+          >
+            <FilterIcon />
+          </FilterContainer>
           {props.myOffers && (
             <HeadersMyOffers
               searchMyOffers={offers.search.searchOffers}
@@ -70,10 +70,7 @@ const Offers = (props) => {
       ) : (
         <>
           {arrayForMapping.map((item, index) => (
-            <SkeletonOfferCard
-              key={index}
-              skeleton
-            />
+            <SkeletonOfferCard key={index} skeleton />
           ))}
         </>
       )}

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

@@ -16,8 +16,8 @@ export const OffersContainer = styled(Box)`
 `;
 export const FilterContainer = styled(IconWithNumber)`
   position: absolute;
-  top: ${props => props.myOffers ? "143px" : "93px"};
-  right: 18px;
+  top: 93px;
+  right: 24px;
   cursor: pointer;
   background-color: ${selectedTheme.colors.primaryBackgroundColor} !important;
   & div {

src/components/Profile/Profile.js

@@ -22,13 +22,7 @@ const Profile = () => {
     }
   }, [idProfile]);
   const isMyProfile = useMemo(() => {
-    console.log(routeMatch.params.idProfile === userId);
-    console.log(userId);
-    console.log("rerender");
-    if (userId === routeMatch.params.idProfile) {
-      return true;
-    }
-    return false;
+    return userId === routeMatch.params.idProfile;
   }, [userId, routeMatch]);
   return (
     <ProfileContainer>

src/components/Profile/ProfileOffers/ProfileOffers.styled.js

@@ -20,9 +20,11 @@ export const OffersContainer = styled(Box)`
 `;
 export const OffersScroller = styled(HorizontalScroller)`
   height: 373px;
+  width: 100%;
   margin-left: 0;
   & div {
     margin-left: 0;
     margin-right: 0;
+    gap: 18px;
   }
 `;

src/i18n/resources/rs.js

@@ -173,6 +173,7 @@ export default {
     product: "Proizvod",
     descriptionLabel: "Opis:",
     checkButtonLabel: "Pogledaj proizvod",
+    offers: "Objave"
   },
   apiErrors: {
     somethingWentWrong: "Greška sa serverom!",

src/layouts/ItemDetailsLayout/ItemDetailsLayout.styled.js

@@ -16,7 +16,7 @@ export const ItemDetailsLayoutContainer = styled(Container)`
   }
   @media (max-width: 600px) {
     padding-left: 18px;
-    padding-right: ${(props) => (props.profile ? 0 : "18px")};
+    padding-right: 18px;
   }
 `;