finished item details

src/assets/images/svg/eye-striked.svg

@@ -1,4 +1,4 @@
-<svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.9999 7.99994C13.9999 8.79557 13.6838 9.55862 13.1212 10.1212C12.5586 10.6838 11.7956 10.9999 10.9999 10.9999C10.2043 10.9999 9.44126 10.6838 8.87866 10.1212C8.31606 9.55862 8 8.79557 8 7.99994C8 7.20431 8.31606 6.44126 8.87866 5.87866C9.44126 5.31606 10.2043 5 10.9999 5C11.7956 5 12.5586 5.31606 13.1212 5.87866C13.6838 6.44126 13.9999 7.20431 13.9999 7.99994V7.99994Z" stroke="#5A3984" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M1.45898 7.99986C2.73296 3.94294 6.52388 1 11.0008 1C15.4787 1 19.2686 3.94294 20.5426 7.99986C19.2686 12.0568 15.4787 14.9997 11.0008 14.9997C6.52388 14.9997 2.73296 12.0568 1.45898 7.99986Z" stroke="#5A3984" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="22" height="16" viewBox="0 0 22 16" fill="none" stroke="black" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9999 7.99994C13.9999 8.79557 13.6838 9.55862 13.1212 10.1212C12.5586 10.6838 11.7956 10.9999 10.9999 10.9999C10.2043 10.9999 9.44126 10.6838 8.87866 10.1212C8.31606 9.55862 8 8.79557 8 7.99994C8 7.20431 8.31606 6.44126 8.87866 5.87866C9.44126 5.31606 10.2043 5 10.9999 5C11.7956 5 12.5586 5.31606 13.1212 5.87866C13.6838 6.44126 13.9999 7.20431 13.9999 7.99994V7.99994Z" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.45898 7.99986C2.73296 3.94294 6.52388 1 11.0008 1C15.4787 1 19.2686 3.94294 20.5426 7.99986C19.2686 12.0568 15.4787 14.9997 11.0008 14.9997C6.52388 14.9997 2.73296 12.0568 1.45898 7.99986Z" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

src/components/ItemDetails/ItemDetailsCard/ItemDetailsCard.js → src/components/Cards/ItemDetailsCard/ItemDetailsCard.js

@@ -16,39 +16,41 @@ import {
   OfferDetails,
 } from "./ItemDetailsCard.styled";
 import { ReactComponent as Category } from "../../../assets/images/svg/category.svg";
-//import { ReactComponent as Quantity } from "../../../assets/images/svg/quantity.svg";
-//import { ReactComponent as Eye } from "../../../assets/images/svg/eye-striked.svg";
+import { ReactComponent as Subcategory } from "../../../assets/images/svg/subcategory.svg";
+import { ReactComponent as Quantity } from "../../../assets/images/svg/quantity.svg";
+import { ReactComponent as Eye } from "../../../assets/images/svg/eye-striked.svg";
 import selectedTheme from "../../../themes";
-import { Offer as offer } from "../MockupdataDetails";
+import { Offer as offer } from "./MockupOfferDetails";
 import HorizontalScroller from "../../Scroller/HorizontalScroller";
 import {ReactComponent as DummyImage1 } from "../../../assets/images/svg/dummyImages/offer-1.svg"
 
