Added layouts, MarketPlace, Offers, imported icons

src/assets/images/svg/briefcase.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="M18.3334 6.41663H3.66671C2.65419 6.41663 1.83337 7.23744 1.83337 8.24996V17.4166C1.83337 18.4291 2.65419 19.25 3.66671 19.25H18.3334C19.3459 19.25 20.1667 18.4291 20.1667 17.4166V8.24996C20.1667 7.23744 19.3459 6.41663 18.3334 6.41663Z" stroke="#C4C4C4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.6667 19.25V4.58333C14.6667 4.0971 14.4736 3.63079 14.1297 3.28697C13.7859 2.94315 13.3196 2.75 12.8334 2.75H9.16671C8.68048 2.75 8.21416 2.94315 7.87035 3.28697C7.52653 3.63079 7.33337 4.0971 7.33337 4.58333V19.25" stroke="#C4C4C4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/check-circle.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.5 8.31002V9.00002C16.4991 10.6173 15.9754 12.191 15.007 13.4864C14.0386 14.7818 12.6775 15.7294 11.1265 16.1879C9.57557 16.6465 7.91794 16.5914 6.40085 16.031C4.88376 15.4705 3.58849 14.4346 2.70822 13.0778C1.82795 11.721 1.40984 10.1161 1.51626 8.50226C1.62267 6.88844 2.24791 5.35227 3.29871 4.12283C4.34951 2.89338 5.76959 2.03656 7.34714 1.68013C8.92469 1.3237 10.5752 1.48677 12.0525 2.14502" stroke="#C4C4C4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.5 3L9 10.5075L6.75 8.2575" stroke="#C4C4C4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/edit.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.25 3H3C2.60218 3 2.22064 3.15804 1.93934 3.43934C1.65804 3.72064 1.5 4.10218 1.5 4.5V15C1.5 15.3978 1.65804 15.7794 1.93934 16.0607C2.22064 16.342 2.60218 16.5 3 16.5H13.5C13.8978 16.5 14.2794 16.342 14.5607 16.0607C14.842 15.7794 15 15.3978 15 15V9.75" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.875 1.87505C14.1734 1.57668 14.578 1.40906 15 1.40906C15.422 1.40906 15.8266 1.57668 16.125 1.87505C16.4234 2.17342 16.591 2.57809 16.591 3.00005C16.591 3.422 16.4234 3.82668 16.125 4.12505L9 11.25L6 12L6.75 9.00005L13.875 1.87505Z" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/globe.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#C4C4C4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 12H22" stroke="#C4C4C4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2V2Z" stroke="#C4C4C4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/magnifying-glass.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 11H11.71L11.43 10.73C12.41 9.59 13 8.11 13 6.5C13 2.91 10.09 0 6.5 0C2.91 0 0 2.91 0 6.5C0 10.09 2.91 13 6.5 13C8.11 13 9.59 12.41 10.73 11.43L11 11.71V12.5L16 17.49L17.49 16L12.5 11ZM6.5 11C4.01 11 2 8.99 2 6.5C2 4.01 4.01 2 6.5 2C8.99 2 11 4.01 11 6.5C11 8.99 8.99 11 6.5 11Z" fill="#5A3984"/>
+</svg>

src/assets/images/svg/mail.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.33341 3.33337H16.6667C17.5834 3.33337 18.3334 4.08337 18.3334 5.00004V15C18.3334 15.9167 17.5834 16.6667 16.6667 16.6667H3.33341C2.41675 16.6667 1.66675 15.9167 1.66675 15V5.00004C1.66675 4.08337 2.41675 3.33337 3.33341 3.33337Z" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.3334 5L10.0001 10.8333L1.66675 5" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/offer-grid-line.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#E4E4E4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 14C13 13.7348 13.1054 13.4804 13.2929 13.2929C13.4804 13.1054 13.7348 13 14 13H26C26.2652 13 26.5196 13.1054 26.7071 13.2929C26.8946 13.4804 27 13.7348 27 14C27 14.2652 26.8946 14.5196 26.7071 14.7071C26.5196 14.8946 26.2652 15 26 15H14C13.7348 15 13.4804 14.8946 13.2929 14.7071C13.1054 14.5196 13 14.2652 13 14ZM13 18C13 17.7348 13.1054 17.4804 13.2929 17.2929C13.4804 17.1054 13.7348 17 14 17H26C26.2652 17 26.5196 17.1054 26.7071 17.2929C26.8946 17.4804 27 17.7348 27 18C27 18.2652 26.8946 18.5196 26.7071 18.7071C26.5196 18.8946 26.2652 19 26 19H14C13.7348 19 13.4804 18.8946 13.2929 18.7071C13.1054 18.5196 13 18.2652 13 18ZM13 22C13 21.7348 13.1054 21.4804 13.2929 21.2929C13.4804 21.1054 13.7348 21 14 21H26C26.2652 21 26.5196 21.1054 26.7071 21.2929C26.8946 21.4804 27 21.7348 27 22C27 22.2652 26.8946 22.5196 26.7071 22.7071C26.5196 22.8946 26.2652 23 26 23H14C13.7348 23 13.4804 22.8946 13.2929 22.7071C13.1054 22.5196 13 22.2652 13 22ZM13 26C13 25.7348 13.1054 25.4804 13.2929 25.2929C13.4804 25.1054 13.7348 25 14 25H26C26.2652 25 26.5196 25.1054 26.7071 25.2929C26.8946 25.4804 27 25.7348 27 26C27 26.2652 26.8946 26.5196 26.7071 26.7071C26.5196 26.8946 26.2652 27 26 27H14C13.7348 27 13.4804 26.8946 13.2929 26.7071C13.1054 26.5196 13 26.2652 13 26Z" fill="#5A3984"/>
+</svg>

