Home page grid system, Filters card

src/App.js

@@ -14,12 +14,12 @@ const App = () => {
       <Helmet>
         <title>{i18next.t("app.title")}</title>
       </Helmet>
-      <main className="l-page">
+      {/* <main className="l-page"> */}
         <StyledEngineProvider injectFirst>
           <GlobalStyle />
           <AppRoutes />
         </StyledEngineProvider>
-      </main>
+      {/* </main> */}
     </Router>
   </>
 )};

src/assets/images/svg/closeBlack.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.50024 3.4978L2.50006 8.49799" stroke="black" stroke-linecap="round"/>
+<path d="M2.50024 3.4978L7.50043 8.49799" stroke="black" stroke-linecap="round"/>
+</svg>

src/assets/images/svg/closeWhite.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.50024 3.4978L2.50006 8.49799" stroke="white" stroke-linecap="round"/>
+<path d="M2.50024 3.4978L7.50043 8.49799" stroke="white" stroke-linecap="round"/>
+</svg>

src/assets/images/svg/dropdownDown.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 1.25L7 6.75L12.5 1.25" stroke="#5A3984" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/dropdownUp.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 6.75L7 1.25L1.5 6.75" stroke="#5A3984" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/svg/location.svg

@@ -0,0 +1,11 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2_29355)">
+<path d="M19.25 9.16663C19.25 15.5833 11 21.0833 11 21.0833C11 21.0833 2.75 15.5833 2.75 9.16663C2.75 6.97859 3.61919 4.88017 5.16637 3.333C6.71354 1.78582 8.81196 0.916626 11 0.916626C13.188 0.916626 15.2865 1.78582 16.8336 3.333C18.3808 4.88017 19.25 6.97859 19.25 9.16663Z" stroke="#4D4D4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 11.9166C12.5188 11.9166 13.75 10.6854 13.75 9.16663C13.75 7.64784 12.5188 6.41663 11 6.41663C9.48122 6.41663 8.25 7.64784 8.25 9.16663C8.25 10.6854 9.48122 11.9166 11 11.9166Z" stroke="#4D4D4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_2_29355">
+<rect width="22" height="22" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/svg/subcategory.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 1.75V18.25M10 1.75H16.4167C16.9029 1.75 17.3692 1.94315 17.713 2.28697C18.0568 2.63079 18.25 3.0971 18.25 3.58333V16.4167C18.25 16.9029 18.0568 17.3692 17.713 17.713C17.3692 18.0568 16.9029 18.25 16.4167 18.25H10V1.75ZM10 1.75H3.58333C3.0971 1.75 2.63079 1.94315 2.28697 2.28697C1.94315 2.63079 1.75 3.0971 1.75 3.58333V16.4167C1.75 16.9029 1.94315 17.3692 2.28697 17.713C2.63079 18.0568 3.0971 18.25 3.58333 18.25H10V1.75Z" stroke="#4D4D4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -5,4 +5,7 @@ export const IconButtonContainer = styled(Box)`
 `
 
 export const IconButtonStyled = styled(IconButton)`
+    height: ${props => props.height ? props.height : "36px"};
+    width: ${props => props.width ? props.width : "36px"};
+    padding: 0;
 `

src/components/Buttons/PrimaryButton/PrimaryButton.js

@@ -7,9 +7,11 @@ import {
 
 export const PrimaryButton = (props) => {
   return (
-    <PrimaryButtonContainer style={props.containerStyle} className={props.className}>
+    <PrimaryButtonContainer
+      style={props.containerStyle}
+      className={props.className}
+    >
       <PrimaryButtonStyled {...props} sx={props.style}>
-        
         {props.children}
       </PrimaryButtonStyled>
     </PrimaryButtonContainer>
@@ -27,9 +29,9 @@ PrimaryButton.propTypes = {
   textcolor: PropTypes.string,
   className: PropTypes.string,
   onClick: PropTypes.func,
-  font: PropTypes.string
+  font: PropTypes.string,
 };
 
 PrimaryButton.defaultProps = {
-  font: "Open Sans"
-}
+  font: "Open Sans",
+};

src/components/Buttons/PrimaryButton/PrimaryButton.styled.js

@@ -5,12 +5,18 @@ import selectedTheme from "../../../themes";
 export const PrimaryButtonContainer = styled(Box)``;
 
 export const PrimaryButtonStyled = styled(Button)`
