merge

src/components/Buttons/IconButton/IconButton.js

 import React from 'react'
-import { ComponentContainer, IconButtonStyled } from "./IconButton.styled"
+import { IconButtonContainer, IconButtonStyled } from "./IconButton.styled"
 import PropTypes from "prop-types";
 
 export const IconButton = (props) => {
-    return <ComponentContainer style={props.containerStyle} className={props.className}>
+    return <IconButtonContainer style={props.containerStyle} className={props.className}>
         <IconButtonStyled onClick={props.onClick} sx={props.style}>
             {props.children}
         </IconButtonStyled>
-    </ComponentContainer>
+    </IconButtonContainer>
 }
 
 IconButton.propTypes = {

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

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

src/components/Buttons/LoginButton/LoginButton.js

 import React from "react";
-import { ComponentContainer, LoginButtonStyled } from "./LoginButton.styled";
+import { LoginButtonContainer, LoginButtonStyled } from "./LoginButton.styled";
 import PropTypes from "prop-types";
 
 
 //Currently not in use
 export const LoginButton = (props) => {
   return (
-    <ComponentContainer style={props.containerStyle}>
+    <LoginButtonContainer style={props.containerStyle}>
       <LoginButtonStyled {...props} sx={props.style} variant="contained">
         Dugme
       </LoginButtonStyled>
-    </ComponentContainer>
+    </LoginButtonContainer>
   );
 };
 

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

 import styled from "styled-components";
 
 
-export const ComponentContainer = styled(Box)`
+export const LoginButtonContainer = styled(Box)`
 `
 
 export const LoginButtonStyled = styled(Button)`

src/components/Buttons/PrimaryButton/PrimaryButton.js

 import React from "react";
 import PropTypes from "prop-types";
 import {
-  ComponentContainer,
+  PrimaryButtonContainer,
   PrimaryButtonStyled,
 } from "./PrimaryButton.styled";
 
 export const PrimaryButton = (props) => {
   return (
-    <ComponentContainer style={props.containerStyle} className={props.className}>
+    <PrimaryButtonContainer style={props.containerStyle} className={props.className}>
       <PrimaryButtonStyled {...props} sx={props.style}>
         
         {props.children}
       </PrimaryButtonStyled>
-    </ComponentContainer>
+    </PrimaryButtonContainer>
   );
 };
 

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

 import { Box, Button } from "@mui/material";
 import styled from "styled-components";
-import { PRIMARY_PURPLE_DISABLED, PRIMARY_TEXT_DISABLED_COLOR } from "../../../constants/stylesConstants";
+import selectedTheme from "../../../themes";
 
-export const ComponentContainer = styled(Box)``;
+export const PrimaryButtonContainer = styled(Box)``;
 
 export const PrimaryButtonStyled = styled(Button)`
-  background-color: ${(props) => props.disabled ? PRIMARY_PURPLE_DISABLED : (
+  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 ? PRIMARY_TEXT_DISABLED_COLOR : (
+  color: ${(props) => props.disabled ? selectedTheme.primaryTextDisabled : (
   props.textcolor)} !important;
   box-shadow: 0 0 0 0;
   font-size: 12px;
     box-shadow: 0 0 0 0;
   }
   &:disabled {
-    background-color: ${PRIMARY_PURPLE_DISABLED};
+    background-color: ${selectedTheme.primaryPurpleDisabled};
+    color: ${(props) => props.textcolor};
   }
 `;

src/components/Buttons/PrimaryButtonWithIcon/PrimaryButtonWithIcon.js

 import React from "react";
 import PropTypes from "prop-types";
 import {
-  ComponentContainer,
+  PrimaryButtonWithIconContainer,
   IconStyled,
   PrimaryButtonWithIconStyled,
 } from "./PrimaryButtonWithIcon.styled";
 
 const PrimaryButtonWithIcon = (props) => {
   return (
-    <ComponentContainer
+    <PrimaryButtonWithIconContainer
       style={props.containerStyle}
       className={props.className}
     >
         <IconStyled style={props.iconStyle}>{props.icon}</IconStyled>
         {props.children}
       </PrimaryButtonWithIconStyled>
-    </ComponentContainer>
+    </PrimaryButtonWithIconContainer>
   );
 };
 

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

 import { Icon } from "../../Icon/Icon";
 import { PrimaryButton } from "../PrimaryButton/PrimaryButton";
 
-export const ComponentContainer = styled(Box)``;
+export const PrimaryButtonWithIconContainer = styled(Box)``;
 
 export const PrimaryButtonWithIconStyled = styled(PrimaryButton)`
   position: relative;

src/components/CheckBox/CheckBox.js

 import React, { useState } from "react";
 import {
   CheckBoxStyled,
-  ComponentContainer,
+  CheckBoxContainer,
   FormControlLabelStyled,
 } from "./CheckBox.styled";
 import PropTypes from "prop-types";
-import { PRIMARY_PURPLE_COLOR } from "../../constants/stylesConstants";
-// import { FormControlLabel } from "@mui/material";
 import { Label } from "./Label";
+import selectedTheme from "../../themes";
 
 export const CheckBox = (props) => {
   const [checked, setChecked] = useState(false);
   };
 
   return (
-    <ComponentContainer
+    <CheckBoxContainer
       style={props.containerStyle}
       fullWidth={props.fullWidth}
       className={props.className}
           />
         }
       />
-    </ComponentContainer>
+    </CheckBoxContainer>
   );
 };
 
 };
 
 CheckBox.defaultProps = {
-  color: PRIMARY_PURPLE_COLOR,
+  color: selectedTheme.primaryPurple,
 };

src/components/CheckBox/CheckBox.styled.js

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

src/components/CheckBox/Label.js

 import React from "react";
-import { ComponentContainer, LeftLabel, RightLabel } from "./Label.styled";
+import { LabelContainer, LeftLabel, RightLabel } from "./Label.styled";
 import PropTypes from "prop-types";
 
 export const Label = (props) => {
   return (
-    <ComponentContainer onClick={props.onClick} maxWidth={props.maxWidth}>
+    <LabelContainer onClick={props.onClick} maxWidth={props.maxWidth}>
       <LeftLabel>{props.leftText}</LeftLabel>
       {props.rightText && <RightLabel>{props.rightText}</RightLabel>}
-    </ComponentContainer>
+    </LabelContainer>
   );
 };
 

src/components/CheckBox/Label.styled.js

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

src/components/Dropdown/DropdownItem/DropdownItem.js

 import React from 'react'
 import PropTypes from 'prop-types'
-import { ComponentContainer, DropdownItemStyled } from './DropdownItem.styled'
+import { DropdownItemContainer, DropdownItemStyled } from './DropdownItem.styled'
 
 const DropdownItem = (props) => {
   return (
-    <ComponentContainer onClick={props.onClick}>
+    <DropdownItemContainer onClick={props.onClick}>
         <DropdownItemStyled>
             {props.children}
         </DropdownItemStyled>
-    </ComponentContainer>
+    </DropdownItemContainer>
   )
 }
 

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

 import { Box } from "@mui/material";
 import styled from "styled-components";
 
-export const ComponentContainer = styled(Box)`
+export const DropdownItemContainer = styled(Box)`
 `
 
 export const DropdownItemStyled = styled(Box)`

src/components/Dropdown/DropdownList/DropdownList.js

 import React, { useState } from "react";
 import {
-  ComponentContainer,
+  DropdownListContainer,
   DropdownHeader,
   DropdownIcon,
   DropdownTitle,
 const DropdownList = (props) => {
   const [listShown, setListShown] = useState(props.defaultOpen);
   return (
-    <ComponentContainer fullWidth={props.fullWidth}>
+    <DropdownListContainer fullWidth={props.fullWidth}>
       <DropdownHeader>
         {props.dropdownIcon && (
           <DropdownIcon>{props.dropdownIcon}</DropdownIcon>
       </DropdownHeader>
 
       <ListContainer shouldShow={listShown}>{props.children}</ListContainer>
-    </ComponentContainer>
+    </DropdownListContainer>
   );
 };
 

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

 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
-import { PRIMARY_PURPLE_COLOR } from "../../../constants/stylesConstants";
+import selectedTheme from "../../../themes";
 import { Icon } from "../../Icon/Icon";
 
-export const ComponentContainer = styled(Box)`
+export const DropdownListContainer = styled(Box)`
 
     width: ${props => props.fullWidth ? '100%' : (props.width ? props.width : '250px')};
     padding: 8px;
 
 export const ToggleIconOpened = styled(Icon)`
     cursor: pointer;
-    color: ${PRIMARY_PURPLE_COLOR};
+    color: ${selectedTheme.primaryPurple};
 `
 
 export const ToggleIconClosed = styled(Icon)`
     cursor: pointer;
-    color: ${PRIMARY_PURPLE_COLOR};
+    color: ${selectedTheme.primaryPurple};
 `
 
 export const DropdownIcon = styled(Icon)`

src/components/Icon/Icon.js

 import React from 'react';
-import { ComponentContainer, IconStyled } from './Icon.styled';
+import { IconContainer, IconStyled } from './Icon.styled';
 import PropTypes from "prop-types";
 
 
 export const Icon = (props) => {
   return (
-    <ComponentContainer style={props.containerStyle} className={props.className} onClick={props.onClick}>
+    <IconContainer style={props.containerStyle} className={props.className} onClick={props.onClick}>
         <IconStyled sx={props.style} color={props.color} size={props.size} fontSize={props.iconsize}>
             {props.children}
         </IconStyled>
-    </ComponentContainer>
+    </IconContainer>
   )
 }
 

src/components/Icon/Icon.styled.js

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

src/components/TextFields/TextField/TextField.js

 import React, { useEffect, useState } from "react";
-import { ComponentContainer, TextFieldStyled } from "./TextField.styled";
+import { TextFieldContainer, TextFieldStyled } from "./TextField.styled";
 import PropTypes from "prop-types";
 
 export const TextField = (props) => {
   }, [props.value]);
 
   return (
-    <ComponentContainer style={props.containerStyle} className={props.className}>
+    <TextFieldContainer style={props.containerStyle} className={props.className}>
       <TextFieldStyled 
         placeholder={props.placeholder}
         width={props.width}
       >
         {props.children}
       </TextFieldStyled>
-    </ComponentContainer>
+    </TextFieldContainer>
   );
 };
 

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

 import styled from "styled-components";
 import { PRIMARY_BACKGROUND_COLOR } from "../../../constants/stylesConstants";
 