src/assets/images/svg/offer-grid-square.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#E4E4E4"/>
+<path d="M12 14C12 13.4696 12.2107 12.9609 12.5858 12.5858C12.9609 12.2107 13.4696 12 14 12H16C16.5304 12 17.0391 12.2107 17.4142 12.5858C17.7893 12.9609 18 13.4696 18 14V16C18 16.5304 17.7893 17.0391 17.4142 17.4142C17.0391 17.7893 16.5304 18 16 18H14C13.4696 18 12.9609 17.7893 12.5858 17.4142C12.2107 17.0391 12 16.5304 12 16V14ZM22 14C22 13.4696 22.2107 12.9609 22.5858 12.5858C22.9609 12.2107 23.4696 12 24 12H26C26.5304 12 27.0391 12.2107 27.4142 12.5858C27.7893 12.9609 28 13.4696 28 14V16C28 16.5304 27.7893 17.0391 27.4142 17.4142C27.0391 17.7893 26.5304 18 26 18H24C23.4696 18 22.9609 17.7893 22.5858 17.4142C22.2107 17.0391 22 16.5304 22 16V14ZM12 24C12 23.4696 12.2107 22.9609 12.5858 22.5858C12.9609 22.2107 13.4696 22 14 22H16C16.5304 22 17.0391 22.2107 17.4142 22.5858C17.7893 22.9609 18 23.4696 18 24V26C18 26.5304 17.7893 27.0391 17.4142 27.4142C17.0391 27.7893 16.5304 28 16 28H14C13.4696 28 12.9609 27.7893 12.5858 27.4142C12.2107 27.0391 12 26.5304 12 26V24ZM22 24C22 23.4696 22.2107 22.9609 22.5858 22.5858C22.9609 22.2107 23.4696 22 24 22H26C26.5304 22 27.0391 22.2107 27.4142 22.5858C27.7893 22.9609 28 23.4696 28 24V26C28 26.5304 27.7893 27.0391 27.4142 27.4142C27.0391 27.7893 26.5304 28 26 28H24C23.4696 28 22.9609 27.7893 22.5858 27.4142C22.2107 27.0391 22 26.5304 22 26V24Z" stroke="#8C8C8C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/quantity.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1L1 3.5L6 6L11 3.5L6 1Z" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 8.5L6 11L11 8.5" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 6L6 8.5L11 6" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/refresh.svg

@@ -0,0 +1,12 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_86_8725)">
+<path d="M0.75 3V7.5H5.25" stroke="#FEB005" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.25 15V10.5H12.75" stroke="#FEB005" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.3675 6.75006C14.9871 5.67515 14.3407 4.71411 13.4884 3.95662C12.6361 3.19913 11.6059 2.66988 10.4938 2.41825C9.38167 2.16662 8.22393 2.20081 7.12861 2.51764C6.03328 2.83446 5.03606 3.42359 4.23 4.23006L0.75 7.50006M17.25 10.5001L13.77 13.7701C12.9639 14.5765 11.9667 15.1657 10.8714 15.4825C9.77607 15.7993 8.61833 15.8335 7.50621 15.5819C6.3941 15.3302 5.36385 14.801 4.5116 14.0435C3.65935 13.286 3.01288 12.325 2.6325 11.2501" stroke="#FEB005" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_86_8725">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/svg/star.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 1.5L11.3175 6.195L16.5 6.9525L12.75 10.605L13.635 15.765L9 13.3275L4.365 15.765L5.25 10.605L1.5 6.9525L6.6825 6.195L9 1.5Z" stroke="#4D4D4D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/thumbs-down.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.49999 11.25V14.25C7.49999 14.8468 7.73704 15.4191 8.159 15.841C8.58096 16.263 9.15326 16.5 9.74999 16.5L12.75 9.75003V1.50003H4.28999C3.92825 1.49594 3.57721 1.62272 3.30156 1.85702C3.02592 2.09132 2.84423 2.41735 2.78999 2.77503L1.75499 9.52503C1.72236 9.74001 1.73686 9.95952 1.79749 10.1683C1.85811 10.3772 1.96342 10.5703 2.1061 10.7344C2.24878 10.8985 2.42543 11.0296 2.62381 11.1186C2.82219 11.2076 3.03756 11.2525 3.25499 11.25H7.49999ZM12.75 1.50003H14.7525C15.177 1.49252 15.5894 1.64113 15.9116 1.91764C16.2337 2.19415 16.4431 2.57932 16.5 3.00003V8.25003C16.4431 8.67073 16.2337 9.0559 15.9116 9.33241C15.5894 9.60892 15.177 9.75753 14.7525 9.75003H12.75" fill="#FF3A3A"/>
+</svg>