-  background-color: ${(props) => props.disabled ? selectedTheme.primaryPurpleDisabled: (
-    props.variant === "contained" ? props.buttoncolor : "transparent")} !important;
-  border-color: ${(props) => 
+  background-color: ${(props) =>
+    props.disabled
+      ? selectedTheme.primaryPurpleDisabled
+      : props.variant === "contained"
+      ? props.buttoncolor
+      : "transparent"} !important;
+  border-color: ${(props) =>
     props.variant === "outlined" ? props.buttoncolor : "transparent"};
-  color: ${(props) => props.disabled ? selectedTheme.primaryTextDisabled : (
-  props.textcolor)} !important;
+  color: ${(props) =>
+    props.disabled
+      ? selectedTheme.primaryTextDisabled
+      : props.textcolor} !important;
   box-shadow: 0 0 0 0;
   font-size: 12px;
   letter-spacing: 1px;

src/components/Cards/FilterCard/FilterCard.js

@@ -0,0 +1,48 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  FilterCardContainer,
+  Footer,
+  Header,
+  Title,
+} from "./FilterCard.styled";
+import { ReactComponent as Subcategory } from "../../../assets/images/svg/subcategory.svg";
+import { ReactComponent as Location } from "../../../assets/images/svg/location.svg";
+
+import Link from "../../Link/Link";
+import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
+import FilterDropdown from "./FilterDropdown.js/FilterDropdown";
+import Mockupdata from "./Mockupdata";
+
+const FilterCard = () => {
+  return (
+    <FilterCardContainer>
+      <Header>
+        <Title>Filteri</Title>
+        <Link to="#" textsize={"12px"}>
+          Ponisti filtere
+        </Link>
+      </Header>
+
+      <FilterDropdown data={[]} icon={<Subcategory />} title="Podkategorija" />
+
+      <FilterDropdown
+        data={[...Mockupdata]}
+        icon={<Location />}
+        title="Lokacija"
+      />
+
+      <Footer>
+        <PrimaryButton variant="outlined" fullWidth>
+          PRIMENI FILTERE
+        </PrimaryButton>
+      </Footer>
+    </FilterCardContainer>
+  );
+};
+
+FilterCard.propTypes = {
+  children: PropTypes.node,
+};
+
+export default FilterCard;

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

@@ -0,0 +1,36 @@
+import { Box, Typography } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../themes";
+
+export const FilterCardContainer = styled(Box)`
+  border-radius: 0;
+  border-top-right-radius: 4px;
+  height: 100%;
+  padding: 36px;
+  background-color: white;
+  width: 100%;
+  position: "fixed";
+  left: 0;
+`;
+export const Title = styled(Typography)`
+  font-size: 24px;
+  line-height: 33px;
+  font-weight: 900;
+  font-family: "Open Sans";
+  padding-left: 15px;
+  color: ${selectedTheme.primaryText};
+  position: relative;
+  top: -12px;
+`;
+export const Header = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+export const Footer = styled(Box)`
+
+  position: absolute;
+  bottom: 0;
+`;
+

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