+
 const ItemDetailsCard = (props) => {
   return (
     <ItemDetailsCardContainer sponsored={props.sponsored.toString()} halfwidth={props.halfwidth ? 1 : 0}>
       <OfferInfo>
         <Info>
           <InfoGroup>
-          <InfoIcon color={selectedTheme.iconStrokeColor} component="span" size="12px">
-              <Category width={"22px"} />
+          <InfoIcon color={selectedTheme.iconStrokeColor} component="span" size="16px">
+              <Category width={"14px"} />
             </InfoIcon>
           <InfoText>{offer.category}</InfoText>
           </InfoGroup>
           <InfoGroup>
-          <InfoIcon color={selectedTheme.iconStrokeColor} component="span" size="12px">
-              <Category width={"22px"} />
+          <InfoIcon color={selectedTheme.iconStrokeColor} component="span" size="16px">
+              <Subcategory width={"14px"} />
             </InfoIcon>
           <InfoText>{offer.subcategory}</InfoText>
           </InfoGroup>
           <InfoGroup>
-          <InfoIcon color={selectedTheme.iconStrokeColor} component="span" size="12px">
-              <Category width={"22px"} />
+          <InfoIcon color={selectedTheme.iconStrokeColor} component="span" size="16px">
+          <Quantity width={"22px"} height={"16px"} />
             </InfoIcon>
           <InfoText>{offer.status}</InfoText>
           </InfoGroup>
           <InfoGroup>
-          <InfoIcon color={selectedTheme.iconStrokeColor} component="span" size="12px">
-              <Category width={"22px"} />
+          <InfoIcon color={"black"} component="span" size="12px">
+             <Eye width={"18px"} height={"20px"} />
             </InfoIcon>
           <InfoText>{offer.numberOfViews}</InfoText>
           </InfoGroup>

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

@@ -43,6 +43,8 @@ export const Info = styled(Box)`
     gap:18px;
 `;
 export const InfoIcon = styled(Box)`
+    display:flex;
+    align-items:center;
 `;
 export const InfoText = styled(Typography)`
   font-family: "Open Sans";
@@ -155,4 +157,7 @@ export const CheckButton = styled(PrimaryButton)`
   }
 `;
 export const Details = styled(Box)`
+  display:flex;
+  flex-direction:column;
+  gap:12px;
 `;

src/components/Cards/ItemDetailsCard/MockupOfferDetails.js

@@ -0,0 +1,36 @@
+import React from "react"
+import {ReactComponent as DummyImage1 } from "../../../assets/images/svg/dummyImages/offer-1.svg"
+
+export const Offer = {
+    id: 0,
+    title: "Vino",
+    category: "Hrana i pice",
+    subcategory:"Farbe",
+    status:"novo",
+    quantity:150,
+    numberOfViews:45,
+    description: "Vinarija Aleksić osnovana je u Vranju 2006. godine, otvorivši time put oživljavanju vinogradarstva na jugu Srbije.Vinarija Aleksić osnovana je u Vranju 2006. godine, otvorivši time put oživljavanju vinogradarstva na jugu Srbije.Vinarija Aleksić osnovana je u Vranju 2006. godine, otvorivši time put oživljavanju vinogradarstva na jugu Srbije.Vinarija Aleksić osnovana je u Vranju 2006. godine, otvorivši time put oživljavanju vinogradarstva na jugu Srbije.",
+    images: [
+        {
+            id:0,
+            image: <DummyImage1 />
+        },
+        {
+            id:1,
+            image: <DummyImage1 />
+        },
+        {
+            id:2,
+            image: <DummyImage1 />
+        },
+        {
+            id:3,
+            image: <DummyImage1 />
+        },
+        {
+            id:4,
+            image: <DummyImage1 />
+        },
+    ],
+    postDate: "12.04.2022",
+}

src/components/ItemDetails/Header/Header.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from "prop-types";
 import { useHistory } from "react-router-dom";
 //import { IconButton } from "../../Buttons/IconButton/IconButton";
-import { HeaderContainer } from './Header.styled';
+import { HeaderContainer, HeaderText, ButtonContainer } from './Header.styled';
 import { ArrowButton } from '../../Buttons/ArrowButton/ArrowButton';
 
 // const DownArrow = (props) => (
@@ -21,9 +21,11 @@ const Header = () => {
 
  
   return (
-    <HeaderContainer>
-      <ArrowButton onClick={handleBackButton} side={"left"}></ArrowButton>
-      Nazad na objave
+    <HeaderContainer onClick={handleBackButton}>
+      <ButtonContainer>
+        <ArrowButton  side={"left"}></ArrowButton>
+        <HeaderText>Nazad na objave</HeaderText>
+      </ButtonContainer>      
     </HeaderContainer>
   );
 };

src/components/ItemDetails/Header/Header.styled.js

@@ -1,53 +1,22 @@
-import { Box, MenuItem, Select} from "@mui/material";
+import { Box, Link, Typography} from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { IconButton } from "../../Buttons/IconButton/IconButton";
 
 export const HeaderContainer = styled(Box)`
     margin-top: 20px;
+`
+export const ButtonContainer = styled(Link)`
+    width:fit-content;
+    cursor:pointer;
     display: flex;
     justify-content: start;
     align-items:center;
+    gap:12px;
 `
-export const HeaderLocation = styled(Box)`
-    padding-top: 10px;
+export const HeaderText = styled(Typography) `
     font-family: "Open Sans";
-    color: ${selectedTheme.primaryPurple};
-    font-weight: 700;
     line-height: 22px;
     font-size: 16px;
-    flex: 2;
-`
-export const HeaderButton = styled(IconButton)`
-    padding: 2px 10px;
-`
-export const HeaderOptions = styled(Box)`
-    display: flex;
-    flex-direction: row;
-    flex: 1;
-    justify-content: end;
-`
-export const HeaderSelect = styled(Select)`
-    width: 210px;
-    height: 35px;
-    font-family: "Open Sans";
-    margin-top: 3px;
-    & div span {
-        position: relative;
-        top: -4px;
-    }
-`
-export const SelectItem = styled(MenuItem)`
-    font-family: "Open Sans";
-`
-export const IconStyled = styled(Box)`
-    position: relative;
-    top: 0;
-    right: 10px;
-`
-export const HeaderButtons = styled(Box)`
-    flex-direction: row;
-    display: flex;
-    justify-content: space-between;
-    margin-right: 40px;
+    color: ${selectedTheme.primaryPurple};
+    text-decoration: underline;
 `

src/components/ItemDetails/ItemDetails.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Header from "./Header/Header";
 import { ItemDetailsContainer } from './ItemDetails.styled';
-import ItemDetailsCard from "./ItemDetailsCard/ItemDetailsCard";
+import ItemDetailsCard from "../Cards/ItemDetailsCard/ItemDetailsCard";
 import ItemDetailsHeaderCard from "./ItemDetailsHeaderCard/ItemDetailsHeaderCard";
 
 

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.js

@@ -47,7 +47,7 @@ const ItemDetailsHeaderCard = (props) => {
         </MessageIcon>
       </HeaderTop>
       <HeaderDetails>
-        <BottomDetails>
+      <BottomDetails>
           <StatusText>
             <b>{author.numberOfOffers}</b> objava
           </StatusText>

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.styled.js

@@ -1,4 +1,4 @@
-import { Box, Typography } from "@mui/material";
+import { Box, Grid, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
 import { IconButton } from "../../Buttons/IconButton/IconButton";
@@ -38,11 +38,13 @@ export const HeaderDetails = styled(Box)`
     background-color: ${selectedTheme.primaryIconBackgroundColor};
   `;
 export const BottomDetails = styled(Box)`
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    padding: 18px;
-    gap:18px;
+  max-width:fit-content;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  grid-column-gap: 12px;
+  grid-row-gap: 12px; 
+  padding: 18px;
 `;
 export const OfferImage = styled(Box)`
     border-radius: 50%;
@@ -91,7 +93,7 @@ export const OfferDetails = styled(Box)`
   justify-content: start;
 `;
 
-export const StatusText = styled(Typography)`
+export const StatusText = styled(Grid)`
 font-family: "Open Sans";
 color: ${selectedTheme.primaryText};
 `