Finished feature 608

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "2.0.4",
+  "version": "3.0.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/components/Buttons/ArrowButton/ArrowButton.styled.js

@@ -20,7 +20,7 @@ export const ArrowIcon = styled(DownArrow)`
   }
 `;
 export const ArrowContainer = styled(IconButton)`
-  border: 1px solid ${selectedTheme.colors.primaryPurple};
+  border: 1px solid ${selectedTheme.colors.primaryPurple} !important;
   border-radius: 100%;
   min-width: 40px;
   width: 40px;

src/components/Cards/CreateOfferCard/CreateOffer.styled.js

@@ -12,10 +12,12 @@ export const ModalCreateOfferContainer = styled(Box)`
   top: ${(props) =>
     props.currentStep === 1 ? "calc(50% - 400px);" : "calc(50% - 350px);"};
   left: ${(props) =>
-    props.currentStep !== 3 ? "calc(50% - 310px);" : "calc(50% - 420px);"};
+    props.currentStep !== 3 ? "calc(50% - 310px);" : "calc(50% - 405px);"};
   z-index: 150;
-  padding: ${(props) => (props.currentStep !== 3 ? "0 120px" : "0 130px")};
+  padding: ${(props) => (props.currentStep !== 3 ? "0 120px" : "0 36px")};
   overflow-y: auto;
+  overflow-x: hidden;
+  ${(props) => props.currentStep === 3 && `height: 712px;`}
   &::-webkit-scrollbar {
     width: 5px;
   }
