Finished bug 591

src/components/Cards/CreateOfferCard/ThirdPart/ThirdPartCreateOffer.styled.js

@@ -5,8 +5,6 @@ import ItemDetailsCard from "../../ItemDetailsCard/ItemDetailsCard";
 export const CreateOfferFormContainer = styled(Box)`
   padding-top: 20px;
   margin-top: 20px;
-  width:100%;
+  width: 380px;
 `;
-export const PreviewCard = styled(ItemDetailsCard)`
-
-`
+export const PreviewCard = styled(ItemDetailsCard)``;

src/components/Cards/ItemDetailsCard/ItemDetailsCard.styled.js

@@ -34,6 +34,11 @@ export const ItemDetailsCardContainer = styled(Container)`
     margin: 18px 0;
     padding: 10px;
     padding-bottom: 65px;
+    height: 656px;
+  }
+
+  @media screen and (max-width: 1200px) {
+    margin-left: 0;
   }
 `;
 export const OfferInfo = styled(Box)`
@@ -45,6 +50,7 @@ export const OfferInfo = styled(Box)`
   margin: 18px 0;
   @media (max-width: 600px) {
     margin: 0;
+    flex: 0;
   }
 `;
 export const ButtonsContainer = styled(Box)`
@@ -146,6 +152,9 @@ export const PostDate = styled(Typography)`
     flex-direction: column;
     align-items: start;
   }
+  @media screen and (min-width: 600px) and (max-width: 1200px) {
+    display: none;
+  }
 `;
 export const Info = styled(Box)`
   display: flex;
@@ -262,7 +271,10 @@ export const CheckButton = styled(PrimaryButton)`
   font-weight: 600;
   &:hover button {
     color: white !important;
-    background-color: ${props => !props.disabled ? selectedTheme.primaryPurple : selectedTheme.primaryPurpleDisabled} !important;
+    background-color: ${(props) =>
+      !props.disabled
+        ? selectedTheme.primaryPurple
+        : selectedTheme.primaryPurpleDisabled} !important;
   }
   @media (max-width: 600px) {
     height: 44px;

src/components/Cards/ItemDetailsCard/OfferDetails/OfferDetails.js

@@ -10,14 +10,17 @@ import {
   ScrollerHorizontal,
   ScrollerVertical,
   OfferInfoContainer,
+  DesciprtionPostDate,
 } from "./OfferDetails.styled";
 import { useTranslation } from "react-i18next";
 import useScreenDimensions from "../../../../hooks/useScreenDimensions";
+import { formatDateLocale } from "../../../../util/helpers/dateHelpers";
 
 const OfferDetails = (props) => {
   const offer = props.offer;
   const { t } = useTranslation();
   const dimension = useScreenDimensions();
+  const date = formatDateLocale(new Date(offer?.offer?._created));
   return (
     <Details
       hasScrollBar={!props.showPublishButton}
@@ -37,7 +40,7 @@ const OfferDetails = (props) => {
           })}
         </ScrollerVertical>
       )}
-      <OfferInfoContainer>
+      <OfferInfoContainer singleOffer={props.singleOffer}>
         <OfferTitle singleOffer={props.singleOffer}>
           {offer?.offer?.name}
         </OfferTitle>
