Added onClick function for most components

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

@@ -1,7 +1,7 @@
-import { IconButton } from "@mui/material";
+import { Box, IconButton } from "@mui/material";
 import styled from "styled-components";
 
-export const ComponentContainer = styled.div`
+export const ComponentContainer = styled(Box)`
 `
 
 export const IconButtonStyled = styled(IconButton)`

src/components/Buttons/LoginButton/LoginButton.js

@@ -22,4 +22,5 @@ LoginButton.propTypes = {
   containerStyle: PropTypes.any,
   fullWidth: PropTypes.string,
   buttonColor: PropTypes.string,
+  onClick: PropTypes.func
 };

src/components/Buttons/LoginButton/LoginButton.styled.js

@@ -1,8 +1,8 @@
-import { Button } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import styled from "styled-components";
 
 
-export const ComponentContainer = styled.div`
+export const ComponentContainer = styled(Box)`
 `
 
 export const LoginButtonStyled = styled(Button)`

src/components/Buttons/PrimaryButton/PrimaryButton.js

@@ -26,4 +26,5 @@ PrimaryButton.propTypes = {
   buttoncolor: PropTypes.string,
   textcolor: PropTypes.string,
   className: PropTypes.string,
+  onClick: PropTypes.func,
 };

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

@@ -1,8 +1,8 @@
-import { Button } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import styled from "styled-components";
 import { PRIMARY_PURPLE_DISABLED } from "../../../constants/stylesConstants";
 
-export const ComponentContainer = styled.div``;
+export const ComponentContainer = styled(Box)``;
 
 export const PrimaryButtonStyled = styled(Button)`
   background-color: ${(props) =>

src/components/Buttons/PrimaryButtonWithIcon/PrimaryButtonWithIcon.js

@@ -12,7 +12,7 @@ const PrimaryButtonWithIcon = (props) => {
       style={props.containerStyle}
       className={props.className}
     >
-      <PrimaryButtonWithIconStyled sx={props.style} {...props.buttonProps}>
+      <PrimaryButtonWithIconStyled sx={props.style} {...props.buttonProps} onClick={props.onClick}>
         <IconStyled style={props.iconStyle}>{props.icon}</IconStyled>
         {props.children}
       </PrimaryButtonWithIconStyled>
@@ -28,6 +28,7 @@ PrimaryButtonWithIcon.propTypes = {
   style: PropTypes.any,
   iconStyle: PropTypes.any,
   buttonProps: PropTypes.any,
+  onClick: PropTypes.func,
 };
 
 export default PrimaryButtonWithIcon;

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

@@ -1,8 +1,9 @@
+import { Box } from "@mui/material";
 import styled from "styled-components";
 import { Icon } from "../../Icon/Icon";
 import { PrimaryButton } from "../PrimaryButton/PrimaryButton";
 
-export const ComponentContainer = styled.div``;
+export const ComponentContainer = styled(Box)``;
 
 export const PrimaryButtonWithIconStyled = styled(PrimaryButton)`
   position: relative;

src/components/CheckBox/CheckBox.styled.js

@@ -1,7 +1,7 @@
-import { Checkbox, FormControlLabel } from "@mui/material";
+import { Box, Checkbox, FormControlLabel } from "@mui/material";
 import styled from "styled-components";
 
