Added themes, changed names of Containers

src/components/Buttons/IconButton/IconButton.js

@@ -1,13 +1,13 @@
 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

@@ -1,7 +1,7 @@
 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

@@ -1,16 +1,16 @@
 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

@@ -2,7 +2,7 @@ import { Box, Button } from "@mui/material";
 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

@@ -1,18 +1,18 @@
 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

@@ -1,8 +1,8 @@
 import { Box, Button } from "@mui/material";
 import styled from "styled-components";
-import { PRIMARY_PURPLE_DISABLED } 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) =>
@@ -23,7 +23,7 @@ export const PrimaryButtonStyled = styled(Button)`
     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

@@ -1,14 +1,14 @@
 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}
     >
@@ -16,7 +16,7 @@ const PrimaryButtonWithIcon = (props) => {
         <IconStyled style={props.iconStyle}>{props.icon}</IconStyled>
         {props.children}
       </PrimaryButtonWithIconStyled>
-    </ComponentContainer>
+    </PrimaryButtonWithIconContainer>
   );
 };
 

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

@@ -3,7 +3,7 @@ import styled from "styled-components";
 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

@@ -1,13 +1,12 @@
 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);
@@ -18,7 +17,7 @@ export const CheckBox = (props) => {
   };
 
   return (
-    <ComponentContainer
+    <CheckBoxContainer
       style={props.containerStyle}
       fullWidth={props.fullWidth}
       className={props.className}
@@ -43,7 +42,7 @@ export const CheckBox = (props) => {
           />
         }
       />
-    </ComponentContainer>
+    </CheckBoxContainer>
   );
 };
 
@@ -63,5 +62,5 @@ CheckBox.propTypes = {
 };
 
 CheckBox.defaultProps = {
-  color: PRIMARY_PURPLE_COLOR,
+  color: selectedTheme.primaryPurple,
 };

src/components/CheckBox/CheckBox.styled.js

@@ -1,7 +1,7 @@
 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

@@ -1,13 +1,13 @@
 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

@@ -1,7 +1,7 @@
 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

@@ -1,14 +1,14 @@
 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

@@ -1,7 +1,7 @@
 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

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import {
-  ComponentContainer,
+  DropdownListContainer,
   DropdownHeader,
   DropdownIcon,
   DropdownTitle,
@@ -13,7 +13,7 @@ import PropTypes from "prop-types";
 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>
@@ -37,7 +37,7 @@ const DropdownList = (props) => {
       </DropdownHeader>
 
       <ListContainer shouldShow={listShown}>{props.children}</ListContainer>
-    </ComponentContainer>
+    </DropdownListContainer>
   );
 };
 

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

@@ -1,9 +1,9 @@
 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;
@@ -21,12 +21,12 @@ export const DropdownTitle = styled(Typography)`
 
 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

@@ -1,15 +1,15 @@
 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.fontSize}>
             {props.children}
         </IconStyled>
-    </ComponentContainer>
+    </IconContainer>
   )
 }
 

src/components/Icon/Icon.styled.js

@@ -1,7 +1,7 @@
 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

@@ -1,5 +1,5 @@
 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) => {
@@ -15,7 +15,7 @@ export const TextField = (props) => {
   }, [props.value]);
 
   return (
-    <ComponentContainer style={props.containerStyle} className={props.className}>
+    <TextFieldContainer style={props.containerStyle} className={props.className}>
       <TextFieldStyled
         
         {...props}
@@ -25,7 +25,7 @@ export const TextField = (props) => {
       >
         {props.children}
       </TextFieldStyled>
-    </ComponentContainer>
+    </TextFieldContainer>
   );
 };
 

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

@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 const backgroundColor = `rgb(241, 241, 241)`;
 
-export const ComponentContainer = styled(Box)`
+export const TextFieldContainer = styled(Box)`
   width: 100%;
   padding-left: 0;
 `;

src/components/TextFields/TextFieldWithIcon/TextFieldWithIcon.js

@@ -1,18 +1,18 @@
 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

@@ -3,7 +3,7 @@ import styled from "styled-components";
 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

@@ -34,7 +34,6 @@ import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelect
 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";
 import { Icon } from "../../components/Icon/Icon";
 import PrimaryButtonWithIcon from "../../components/Buttons/PrimaryButtonWithIcon/PrimaryButtonWithIcon";
@@ -42,6 +41,7 @@ import TextFieldWithIcon from "../../components/TextFields/TextFieldWithIcon/Tex
 import DropdownList from "../../components/Dropdown/DropdownList/DropdownList";
 import DropdownItem from "../../components/Dropdown/DropdownItem/DropdownItem";
 import { CheckBox } from "../../components/CheckBox/CheckBox";
+import selectedTheme from "../../themes";
 
 const LoginPage = ({ history }) => {
   const dispatch = useDispatch();
@@ -142,7 +142,7 @@ const LoginPage = ({ history }) => {
             onChange={formik.handleChange}
             error={formik.touched.password && Boolean(formik.errors.password)}
             helperText={formik.touched.password && formik.errors.password}
-            fullWidth={true}
+            fullWidth
             InputProps={{
               endAdornment: (
                 <IconButton
@@ -155,7 +155,7 @@ const LoginPage = ({ history }) => {
             }}
           />
 
-          {/* <DropdownList
+          <DropdownList
             title="Naslov"
             toggleIconOpened={<Visibility />}
             toggleIconClosed={<VisibilityOff />}
@@ -184,7 +184,7 @@ const LoginPage = ({ history }) => {
             <DropdownItem>
               <CheckBox fullWidth leftText="Kategorija" rightText="124" />
             </DropdownItem>
-          </DropdownList> */}
+          </DropdownList>
 
           <PrimaryButtonWithIcon
             icon={<Visibility />}
@@ -194,7 +194,7 @@ const LoginPage = ({ history }) => {
               variant: "contained",
               height: "40px",
               fullWidth: true,
-              buttoncolor: PRIMARY_PURPLE_COLOR,
+              buttoncolor: selectedTheme.primaryPurple,
               textcolor: "white",
             }}
           >

src/themes/index.js

@@ -0,0 +1,14 @@
+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

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