Finished bug 740

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

@@ -38,7 +38,7 @@ export const ModalCreateOfferContainer = styled(Box)`
 
   @media (max-width: 810px) {
     left: ${(props) =>
-      props.currentStep === 3 &&
+      props.currentstep === 3 &&
       `
       calc(50% - 336px);
       `};
@@ -111,7 +111,7 @@ export const CreateOfferContainer = styled(Container)`
     width: 100%;
     padding-right: 0;
     padding-left: 0;
-    ${(props) => props.currentstep === 3 && `padding: 0 15px;`}
+    ${(props) => props.currentstep === 3 && `padding: 0 18px;`}
   }
 `;
 export const CreateOfferTitle = styled(Typography)`
@@ -159,6 +159,9 @@ export const CreateOfferFormContainer = styled(Box)`
       border: 1px solid ${selectedTheme.colors.borderNormal};
       margin-top: 40px;
     `}
+  @media (max-width: 600px) {
+    height: 350px;
+  }
 `;
 export const RegisterAltText = styled(Typography)`
   font-family: ${selectedTheme.fonts.altText};

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

@@ -40,8 +40,8 @@ export const ItemDetailsCardContainer = styled(Container)`
 
   @media screen and (max-width: 1200px) {
     margin: 10px 0;
-    ${(props) =>
-      props.previewCard === true && `width: 90% !important; margin: auto;`}
+    /* ${(props) =>
+      props.previewCard === true && `width: 90% !important; margin: auto;`} */
   }
 
   @media (min-width: 601px) and (max-width: 628px) {
@@ -74,7 +74,6 @@ export const ButtonsContainer = styled(Box)`
   display: flex;
   gap: 18px;
 
-
   /* @media screen and (max-width: 600px) {
     position: absolute;
     top: 0;
@@ -146,7 +145,7 @@ export const RemoveIcon = styled(Remove)`
 
 export const DateButtonsContainer = styled(Box)`
   display: flex;
-  
+
   @media screen and (max-width: 600px) {
     position: absolute;
     bottom: initial;
@@ -177,8 +176,8 @@ export const PostDate = styled(Typography)`
   @media screen and (min-width: 600px) and (max-width: 1200px) {
     ${(props) => !props.previewCard && `display: none;`}
   }
-  @media (max-height: 708px) {
-    display: none;
+  @media (max-width: 600px) {
+    ${(props) => props.previewCard && `display: none;`}
   }
 `;
 export const Info = styled(Box)`
@@ -340,4 +339,4 @@ export const ButtonContainer = styled(Box)`
   @media (max-width: 600px) {
     position: static;
   }
-`
+`;

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

@@ -14,7 +14,8 @@ export const Details = styled(Box)`
   ${(props) => props.hasScrollBar && !props.exchange && `height: 340px;`}
   /* overflow-y: auto; */
   overflow-y: hidden;
-  padding-bottom: 50px;
+  ${(props) => !props.previewCard && `padding-bottom: 50px;`}
+
   /* ::-webkit-scrollbar {
     width: 5px;
   }
@@ -26,7 +27,8 @@ export const Details = styled(Box)`
   @media screen and (max-width: 600px) {
     flex-direction: column;
     margin-top: 15px;
-    min-height: 300px;
+    height: 100%;
+    /* min-height: 300px; */
     ${(props) =>
       !props.hasScrollBar &&
       props.exchange &&

src/components/StepProgress/StepProgress.styled.js

@@ -10,7 +10,7 @@ export const StepProgressContainer = styled(Box)`
   left: 2px;
   width: 332px;
   gap: 0 !important;
-  ${(props) => props.current === 3 && `margin-bottom: 30px;`}
+  /* ${(props) => props.current === 3 && `margin-bottom: 30px;`} */
 
   @media screen and (min-width: 468px) and (max-width: 600px) {
     width: 80%;
@@ -24,7 +24,7 @@ export const StepProgressContainer = styled(Box)`
 
 export const StepLine = styled(Box)`
   margin-top: 13px;
-  background-color: ${props => props.lineColor};
+  background-color: ${(props) => props.lineColor};
   width: 100%;
   margin-left: -1px;
   height: 9px;
@@ -41,7 +41,9 @@ export const StepBar = styled(Box)`
   text-align: center;
   border: 5px solid
     ${(props) =>
-      props.current || props.done ? selectedTheme.colors.primaryPurple : props.lineColor};
+      props.current || props.done
+        ? selectedTheme.colors.primaryPurple
+        : props.lineColor};
   padding-top: 2px;
   line-height: 19px;
   margin-left: -2px;