-export const ComponentContainer = styled(Box)`
+export const TextFieldContainer = styled(Box)`
   width: 100%;
   height: 48px;
   box-sizing: border-box;

src/components/TextFields/TextFieldWithIcon/TextFieldWithIcon.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { ComponentContainer, IconStyled, TextFieldStyled } from './TextFieldWithIcon.styled';
+import { TextFieldWithIconContainer, IconStyled, TextFieldStyled } from './TextFieldWithIcon.styled';
 import { Visibility } from '@mui/icons-material';
 
 const TextFieldWithIcon = (props) => {
   return (
-    <ComponentContainer>
+    <TextFieldWithIconContainer>
         <TextFieldStyled {...props.textFieldProps}>
             <IconStyled color="green">
               <Visibility color="green"/>
             </IconStyled>
             {props.children}
         </TextFieldStyled>
-    </ComponentContainer>
+    </TextFieldWithIconContainer>
   )
 }
 

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

 import { Icon } from "../../Icon/Icon";
 import { TextField } from "../TextField/TextField";
 
-export const ComponentContainer = styled(Box)`
+export const TextFieldWithIconContainer = styled(Box)`
 `
 
 export const TextFieldStyled = styled(TextField)`

src/pages/LoginPage/LoginPageMUI.js

 import { LOGIN_USER_LOADING } from "../../store/actions/login/loginActionConstants";
 import { TextField } from "../../components/TextFields/TextField/TextField";
 import { PrimaryButton } from "../../components/Buttons/PrimaryButton/PrimaryButton";