@@ -0,0 +1,138 @@
+import React, { useEffect, useState } from "react";
+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 {
+  ClearText,
+  SelectedItem,
+  SelectedItemsContainer,
+} from "./FilterDropdown.styled";
+import { TextField } from "../../../TextFields/TextField/TextField";
+import DropdownItem from "../../../Dropdown/DropdownItem/DropdownItem";
+import { CheckBox } from "../../../CheckBox/CheckBox";
+
+const FilterDropdown = (props) => {
+  const [filtersApplied, setFiltersApplied] = useState([]);
+  const [toSearch, setToSearch] = useState("");
+  const [dataToShow, setDataToShow] = useState([]);
+
+    ///IMPLEMENTIRATI PROP FILTERS KOJI MENJA LOKALNO STANJE OVE KOMPONENTE U ZAVISNOSTI OD NJEGOVE PROMENE
+    ///ZA FUNKCIJU PONISTI FILTERE
+
+  const {data} = props;
+
+  useEffect(() => {
+    setDataToShow([...data])
+  }, []);
+
+  useEffect(() => {
+    if (toSearch.length > 0) {
+        setDataToShow(data.filter(item => item.string.toLowerCase().includes(toSearch.toLowerCase())));
+    } else {
+        setDataToShow([...data]);
+    }
+  }, [toSearch])
+
+  const handleChange = (item) => {
+    if (filtersApplied.find((p) => p.id === item.id)) {
+      setFiltersApplied([...filtersApplied.filter((p) => p.id !== item.id)]);
+    } else {
+      setFiltersApplied([...filtersApplied, item]);
+    }
+    let indexOfItem = dataToShow.findIndex((p) => p.id === item.id);
+    let items = [...dataToShow];
+    items[indexOfItem].checked = !item.checked;
+    setDataToShow([...items]);
+  };
+  const handleDelete = (item) => {
+    setFiltersApplied([...filtersApplied.filter((p) => p.id !== item.id)]);
+    let indexOfItem = dataToShow.findIndex((p) => p.id === item.id);
+    let items = [...dataToShow];
+    items[indexOfItem].checked = false;
+    setDataToShow([...items]);
+  };
+  const handleClear = () => {
+    setToSearch("");
+  };
+
+  return (
+    <DropdownList
+      title={props.title}
+      textcolor={
+        filtersApplied.length > 0
+          ? selectedTheme.primaryPurple
+          : selectedTheme.primaryText
+      }
+      dropdownIcon={
+        <IconWithNumber number={filtersApplied.length}>
+          {props.icon}
+        </IconWithNumber>
+      }
+      toggleIconClosed={<DropdownDown />}
+      toggleIconOpened={<DropdownUp />}
+      fullWidth
+      toggleIconStyles={{
+        backgroundColor: selectedTheme.primaryIconBackgroundColor,
+      }}
+      headerOptions={
+        <React.Fragment>
+          <SelectedItemsContainer>
+            {filtersApplied.map((item) => (
+              <SelectedItem key={item.id} onClick={() => handleDelete(item)}>
+                {item.string}{" "}
+                <Close style={{ position: "relative", top: "3px" }} />
+              </SelectedItem>
+            ))}
+          </SelectedItemsContainer>
+
+          <TextField
+            placeholder={"Pretrazite lokacije..."}
+            italicPlaceholder
+            value={toSearch}
+            onChange={(event) => setToSearch(event.target.value)}
+            textsize={"12px"}
+            font={"Open Sans"}
+            fullWidth
+            height={"40px"}
+            containerStyle={{ marginTop: "6px" }}
+            InputProps={{
+              endAdornment: (
+                <ClearText onClick={handleClear}>
+                  <CloseBlack />
+                </ClearText>
+              ),
+            }}
+          />
+        </React.Fragment>
+      }
+    >
+
+      {dataToShow.map((item) => (
+        <DropdownItem key={item.id}>
+          <CheckBox
+            leftText={item.string}
+            rightText={item.numberOfProducts}
+            value={item.id}
+            checked={item.checked}
+            onChange={() => handleChange(item)}
+            fullWidth
+          />
+        </DropdownItem>
+      ))}
+    </DropdownList>
+  );
+};
+
+FilterDropdown.propTypes = {
+  children: PropTypes.node,
+  icon: PropTypes.node,
+  data: PropTypes.array,
+  title: PropTypes.string,
+};
+
+export default FilterDropdown;

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

