Added basic components

src/components/Buttons/PrimaryButtonWithIcon/PrimaryButtonWithIcon.styled.js

@@ -2,15 +2,26 @@ import styled from "styled-components";
 import { Icon } from "../../Icon/Icon";
 import { PrimaryButton } from "../PrimaryButton/PrimaryButton";
 
-export const ComponentContainer = styled.div`
-`
+export const ComponentContainer = styled.div``;
 
 export const PrimaryButtonWithIconStyled = styled(PrimaryButton)`
-    position: relative;
-`
+  position: relative;
+`;
 
 export const IconStyled = styled(Icon)`
+  position: absolute;
+  padding: 0;
+  left: 10px;
+  top: 0;
+  bottom: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+  line-height: 21px;
+  & span {
     position: absolute;
-    left: 10px;
-    top: 5px;
-`
+    top: 0;
+    bottom: 0;
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+`;

src/components/CheckBox/CheckBox.styled.js

@@ -11,6 +11,7 @@ export const ComponentContainer = styled.div`
 
 export const CheckBoxStyled = styled(Checkbox)`
     color: ${props => props.boxcolor} !important;
+    padding: 6px;
 `
 export const FormControlLabelStyled = styled(FormControlLabel)`
     ${props => props.fullWidth && (`

src/components/CheckBox/Label.styled.js

@@ -14,6 +14,7 @@ export const LeftLabel = styled(FormLabel)`
     white-space: nowrap;
     max-width: 200px;
     flex: 1;
+    cursor: pointer;
 `
 export const RightLabel = styled(FormLabel)`
     margin-left: 10px;
@@ -21,4 +22,5 @@ export const RightLabel = styled(FormLabel)`
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: 100px;
+    cursor: pointer;
 `

src/components/Dropdown/DropdownList/DropdownList.js

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import {
+  ComponentContainer,
+  DropdownHeader,
+  DropdownIcon,
+  DropdownTitle,
+  ListContainer,
+  ToggleIconClosed,
+  ToggleIconOpened,
+} from "./DropdownList.styled";
+import PropTypes from "prop-types";
+
+const DropdownList = (props) => {
+  const [listShown, setListShown] = useState(true);
+  return (
+    <ComponentContainer fullWidth={props.fullWidth}>
+      <DropdownHeader>
+        {props.dropdownIcon && (
+          <DropdownIcon>{props.dropdownIcon}</DropdownIcon>
+        )}
+        <DropdownTitle onClick={() => setListShown((prevState) => !prevState)}>
+          {props.title}
+        </DropdownTitle>
+        {listShown ? (
+          <ToggleIconOpened
+            onClick={() => setListShown((prevState) => !prevState)}
+          >
+            {props.toggleIconOpened}
+          </ToggleIconOpened>
+        ) : (
+          <ToggleIconClosed
+            onClick={() => setListShown((prevState) => !prevState)}
+          >
+            {props.toggleIconClosed}
+          </ToggleIconClosed>
+        )}
+      </DropdownHeader>
+
+      <ListContainer shouldShow={listShown}>{props.children}</ListContainer>
+    </ComponentContainer>
+  );
+};
+
+export default DropdownList;
+
+DropdownList.propTypes = {
+  title: PropTypes.string,
+  dropdownIcon: PropTypes.node,
+  toggleIconOpened: PropTypes.node,
+  toggleIconClosed: PropTypes.node,
+  children: PropTypes.node,
+  fullWidth: PropTypes.bool,
+};
+
+DropdownList.defaultProps = {
+  fullWidth: false,
+};

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

@@ -1,18 +1,51 @@
 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
+import { PRIMARY_PURPLE_COLOR } from "../../../constants/stylesConstants";
 import { Icon } from "../../Icon/Icon";
 
-export const ComponentContainer = styled.div`
+export const ComponentContainer = styled(Box)`
+
+    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 DropdownTitleStyled = styled(Typography)`
+export const ToggleIconOpened = styled(Icon)`
+    cursor: pointer;
+    color: ${PRIMARY_PURPLE_COLOR};
 `
 
-export const ToggleIconStyled = styled(Icon)`
+export const ToggleIconClosed = styled(Icon)`
+    cursor: pointer;
+    color: ${PRIMARY_PURPLE_COLOR};
+`
+
+export const DropdownIcon = styled(Icon)`
+    font-size: 24px !important;
+
+    & span {
+        font-size: 24px;
+        & svg {
+            font-size: 24px;
+        }
+    }
 `
 
-export const DropdownIconStyled = styled(Icon)`
+export const ListContainer = styled(Box)`
+    padding-left: 15px;
+    display: ${props => props.shouldShow ? "block" : "none"};
 `
 
-export const ListContainerStyled = styled(Box)`
+export const DropdownHeader = styled(Box)`
+    display: flex;
+    flex-direction: row;
 `

src/components/Icon/Icon.js

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

src/pages/LoginPage/LoginPageMUI.js

@@ -22,7 +22,7 @@ import {
   Link,
   Typography,
 } from "@mui/material";
-import { Visibility, VisibilityOff } from "@mui/icons-material";
+import { LocationOn, LocationOnOutlined, Visibility, VisibilityOff } from "@mui/icons-material";
 import Backdrop from "../../components/MUI/BackdropComponent";
 import ErrorMessage from "../../components/MUI/ErrorMessageComponent";
 import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
@@ -34,6 +34,9 @@ import { IconButton } from "../../components/Buttons/IconButton/IconButton";
 import { Icon } from "../../components/Icon/Icon";
 import PrimaryButtonWithIcon from "../../components/Buttons/PrimaryButtonWithIcon/PrimaryButtonWithIcon";
 import TextFieldWithIcon from "../../components/TextFields/TextFieldWithIcon/TextFieldWithIcon";
+import DropdownList from "../../components/Dropdown/DropdownList/DropdownList";
+import DropdownItem from "../../components/Dropdown/DropdownItem/DropdownItem";
+import { CheckBox } from "../../components/CheckBox/CheckBox";
 
 const LoginPage = ({ history }) => {
   const dispatch = useDispatch();
@@ -147,9 +150,29 @@ const LoginPage = ({ history }) => {
           }}
           />
 
-          <Icon>
-            <Visibility fontSize="large" />
-          </Icon>
+          <DropdownList title="Naslov" toggleIconOpened={<Visibility/>} toggleIconClosed={<Visibility/>} dropdownIcon={<LocationOnOutlined/>} fullWidth={true}>
+            <DropdownItem>
+              <CheckBox fullWidth leftText="Kategorija" rightText="124"/>
+            </DropdownItem>
+            <DropdownItem>
+              <CheckBox fullWidth leftText="Kategorija" rightText="124"/>
+            </DropdownItem>
+            <DropdownItem>
+              <CheckBox fullWidth leftText="Kategorija" rightText="124"/>
+            </DropdownItem>
+            <DropdownItem>
+              <CheckBox fullWidth leftText="Kategorija" rightText="124"/>
+            </DropdownItem>
+            <DropdownItem>
+              <CheckBox fullWidth leftText="Kategorija" rightText="124"/>
+            </DropdownItem>
+            <DropdownItem>
+              <CheckBox fullWidth leftText="Kategorija" rightText="124"/>
+            </DropdownItem>
+            <DropdownItem>
+              <CheckBox fullWidth leftText="Kategorija" rightText="124"/>
+            </DropdownItem>
+          </DropdownList>
 
           <PrimaryButtonWithIcon
             icon={<Visibility />}