@@ -48,6 +51,7 @@ const OfferDetails = (props) => {
           <OfferDescriptionText showBarterButton={props.showExchangeButton}>
             {offer?.offer?.description}
           </OfferDescriptionText>
+          <DesciprtionPostDate>{date}</DesciprtionPostDate>
         </OfferLittleDetails>
       </OfferInfoContainer>
     </Details>

src/components/Cards/ItemDetailsCard/OfferDetails/OfferDetails.styled.js

@@ -55,14 +55,14 @@ export const OfferLittleDetails = styled(Box)`
   ${(props) =>
     !props.singleOffer &&
     `
-    position: absolute;
-    bottom: 45px;
+    position: relative;
+    top: 180px;
+    height: 0;
   `}
   @media (max-width: 600px) {
     padding: 0 8px;
     position: absolute;
     top: 270px;
-    left: 18px;
     justify-content: start;
   }
 `;
@@ -84,7 +84,11 @@ export const ScrollerVertical = styled(VerticalScroller)`
     margin: 0 9px;
   } */
 `;
-export const OfferInfoContainer = styled(Box)``;
+export const OfferInfoContainer = styled(Box)`
+  @media screen and (min-width: 600px) and (max-width: 1200px) {
+    ${(props) => props.singleOffer && `flex: 2`};
+  }
+`;
 export const OfferDescriptionTitle = styled(Box)`
   font-family: "Open Sans";
   font-size: 12px;
@@ -100,13 +104,13 @@ export const OfferDescriptionText = styled(Box)`
   font-size: 16px;
   color: ${selectedTheme.primaryDarkText};
   line-height: 22px;
-  padding-bottom: 20px;
-  max-width: ${(props) =>
-    props.showBarterButton ? "calc(100% - 230px)" : "100%"};
+  /* padding-bottom: 20px; */
+  max-width: 100%;
+  /* max-width: ${(props) =>
+    props.showBarterButton ? "calc(100% - 230px)" : "100%"}; */
   @media (max-width: 600px) {
     font-size: 14px;
     max-width: 100%;
-    max-height: 100px;
   }
   /* max-width: calc(100% - 230px); */
   /* overflow: hidden; */
@@ -114,6 +118,23 @@ export const OfferDescriptionText = styled(Box)`
   -webkit-line-clamp: 5;
   -webkit-box-orient: vertical; */
 `;
+export const DesciprtionPostDate = styled(Typography)`
+  display: none;
+  font-family: "Open Sans";
+  font-size: 12px;
+  color: ${selectedTheme.primaryText};
+  &::before {
+    content: "Objavljeno: ";
+    @media (max-width: 600px) {
+      font-size: 9px;
+      font-family: "Open Sans";
+    }
+  }
+  @media screen and (min-width: 600px) and (max-width: 1200px) {
+    display: block;
+    align-self: flex-end;
+  }
+`;
 export const OfferImage = styled.img`
   min-width: 144px;
   min-height: 144px;

src/components/Cards/OfferCard/OfferCard.js

@@ -104,12 +104,12 @@ const OfferCard = (props) => {
             ></OfferImage>
           </OfferImageContainer>
           <OfferInfo vertical={props.vertical}>
-              <OfferTitle
-                vertical={props.vertical}
-                onClick={() => routeToItem(props?.offer?._id)}
-              >
-                {props?.offer?.name}
-              </OfferTitle>
+            <OfferTitle
+              vertical={props.vertical}
+              onClick={() => routeToItem(props?.offer?._id)}
+            >
+              {props?.offer?.name}
+            </OfferTitle>
             <OfferAuthor>
               <OfferAuthorName vertical={props.vertical}>
                 {props?.offer?.user?.company?.name}

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

@@ -35,7 +35,7 @@ export const OfferCardContainer = styled(Container)`
     ${(props) =>
       props.vertical &&
       `
-      height: 330px;
+      height: 373px;
       width: 180px;
       margin: 0 18px;
     `}
@@ -134,7 +134,7 @@ export const OfferAuthorName = styled(Typography)`
         line-height: 19px;
         font-size: 14px;
         position: absolute;
-        bottom: 80px;
+        bottom: 125px;
     `}
   }
 `;
@@ -149,7 +149,7 @@ export const OfferLocation = styled(Typography)`
     font-size: 12px;
     margin-top: 5px;
     position: absolute;
-    bottom: 61px;
+    bottom: 105px;
   `}
 `;
 export const OfferDetails = styled(Box)`
@@ -173,7 +173,7 @@ export const OfferCategory = styled(Box)`
     props.vertical &&
     `
     position: absolute;
-    bottom: 15px;
+    bottom: 60px;
   `}
 `;
 export const OfferPackage = styled(Box)`