@@ -0,0 +1,38 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../../themes";
+
+export const SelectedItemsContainer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-top: 5px;
+`;
+export const SelectedItem = styled(Box)`
+  margin-top: 2px;
+  background-color: ${selectedTheme.primaryPurple};
+  border-radius: 8px;
+  color: white;
+  padding-left: 8px;
+  padding-right: 6px;
+  line-height: 12px;
+  letter-spacing: 0.02em;
+  font-family: "Open Sans";
+  font-size: 12px;
+  cursor: pointer;
+  margin-right: 3px;
+  height: 22px;
+`;
+export const ClearText = styled(Box)`
+    padding-top: 1px;
+    border-radius: 100%;
+    cursor: pointer;
+    padding-right: 2px;
+    position: relative;
+    left: 6px;
+    width: 21px;
+    height: 21px;
+    &:hover {
+        background-color: ${selectedTheme.primaryIconBackgroundColor};
+    }
+`

src/components/Cards/FilterCard/Mockupdata.js

@@ -0,0 +1,36 @@
+export default [{
+    string: "Beograd",
+    numberOfProducts: 17,
+    id: 0,
+    checked: false
+}
+,{
+    string: "Nis",
+    numberOfProducts: 137,
+    id: 1,
+    checked: false
+}
+,{
+    string: "Novi Sad",
+    numberOfProducts: 57,
+    id: 2,
+    checked: false
+}
+,{
+    string: "Kragujevac",
+    numberOfProducts: 62,
+    id: 3,
+    checked: false
+}
+,{
+    string: "Leskovac",
+    numberOfProducts: 1,
+    id: 4,
+    checked: false
+}
+,{
+    string: "Vranje",
+    numberOfProducts: 23,
+    id: 5,
+    checked: false
+}];

src/components/CheckBox/CheckBox.js

@@ -28,8 +28,9 @@ export const CheckBox = (props) => {
           <CheckBoxStyled
             sx={props.checkBoxStyle}
             boxcolor={props.color}
-            checked={props.value ? props.value : checked}
+            checked={props.checked}
             onClick={handleClick}
+            value={props.value}
           />
         }
         label={
@@ -53,7 +54,8 @@ CheckBox.propTypes = {
   leftText: PropTypes.string,
   rightText: PropTypes.string,
   maxWidth: PropTypes.string,
-  value: PropTypes.bool,
+  checked: PropTypes.bool,
+  value: PropTypes.number,
   onChange: PropTypes.func,
   containerStyle: PropTypes.any,
   checkBoxStyle: PropTypes.any,

src/components/CheckBox/CheckBox.styled.js

@@ -2,25 +2,31 @@ import { Box, Checkbox, FormControlLabel } from "@mui/material";
 import styled from "styled-components";
 
 export const CheckBoxContainer = styled(Box)`