-export const ComponentContainer = styled.div`
+export const ComponentContainer = styled(Box)`
     ${props => props.fullWidth && (`
         width: 100%;
         display: flex;

src/components/CheckBox/Label.styled.js

@@ -1,7 +1,7 @@
-import { FormLabel } from "@mui/material";
+import { Box, FormLabel } from "@mui/material";
 import styled from "styled-components";
 
-export const ComponentContainer = styled.div`
+export const ComponentContainer = styled(Box)`
     display: flex;
     flex: 1;
     justify-content: space-between;

src/components/Dropdown/DropdownItem/DropdownItem.js

@@ -4,7 +4,7 @@ import { ComponentContainer, DropdownItemStyled } from './DropdownItem.styled'
 
 const DropdownItem = (props) => {
   return (
-    <ComponentContainer>
+    <ComponentContainer onClick={props.onClick}>
         <DropdownItemStyled>
             {props.children}
         </DropdownItemStyled>
@@ -14,6 +14,7 @@ const DropdownItem = (props) => {
 
 DropdownItem.propTypes = {
     children: PropTypes.node,
+    onClick: PropTypes.func,
 }
 
 export default DropdownItem;

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

@@ -1,7 +1,8 @@
+import { Box } from "@mui/material";
 import styled from "styled-components";
 
-export const ComponentContainer = styled.div`
+export const ComponentContainer = styled(Box)`
 `
 
-export const DropdownItemStyled = styled.div`
+export const DropdownItemStyled = styled(Box)`
 `

src/components/Dropdown/DropdownList/DropdownList.js

@@ -11,7 +11,7 @@ import {
 import PropTypes from "prop-types";
 
 const DropdownList = (props) => {
-  const [listShown, setListShown] = useState(true);
+  const [listShown, setListShown] = useState(props.defaultOpen);
   return (
     <ComponentContainer fullWidth={props.fullWidth}>
       <DropdownHeader>
@@ -50,8 +50,10 @@ DropdownList.propTypes = {
   toggleIconClosed: PropTypes.node,
   children: PropTypes.node,
   fullWidth: PropTypes.bool,
+  defaultOpen: PropTypes.bool
 };
 
 DropdownList.defaultProps = {
   fullWidth: false,
+  defaultOpen: true
 };

src/components/Icon/Icon.styled.js

@@ -1,7 +1,7 @@
-import { Icon } from "@mui/material";
+import { Box, Icon } from "@mui/material";
 import styled from "styled-components";
 
-export const ComponentContainer = styled.div`
+export const ComponentContainer = styled(Box)`
 `
 
 export const IconStyled = styled(Icon)`

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

@@ -1,9 +1,9 @@
-import { TextField } from "@mui/material";
+import { Box, TextField } from "@mui/material";
 import styled from "styled-components";
 
 const backgroundColor = `rgb(241, 241, 241)`;
 
-export const ComponentContainer = styled.div`
+export const ComponentContainer = styled(Box)`
   width: 100%;
   padding-left: 0;
 `;

src/components/TextFields/TextFieldWithIcon/TextFieldWithIcon.styled.js

@@ -1,8 +1,9 @@
+import { Box } from "@mui/material";
 import styled from "styled-components";
 import { Icon } from "../../Icon/Icon";
 import { TextField } from "../TextField/TextField";
 
-export const ComponentContainer = styled.div`
+export const ComponentContainer = styled(Box)`
 `
 
 export const TextFieldStyled = styled(TextField)`

src/pages/LoginPage/LoginPageMUI.js

@@ -22,7 +22,12 @@ import {
   Link,
   Typography,
 } from "@mui/material";
-import { LocationOn, LocationOnOutlined, 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";
@@ -129,50 +134,57 @@ const LoginPage = ({ history }) => {
             fullWidth
           />
           <TextField
-          name = "password"
-          placeholder = {t("common.labelPassword")}
-          margin = "normal"
-          type = {showPassword ? "text" : "password"}
-          value = {formik.values.password}
-          onChange = {formik.handleChange}
-          error = {formik.touched.password && Boolean(formik.errors.password)}
-          helperText = {formik.touched.password && formik.errors.password}
-          fullWidth = {true}
-          InputProps = {{
-            endAdornment: (
+            name="password"
+            placeholder={t("common.labelPassword")}
+            margin="normal"
+            type={showPassword ? "text" : "password"}
+            value={formik.values.password}
+            onChange={formik.handleChange}
+            error={formik.touched.password && Boolean(formik.errors.password)}
+            helperText={formik.touched.password && formik.errors.password}
+            fullWidth={true}
+            InputProps={{
+              endAdornment: (
                 <IconButton
                   onClick={handleClickShowPassword}
                   onMouseDown={handleMouseDownPassword}
                 >
                   {showPassword ? <Visibility /> : <VisibilityOff />}
                 </IconButton>
-            ),
-          }}
+              ),
+            }}
           />
 
-          <DropdownList title="Naslov" toggleIconOpened={<Visibility/>} toggleIconClosed={<Visibility/>} dropdownIcon={<LocationOnOutlined/>} fullWidth={true}>
+          {/* <DropdownList
+            title="Naslov"
+            toggleIconOpened={<Visibility />}
+            toggleIconClosed={<VisibilityOff />}
+            dropdownIcon={<LocationOnOutlined />}
+            fullWidth
+            defaultOpen={false}
+          >
             <DropdownItem>
-              <CheckBox fullWidth leftText="Kategorija" rightText="124"/>
+              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
             </DropdownItem>
             <DropdownItem>
-              <CheckBox fullWidth leftText="Kategorija" rightText="124"/>
+              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
             </DropdownItem>
             <DropdownItem>
-              <CheckBox fullWidth leftText="Kategorija" rightText="124"/>
+              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
             </DropdownItem>
             <DropdownItem>
-              <CheckBox fullWidth leftText="Kategorija" rightText="124"/>
+              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
             </DropdownItem>
             <DropdownItem>
-              <CheckBox fullWidth leftText="Kategorija" rightText="124"/>
+              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
             </DropdownItem>
             <DropdownItem>
-              <CheckBox fullWidth leftText="Kategorija" rightText="124"/>
+              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
             </DropdownItem>
             <DropdownItem>
-              <CheckBox fullWidth leftText="Kategorija" rightText="124"/>
+              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
             </DropdownItem>
-          </DropdownList>
+          </DropdownList> */}
 
           <PrimaryButtonWithIcon
             icon={<Visibility />}