need other components

src/AppRoutes.js

@@ -13,6 +13,7 @@ import {
   REGISTER_SUCCESSFUL_PAGE,
   RESET_PASSWORD_PAGE,
   CREATE_OFFER_PAGE,
+  ITEM_DETAILS_PAGE
 } from './constants/pages';
 import LoginPage from './pages/LoginPage/LoginPageMUI';
 import HomePage from './pages/HomePage/HomePageMUI';
@@ -25,6 +26,7 @@ import Register from './pages/RegisterPages/Register/Register';
 import RegisterSuccessful from './pages/RegisterPages/RegisterSuccessful.js/RegisterSuccessful';
 import ResetPasswordPage from './pages/ResetPasswordPage/ResetPasswordPage';
 import CreateOffer from './pages/CreateOffer/CreateOffer';
+import ItemDetailsPage from './pages/ItemDetailsPage/ItemDetailsPageMUI';
 
 
 const AppRoutes = () => {
@@ -40,6 +42,7 @@ const AppRoutes = () => {
     <Route path={FORGOT_PASSWORD_PAGE} component={ForgotPasswordPage} />
     <Route path={RESET_PASSWORD_PAGE} component={ResetPasswordPage}/>
     <Route path={CREATE_OFFER_PAGE} component={CreateOffer}/>
+    <Route path={ITEM_DETAILS_PAGE} component={ItemDetailsPage} />
     
     <PrivateRoute
       exact

src/assets/images/svg/mailColor.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33366 3.33334H16.667C17.5837 3.33334 18.3337 4.08334 18.3337 5.00001V15C18.3337 15.9167 17.5837 16.6667 16.667 16.6667H3.33366C2.41699 16.6667 1.66699 15.9167 1.66699 15V5.00001C1.66699 4.08334 2.41699 3.33334 3.33366 3.33334Z" stroke="#FEB005" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.3337 5L10.0003 10.8333L1.66699 5" stroke="#FEB005" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/pib.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.66634 2.75H18.333C18.8192 2.75 19.2856 2.94315 19.6294 3.28697C19.9732 3.63079 20.1663 4.0971 20.1663 4.58333V10.0833C20.1663 12.5145 19.2006 14.8461 17.4815 16.5651C15.7624 18.2842 13.4308 19.25 10.9997 19.25C9.79589 19.25 8.60389 19.0129 7.49174 18.5522C6.37959 18.0916 5.36907 17.4163 4.51786 16.5651C2.79878 14.8461 1.83301 12.5145 1.83301 10.0833V4.58333C1.83301 4.0971 2.02616 3.63079 2.36998 3.28697C2.7138 2.94315 3.18011 2.75 3.66634 2.75V2.75Z" stroke="#C4C4C4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.33301 9.16666L10.9997 12.8333L14.6663 9.16666" stroke="#C4C4C4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/Cards/OfferCard/OfferCard.js

@@ -26,8 +26,14 @@ import { ReactComponent as Quantity } from "../../../assets/images/svg/quantity.
 import { ReactComponent as Eye } from "../../../assets/images/svg/eye-striked.svg";
 import { ReactComponent as Message } from "../../../assets/images/svg/mail.svg";
 import selectedTheme from "../../../themes";
+import { useHistory } from "react-router-dom";
 
 const OfferCard = (props) => {
+  const id = 434;
+  const history = useHistory();
+  const routeToItem = () => {
+    history.push(`/proizvodi/${id}`)
+  }
   return (
     <OfferCardContainer sponsored={props.sponsored.toString()} halfwidth={props.halfwidth ? 1 : 0}>
       <OfferImage>{props.image}</OfferImage>
@@ -71,6 +77,7 @@ const OfferCard = (props) => {
             buttoncolor={selectedTheme.primaryPurple}
             textcolor={props.sponsored ? "white" : selectedTheme.primaryPurple}
             style={{fontWeight: "600"}}
+            onClick = {routeToItem}
           >
             Pogledaj proizvod
           </CheckButton>

src/components/ItemDetails/Header/Header.js

@@ -0,0 +1,41 @@
+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';
+
+// const DownArrow = (props) => (
+//   <IconStyled {...props}>
+//     <Down />
+//   </IconStyled>
+// );
+
+const Header = () => {
+
+  const history = useHistory();
+
+  const handleBackButton = () => {
+    history.push('/home');
+  };
+
+ 
+  return (
+    <HeaderContainer>
+      <IconButton onClick={handleBackButton}/>
+      Nazad na objave
+    </HeaderContainer>
+  );
+};
+
+Header.propTypes = {
+  children: PropTypes.node,
+  setIsGrid: PropTypes.func,
+  isGrid: PropTypes.bool,
+  filters: PropTypes.array,
+  category: PropTypes.string,
+};
+Header.defaultProps = {
+  isGrid: false,
+};
+
+export default Header;

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

@@ -0,0 +1,52 @@
+import { Box, MenuItem, Select } 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;
+    display: flex;
+    justify-content: start;
+`
+export const HeaderLocation = styled(Box)`
+    padding-top: 10px;
+    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;
+`

src/components/ItemDetails/ItemDetails.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Header from "./Header/Header";
+import { ItemDetailsContainer } from './ItemDetails.styled';
+import ItemDetailsCard from "./ItemDetailsCard/ItemDetailsCard";
+import ItemDetailsHeaderCard from "./ItemDetailsHeaderCard/ItemDetailsHeaderCard";
+
+
+
+const ItemDetails = () => {
+    return (
+        <ItemDetailsContainer>
+            <Header/>
+            <ItemDetailsHeaderCard />
+            <ItemDetailsCard/>
+        </ItemDetailsContainer>
+    )
+}
+
+export default ItemDetails;

src/components/ItemDetails/ItemDetails.styled.js

@@ -0,0 +1,6 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+
+export const ItemDetailsContainer = styled(Box)`
+
+`;

src/components/ItemDetails/ItemDetailsCard/ItemDetailsCard.js

@@ -0,0 +1,113 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  CheckButton,
+  ItemDetailsCardContainer,
+  OfferInfo,
+  Info,
+  PostDate,
+  InfoIcon,
+  InfoText,
+  InfoGroup,
+  OfferTitle,
+  OfferDescriptionText,
+  OfferDescriptionTitle,
+  Details,
+  ImgSliderTemp,
+  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 selectedTheme from "../../../themes";
+import { Offer as offer } from "../MockupdataDetails";
+
+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>
+          <InfoText>{offer.category}</InfoText>
+          </InfoGroup>
+          <InfoGroup>
+          <InfoIcon color={selectedTheme.iconStrokeColor} component="span" size="12px">
+              <Category width={"22px"} />
+            </InfoIcon>
+          <InfoText>{offer.subcategory}</InfoText>
+          </InfoGroup>
+          <InfoGroup>
+          <InfoIcon color={selectedTheme.iconStrokeColor} component="span" size="12px">
+              <Category width={"22px"} />
+            </InfoIcon>
+          <InfoText>{offer.status}</InfoText>
+          </InfoGroup>
+          <InfoGroup>
+          <InfoIcon color={selectedTheme.iconStrokeColor} component="span" size="12px">
+              <Category width={"22px"} />
+            </InfoIcon>
+          <InfoText>{offer.numberOfViews}</InfoText>
+          </InfoGroup>
+        </Info>
+        <PostDate>Objavljeno: 04.04.2022</PostDate>
+      </OfferInfo>
+      <Details>
+        <OfferTitle>{offer.title}</OfferTitle>
+        <ImgSliderTemp></ImgSliderTemp>
+        <OfferDetails>
+          <OfferDescriptionTitle>Opis:</OfferDescriptionTitle>
+          <OfferDescriptionText>{offer.description}</OfferDescriptionText>
+        </OfferDetails>
+      </Details>
+      {!props.halfwidth ? (
+        <React.Fragment>
+          <CheckButton
+            variant={props.sponsored ? "contained" : "outlined"}
+            buttoncolor={selectedTheme.primaryPurple}
+            textcolor={props.sponsored ? "white" : selectedTheme.primaryPurple}
+            style={{fontWeight: "600"}}
+          >
+            Trampi
+          </CheckButton>
+        </React.Fragment>
+      ) : (
+        <></>
+      )}
+
+      {/* {props.image}
+      {props.title}
+      {props.description}
+      {props.category}
+      {props.author}
+      {props.location}
+      {props.quantity}
+      {props.package}
+      {props.numberOfViews} */}
+    </ItemDetailsCardContainer>
+  );
+};
+
+ItemDetailsCard.propTypes = {
+  children: PropTypes.node,
+  id: PropTypes.number,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  category: PropTypes.string,
+  author: PropTypes.string,
+  location: PropTypes.string,
+  image: PropTypes.node,
+  quantity: PropTypes.number,
+  package: PropTypes.string,
+  numberOfViews: PropTypes.number,
+  halfwidth: PropTypes.bool,
+  sponsored: PropTypes.bool,
+};
+ItemDetailsCard.defaultProps = {
+  halfwidth: false,
+  sponsored: false,
+};
+
+export default ItemDetailsCard;

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

@@ -0,0 +1,160 @@
+import { Box, Container, Typography } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../themes";
+//import { IconButton } from "../../Buttons/IconButton/IconButton";
+import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
+import { Icon } from "../../Icon/Icon";
+
+export const ItemDetailsCardContainer = styled(Container)`
+  display: flex;
+  flex-direction: column;
+  width: ${(props) => (!props.halfwidth ? "100%" : "49%")};
+  box-sizing: border-box;
+  margin: 10px 0;
+  border: 1px solid ${selectedTheme.borderNormal};
+  background-color: ${(props) =>
+    props.sponsored === 'true' ? selectedTheme.backgroundSponsoredColor : "white"};
+  border-radius: 4px;
+  padding: 18px;
+  max-width: 2000px;
+  position: relative;
+`;
+export const OfferImage = styled(Box)``;
+export const OfferInfo = styled(Box)`
+  display: flex;
+  flex: 2;
+  flex-direction: row;
+  justify-content: space-between;
+  margin:18px 0;
+`;
+export const InfoGroup = styled(Box)`
+    display: flex;
+    flex-direction: row;
+    align-items:center;
+    gap:4px;
+`;
+export const PostDate = styled(Typography)`
+font-family: "Open Sans";
+font-size: 12px;
+color: ${selectedTheme.primaryText};
+`;
+export const Info = styled(Box)`
+    display:flex;
+    gap:18px;
+`;
+export const InfoIcon = styled(Box)`
+`;
+export const InfoText = styled(Typography)`
+  font-family: "Open Sans";
+`;
+export const OfferTitle = styled(Typography)`
+  font-family: "Open Sans";
+  flex: 1;
+  color: ${selectedTheme.primaryPurple};
+  font-weight: 700;
+  font-size: 24px;
+  padding: 0 72px;
+`;
+export const OfferAuthor = styled(Box)`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+`;
+export const OfferAuthorName = styled(Typography)`
+  font-family: "Open Sans";
+  line-height: 22px;
+  font-size: 16px;
+  color: ${selectedTheme.primaryDarkText};
+`;
+export const OfferLocation = styled(Typography)`
+  font-family: "Open Sans";
+  color: ${selectedTheme.primaryText};
+  line-height: 16px;
+  font-size: 12px;
+`;
+export const OfferDetails = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: ${(props) => (!props.halfwidth ? "no-wrap" : "wrap")};
+  justify-content: space-between;
+  padding: 0 72px;
+`;
+export const OfferCategory = styled(Box)`
+  font-family: "Open Sans";
+  color: ${selectedTheme.primaryText};
+  line-height: 16px;
+  font-size: 12px;
+  width: 33%;
+`;
+export const OfferPackage = styled(Box)`
+  font-family: "Open Sans";
+  color: ${selectedTheme.primaryText};
+  line-height: 16px;
+  font-size: 12px;
+  width: 34%;
+`;
+export const OfferViews = styled(Box)`
+  font-family: "Open Sans";
+  color: ${selectedTheme.primaryText};
+  line-height: 16px;
+  font-size: 12px;
+  width: 34%;
+`;
+export const OfferDescriptionTitle = styled(Box)`
+  font-family: "Open Sans";
+  font-size: 12px;
+  color: ${selectedTheme.primaryDarkText};
+  line-height: 16px;
+`;
+export const OfferDescriptionText = styled(Box)`
+  font-family: "Open Sans";
+  font-size: 16px;
+  color: ${selectedTheme.primaryDarkText};
+  line-height: 22px;
+  max-width: calc(100% - 230px);
+  max-height: 120px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+`;
+export const OfferDescription = styled(Box)`
+  flex: 3;
+`;
+export const Line = styled(Box)`
+  border-left: 1px solid rgba(0, 0, 0, 0.15);
+  height: 100px;
+  width: 0;
+  margin: auto 0;
+`;
+export const DetailIcon = styled(Icon)`
+  & svg {
+    width: 14px;
+    position: relative;
+    top: -1px;
+  }
+`;
+export const DetailText = styled(Typography)`
+  font-family: "Open Sans";
+  color: ${selectedTheme.primaryText};
+  line-height: 16px;
+  font-size: 12px;
+  position: relative;
+  top: -2px;
+  left: 3px;
+`;
+export const CheckButton = styled(PrimaryButton)`
+  width: 180px;
+  height: 48px;
+  position: absolute;
+  bottom: 9px;
+  right: 9px;
+  &:hover button {
+    background-color: ${selectedTheme.primaryPurple} !important;
+    color: white !important;
+  }
+`;
+export const ImgSliderTemp = styled(Box)``;
+
+export const Details = styled(Box)`
+`;

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.js

@@ -0,0 +1,90 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  DetailIcon,
+  DetailText,
+  MessageIcon,
+  OfferDetails,
+  OfferImage,
+  OfferTitle,
+  DetailContainer,
+  HeaderTop,
+  HeaderDetails,
+  BottomDetails,
+  StatusText
+} from "./ItemDetailsHeaderCard.styled";
+import { ItemDetailsHeaderContainer } from "./ItemDetailsHeaderCard.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 PIB} from "../../../assets/images/svg/pib.svg";
+import { ReactComponent as MessageColor } from "../../../assets/images/svg/mailColor.svg";
+import selectedTheme from "../../../themes";
+import { Author as author } from "../MockupdataDetails";
+
+const ItemDetailsHeaderCard = (props) => {
+  return (
+    <ItemDetailsHeaderContainer sponsored={props.sponsored.toString()} halfwidth={props.halfwidth ? 1 : 0}>
+      <HeaderTop>
+      <OfferImage>{author.image}</OfferImage>
+        <OfferDetails>
+         <OfferTitle>{author.title}</OfferTitle>
+         <DetailContainer>
+           <DetailIcon color={selectedTheme.iconStrokeColor} component="span" size="22px">
+              <PIB width={"22px"} />
+            </DetailIcon>
+          <DetailText>PIB - {author.pib}</DetailText>
+         </DetailContainer>
+         <DetailContainer>
+            <DetailIcon color={selectedTheme.iconStrokeColor} component="span" size="22px">
+              <Category width={"22px"} />
+            </DetailIcon>
+          <DetailText>{author.location}</DetailText>
+         </DetailContainer>
+        </OfferDetails>       
+        <MessageIcon>
+        <MessageColor />
+        </MessageIcon>
+      </HeaderTop>
+      <HeaderDetails>
+        <BottomDetails>
+          <StatusText>
+            <b>{author.numberOfOffers}</b> objava
+          </StatusText>
+          <StatusText>
+            <b>{author.numberOfViews}</b> ukupnih pregleda
+          </StatusText>
+          <StatusText>
+            <b>{author.successSwapsProcent}</b> uspesnih trampi
+          </StatusText>
+          <StatusText>
+            <b>{author.goodCommunicationProcent}</b> korektna komunikacija
+          </StatusText>
+        </BottomDetails>
+      </HeaderDetails>
+ 
+    </ItemDetailsHeaderContainer>
+  );
+};
+
+ItemDetailsHeaderCard.propTypes = {
+  children: PropTypes.node,
+  id: PropTypes.number,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  category: PropTypes.string,
+  author: PropTypes.string,
+  location: PropTypes.string,
+  image: PropTypes.node,
+  quantity: PropTypes.number,
+  package: PropTypes.string,
+  numberOfViews: PropTypes.number,
+  halfwidth: PropTypes.bool,
+  sponsored: PropTypes.bool,
+};
+ItemDetailsHeaderCard.defaultProps = {
+  halfwidth: false,
+  sponsored: false,
+};
+
+export default ItemDetailsHeaderCard;

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

@@ -0,0 +1,184 @@
+import { Box, Typography } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../themes";
+import { IconButton } from "../../Buttons/IconButton/IconButton";
+import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
+import { Icon } from "../../Icon/Icon";
+
+export const ItemDetailsHeaderContainer = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  width: ${(props) => (!props.halfwidth ? "100%" : "49%")};
+  box-sizing: border-box;
+  margin: 10px 0;
+  background-color: ${(props) =>
+    props.sponsored === 'true' ? selectedTheme.backgroundSponsoredColor : "white"};
+  border-radius: 4px;
+  border: 1px solid ${selectedTheme.borderNormal};
+  max-width: 2000px;
+  position: relative;
+`;
+export const DetailContainer = styled(Box)`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap:7px;
+    font-family: "Open Sans";
+    color: ${selectedTheme.primaryText};
+    line-height: 16px;
+    font-size: 12px;
+`;
+export const HeaderTop = styled(Box)`
+    display:flex;
+    flex-direction: row;
+    padding:18px;
+    gap:18px;
+`;
+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;
+`;
+export const OfferImage = styled(Box)`
+    border-radius: 50%;
+`;
+export const OfferInfo = styled(Box)`
+  display: flex;
+  flex: 2;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-left: 18px;
+`;
+export const OfferTitle = styled(Typography)`
+  margin-bottom:12px;
+  font-family: "Open Sans";
+  color: ${selectedTheme.primaryPurple};
+  font-weight: 700;
+  font-size: 24px;
+`;
+export const OfferAuthor = styled(Box)`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+`;
+export const OfferAuthorName = styled(Typography)`
+  font-family: "Open Sans";
+  line-height: 22px;
+  font-size: 16px;
+  color: ${selectedTheme.primaryDarkText};
+`;
+export const OfferLocation = styled(Box)`
+  font-family: "Open Sans";
+  color: ${selectedTheme.primaryText};
+  line-height: 16px;
+  font-size: 12px;
+`;
+export const OfferPIB = styled(Box)`
+  font-family: "Open Sans";
+  color: ${selectedTheme.primaryText};
+  line-height: 16px;
+  font-size: 12px;
+`;
+export const OfferDetails = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: ${(props) => (!props.halfwidth ? "no-wrap" : "wrap")};
+  justify-content: start;
+`;
+
+export const StatusText = styled(Typography)`
+font-family: "Open Sans";
+color: ${selectedTheme.primaryText};
+`
+export const OfferCategory = styled(Box)`
+  font-family: "Open Sans";
+  color: ${selectedTheme.primaryText};
+  line-height: 16px;
+  font-size: 12px;
+  width: 33%;
+`;
+export const OfferPackage = styled(Box)`
+  font-family: "Open Sans";
+  color: ${selectedTheme.primaryText};
+  line-height: 16px;
+  font-size: 12px;
+  width: 34%;
+`;
+export const OfferViews = styled(Box)`
+  font-family: "Open Sans";
+  color: ${selectedTheme.primaryText};
+  line-height: 16px;
+  font-size: 12px;
+  width: 34%;
+`;
+export const OfferDescriptionTitle = styled(Box)`
+  font-family: "Open Sans";
+  font-size: 12px;
+  color: ${selectedTheme.primaryDarkText};
+  line-height: 16px;
+`;
+export const OfferDescriptionText = styled(Box)`
+  font-family: "Open Sans";
+  font-size: 16px;
+  color: ${selectedTheme.primaryDarkText};
+  line-height: 22px;
+  max-width: calc(100% - 230px);
+  max-height: 120px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+`;
+export const OfferDescription = styled(Box)`
+  flex: 3;
+  margin: auto 0;
+  padding-left: 35px;
+`;
+export const Line = styled(Box)`
+  border-left: 1px solid rgba(0, 0, 0, 0.15);
+  height: 100px;
+  width: 0;
+  margin: auto 0;
+`;
+export const DetailIcon = styled(Icon)`
+    display:flex; 
+    align-items:center;
+  & svg {
+    width: 22px;
+    position: relative;
+  }
+`;
+export const DetailText = styled(Typography)`
+  font-family: "Open Sans";
+  color: ${selectedTheme.primaryText};
+  line-height: 16px;
+  font-size: 16px;
+  position: relative;
+`;
+export const CheckButton = styled(PrimaryButton)`
+  width: 180px;
+  height: 48px;
+  position: absolute;
+  bottom: 9px;
+  right: 9px;
+  &:hover button {
+    background-color: ${selectedTheme.primaryPurple} !important;
+    color: white !important;
+  }
+`;
+export const MessageIcon = styled(IconButton)`
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: ${selectedTheme.primaryPurple};
+  border-radius: 100%;
+  padding-top: 2px;
+  text-align: center;
+`;

src/components/ItemDetails/MockupdataDetails.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import {ReactComponent as DummyImage1 } from "../../assets/images/svg/dummyImages/offer-1.svg"
+import {ReactComponent as DummyAuthorImage1} from "../../assets/images/svg/dummyImages/DummyAuthorImage1.svg"
+// import {ReactComponent as DummyImage2 } from "../../assets/images/svg/dummyImages/offer-2.svg"
+// import {ReactComponent as DummyImage3 } from "../../assets/images/svg/dummyImages/offer-3.svg"
+// import {ReactComponent as DummyImage4 } from "../../assets/images/svg/dummyImages/offer-4.svg"
+
+export const packageEnum = {
+    package: "PACKAGE",
+    palette: "PALETTE",
+    piece: "PIECE"
+}
+
+export const Author = {
+    id: 0,
+    image: <DummyAuthorImage1 />,
+    title: "Women's Beauty House",
+    pib: 123456789,
+    location: "Nis, Serbia",
+    numberOfOffers: 9,
+    numberOfViews: 1200,
+    successSwapsProcent: "75%",
+    goodCommunicationProcent: "90%",   
+}
+
+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 />
+            },
+        ],
+        package: packageEnum.package,
+        postDate: "12.04.2022",
+}

src/constants/pages.js

@@ -8,4 +8,5 @@ export const FORGOT_PASSWORD_MAIL_SENT = '/forgot-password/mail-sent'
 export const REGISTER_PAGE = "/register"
 export const REGISTER_SUCCESSFUL_PAGE = "/register/success";
 export const RESET_PASSWORD_PAGE = "/reset-password"
-export const CREATE_OFFER_PAGE = "/create-offer"
+export const CREATE_OFFER_PAGE = "/create-offer"
+export const ITEM_DETAILS_PAGE = "/proizvodi/:idProizvod"

src/layouts/ItemDetailsLayout/ItemDetailsLayout.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Content, RightCard, ItemDetailsLayoutContainer } from "./ItemDetailsLayout.styled";
+import { Grid } from "@mui/material";
+
+const ItemDetailsLayout = (props) => {
+  return (
+    <ItemDetailsLayoutContainer>
+      {props.children}
+      <Grid container maxHeight="xl">
+      <Content item xs={10} lg={9} xl={9.6} md={8} >
+          {props.content}
+        </Content>
+        <RightCard item xs={2} lg={3} xl={2.4} md={4} >
+          {props.rightCard}
+        </RightCard>
+        
+      </Grid>
+    </ItemDetailsLayoutContainer>
+  );
+};
+
+ItemDetailsLayout.propTypes = {
+  children: PropTypes.node,
+  leftCard: PropTypes.node,
+  content: PropTypes.node,
+  rightCard: PropTypes.node,
+};
+
+export default ItemDetailsLayout;

src/layouts/ItemDetailsLayout/ItemDetailsLayout.styled.js

@@ -0,0 +1,20 @@
+import { Container, Grid } from "@mui/material";
+import styled from "styled-components";
+
+export const ItemDetailsLayoutContainer = styled(Container)`
+    padding-left: 60px;
+    padding-right: 0;
+    margin: 0;
+    width: 100%;
+    max-width: none;
+    display: flex;
+    flex: 1;
+    height: 100%;
+`
+
+export const RightCard = styled(Grid)`
+    margin-top: 30px;
+    border-top-right-radius: 4px;
+`
+export const Content = styled(Grid)`
+`

src/pages/ItemDetailsPage/ItemDetailsPage.styled.js

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+import { Container, Grid } from "@mui/material";
+import selectedTheme from "../../themes";
+export const ItemDetailsPageContainer = styled(Container)`
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  max-width: none;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: ${selectedTheme.offerBackgroundColor};
+`;
+export const GridStyled = styled(Grid)`
+  
+`;

src/pages/ItemDetailsPage/ItemDetailsPageMUI.js

@@ -0,0 +1,84 @@
+import React, { useEffect } from "react";
+import Navbar from "../../components/MUI/NavbarComponent";
+import { ItemDetailsPageContainer } from "./ItemDetailsPage.styled";
+import { useDispatch } from "react-redux";
+import { logoutUser } from "../../store/actions/login/loginActions";
+import Mockupdata from "../../components/Cards/FilterCard/Mockupdata";
+import qs from "query-string";
+import { useHistory } from "react-router-dom";
+import { setFilters } from "../../store/actions/filters/filtersActions";
+import ItemDetails from "../../components/ItemDetails/ItemDetails";
+import ItemDetailsLayout from "../../layouts/ItemDetailsLayout/ItemDetailsLayout";
+
+const ItemDetailsPage = () => {
+  const dispatch = useDispatch();
+
+  //const routetMatch = useRouteMatch();
+  const history = useHistory();
+
+  useEffect(() => {
+    const queryString = history.location.search.substring(1);
+    const queryObject = qs.parse(queryString);
+    let category = null;
+    if (queryObject.category) {
+      category = Mockupdata[1].find(
+        (item) => item.string === queryObject.category.toString()
+      ).id;
+    }
+    let cities = [];
+    if (queryObject.city) {
+      if (Array.isArray(queryObject.city)) {
+        queryObject.city.forEach((item) => {
+          cities.push(Mockupdata[0].find((p) => p.string === item).id);
+        });
+      } else {
+        cities.push(
+          Mockupdata[0].find((p) => p.string === queryObject.city).id
+        );
+      }
+    }
+    let subcategory = null;
+    if (queryObject.subcategory) {
+      subcategory = Mockupdata[1].find(
+        (item) => item.string === queryObject.subcategory.toString()
+      ).id;
+    }
+    console.log("iz useeffect: ", { category, subcategory, cities });
+    dispatch(setFilters({ category, subcategory, cities }));
+  }, [history.location.search]);
+  const handleCl = () => {
+    dispatch(logoutUser());
+  };
+  return (
+    <ItemDetailsPageContainer>
+      <button onClick={handleCl}>Dugme</button>
+      <Navbar />
+      {/* right card mora mi bude Review Card */}
+      <ItemDetailsLayout content={<ItemDetails />} />
+
+      {/* <Box sx={{ mt: 4, mx: 4 }}>
+        <GridStyled container justifyContent="space-between">
+          <GridStyled item xs={12} md={3}>
+            asdasdasd
+          </GridStyled>
+          <GridStyled item xs={12} md={6}>
+            <GridStyled xs={12} md={12}>
+              <HomeListCard></HomeListCard>
+            </GridStyled>
+          </GridStyled> */}
+      {/* <GridStyled item xs={12} md={9}>
+            <PagingSortingFiltering />
+          </GridStyled>
+          <GridStyled item xs={12} md={9}>
+            {/* Move to higher components? */}
+      {/* <RandomDataProvider>
+              <PagingSortingFilteringServerSide />
+            </RandomDataProvider>
+          </GridStyled> */}
+      {/* </GridStyled>
+      </Box> */}
+    </ItemDetailsPageContainer>
+  );
+};
+
+export default ItemDetailsPage;

src/themes/primaryTheme/primaryThemeColors.js

@@ -8,9 +8,10 @@ export const primaryThemeColors = {
     primaryGrayText: "#818181",
     primaryDarkGrayText: "#DCDCDC",
     primaryIconBackgroundColor: "#E4E4E4",
+    borderNormal: "#D4D4D4",
     borderSponsoredColor: "#E5D0FF",
     backgroundSponsoredColor: "#F5EDFF",
     offerBackgroundColor: "#F5F5F5",
     primaryDarkText: "#505050",
-    iconStrokeColor: "#8C8C8C"
+    iconStrokeColor: "#8C8C8C",
 }