-    ${props => props.fullWidth && (`
+  ${(props) =>
+    props.fullWidth &&
+    `
         width: 100%;
         display: flex;
         flex: 1;
-    `)}
-`
+    `}
+`;
 
 export const CheckBoxStyled = styled(Checkbox)`
-    color: ${props => props.boxcolor} !important;
-    padding: 6px;
-`
+  color: ${(props) => props.boxcolor} !important;
+  padding: 6px;
+`;
 export const FormControlLabelStyled = styled(FormControlLabel)`
-    ${props => props.fullWidth && (`
+  font-family: "Open Sans";
+  font-size: 12px;
+  ${(props) =>
+    props.fullWidth &&
+    `
         width: 100%;
         display: flex;
         flex: 1;
-    `)}
-    margin-right: 0;
-    & span:nth-child(2) {
-        flex: 1;
-    }
-`
+    `}
+  margin-right: 0;
+  & span:nth-child(2) {
+    flex: 1;
+  }
+`;

src/components/CheckBox/Label.styled.js

@@ -1,5 +1,6 @@
 import { Box, FormLabel } from "@mui/material";
 import styled from "styled-components";
+import selectedTheme from "../../themes";
 
 export const LabelContainer = styled(Box)`
     display: flex;
@@ -15,6 +16,7 @@ export const LeftLabel = styled(FormLabel)`
     max-width: 200px;
     flex: 1;
     cursor: pointer;
+    color: ${selectedTheme.primaryText};
 `
 export const RightLabel = styled(FormLabel)`
     margin-left: 10px;
@@ -23,4 +25,6 @@ export const RightLabel = styled(FormLabel)`
     white-space: nowrap;
     max-width: 100px;
     cursor: pointer;
+    color: ${selectedTheme.primaryText};
+
 `

src/components/Dropdown/DropdownItem/DropdownItem.styled.js

@@ -5,4 +5,5 @@ export const DropdownItemContainer = styled(Box)`
 `
 
 export const DropdownItemStyled = styled(Box)`
+    font-family: "Open Sans";
 `

src/components/Dropdown/DropdownList/DropdownList.js

@@ -7,6 +7,8 @@ import {
   ListContainer,
   ToggleIconClosed,
   ToggleIconOpened,
+  DropdownOptions,
+  ToggleContainer,
 } from "./DropdownList.styled";
 import PropTypes from "prop-types";
 
@@ -18,25 +20,29 @@ const DropdownList = (props) => {
         {props.dropdownIcon && (
           <DropdownIcon>{props.dropdownIcon}</DropdownIcon>
         )}
-        <DropdownTitle onClick={() => setListShown((prevState) => !prevState)}>
+        <DropdownTitle onClick={() => setListShown((prevState) => !prevState)} textcolor={props.textcolor}>
           {props.title}
         </DropdownTitle>
         {listShown ? (
           <ToggleIconOpened
+            style={props.toggleIconStyles}
             onClick={() => setListShown((prevState) => !prevState)}
           >
             {props.toggleIconOpened}
           </ToggleIconOpened>
         ) : (
           <ToggleIconClosed
+            style={props.toggleIconStyles}
             onClick={() => setListShown((prevState) => !prevState)}
           >
             {props.toggleIconClosed}
           </ToggleIconClosed>
         )}
       </DropdownHeader>
-
-      <ListContainer shouldShow={listShown}>{props.children}</ListContainer>
+      <ToggleContainer shouldShow={listShown}>
+        <DropdownOptions>{props.headerOptions}</DropdownOptions>
+        <ListContainer>{props.children}</ListContainer>
+      </ToggleContainer>
     </DropdownListContainer>
   );
 };
@@ -50,10 +56,13 @@ DropdownList.propTypes = {
   toggleIconClosed: PropTypes.node,
   children: PropTypes.node,
   fullWidth: PropTypes.bool,
-  defaultOpen: PropTypes.bool
+  defaultOpen: PropTypes.bool,
+  toggleIconStyles: PropTypes.any,
+  headerOptions: PropTypes.node,
+  textcolor: PropTypes.string,
 };
 
 DropdownList.defaultProps = {
   fullWidth: false,
-  defaultOpen: true
+  defaultOpen: false,
 };

src/components/Dropdown/DropdownList/DropdownList.styled.js

@@ -1,51 +1,59 @@
 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { Icon } from "../../Icon/Icon";
+import { IconButton } from "../../Buttons/IconButton/IconButton";
 
 export const DropdownListContainer = styled(Box)`
-
-    width: ${props => props.fullWidth ? '100%' : (props.width ? props.width : '250px')};
-    padding: 8px;
-`
+  width: ${(props) =>
+    props.fullWidth ? "100%" : props.width ? props.width : "250px"};
+  padding: 8px;
+`;
 
 export const DropdownTitle = styled(Typography)`
-    display: flex;
-    flex: 1;
-    cursor: pointer;
-    padding-left: 9px;
-    font-size: 18px;
-    font-weight: 100;
-    padding-bottom: 10px;
-`
-
-export const ToggleIconOpened = styled(Icon)`
-    cursor: pointer;
-    color: ${selectedTheme.primaryPurple};
-`
-
-export const ToggleIconClosed = styled(Icon)`
-    cursor: pointer;
-    color: ${selectedTheme.primaryPurple};
-`
-
-export const DropdownIcon = styled(Icon)`
-    font-size: 24px !important;
-
-    & span {
-        font-size: 24px;
-        & svg {
-            font-size: 24px;
-        }
+  display: flex;
+  flex: 1;
+  cursor: pointer;
+  padding-left: 9px;
+  font-size: 16px;
+  font-weight: 400;
+  padding-bottom: 10px;
+  padding-top: 5px;
+  font-family: "Open Sans";
+  color: ${props => props.textcolor ? props.textcolor : selectedTheme.primaryText};
+`;
+
+export const ToggleIconOpened = styled(IconButton)`
+  cursor: pointer;
+  color: ${selectedTheme.primaryPurple};
+`;
+
+export const ToggleIconClosed = styled(IconButton)`
+  cursor: pointer;
+  color: ${selectedTheme.primaryPurple};
+`;
+
+export const DropdownIcon = styled(IconButton)`
+  font-size: 22px !important;
+
+  & span {
+    font-size: 22px;
+    & svg {
+      font-size: 22px;
     }
-`
+  }
+`;
 
 export const ListContainer = styled(Box)`
-    padding-left: 15px;
-    display: ${props => props.shouldShow ? "block" : "none"};
-`
+  padding-left: 15px;
+`;
 
 export const DropdownHeader = styled(Box)`
-    display: flex;
-    flex-direction: row;
-`
+  display: flex;
+  flex-direction: row;
+`;
+export const DropdownOptions = styled(Box)`
+  padding-left: 7px;
+`;
+export const ToggleContainer = styled(Box)`
+  display: ${(props) => (props.shouldShow ? "block" : "none")};
+`;

src/components/Icon/IconWithNumber/IconWithNumber.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { IconWithNumberContainer, Number } from './IconWithNumber.styled'
+
+const IconWithNumber = (props) => {
+  return (
+    <IconWithNumberContainer>
+        {props.children}
+        {props.number > 0 && <Number>{props.number}</Number>}
+    </IconWithNumberContainer>
+  )
+}
+
+IconWithNumber.propTypes = {
+    children: PropTypes.node,
+    number: PropTypes.number,
+}
+
+export default IconWithNumber

src/components/Icon/IconWithNumber/IconWithNumber.styled.js

@@ -0,0 +1,19 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../themes";
+
+export const IconWithNumberContainer = styled(Box)`
+    position: relative;
+`
+export const Number = styled(Box)`
+    background-color: ${selectedTheme.primaryPurple};
+    border-radius: 100%;
+    color: white;
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    font-size: 10px;
+    bottom: 0;
+    right: -5px;
+    font-family: "Open Sans";
+`

src/components/Layouts/MainLayout/MainLayout.js

@@ -0,0 +1,29 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Content, LeftCard, MainLayoutContainer } from "./MainLayout.styled";
+import { Grid } from "@mui/material";
+
+const MainLayout = (props) => {
+  return (
+    <MainLayoutContainer maxWidth={true}>
+      {props.children}
+      <Grid container xs={12} maxHeight="lg">
+        <LeftCard item xs={3}>
+          {props.leftCard}
+        </LeftCard>
+        <Content item xs={8}>
+          {props.content}
+        </Content>
+      </Grid>
+    </MainLayoutContainer>
+  );
+};
+
+MainLayout.propTypes = {
+  children: PropTypes.node,
+  leftCard: PropTypes.node,
+  content: PropTypes.node,
+  rightCard: PropTypes.node,
+};
+
+export default MainLayout;

src/components/Layouts/MainLayout/MainLayout.styled.js

@@ -0,0 +1,19 @@
+import { Container, Grid } from "@mui/material";
+import styled from "styled-components";
+
+export const MainLayoutContainer = 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)`
+`

src/components/Link/Link.js

@@ -1,25 +1,27 @@
-import React from 'react'
-import PropTypes from 'prop-types';
-import { LinkStyled } from './Link.styled';
+import React from "react";
+import PropTypes from "prop-types";
+import { LinkStyled } from "./Link.styled";
 
-const Link = props => {
+const Link = (props) => {
   return (
-    <LinkStyled {...props} href={props.href}>{props.children}</LinkStyled>
-  )
-}
+    <LinkStyled {...props} href={props.href}>
+      {props.children}
+    </LinkStyled>
+  );
+};
 
 Link.propTypes = {
-    href: PropTypes.string,
-    children: PropTypes.node,
-    font: PropTypes.string,
-    align: PropTypes.oneOf(["left", "right", "center"]),
-    textsize: PropTypes.string,
-    lineheight: PropTypes.string,
-}
+  href: PropTypes.string,
+  children: PropTypes.node,
+  font: PropTypes.string,
+  align: PropTypes.oneOf(["left", "right", "center"]),
+  textsize: PropTypes.string,
+  lineheight: PropTypes.string,
+};
 Link.defaultProps = {
-    font: "Poppins",
-    align: "left",
-    textsize: "14px"
-}
+  font: "Poppins",
+  align: "left",
+  textsize: "14px",
+};
 
