move item preview to bottom of new item form

Author: harsohailB

src/components/AddItemPage/NewItemForm.jsx

@@ -23,11 +23,7 @@ const Wrapper = styled.div`
   margin-top: 2%;
   align-items: center;
   justify-content: center;
-  flex-direction: row;
-
-  @media (max-width: 1600px) {
-    flex-direction: column;
-  }
+  flex-direction: column;
 `;
 
 const RowWrapper = styled.div`
@@ -59,11 +55,7 @@ const ItemPreviewWrapper = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
-  width: 60%;
-
-  @media (max-width: 1600px) {
-    width: 100%;
-  }
+  width: 100%;
 `;
 
 const Input = styled.input`
@@ -628,7 +620,7 @@ const NewItemForm = (props) => {
       </FormWrapper>
 
       <ItemPreviewWrapper>
-        <ItemPreview item={newItem} editPage={true} />
+        <ItemPreview item={newItem} />
       </ItemPreviewWrapper>
     </Wrapper>
   );

src/components/ItemPage/ItemPreview.jsx

@@ -31,15 +31,10 @@ const Wrapper = styled.div`
   align-items: flex-start;
   margin-top: 50px;
   justify-content: flex-start;
+  width: 100%;
   @media (max-width: 768px) {
     flex-direction: column;
   }
-
-  ${({ editPage }) =>
-    editPage &&
-    `
-    justify-content:  space-around;
-  `}
 `;
 
 const PreviewWrapper = styled.div`
@@ -199,7 +194,7 @@ const CarouselImage = styled.img`
   height: auto;
 `;
 
-const ItemPreview = ({ item, setItem, editPage }) => {
+const ItemPreview = ({ item, setItem }) => {
   const [isMobile, setIsMobile] = useState(window.innerWidth < 700);
   useWindowResize((event: React.SyntheticEvent) => {
     setIsMobile(window.innerWidth < 728);
@@ -319,7 +314,7 @@ const ItemPreview = ({ item, setItem, editPage }) => {
   };
 
   return (
-    <Wrapper editPage={editPage}>
+    <Wrapper>
       <Helmet>
         <title>{item.name} - JAMBO</title>
       </Helmet>