src/assets/images/svg/thumbs-up.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5 6.75V3.75C10.5 3.15326 10.2629 2.58097 9.84099 2.15901C9.41903 1.73705 8.84674 1.5 8.25 1.5L5.25 8.25V16.5H13.71C14.0717 16.5041 14.4228 16.3773 14.6984 16.143C14.9741 15.9087 15.1558 15.5827 15.21 15.225L16.245 8.475C16.2776 8.26002 16.2631 8.04051 16.2025 7.83169C16.1419 7.62287 16.0366 7.42972 15.8939 7.26564C15.7512 7.10155 15.5746 6.97045 15.3762 6.88141C15.1778 6.79238 14.9624 6.74754 14.745 6.75H10.5ZM5.25 16.5H3C2.60218 16.5 2.22064 16.342 1.93934 16.0607C1.65804 15.7794 1.5 15.3978 1.5 15V9.75C1.5 9.35218 1.65804 8.97064 1.93934 8.68934C2.22064 8.40804 2.60218 8.25 3 8.25H5.25" fill="#0FB834"/>
+</svg>

src/assets/images/svg/trash.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.25 4.5H3.75H15.75" stroke="#5A3984" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 4.5V3C6 2.60218 6.15804 2.22064 6.43934 1.93934C6.72064 1.65804 7.10218 1.5 7.5 1.5H10.5C10.8978 1.5 11.2794 1.65804 11.5607 1.93934C11.842 2.22064 12 2.60218 12 3V4.5M14.25 4.5V15C14.25 15.3978 14.092 15.7794 13.8107 16.0607C13.5294 16.342 13.1478 16.5 12.75 16.5H5.25C4.85218 16.5 4.47064 16.342 4.18934 16.0607C3.90804 15.7794 3.75 15.3978 3.75 15V4.5H14.25Z" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/user.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="M16.6666 17.5V15.8333C16.6666 14.9493 16.3154 14.1014 15.6903 13.4763C15.0652 12.8512 14.2173 12.5 13.3333 12.5H6.66659C5.78253 12.5 4.93468 12.8512 4.30956 13.4763C3.68444 14.1014 3.33325 14.9493 3.33325 15.8333V17.5" stroke="#5A3984" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.0001 9.16667C11.841 9.16667 13.3334 7.67428 13.3334 5.83333C13.3334 3.99238 11.841 2.5 10.0001 2.5C8.15913 2.5 6.66675 3.99238 6.66675 5.83333C6.66675 7.67428 8.15913 9.16667 10.0001 9.16667Z" stroke="#5A3984" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/Buttons/IconButton/IconButton.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 
 export const IconButton = (props) => {
     return <IconButtonContainer style={props.containerStyle} className={props.className}>
-        <IconButtonStyled onClick={props.onClick} sx={props.style}>
+        <IconButtonStyled onClick={props.onClick} sx={props.style} iconColor={props.iconColor}>
             {props.children}
         </IconButtonStyled>
     </IconButtonContainer>
@@ -16,4 +16,5 @@ IconButton.propTypes = {
     containerStyle: PropTypes.any,
     style: PropTypes.any,
     className: PropTypes.string,
+    iconColor: PropTypes.string
 }

src/components/Buttons/IconButton/IconButton.styled.js

@@ -8,4 +8,9 @@ export const IconButtonStyled = styled(IconButton)`
     height: ${props => props.height ? props.height : "36px"};
     width: ${props => props.width ? props.width : "36px"};
     padding: 0;
+    ${props => props.iconColor && `
+        & svg path {
+            stroke: ${props.iconColor};
+        }
+    `}
 `

src/components/Buttons/LoginButton/LoginButton.js

@@ -20,7 +20,7 @@ LoginButton.propTypes = {
   variant: PropTypes.string,
   style: PropTypes.any,
   containerStyle: PropTypes.any,
-  fullWidth: PropTypes.string,
+  fullWidth: PropTypes.bool,
   buttonColor: PropTypes.string,
   onClick: PropTypes.func
 };

src/components/Cards/FilterCard/FilterCard.js

@@ -22,13 +22,14 @@ import { useHistory } from "react-router-dom";
 import { HOME_PAGE } from "../../../constants/pages";
 import qs from "query-string";
 import { useTranslation } from "react-i18next";
+import selectedTheme from "../../../themes";
 
 const FilterCard = () => {
   const [appliedFilters, setAppliedFilters] = useState([]);
   const [selectedCategory, setSelectedCategory] = useState(0);
   const [selectedSubcategory, setSelectedSubcategory] = useState(0);
   const history = useHistory();
-  const {t} = useTranslation();
+  const { t } = useTranslation();
 
   useEffect(() => {
     const queryString = history.location.search.substring(1);
@@ -89,8 +90,8 @@ const FilterCard = () => {
     });
     window.scrollTo({
       top: 0,
-      behavior: "smooth"
-    })
+      behavior: "smooth",
+    });
   };
   const clearFilters = () => {
     setAppliedFilters([]);
@@ -98,12 +99,12 @@ const FilterCard = () => {
     setSelectedSubcategory(0);
     history.push({
       pathname: HOME_PAGE,
-      search: ""
-    })
+      search: "",
+    });
     window.scrollTo({
       top: 0,
-      behavior: "smooth"
-    })
+      behavior: "smooth",
+    });
   };
 
   return (
@@ -156,7 +157,18 @@ const FilterCard = () => {
       </ContentContainer>
 
       <Footer>
-        <PrimaryButton variant="outlined" fullWidth onClick={handleFilters}>
+        <PrimaryButton
+          variant="outlined"
+          fullWidth
+          onClick={handleFilters}
+          textcolor={selectedTheme.primaryPurple}
+          font="Open Sans"
+          style={{
+            fontWeight: "600",
+            fontSize: "12px",
+            borderColor: selectedTheme.primaryPurple,
+          }}
+        >
           {t("filters.usefilters")}
         </PrimaryButton>
       </Footer>

src/components/Cards/FilterCard/FilterCard.styled.js

@@ -14,6 +14,7 @@ export const FilterCardContainer = styled(Box)`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  background-color: white;
 `;
 export const Title = styled(Typography)`
   font-size: 24px;

src/components/Cards/FilterCard/FilterDropdown/Checkbox/FilterCheckboxDropdown.js

@@ -3,10 +3,10 @@ import PropTypes from "prop-types";
 import DropdownList from "../../../../Dropdown/DropdownList/DropdownList";
 import selectedTheme from "../../../../../themes";
 import IconWithNumber from "../../../../Icon/IconWithNumber/IconWithNumber";
-import { ReactComponent as DropdownDown } from "../../../../../assets/images/svg/dropdownDown.svg";
-import { ReactComponent as DropdownUp } from "../../../../../assets/images/svg/dropdownUp.svg";
-import { ReactComponent as Close } from "../../../../../assets/images/svg/closeWhite.svg";
-import { ReactComponent as CloseBlack } from "../../../../../assets/images/svg/closeBlack.svg";
+import { ReactComponent as DropdownDown } from "../../../../../assets/images/svg/down-arrow.svg";
+import { ReactComponent as DropdownUp } from "../../../../../assets/images/svg/up-arrow.svg";
+import { ReactComponent as Close } from "../../../../../assets/images/svg/close-white.svg";
+import { ReactComponent as CloseBlack } from "../../../../../assets/images/svg/close-black.svg";
 import {
   ClearText,
   SelectedItem,

src/components/Cards/FilterCard/FilterDropdown/Radio/FilterRadioDropdown.js

@@ -2,9 +2,9 @@ import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import DropdownList from "../../../../Dropdown/DropdownList/DropdownList";
 import selectedTheme from "../../../../../themes";
-import { ReactComponent as DropdownDown } from "../../../../../assets/images/svg/dropdownDown.svg";
-import { ReactComponent as DropdownUp } from "../../../../../assets/images/svg/dropdownUp.svg";
-import { ReactComponent as CloseBlack } from "../../../../../assets/images/svg/closeBlack.svg";
+import { ReactComponent as DropdownDown } from "../../../../../assets/images/svg/down-arrow.svg";
+import { ReactComponent as DropdownUp } from "../../../../../assets/images/svg/up-arrow.svg";
+import { ReactComponent as CloseBlack } from "../../../../../assets/images/svg/close-black.svg";
 import { ClearText } from "./FilterRadioDropdown.styled";
 import { TextField } from "../../../../TextFields/TextField/TextField";
 import DropdownItem from "../../../../Dropdown/DropdownItem/DropdownItem";

src/components/Cards/OfferCard/OfferCard.js

@@ -0,0 +1,118 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  CheckButton,
+  DetailIcon,
+  DetailText,
+  MessageIcon,
+  OfferAuthor,
+  OfferAuthorName,
+  OfferCardContainer,
+  OfferCategory,
+  OfferDescription,
+  OfferDescriptionText,
+  OfferDescriptionTitle,
+  OfferDetails,
+  OfferImage,
+  OfferInfo,
+  OfferLocation,
+  OfferPackage,
+  OfferTitle,
+  OfferViews,
+} from "./OfferCard.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 Message } from "../../../assets/images/svg/mail.svg";
+import selectedTheme from "../../../themes";
+
+const OfferCard = (props) => {
+  return (
+    <OfferCardContainer sponsored={props.sponsored} halfWidth={props.halfWidth}>
+      <OfferImage>{props.image}</OfferImage>
+      <OfferInfo>
+        <OfferTitle>{props.title}</OfferTitle>
+        <OfferAuthor>
+          <OfferAuthorName>{props.author}</OfferAuthorName>
+          <OfferLocation>{props.location}</OfferLocation>
+        </OfferAuthor>
+        <OfferDetails>
+          <OfferCategory>
+            <DetailIcon color="black" component="span" size="16px">
+              <Category width={"14px"} />
+            </DetailIcon>
+            <DetailText>{props.category}</DetailText>
+          </OfferCategory>
+
+          <OfferPackage>
+            <DetailIcon color="black" component="span" size="16px">
+              <Quantity width={"12px"} height={"12px"} />
+            </DetailIcon>
+            <DetailText>{props.quantity} pakovanja</DetailText>
+          </OfferPackage>
+          <OfferViews>
+            <DetailIcon color="black" component="span" size="16px">
+              <Eye width={"12px"} height={"11px"} />
+            </DetailIcon>
+            <DetailText>{props.numberOfViews} pregleda</DetailText>
+          </OfferViews>
+        </OfferDetails>
+      </OfferInfo>
+      {!props.halfWidth ? (
+        <React.Fragment>
+          <OfferDescription>
+            <OfferDescriptionTitle>Opis:</OfferDescriptionTitle>
+            <OfferDescriptionText>{props.description}</OfferDescriptionText>
+          </OfferDescription>
+
+          <CheckButton
+            variant={props.sponsored ? "contained" : "outlined"}
+            buttoncolor={selectedTheme.primaryPurple}
+            textcolor={props.sponsored ? "white" : selectedTheme.primaryPurple}
+            style={{fontWeight: "600"}}
+          >
+            Pogledaj proizvod
+          </CheckButton>
+        </React.Fragment>
+      ) : (
+        <></>
+      )}
+
+      <MessageIcon>
+        <Message />
+      </MessageIcon>
+
+      {/* {props.image}
+      {props.title}
+      {props.description}
+      {props.category}
+      {props.author}
+      {props.location}
+      {props.quantity}
+      {props.package}
+      {props.numberOfViews} */}
+    </OfferCardContainer>
+  );
+};
+
+OfferCard.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,
+};
+OfferCard.defaultProps = {
+  halfWidth: false,
+  sponsored: false,
+};
+
+export default OfferCard;

src/components/Cards/OfferCard/OfferCard.styled.js

@@ -0,0 +1,134 @@
+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 OfferCardContainer = styled(Container)`
+  display: flex;
+  flex-direction: row;
+  width: ${props => !props.halfWidth ? "100%" : "49%"};
+  box-sizing: border-box;
+  margin: 10px 0;
+  background-color: ${props => props.sponsored ? selectedTheme.backgroundSponsoredColor : "white"};
+  border: 1px solid ${selectedTheme.borderColor};
+  border-radius: 4px;
+  padding: 16px;
+  max-width: 2000px;
+  height: 180px;
+  position: relative;
+`;
+export const OfferImage = styled(Box)``;
+export const OfferInfo = styled(Box)`
+  display: flex;
+  flex: 2;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-left: 18px;
+`;
+export const OfferTitle = styled(Typography)`
+  font-family: "Open Sans";
+  flex: 1;
+  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(Typography)`
+  font-family: "Open Sans";
+  color: ${selectedTheme.primaryText};
+  line-height: 16px;
+  font-size: 12px;
+`;
+export const OfferDetails = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: ${props => !props.halfWidth ? "no-wrap" : "wrap"};
+`;
+export const OfferCategory = styled(Typography)`
+  font-family: "Open Sans";
+  color: ${selectedTheme.primaryText};
+  line-height: 16px;
+  font-size: 12px;
+  width: 33%;
+`;
+export const OfferPackage = styled(Typography)`
+  font-family: "Open Sans";
+  color: ${selectedTheme.primaryText};
+  line-height: 16px;
+  font-size: 12px;
+  width: 34%;
+`;
+export const OfferViews = styled(Typography)`
+  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;
+  padding-top: 20px;
+`;
+export const OfferDescriptionText = styled(Box)`
+  font-family: "Open Sans";
+  font-size: 16px;
+  color: ${selectedTheme.primaryDarkText};
+  line-height: 22px;
+  max-width: 250px;
+`;
+export const OfferDescription = styled(Box)`
+  flex: 3;
+`;
+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 MessageIcon = styled(IconButton)`
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: ${selectedTheme.primaryIconBackgroundColor};
+    border-radius: 100%;
+    padding-top: 2px;
+    text-align: center;
+`

src/components/Icon/Icon.js

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 
 export const Icon = (props) => {
   return (
-    <IconContainer style={props.containerStyle} className={props.className} onClick={props.onClick}>
+    <IconContainer style={props.containerStyle} className={props.className} onClick={props.onClick} component={props.component}>
         <IconStyled sx={props.style} color={props.color} size={props.size} fontSize={props.iconsize}>
             {props.children}
         </IconStyled>
@@ -22,4 +22,5 @@ Icon.propTypes = {
     iconsize: PropTypes.string,
     className: PropTypes.any,
     onClick: PropTypes.func,
+    component: PropTypes.any,
 }

src/components/Icon/Icon.styled.js

@@ -2,10 +2,14 @@ import { Box, Icon } from "@mui/material";
 import styled from "styled-components";
 
 export const IconContainer = styled(Box)`
+    
 `
 
 export const IconStyled = styled(Icon)`
     color: ${props => props.color};
     width: ${props => props.size};
     height: ${props => props.size};
+    & svg path {
+        stroke: ${props => props.color};
+    }
 `

src/components/MarketPlace/Header/Header.js

@@ -0,0 +1,80 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  HeaderButton,
+  HeaderButtons,
+  HeaderContainer,
+  HeaderLocation,
+  HeaderOptions,
+  HeaderSelect,
+  IconStyled,
+} from "./Header.styled";
+import { ReactComponent as GridSquare } from "../../../assets/images/svg/offer-grid-square.svg";
+import { ReactComponent as GridLine } from "../../../assets/images/svg/offer-grid-line.svg";
+import { ReactComponent as Down } from "../../../assets/images/svg/down-arrow.svg";
+import { MenuItem } from "@mui/material";
+import selectedTheme from "../../../themes";
+
+const DownArrow = (props) => (
+  <IconStyled {...props}>
+    <Down />
+  </IconStyled>
+);
+
+const MockupdataForSelect = [
+  {
+    id: 0,
+    string: "Sortiraj po",
+  },
+  {
+    id: 1,
+    string: "Ceni rastuce",
+  },
+  {
+    id: 2,
+    string: "Ceni opadajuce",
+  },
+];
+
+const Header = (props) => {
+  const category = "Gradjevinski materijal";
+  const city = "Nis";
+  const locationString = category + " | " + city;
+  return (
+    <HeaderContainer>
+      <HeaderLocation>{locationString}</HeaderLocation>
+      <HeaderOptions>
+        <HeaderButtons>
+          <HeaderButton iconColor={props.isGrid ? selectedTheme.iconStrokeColor : selectedTheme.primaryPurple}>
+            <GridLine onClick={() => props.setIsGrid(false)}/>
+          </HeaderButton>
+          <HeaderButton iconColor={props.isGrid ? selectedTheme.primaryPurple : selectedTheme.iconStrokeColor}>
+            <GridSquare onClick={() => props.setIsGrid(true)}/>
+          </HeaderButton>
+        </HeaderButtons>
+        <HeaderSelect defaultValue={0} IconComponent={DownArrow}>
+          {MockupdataForSelect.map((item) => (
+            <MenuItem
+              value={item.id}
+              key={item.id}
+              style={{ display: item.id === 0 ? "none" : "flex" }}
+            >
+              {item.string}
+            </MenuItem>
+          ))}
+        </HeaderSelect>
+      </HeaderOptions>
+    </HeaderContainer>
+  );
+};
+
+Header.propTypes = {
+  children: PropTypes.node,
+  setIsGrid: PropTypes.func,
+  isGrid: PropTypes.bool,
+};
+Header.defaultProps = {
+  isGrid: false,
+}
+
+export default Header;

src/components/MarketPlace/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: space-between;
+`
+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/MarketPlace/MarketPlace.js

@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { MarketPlaceContainer } from "./MarketPlace.styled";
+import Header from "./Header/Header";
+import Offers from "./Offers/Offers";
+
+const MarketPlace = () => {
+  const [isGrid, setIsGrid] = useState(false);
+  return (
+    <MarketPlaceContainer>
+      <Header isGrid={isGrid} setIsGrid={setIsGrid}/>
+      <Offers isGrid={isGrid} />
+    </MarketPlaceContainer>
+  );
+};
+
+MarketPlace.propTypes = {
+  children: PropTypes.node,
+};
+
+export default MarketPlace;

src/components/MarketPlace/MarketPlace.styled.js

@@ -0,0 +1,7 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+
+export const MarketPlaceContainer = styled(Box)`
+  height: 100%;
+  margin: 0 70px;
+`;

src/components/MarketPlace/MockupdataOffers.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import {ReactComponent as DummyImage1 } from "../../assets/images/svg/dummyImages/offer-1.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 default [
+    {
+        id: 0,
+        title: "Vino",
+        description: "Vinarija Aleksić osnovana je u Vranju 2006. godine, otvorivši time put oživljavanju vinogradarstva na jugu Srbije.",
+        category: "Hrana i pice",
+        author: "Vinarija Aleksic",
+        location: "Nis, Serbia",
+        image: <DummyImage1 />,
+        quantity: 20,
+        package: packageEnum.package,
+        numberOfViews: 18
+    },
+    {
+        id: 1,
+        title: "Vino",
+        description: "Vinarija Aleksić osnovana je u Vranju 2006. godine, otvorivši time put oživljavanju vinogradarstva na jugu Srbije.",
+        category: "Hrana i pice",
+        author: "Vinarija Aleksic",
+        location: "Nis, Serbia",
+        image: <DummyImage1 />,
+        quantity: 20,
+        package: packageEnum.package,
+        numberOfViews: 18
+    },
+    {
+        id: 2,
+        title: "Vino",
+        description: "Vinarija Aleksić osnovana je u Vranju 2006. godine, otvorivši time put oživljavanju vinogradarstva na jugu Srbije.",
+        category: "Hrana i pice",
+        author: "Vinarija Aleksic",
+        location: "Nis, Serbia",
+        image: <DummyImage1 />,
+        quantity: 20,
+        package: packageEnum.package,
+        numberOfViews: 18
+    },
+    {
+        id: 3,
+        title: "Vino",
+        description: "Vinarija Aleksić osnovana je u Vranju 2006. godine, otvorivši time put oživljavanju vinogradarstva na jugu Srbije.",
+        category: "Hrana i pice",
+        author: "Vinarija Aleksic",
+        location: "Nis, Serbia",
+        image: <DummyImage1 />,
+        quantity: 20,
+        package: packageEnum.package,
+        numberOfViews: 18
+    }
+]

src/components/MarketPlace/Offers/Offers.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { OffersContainer } from './Offers.styled'
+import MockupdataOffers from '../MockupdataOffers'
+import OfferCard from '../../Cards/OfferCard/OfferCard'
+
+const Offers = (props) => {
+  return (
+    <OffersContainer>
+        {MockupdataOffers.map((item) => {
+          console.log(item);
+          return (
+          <OfferCard {...item} key={item.id} halfWidth={props.isGrid} />
+          )
+        })}
+    </OffersContainer>
+  )
+}
+
+Offers.propTypes = {
+    children: PropTypes.node,
+    isGrid: PropTypes.bool,
+}
+
+export default Offers

src/components/MarketPlace/Offers/Offers.styled.js

@@ -0,0 +1,9 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+
+export const OffersContainer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+`;

src/components/TextFields/TextField/TextField.js

@@ -38,6 +38,7 @@ export const TextField = (props) => {
         InputProps={props.InputProps}
         sx={props.style}
         label={props.showAnimation ? props.placeholder : ""}
+        
         italic={props.italicPlaceholder && isFieldEmpty}
         ref={textInputRef}
         focused={props.focused}

src/layouts/GridLayout/GridLayout.js

@@ -0,0 +1,38 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Content, LeftCard, RightCard, GridLayoutContainer, HeaderCard, MiddleCard } from "./GridLayout.styled";
+import { Grid } from "@mui/material";
+
+const GridLayout = (props) => {
+  return (
+    <GridLayoutContainer maxWidth={true}>
+      {props.children}
+      <Grid container lg={12} maxHeight="lg">
+        <LeftCard item xs={2} lg={2.5} xl={2.4} md={3}>
+          {props.leftCard}
+        </LeftCard>
+        <MiddleCard item xs={7.5} lg={6.5} xl={6.6} md={6}>
+          <HeaderCard>
+            {props.headerCard}
+          </HeaderCard>
+          <Content>
+            {props.content}
+          </Content>
+        </MiddleCard>
+        <RightCard item xs={2.5} lg={3} xl={3} md={3}>
+            {props.rightCard}
+        </RightCard>
+      </Grid>
+    </GridLayoutContainer>
+  );
+};
+
+GridLayout.propTypes = {
+  children: PropTypes.node,
+  leftCard: PropTypes.node,
+  content: PropTypes.node,
+  rightCard: PropTypes.node,
+  headerCard: PropTypes.node,
+};
+
+export default GridLayout;

src/layouts/GridLayout/GridLayout.styled.js

@@ -0,0 +1,28 @@
+import { Box, Container, Grid } from "@mui/material";
+import styled from "styled-components";
+
+export const ProfileLayoutContainer = styled(Container)`
+    padding-left: 0;
+    padding-right: 0;
+    margin: 0;
+    width: 100%;
+    display: flex;
+    flex: 1;
+    height: 100%;
+`
+
+export const LeftCard = styled(Grid)`
+    margin-top: 30px;
+    border-top-right-radius: 4px;
+`
+export const Content = styled(Grid)`
+`
+export const RightCard = styled(Grid)`
+    margin-top: 30px;
+    border-top-left-radius: 4px;
+`
+export const MiddleCard = styled(Grid)`
+`
+export const HeaderCard = styled(Box)`
+    height: 450px;
+`

src/components/Layouts/MainLayout/MainLayout.js → src/layouts/MainLayout/MainLayout.js

@@ -8,10 +8,10 @@ const MainLayout = (props) => {
     <MainLayoutContainer maxWidth={true}>
       {props.children}
       <Grid container lg={12} maxHeight="lg">
-        <LeftCard item xs={2} lg={3} xl={2.4} md={4}>
+        <LeftCard item xs={2} lg={3} xl={2.4} md={4} >
           {props.leftCard}
         </LeftCard>
-        <Content item xs={10} lg={9} xl={9.6} md={8}>
+        <Content item xs={10} lg={9} xl={9.6} md={8} >
           {props.content}
         </Content>
       </Grid>

src/layouts/ProfileLayout/ProfileLayout.js

@@ -0,0 +1,38 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Content, LeftCard, RightCard, ProfileLayoutContainer, HeaderCard, MiddleCard } from "./ProfileLayout.styled";
+import { Grid } from "@mui/material";
+
+const ProfileLayout = (props) => {
+  return (
+    <ProfileLayoutContainer maxWidth={true}>
+      {props.children}
+      <Grid container lg={12} maxHeight="lg">
+        <LeftCard item xs={2} lg={2.5} xl={2.4} md={3}>
+          {props.leftCard}
+        </LeftCard>
+        <MiddleCard item xs={7.5} lg={6.5} xl={6.6} md={6}>
+          <HeaderCard>
+            {props.headerCard}
+          </HeaderCard>
+          <Content>
+            {props.content}
+          </Content>
+        </MiddleCard>
+        <RightCard item xs={2.5} lg={3} xl={3} md={3}>
+            {props.rightCard}
+        </RightCard>
+      </Grid>
+    </ProfileLayoutContainer>
+  );
+};
+
+ProfileLayout.propTypes = {
+  children: PropTypes.node,
+  leftCard: PropTypes.node,
+  content: PropTypes.node,
+  rightCard: PropTypes.node,
+  headerCard: PropTypes.node,
+};
+
+export default ProfileLayout;

src/layouts/ProfileLayout/ProfileLayout.styled.js

@@ -0,0 +1,28 @@
+import { Box, Container, Grid } from "@mui/material";
+import styled from "styled-components";
+
+export const ProfileLayoutContainer = styled(Container)`
+    padding-left: 0;
+    padding-right: 0;
+    margin: 0;
+    width: 100%;
+    display: flex;
+    flex: 1;
+    height: 100%;
+`
+
+export const LeftCard = styled(Grid)`
+    margin-top: 30px;
+    border-top-right-radius: 4px;
+`
+export const Content = styled(Grid)`
+`
+export const RightCard = styled(Grid)`
+    margin-top: 30px;
+    border-top-left-radius: 4px;
+`
+export const MiddleCard = styled(Grid)`
+`
+export const HeaderCard = styled(Box)`
+    height: 450px;
+`

src/pages/ForgotPasswordPage/ForgotPasswordPageMUI.js

@@ -26,8 +26,7 @@ const ForgotPasswordPage = () => {
   const history = useHistory();
   const { t } = useTranslation();
 
-  const handleSubmit = (values) => {
-    console.log("Values", values);
+  const handleSubmit = () => {
     history.push(FORGOT_PASSWORD_MAIL_SENT);
   };
 

src/pages/HomePage/HomePage.styled.js

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { Container, Grid } from "@mui/material";
+import selectedTheme from "../../themes";
 export const HomePageContainer = styled(Container)`
   padding: 0;
   margin: 0;
@@ -8,6 +9,7 @@ export const HomePageContainer = styled(Container)`
   flex: 1;
   display: flex;
   flex-direction: column;
+  background-color: ${selectedTheme.offerBackgroundColor};
 `;
 export const GridStyled = styled(Grid)`
   

src/pages/HomePage/HomePageMUI.js

@@ -8,15 +8,16 @@ import Navbar from "../../components/MUI/NavbarComponent";
 //import RandomDataProvider from '../../context/RandomDataContext';
 // import { GridStyled } from "./HomePage.styled";
 // import HomeListCard from "../../components/Cards/HomeListCard/HomeListCard";
-import MainLayout from "../../components/Layouts/MainLayout/MainLayout";
 import FilterCard from "../../components/Cards/FilterCard/FilterCard";
 import { HomePageContainer } from "./HomePage.styled";
+import MarketPlace from "../../components/MarketPlace/MarketPlace";
+import MainLayout from "../../layouts/MainLayout/MainLayout";
 
 const HomePage = () => {
   return (
     <HomePageContainer maxWidth={true}>
       <Navbar />
-      <MainLayout leftCard={<FilterCard />} content={<div></div>}/>
+      <MainLayout leftCard={<FilterCard />} content={<MarketPlace />}/>
       {/* <Box sx={{ mt: 4, mx: 4 }}>
         <GridStyled container justifyContent="space-between">
           <GridStyled item xs={12} md={3}>

src/pages/LoginPage/LoginPageMUI.js

@@ -12,8 +12,8 @@ import {
 } from "../../store/actions/login/loginActions";
 import { selectLoginError } from "../../store/selectors/loginSelectors";
 import { FORGOT_PASSWORD_PAGE, HOME_PAGE } from "../../constants/pages";
-import { ReactComponent as VisibilityOn } from "../../assets/images/svg/VisibilityOn.svg";
-import { ReactComponent as VisibilityOff } from "../../assets/images/svg/VisibilityOff.svg";
+import { ReactComponent as VisibilityOn } from "../../assets/images/svg/eye.svg";
+import { ReactComponent as VisibilityOff } from "../../assets/images/svg/eye-striked.svg";
 import Backdrop from "../../components/MUI/BackdropComponent";
 import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
 import { LOGIN_USER_LOADING } from "../../store/actions/login/loginActionConstants";

src/pages/RegisterPages/Register/FirstPart/FirstPartOfRegistration.js

@@ -9,8 +9,8 @@ import * as Yup from "yup";
 import { useTranslation } from "react-i18next";
 import { TextField } from "../../../../components/TextFields/TextField/TextField";
 import { IconButton } from "../../../../components/Buttons/IconButton/IconButton";
-import { ReactComponent as VisibilityOn } from "../../../../assets/images/svg/VisibilityOn.svg";
-import { ReactComponent as VisibilityOff } from "../../../../assets/images/svg/VisibilityOff.svg";
+import { ReactComponent as VisibilityOn } from "../../../../assets/images/svg/eye.svg";
+import { ReactComponent as VisibilityOff } from "../../../../assets/images/svg/eye-striked.svg";
 import { PrimaryButton } from "../../../../components/Buttons/PrimaryButton/PrimaryButton";
 import selectedTheme from "../../../../themes";
 

src/pages/RegisterPages/Register/Register.js

@@ -28,7 +28,6 @@ const Register = () => {
 
   const handleSubmit = (values) => {
     setInformations({ ...informations, ...values });
-    console.log({ ...informations, ...values });
     if (currentStep !== 3) {
       setCurrentStep((prevState) => prevState + 1);
     } else {

src/themes/primaryTheme/primaryThemeColors.js

@@ -7,5 +7,10 @@ export const primaryThemeColors = {
     primaryText: "#4D4D4D",
     primaryGrayText: "#818181",
     primaryDarkGrayText: "#DCDCDC",
-    primaryIconBackgroundColor: "#E4E4E4"
+    primaryIconBackgroundColor: "#E4E4E4",
+    borderSponsoredColor: "#E5D0FF",
+    backgroundSponsoredColor: "#F5EDFF",
+    offerBackgroundColor: "#F5F5F5",
+    primaryDarkText: "#505050",
+    iconStrokeColor: "#8C8C8C"
 }