@@ -343,10 +343,10 @@ export const RemoveIconContainer = styled(MessageIcon)`
   right: 18px;
 
   @media screen and (max-width: 600px) {
-    position: absolute;
     display: block;
-    right: 16px;
-    top: 16px;
+    position: absolute;
+    left: 59px;
+    top: 325px;
   }
 `;
 export const RemoveIcon = styled(Remove)``;
@@ -358,8 +358,8 @@ export const EditIconContainer = styled(MessageIcon)`
   @media screen and (max-width: 600px) {
     position: absolute;
     display: block;
-    right: 55px;
-    top: 16px;
+    top: 325px;
+    left: 18px;
   }
 `;
 export const EditIcon = styled(Edit)``;

src/components/ItemDetails/ItemDetails.styled.js

@@ -17,6 +17,9 @@ export const OfferIconContainer = styled(Box)`
       width: 14px;
     }
   }
+  @media screen and (max-width: 1200px) {
+    margin-left: 0;
+  }
 `;
 
 export const OfferIconText = styled(Typography)`

src/components/Profile/Header/Header.js

@@ -0,0 +1,43 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useHistory } from "react-router-dom";
+import { HeaderContainer, HeaderText, ButtonContainer } from "./Header.styled";
+import { ArrowButton } from "../../Buttons/ArrowButton/ArrowButton";
+import { useTranslation } from "react-i18next";
+import { HOME_PAGE } from "../../../constants/pages";
+
+const Header = (props) => {
+  const history = useHistory();
+  const { t } = useTranslation();
+
+  const handleBackButton = () => {
+    history.push(HOME_PAGE);
+  };
+
+  return (
+    <HeaderContainer
+      onClick={handleBackButton}
+      component="header"
+      className={props.className}
+    >
+      <ButtonContainer>
+        <ArrowButton side={"left"}></ArrowButton>
+        <HeaderText>{t("profile.backToHome")}</HeaderText>
+      </ButtonContainer>
+    </HeaderContainer>
+  );
+};
+
+Header.propTypes = {
+  children: PropTypes.node,
+  setIsGrid: PropTypes.func,
+  isGrid: PropTypes.bool,
+  filters: PropTypes.array,
+  category: PropTypes.string,
+  className: PropTypes.string,
+};
+Header.defaultProps = {
+  isGrid: false,
+};
+
+export default Header;

src/components/Profile/Header/Header.styled.js

@@ -0,0 +1,26 @@
+import { Box, Link, Typography } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../themes";
+
+export const HeaderContainer = styled(Box)`
+  margin-top: 20px;
+
+  @media (max-width: 600px) {
+    margin-top: 40px;
+  }
+`;
+export const ButtonContainer = styled(Link)`
+  width: fit-content;
+  cursor: pointer;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: 12px;
+`;
+export const HeaderText = styled(Typography)`
+  font-family: "Open Sans";
+  line-height: 22px;
+  font-size: 16px;
+  color: ${selectedTheme.primaryPurple};
+  text-decoration: underline;
+`;

src/components/Profile/Profile.js

@@ -1,13 +1,14 @@
-import React, { useEffect, useMemo } from 'react'
-import PropTypes from 'prop-types'
-import { ProfileContainer } from './Profile.styled'
-import ProfileCard from '../ProfileCard/ProfileCard'
-import ProfileOffers from './ProfileOffers/ProfileOffers'
-import { useDispatch, useSelector } from 'react-redux'
-import { selectUserId } from '../../store/selectors/loginSelectors'
-import { useRouteMatch } from 'react-router-dom'
-import { fetchProfile } from '../../store/actions/profile/profileActions'
-import { fetchProfileOffers } from '../../store/actions/offers/offersActions'
+import React, { useEffect, useMemo } from "react";
+import PropTypes from "prop-types";
+import { ProfileContainer } from "./Profile.styled";
+import ProfileCard from "../ProfileCard/ProfileCard";
+import ProfileOffers from "./ProfileOffers/ProfileOffers";
+import { useDispatch, useSelector } from "react-redux";
+import { selectUserId } from "../../store/selectors/loginSelectors";
+import { useRouteMatch } from "react-router-dom";
+import { fetchProfile } from "../../store/actions/profile/profileActions";
+import { fetchProfileOffers } from "../../store/actions/offers/offersActions";
+import Header from "./Header/Header";
 
 const Profile = () => {
   const userId = useSelector(selectUserId);
@@ -17,7 +18,7 @@ const Profile = () => {
   useEffect(() => {
     if (idProfile?.length > 0) {
       dispatch(fetchProfile(idProfile));
-      dispatch(fetchProfileOffers(idProfile))
+      dispatch(fetchProfileOffers(idProfile));
     }
   }, [idProfile]);
   const isMyProfile = useMemo(() => {
@@ -25,17 +26,18 @@ const Profile = () => {
       return true;
     }
     return false;
-  }, [userId, idProfile])
+  }, [userId, idProfile]);
   return (
     <ProfileContainer>
-        <ProfileCard isMyProfile={isMyProfile}/>
-        <ProfileOffers isMyProfile={isMyProfile}/>
+      <Header />
+      <ProfileCard isMyProfile={isMyProfile} />
+      <ProfileOffers isMyProfile={isMyProfile} />
     </ProfileContainer>
-  )
-}
+  );
+};
 
 Profile.propTypes = {
-    children: PropTypes.node,
-}
+  children: PropTypes.node,
+};
 
-export default Profile
+export default Profile;

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

@@ -1,8 +1,8 @@
 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import {ReactComponent as Search} from "../../../assets/images/svg/magnifying-glass.svg"
-import {ReactComponent as Refresh} from "../../../assets/images/svg/refresh.svg"
+import { ReactComponent as Search } from "../../../assets/images/svg/magnifying-glass.svg";
+import { ReactComponent as Package } from "../../../assets/images/svg/package-gray.svg";
 import { TextField } from "../../TextFields/TextField/TextField";
 import { Icon } from "../../Icon/Icon";
 import Select from "../../Select/Select";
@@ -16,6 +16,9 @@ export const ProfileOffersContainer = styled(Box)`
   padding: 0 50px;
   margin-top: 34px;
   position: relative;