-export default Link
+export default Link;

src/components/Link/Link.styled.js

@@ -3,6 +3,7 @@ import styled from "styled-components";
 import selectedTheme from "../../themes";
 
 export const LinkStyled = styled(Link)`
+  cursor: pointer;
   color: ${selectedTheme.primaryPurple};
   font-family: ${(props) => props.font};
   font-style: normal;

src/components/Loader/FullPageLoader.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import {ReactComponent as Logo} from "../../assets/images/svg/big-logo-vertical.svg";
-import { FullPageLoaderContainer } from './FullPageLoader.styled';
+import React from "react";
+import { ReactComponent as Logo } from "../../assets/images/svg/big-logo-vertical.svg";
+import { FullPageLoaderContainer } from "./FullPageLoader.styled";
 
 const FullPageLoader = () => {
   return (

src/components/TextFields/TextField/TextField.js

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { TextFieldContainer, TextFieldStyled } from "./TextField.styled";
 import PropTypes from "prop-types";
 
 export const TextField = (props) => {
   const [isFieldEmpty, setIsFieldEmpty] = useState(true);
 
-//  for italicPlaceholder
+  //  for italicPlaceholder
   useEffect(() => {
     if (props.value.length === 0) {
       setIsFieldEmpty(true);
@@ -13,10 +13,15 @@ export const TextField = (props) => {
       setIsFieldEmpty(false);
     }
   }, [props.value]);
+  const textInputRef = useRef();
 
   return (
-    <TextFieldContainer style={props.containerStyle} className={props.className}>
-      <TextFieldStyled 
+    <TextFieldContainer
+      style={props.containerStyle}
+      className={props.className}
+      height={props.height}
+    >
+      <TextFieldStyled
         placeholder={props.placeholder}
         width={props.width}
         height={props.height}
@@ -34,6 +39,8 @@ export const TextField = (props) => {
         sx={props.style}
         label={props.showAnimation ? props.placeholder : ""}
         italic={props.italicPlaceholder && isFieldEmpty}
+        ref={textInputRef}
+        focused={props.focused}
       >
         {props.children}
       </TextFieldStyled>
@@ -69,6 +76,8 @@ TextField.propTypes = {
   type: PropTypes.string,
   textsize: PropTypes.string,
   font: PropTypes.string,
+  ref: PropTypes.any,
+  focused: PropTypes.bool,
   InputProps: PropTypes.shape({
     startAdornment: PropTypes.node,
     endAdornment: PropTypes.node,
@@ -79,5 +88,6 @@ TextField.propTypes = {
 TextField.defaultProps = {
   italicPlaceholder: false,
   showAnimation: false,
+  height: "48px",
   // font: "Open Sans"
 };

src/components/TextFields/TextField/TextField.styled.js

@@ -4,7 +4,7 @@ import selectedTheme from "../../../themes";
 
 export const TextFieldContainer = styled(Box)`
   width: 100%;