-import { PRIMARY_PURPLE_COLOR } from "../../constants/stylesConstants";
 import { IconButton } from "../../components/Buttons/IconButton/IconButton";
+<<<<<<< HEAD
 import Link from "../../components/Link/Link";
 import { ReactComponent as Logo } from "../../assets/images/svg/logo-vertical.svg";
 import {
   RegisterAltText,
   RegisterTextContainer,
 } from "./Login.styled";
+=======
+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";
+import selectedTheme from "../../themes";
+>>>>>>> 0ab484f415ede89d54c28a177d12f746fce4da4c
 
 const LoginPage = ({ history }) => {
   const dispatch = useDispatch();
           align="right"
           style={{ marginTop: "18px", marginBottom: "18px" }}
         >
+<<<<<<< HEAD
           {t("login.forgotYourPassword")}
         </Link>
 
             component={NavLink}
             underline="hover"
             align="center"
+=======
+          <Backdrop position="absolute" isLoading={isLoading} />
+          <TextField
+            name="username"
+            placeholder={t("common.labelUsername")}
+            margin="normal"
+            value={formik.values.username}
+            onChange={formik.handleChange}
+            error={formik.touched.username && Boolean(formik.errors.username)}
+            helperText={formik.touched.username && formik.errors.username}
+            autoFocus
+            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
+            InputProps={{
+              endAdornment: (
+                <IconButton
+                  onClick={handleClickShowPassword}
+                  onMouseDown={handleMouseDownPassword}
+                >
+                  {showPassword ? <Visibility /> : <VisibilityOff />}
+                </IconButton>
+              ),
+            }}
+          />
+
+          <DropdownList
+            title="Naslov"
+            toggleIconOpened={<Visibility />}
+            toggleIconClosed={<VisibilityOff />}
+            dropdownIcon={<LocationOnOutlined />}
+            fullWidth
+            defaultOpen={false}
+          >
+            <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 />}
+            sx={{ mt: 3, mb: 2 }}
+            buttonProps={{
+              type: "submit",
+              variant: "contained",
+              height: "40px",
+              fullWidth: true,
+              buttoncolor: selectedTheme.primaryPurple,
+              textcolor: "white",
+            }}
+>>>>>>> 0ab484f415ede89d54c28a177d12f746fce4da4c
           >
             {t("login.signUp")}
           </Link>

src/themes/index.js

+import { primaryThemeColors } from "./primaryTheme/primaryThemeColors";
+
+let selectedThemeNumber = 0;
+
+const getTheme = () => {
+    if (selectedThemeNumber === 0) {
+        return {...primaryThemeColors}
+    }
+}
+
+const selectedTheme = getTheme();
+
+export default selectedTheme;
+

src/themes/primaryTheme/primaryThemeColors.js

+export const primaryThemeColors = {
+    primaryPurple: "#5A3984",
+    primaryYellow: "#f7b126",
+    primaryPurpleDisabled: "#4D4D4D",
+    primaryBackgroundColor: "#F1F1F1",
+    primaryTextDisabled: "#F1F1F1",
+    primaryText: "#4D4D4D",
+    primaryGrayText: "#818181",
+    primaryDarkGrayText: "#DCDCDC"
+}