+  @media (max-width: 1200px) {
+    padding: 0 36px 0 0;
+  }
   @media (max-width: 600px) {
     padding: 0;
   }
@@ -30,40 +33,40 @@ export const HeaderTitle = styled(Typography)`
     font-size: 12px;
   }
 `;
-export const OffersIcon = styled(Refresh)`
-    width: 18px;
-    height: 18px;
-    & path {
-        stroke: ${selectedTheme.primaryDarkTextThird};
-    }
-    @media (max-width: 600px) {
-      width: 12px;
-      height: 12px;
-    }
-`
+export const OffersIcon = styled(Package)`
+  width: 18px;
+  height: 18px;
+  & path {
+    stroke: ${selectedTheme.primaryDarkTextThird};
+  }
+  @media (max-width: 600px) {
+    width: 12px;
+    height: 12px;
+  }
+`;
 export const SearchInput = styled(TextField)`
-    position: relative;
-    top: 15px;
-    & div fieldset {
-        border-color: ${selectedTheme.primaryPurple} !important;
-    }
-    @media (max-width: 600px) {
-      top: 5px;
-      height: 46px;
-      & div {
-        background-color: white;
-      }
+  position: relative;
+  top: 15px;
+  & div fieldset {
+    border-color: ${selectedTheme.primaryPurple} !important;
+  }
+  @media (max-width: 600px) {
+    top: 5px;
+    height: 46px;
+    & div {
+      background-color: white;
     }
-`
+  }
+`;
 export const SearchIcon = styled(Search)`