-  height: 48px;
+  height: ${props => props.height};
   box-sizing: border-box;
   margin: 16px 0;
   padding-left: 0;
@@ -17,13 +17,13 @@ export const TextFieldStyled = styled(TextField)`
   padding-left: 0;
   margin: 0;
   padding: 0;
-  height: 100%;
+  height: ${props => props.height};
   box-sizing: border-box;
   & div {
     padding-left: 2px;
   }
   & div input {
-    height: 48px;
+    height: ${props => props.height};
     box-sizing: border-box;
     font-size: ${props => props.textsize ? props.textsize : "16px"} !important;
     font-family: ${props => props.font ? props.font : ""}

src/pages/HomePage/HomePage.styled.js

@@ -1,8 +1,14 @@
-import styledComponents from 'styled-components';
-import { Box, Grid } from '@mui/material';
-export const BoxStyled = styledComponents(Box)`
-
-`
-export const GridStyled = styledComponents(Grid)`
-    
-`
+import styled from "styled-components";
+import { Container, Grid } from "@mui/material";
+export const HomePageContainer = styled(Container)`
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+`;
+export const GridStyled = styled(Grid)`
+  
+`;

src/pages/HomePage/HomePageMUI.js

@@ -1,45 +1,45 @@
-import React from 'react';
-import { Box } from '@mui/material';
-import Navbar from '../../components/MUI/NavbarComponent';
+import React from "react";
+// import { Box } from "@mui/material";
+import Navbar from "../../components/MUI/NavbarComponent";
 //import Modals from '../../components/MUI/Examples/ModalsExample';
 //import DataGrid from '../../components/MUI/Examples/DataGridExample';
 //import PagingSortingFiltering from '../../components/MUI/Examples/PagingSortingFilteringExample';
 //import PagingSortingFilteringServerSide from '../../components/MUI/Examples/PagingSortingFilteringExampleServerSide';
 //import RandomDataProvider from '../../context/RandomDataContext';
-import { GridStyled } from './HomePage.styled';
-import { Container } from '@mui/system';
-import HomeListCard from '../../components/Cards/HomeListCard/HomeListCard';
+// 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";
 
 const HomePage = () => {
-	return (
-		<>
-			<Navbar />
-			<Box sx={{ mt: 4, mx:4 }}>
-				<GridStyled container spacing={2} justifyContent="space-between">
-					<GridStyled item xs={12} md={3}>
-						<GridStyled item xs={12} md={12}>
-							
-					    </GridStyled>
-					</GridStyled>
-					<GridStyled item xs={12} md={6}>
-						<Container> Naslov </Container>
-						<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>
-		</>
-	);
+  return (
+    <HomePageContainer maxWidth={true}>
+      <Navbar />
+      <MainLayout leftCard={<FilterCard />} />
+      {/* <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> */}
+    </HomePageContainer>
+  );
 };
 
 export default HomePage;

src/pages/RegisterPages/Register/SecondPart/SecondPartOfRegistration.styled.js

@@ -12,7 +12,7 @@ export const RegisterDescription = styled(Typography)`
   font-weight: 400;
   display: flex;
   align-items: center;
-  color: ${selectedTheme.primaryDarkGrayText};
+  color: ${selectedTheme.primaryText};
   font-size: 12px;
   width: 100%;
   text-align: left;

src/pages/RegisterPages/Register/ThirdPart/ThirdPartOfRegistration.styled.js

@@ -11,7 +11,7 @@ export const RegisterDescription = styled(Typography)`
   font-weight: 400;
   display: flex;
   align-items: center;
-  color: ${selectedTheme.primaryDarkGrayText};
+  color: ${selectedTheme.primaryText};
   font-size: 12px;
   width: 100%;
   text-align: left;

src/themes/primaryTheme/primaryThemeColors.js

@@ -6,5 +6,6 @@ export const primaryThemeColors = {
     primaryTextDisabled: "#F1F1F1",
     primaryText: "#4D4D4D",
     primaryGrayText: "#818181",
-    primaryDarkGrayText: "#DCDCDC"
+    primaryDarkGrayText: "#DCDCDC",
+    primaryIconBackgroundColor: "#E4E4E4"
 }