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/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";
@@ -39,19 +39,20 @@ const ThirdPartCreateOffer = (props) => {
           showPublishButton={false}
           showExchangeButton={false}
           hideViews
+          singleOffer
+          previewCard
         />
       </CreateOfferFormContainer>
-      <NextButton
+      <PublishButton
         type="submit"
         variant="contained"
         height="48px"
         buttoncolor={selectedTheme.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

@@ -74,8 +74,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 />}
@@ -94,13 +95,14 @@ const ItemDetailsCard = (props) => {
               value={offer?.offer?.views?.count}
             />
           </Info>
-          <PostDate>{date}</PostDate>
+          <PostDate previewCard={props.previewCard}>{date}</PostDate>
         </OfferInfo>
         <OfferDetails
           offer={offer}
           showExchangeButton={props.showExchangeButton}
           showPublishButton={props.showPublishButton}
           singleOffer={props.singleOffer}
+          previewCard={props.previewCard}
         />
         <DateButtonsContainer>
           {props.isMyOffer && (
@@ -156,6 +158,7 @@ ItemDetailsCard.propTypes = {
   className: PropTypes.string,
   singleOffer: PropTypes.bool,
   isMyOffer: PropTypes.bool,
+  previewCard: PropTypes.bool,
 };
 ItemDetailsCard.defaultProps = {
   halfwidth: false,

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.borderNormal};
@@ -27,27 +27,44 @@ 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;
+    /* 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 +170,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

@@ -26,8 +26,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>
           {offer?.offer?.images?.map((item) => {
             return <OfferImage src={item} key={item} />;
@@ -51,7 +52,9 @@ const OfferDetails = (props) => {
           <OfferDescriptionText showBarterButton={props.showExchangeButton}>
             {offer?.offer?.description}
           </OfferDescriptionText>
-          <DesciprtionPostDate>{date}</DesciprtionPostDate>
+          <DesciprtionPostDate previewCard={props.previewCard}>
+            {date}
+          </DesciprtionPostDate>
         </OfferLittleDetails>
       </OfferInfoContainer>
     </Details>
@@ -63,6 +66,7 @@ OfferDetails.propTypes = {
   showExchangeButton: PropTypes.bool,
   showPublishButton: PropTypes.bool,
   singleOffer: PropTypes.bool,
+  previewCard: PropTypes.bool,
 };
 
 export default OfferDetails;

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;
+  ${(props) => props.hasScrollBar && !props.exchange && `height: 340px;`}
+  /* overflow-y: auto; */
   overflow-x: hidden;
-  ::-webkit-scrollbar {
+  /* ::-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 &&
     `
@@ -66,6 +69,8 @@ export const OfferLittleDetails = styled(Box)`
     position: absolute;
     top: 270px;
     justify-content: start;
+    height: 100px;
+    width: 97%;
   }
 `;
 export const ScrollerHorizontal = styled(HorizontalScroller)`
@@ -87,7 +92,15 @@ export const ScrollerVertical = styled(VerticalScroller)`
   } */
 `;
 export const OfferInfoContainer = styled(Box)`
-  @media screen and (min-width: 600px) and (max-width: 1200px) {
+  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`};
   }
 `;
@@ -135,7 +148,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

@@ -25,7 +25,7 @@ const StepProgress = (props) => {
     }
   });
   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)`