@@ -33,6 +35,14 @@ export const ModalCreateOfferContainer = styled(Box)`
       props.currentStep === 1 ? "calc(50% - 340px)" : "calc(50% - 340px)"};
   }
 
+  @media (max-width: 810px) {
+    left: ${(props) =>
+      props.currentStep === 3 &&
+      `
+      calc(50% - 336px);
+      `};
+  }
+
   @media screen and (max-width: 628px) {
     height: 100vh;
     max-height: 100vh;
@@ -81,10 +91,18 @@ export const BackIcon = styled(Box)`
 export const CreateOfferContainer = styled(Container)`
   margin-top: 0px;
   display: flex;
-  width: ${(props) => (props.currentStep === 3 ? "580px" : "380px")};
+  width: ${(props) => (props.currentStep === 3 ? "739px" : "380px")};
   flex-direction: column;
   align-items: center;
 
+  @media (max-width: 810px) {
+    ${(props) =>
+      props.currentStep === 3 &&
+      `
+        width: 600px;
+    `}
+  }
+
   @media screen and (max-width: 600px) {
     width: 95%;
   }

src/components/Cards/CreateOfferCard/FirstPart/FirstPartCreateOffer.styled.js

@@ -88,6 +88,17 @@ export const NextButton = styled(PrimaryButton)`
   }
 
   @media screen and (max-width: 600px) {
+    position: absolute;
+    bottom: 18px;
+    height: 44px;
+    /* width: calc(100% - 18px); */
+    width: 339px;
+    /* left: 18px; */
+    & button {
+      height: 44px;
+    }
+  }
+  @media screen and (max-width: 400px) {
     position: absolute;
     bottom: 18px;
     height: 44px;
@@ -102,4 +113,4 @@ export const SelectOption = styled(Option)`
   height: 40px !important;
   min-height: 40px;
   max-height: 40px;
-`
+`;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { PreviewCard } from "./ThirdPartCreateOffer.styled";
-import { NextButton } from "../FirstPart/FirstPartCreateOffer.styled";
+import { PreviewCard, PublishButton } from "./ThirdPartCreateOffer.styled";
+// import { NextButton } from "../FirstPart/FirstPartCreateOffer.styled";
 import selectedTheme from "../../../../themes";
 import { CreateOfferFormContainer } from "../CreateOffer.styled";
 import { useTranslation } from "react-i18next";
@@ -40,19 +40,20 @@ const ThirdPartCreateOffer = (props) => {
           showExchangeButton={false}
           createOffer
           hideViews
+          singleOffer
+          previewCard
         />
       </CreateOfferFormContainer>
-      <NextButton
+      <PublishButton
         type="submit"
         variant="contained"
         height="48px"
         buttoncolor={selectedTheme.colors.primaryPurple}
         textcolor="white"
-        fullWidth
         onClick={handleSubmit}
       >
         {t("offer.publish")}
-      </NextButton>
+      </PublishButton>
     </>
   );
 };

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

@@ -1,5 +1,6 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
+import { PrimaryButton } from "../../../Buttons/PrimaryButton/PrimaryButton";
 import ItemDetailsCard from "../../ItemDetailsCard/ItemDetailsCard";
 
 export const CreateOfferFormContainer = styled(Box)`
@@ -7,4 +8,19 @@ export const CreateOfferFormContainer = styled(Box)`
   margin-top: 20px;
   width: 380px;
 `;
-export const PreviewCard = styled(ItemDetailsCard)``;
+export const PreviewCard = styled(ItemDetailsCard)`
+  width: auto;
+`;
+export const PublishButton = styled(PrimaryButton)`
+  width: 332px;
+  margin-top: 16px;
+  /* position: absolute;
+  bottom: 12px; */
+
+  @media (max-width: 600px) {
+    width: 339px;
+    height: 44px;
+    position: absolute;
+    bottom: 18px;
+  }
+`;

src/components/Cards/ItemDetailsCard/ItemDetailsCard.js

@@ -24,7 +24,10 @@ import { selectLatestChats } from "../../../store/selectors/chatSelectors";
 import { increaseCounter } from "../../../store/actions/counter/counterActions";
 import _ from "lodash";
 import { selectUserId } from "../../../store/selectors/loginSelectors";
-import { formatDateLocale, formatDateTimeLocale } from "../../../util/helpers/dateHelpers";
+import {
+  formatDateLocale,
+  formatDateTimeLocale,
+} from "../../../util/helpers/dateHelpers";
 import { startChat } from "../../../util/helpers/chatHelper";
 import Information from "./Information/Information";
 import { useTranslation } from "react-i18next";
@@ -43,16 +46,19 @@ const ItemDetailsCard = (props) => {
   const userId = useSelector(selectUserId);
   const { t } = useTranslation();
   const dispatch = useDispatch();
-  console.log(props.offer)
+  console.log(props.offer);
   console.log(formatDateTimeLocale(new Date()));
   const offer = useMemo(() => {
     if (props.offer) {
-      if (props.offer.offer._id === routeMatch.params.idProizvod) {
+      if (
+        props.offer.offer._id === routeMatch.params.idProizvod ||
+        props.createOffer
+      ) {
         return props.offer;
       }
     }
-    return itemDetailsData
-  }, [props.offer])
+    return itemDetailsData;
+  }, [props.offer, props.createOffer, routeMatch.params]);
 
   const increaseOfferCounter = useMemo(() => {
     return _.once(function (id) {
@@ -79,7 +85,7 @@ const ItemDetailsCard = (props) => {
   const closeRemoveModalHandler = () => {
     setShowModalRemove(false);
   };
-
+  console.log(props.previewCard);
   return (
     <>
       <ItemDetailsCardContainer
@@ -87,8 +93,9 @@ const ItemDetailsCard = (props) => {
         halfwidth={props.halfwidth ? 1 : 0}
         className={props.className}
         singleOffer={props.singleOffer}
+        previewCard={props.previewCard}
       >
-        <OfferInfo>
+        <OfferInfo previewCard={props.previewCard}>
           <Info>
             <Information
               icon={<CategoryIcon />}
@@ -107,7 +114,7 @@ const ItemDetailsCard = (props) => {
               value={offer?.offer?.views?.count}
             />
           </Info>
-          <PostDate>{date}</PostDate>
+          <PostDate previewCard={props.previewCard}>{date}</PostDate>
         </OfferInfo>
         <OfferDetails
           offer={offer}
@@ -115,6 +122,7 @@ const ItemDetailsCard = (props) => {
           showExchangeButton={props.showExchangeButton}
           showPublishButton={props.showPublishButton}
           singleOffer={props.singleOffer}
+          previewCard={props.previewCard}
         />
         <DateButtonsContainer>
           {props.isMyOffer && (
@@ -134,7 +142,9 @@ const ItemDetailsCard = (props) => {
           <CheckButton
             variant={props.sponsored ? "contained" : "outlined"}
             buttoncolor={selectedTheme.colors.primaryPurple}
-            textcolor={props.sponsored ? "white" : selectedTheme.colors.primaryPurple}
+            textcolor={
+              props.sponsored ? "white" : selectedTheme.colors.primaryPurple
+            }
             onClick={startExchange}
             disabled={props.isMyOffer}
           >
@@ -170,6 +180,7 @@ ItemDetailsCard.propTypes = {
   className: PropTypes.string,
   singleOffer: PropTypes.bool,
   isMyOffer: PropTypes.bool,
+  previewCard: PropTypes.bool,
   createOffer: PropTypes.bool,
 };
 ItemDetailsCard.defaultProps = {

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

@@ -15,7 +15,7 @@ import { ReactComponent as Remove } from "../../../assets/images/svg/trash.svg";
 export const ItemDetailsCardContainer = styled(Container)`
   display: flex;
   flex-direction: column;
-  width: ${(props) => (!props.halfwidth ? "100%" : "49%")};
+  /* width: ${(props) => (!props.halfwidth ? "100%" : "49%")}; */
   box-sizing: border-box;
   margin: ${(props) => (props.singleOffer ? "10px 36px" : "10px 0")};
   border: 1px solid ${selectedTheme.colors.borderNormal};
@@ -27,27 +27,43 @@ export const ItemDetailsCardContainer = styled(Container)`
   padding: 18px;
   max-width: 2000px;
   position: relative;
-  width: 100%;
+  ${(props) => !props.previewCard && `height: 654px;`}
+  /* height: 654px; */
   /* padding-bottom: 70px; */
 
   @media (max-width: 600px) {
     margin: 18px 0;
     padding: 10px;
     padding-bottom: 65px;
-    height: 656px;
   }
 
   @media screen and (max-width: 1200px) {
-    margin-left: 0;
+    margin: 10px 0;
+    ${(props) =>
+      props.previewCard === true && `width: 90% !important; margin: auto;`}
+  }
+
+  @media (min-width: 601px) and (max-width: 628px) {
+    margin-left: 10px;
+  }
+
+  @media (max-width: 600px) {
+    width: auto !important;
+    margin-top: 22px;
+  }
+
+  @media (max-height: 708px) {
+    height: 400px;
   }
 `;
 export const OfferInfo = styled(Box)`
   display: flex;
-  flex: 2;
+  ${(props) => props.previewCard && `flex: 2;`}
+  /* flex: 2; */
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  margin: 18px 0;
+  margin: 0 0 18px 0;
   @media (max-width: 600px) {
     margin: 0;
     flex: 0;
@@ -153,6 +169,9 @@ export const PostDate = styled(Typography)`
     align-items: start;
   }
   @media screen and (min-width: 600px) and (max-width: 1200px) {
+    ${(props) => !props.previewCard && `display: none;`}
+  }
+  @media (max-height: 708px) {
     display: none;
   }
 `;

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

@@ -56,8 +56,9 @@ const OfferDetails = (props) => {
       hasScrollBar={!props.showPublishButton}
       exchange={props.showExchangeButton}
       singleOffer={props.singleOffer}
+      previewCard={props.previewCard}
     >
-      {dimension.width < 600 || !props.singleOffer ? (
+      {dimension.width <= 600 || !props.singleOffer ? (
         <ScrollerHorizontal>
           {props?.offer?.offer?.images.map((item, index) => {
             if (!item) return;
@@ -87,18 +88,26 @@ const OfferDetails = (props) => {
           ))}
         </ScrollerVertical>
       )}
-      <OfferInfoContainer singleOffer={props.singleOffer}>
+      <OfferInfoContainer
+        singleOffer={props.singleOffer}
+        previewCard={props.previewCard}
+      >
         <OfferTitle singleOffer={props.singleOffer}>
           {offer?.offer?.name}
         </OfferTitle>
-        <OfferLittleDetails singleOffer={props.singleOffer}>
+        <OfferLittleDetails
+          singleOffer={props.singleOffer}
+          previewCard={props.previewCard}
+        >
           <OfferDescriptionTitle>
             {t("itemDetailsCard.description")}
           </OfferDescriptionTitle>
           <OfferDescriptionText showBarterButton={props.showExchangeButton}>
             {offer?.offer?.description}
           </OfferDescriptionText>
-          <DesciprtionPostDate>{date}</DesciprtionPostDate>
+          <DesciprtionPostDate previewCard={props.previewCard}>
+            {date}
+          </DesciprtionPostDate>
         </OfferLittleDetails>
       </OfferInfoContainer>
     </Details>
@@ -110,6 +119,7 @@ OfferDetails.propTypes = {
   showExchangeButton: PropTypes.bool,
   showPublishButton: PropTypes.bool,
   singleOffer: PropTypes.bool,
+  previewCard: PropTypes.bool,
   createOffer: PropTypes.bool,
 };
 

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

@@ -8,17 +8,19 @@ export const Details = styled(Box)`
   display: flex;
   flex-direction: ${(props) => (props.singleOffer ? "row" : "column-reverse")};
   justify-content: start;
+  ${(props) => !props.previewCard && `flex: 2;`}
+  /* flex: 2; */
   gap: 12px;
-  ${(props) => props.hasScrollBar && !props.exchange && `height: 300px;`}
-  overflow-y: auto;
-  overflow-x: hidden;
-  ::-webkit-scrollbar {
+  ${(props) => props.hasScrollBar && !props.exchange && `height: 340px;`}
+  /* overflow-y: auto; */
+  overflow-y: hidden;
+  /* ::-webkit-scrollbar {
     width: 5px;
   }
   ::-webkit-scrollbar-thumb {
     background: #c4c4c4;
     border-radius: 3px;
-  }
+  } */
 
   @media screen and (max-width: 600px) {
     flex-direction: column-reverse;
@@ -54,6 +56,7 @@ export const OfferLittleDetails = styled(Box)`
   padding: ${(props) => (props.singleOffer ? 0 : "0 60px")};
   margin-top: 10px;
   padding-right: 18px;
+  overflow-y: auto;
   ${(props) =>
     !props.singleOffer &&
     `
@@ -61,12 +64,15 @@ export const OfferLittleDetails = styled(Box)`
     top: 180px;
     height: 0;
   `}
-  /* @media (max-width: 600px) {
+  @media (max-width: 600px) {
     padding: 0 8px;
     position: absolute;
     top: 270px;
     justify-content: start;
-  } */
+    height: 300px;
+    ${(props) => props.previewCard && `height: 100px;`};
+    width: 97%;
+  }
 `;
 export const ScrollerHorizontal = styled(HorizontalScroller)`
   min-height: 144px;
@@ -87,9 +93,21 @@ export const ScrollerVertical = styled(VerticalScroller)`
   } */
 `;
 export const OfferInfoContainer = styled(Box)`
-  @media screen and (min-width: 600px) and (max-width: 1200px) {
+  ${(props) => props.previewCard === undefined && `height: 500px;`}
+  overflow-y: auto;
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #c4c4c4;
+    border-radius: 3px;
+  }
+  @media screen and (min-width: 601px) and (max-width: 1200px) {
     ${(props) => props.singleOffer && `flex: 2`};
   }
+  @media (max-width: 600px) {
+    height: auto;
+  }
 `;
 export const OfferDescriptionTitle = styled(Box)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -107,8 +125,6 @@ export const OfferDescriptionText = styled(Box)`
   color: ${selectedTheme.colors.primaryDarkText};
   line-height: 22px;
   white-space: pre-line;
-  padding-bottom: 70px;
-  /* padding-bottom: 20px; */
   max-width: 100%;
   /* max-width: ${(props) =>
     props.showBarterButton ? "calc(100% - 230px)" : "100%"}; */
@@ -136,7 +152,7 @@ export const DesciprtionPostDate = styled(Typography)`
     }
   }
   @media screen and (min-width: 600px) and (max-width: 1200px) {
-    display: block;
+    ${(props) => !props.previewCard && `display: block;`}
     align-self: flex-end;
   }
 `;

src/components/Scroller/VerticalScroller.styled.js

@@ -12,11 +12,11 @@ export const VerticalScrollerContainer = styled(Box)`
   flex-wrap: nowrap;
   overflow: hidden;
   padding-right: 5px;
-  height: 594px;
+  height: 100%;
 
-  @media screen and (max-width: 1200px) {
+  /* @media screen and (max-width: 1200px) {
     height: 465px;
-  }
+  } */
 
   @media screen and (max-width: 600px) {
     width: 100%;
@@ -64,16 +64,16 @@ export const ListContainer = styled(ScrollContainer)`
   flex-direction: column;
   flex-wrap: nowrap;
   scroll-behavior: smooth;
-  margin: 0 18px;
+  margin: 18px 18px;
   user-select: none;
 
   img {
     margin: 0;
-    margin-top: 18px;
+    margin-bottom: 18px;
   }
 
   @media (max-width: 1200px) {
-    margin: 0;
+    margin: 18px 0;
   }
 `;
 export const ArrowIconContainer = styled(Box)`

src/components/StepProgress/StepProgress.js

@@ -22,7 +22,7 @@ const StepProgress = (props) => {
   }, [props.current]);
 
   return (
-    <StepProgressContainer done>
+    <StepProgressContainer done current={props.current}>
       {steps.map((item, index) =>
         index === 0 ? (
           <StepBar

src/components/StepProgress/StepProgress.styled.js

@@ -8,11 +8,16 @@ export const StepProgressContainer = styled(Box)`
   flex-direction: row;
   position: relative;
   left: 2px;
-  width: 100%;
+  width: 332px;
+  ${(props) => props.current === 3 && `margin-bottom: 30px;`}
 
   @media screen and (min-width: 468px) and (max-width: 600px) {
     width: 80%;
   }
+
+  @media (max-width: 600px) {
+    margin-bottom: 0;
+  }
 `;
 
 export const StepLine = styled(Box)`

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

@@ -125,8 +125,8 @@ export const UserReviewsSkeletonSquareImage = styled(Box)`
   height: 54px;
   background-color: ${(props) =>
     props.skeleton
-      ? `${selectedTheme.colors.filterSkeletonBackgroundSecond}`
-      : `${selectedTheme.colors.skeletonItemColor}`};
+      ? `${selectedTheme.colors.skeletonItemColor}`
+      : `${selectedTheme.colors.filterSkeletonBackgroundSecond}`};
 
   ${(props) =>
     props.skeleton &&
@@ -147,8 +147,8 @@ export const UserReviewsSkeletonSquareInfoFirstLine = styled(Box)`
   height: 14px;
   background-color: ${(props) =>
     props.skeleton
-      ? `${selectedTheme.colors.filterSkeletonBackgroundSecond}`
-      : `${selectedTheme.colors.skeletonItemColor}`};
+      ? `${selectedTheme.colors.skeletonItemColor}`
+      : `${selectedTheme.colors.filterSkeletonBackgroundSecond}`};
 
   ${(props) =>
     props.skeleton &&
@@ -163,8 +163,8 @@ export const UserReviewsSkeletonSquareInfoSecondLine = styled(Box)`
   margin-top: 6px;
   background-color: ${(props) =>
     props.skeleton
-      ? `${selectedTheme.colors.filterSkeletonBackgroundSecond}`
-      : `${selectedTheme.colors.skeletonItemColor}`};
+      ? `${selectedTheme.colors.skeletonItemColor}`
+      : `${selectedTheme.colors.filterSkeletonBackgroundSecond}`};
   ${(props) =>
     props.skeleton &&
     css`