-    width: 18px;
-    height: 18px;
-`
+  width: 18px;
+  height: 18px;
+`;
 export const IconContainer = styled(Icon)`
-    cursor: pointer;
-    position: relative;
-    top: 4px;
-`
+  cursor: pointer;
+  position: relative;
+  top: 4px;
+`;
 export const HeaderSelect = styled(Select)`
   width: 210px;
   height: 35px;
@@ -77,6 +80,10 @@ export const HeaderSelect = styled(Select)`
     padding-left: 8px;
   }
 
+  @media (max-width: 1200px) {
+    right: 36px;
+  }
+
   @media (max-width: 650px) {
     width: 144px;
     height: 30px;
@@ -91,16 +98,15 @@ export const SelectOption = styled(Option)`
     margin: 2px;
   }
 `;
-export const DownArrow = styled(Down)`
-`
+export const DownArrow = styled(Down)``;
 export const OffersContainer = styled(Box)`
-    margin-top: 30px;
-`
+  margin-top: 30px;
+`;
 export const OffersScroller = styled(HorizontalScroller)`
-  height: 330px;
+  height: 373px;
   margin-left: 0;
   & div {
     margin-left: 0;
     margin-right: 0;
   }
-`
+`;

src/components/ProfileCard/ProfileCard.styled.js

@@ -13,6 +13,10 @@ export const ProfileCardContainer = styled(Box)`
   box-sizing: border-box;
   padding: 0 50px;
   margin-top: 34px;
+
+  @media (max-width: 1200px) {
+    padding: 0 36px 0 0;
+  }
   @media (max-width: 600px) {
     padding: 0;
   }

src/components/Scroller/VerticalScroller.styled.js

@@ -14,6 +14,10 @@ export const VerticalScrollerContainer = styled(Box)`
   padding-right: 5px;
   height: 594px;
 
+  @media screen and (max-width: 1200px) {
+    height: 465px;
+  }
+
   @media screen and (max-width: 600px) {
     width: 100%;
   }

src/components/UserReviews/UserReviews.js

@@ -46,6 +46,7 @@ const UserReviews = (props) => {
 
   return (
     <ReviewsBox
+      profile={props.isProfileReviews}
       className={props.className}
       numOfReviews={lastThreeReviews?.length}
     >

src/components/UserReviews/UserReviews.styled.js

@@ -13,9 +13,10 @@ export const ReviewsBox = styled(Box)`
       : `calc(100% - 90px)`}; */
   /* max-height: 100vh; */
   min-width: 320px;
-  @media (max-width: 1200px) {
+  /* @media (max-width: 1200px) {
     padding: 0 50px;
-  }
+  } */
+  margin-top: ${props => props.profile ? "60px" : "0"};
   @media (max-width: 600px) {
     position: relative;
     top: -45px;

src/i18n/resources/rs.js

@@ -259,6 +259,7 @@ export default {
       mainText: "Objave nisu pronađene",
       altText: "Nažalost nemate ni jednu objavu",
     },
+    backToHome: "Nazad na sve objave",
   },
   about: {
     header: {

src/layouts/ItemDetailsLayout/ItemDetailsLayout.styled.js

@@ -12,7 +12,7 @@ export const ItemDetailsLayoutContainer = styled(Container)`
   /* flex: 1; */
   height: 100%;
   @media (max-width: 1200px) {
-    padding-right: 60px;
+    padding-right: 36px;
   }
   @media (max-width: 600px) {
     padding-left: 18px;
@@ -40,6 +40,10 @@ export const RightCard = styled(Grid)`
     border-top-right-radius: 4px;
     ${(props) => props.singleOffer && `width: 100%`}
   }
+
+  @media screen and (max-width: 1200px) {
+    margin-left: 0;
+  }
 `;
 export const Content = styled(Grid)`
   width: 100%;