Finished responsive offer

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;
+    top: 325px;
+    left: 18px;
   }
 `;
 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;
+    left: 59px;
+    top: 325px;
   }
 `;
 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/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 Refresh } from "../../../assets/images/svg/refresh.svg";
 import { TextField } from "../../TextFields/TextField/TextField";
 import { Icon } from "../../Icon/Icon";
 import Select from "../../Select/Select";
@@ -31,39 +31,39 @@ export const HeaderTitle = styled(Typography)`
   }
 `;
 export const OffersIcon = styled(Refresh)`
-    width: 18px;
-    height: 18px;
-    & path {
-        stroke: ${selectedTheme.primaryDarkTextThird};
-    }
-    @media (max-width: 600px) {
-      width: 12px;
-      height: 12px;
-    }
-`
+  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;
@@ -91,16 +91,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/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.styled.js

@@ -12,9 +12,9 @@ export const ReviewsBox = styled(Box)`
       ? props.numOfReviews * 185 + 82 + "px"
       : `calc(100% - 90px)`}; */
   /* max-height: 100vh; */
-  @media (max-width: 1200px) {
+  /* @media (max-width: 1200px) {
     padding: 0 50px;
-  }
+  } */
   @media (max-width: 600px) {
     position: relative;
     top: -45px;

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%;