Merge branch 'basic-components' of selenaaasi/trampa-frontend into master

Merge basic components changes

src/components/Buttons/IconButton/IconButton.js

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

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

+import { Box, IconButton } from "@mui/material";
+import styled from "styled-components";
+
+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>
   );
 };
 
   containerStyle: PropTypes.any,
   fullWidth: PropTypes.string,
   buttonColor: PropTypes.string,
+  onClick: PropTypes.func
 };

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

-import { Button } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import styled from "styled-components";
 
 
-export const ComponentContainer = styled.div`
+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}>
-      <PrimaryButtonStyled fullWidth {...props} sx={props.style}>
+    <PrimaryButtonContainer style={props.containerStyle} className={props.className}>
+      <PrimaryButtonStyled {...props} sx={props.style}>
+        
         {props.children}
       </PrimaryButtonStyled>
-    </ComponentContainer>
+    </PrimaryButtonContainer>
   );
 };
 
 PrimaryButton.propTypes = {
   children: PropTypes.node,
-  type: PropTypes.string,
-  variant: PropTypes.string,
+  type: PropTypes.oneOf(["button", "reset", "submit"]),
+  variant: PropTypes.oneOf(["contained", "outlined", "text"]),
   style: PropTypes.any,
   containerStyle: PropTypes.any,
-  fullWidth: PropTypes.string,
-  buttonColor: PropTypes.string,
-  textColor: PropTypes.string,
+  fullWidth: PropTypes.bool,
+  buttoncolor: PropTypes.string,
+  textcolor: PropTypes.string,
+  className: PropTypes.string,
+  onClick: PropTypes.func,
 };

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

-import { Button } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import styled from "styled-components";
+import selectedTheme from "../../../themes";
 
-export const ComponentContainer = styled.div``;
+export const PrimaryButtonContainer = styled(Box)``;
 
 export const PrimaryButtonStyled = styled(Button)`
-  background-color: ${props => props.variant === "contained" ? props.buttonColor : "transparent"};
-  border-color: ${props => props.variant === "outlined" ? props.buttonColor : "transparent"};
-  color: ${props => props.textColor};
+  background-color: ${(props) =>
+    props.variant === "contained" ? props.buttoncolor : "transparent"};
+  border-color: ${(props) =>
+    props.variant === "outlined" ? props.buttoncolor : "transparent"};
+  color: ${(props) => props.textcolor};
   box-shadow: 0 0 0 0;
   font-size: 10px;
   letter-spacing: 1px;
   font-weight: 100;
-  width: ${props => props.width};
-  height: ${props => props.height};
+  width: ${(props) => props.width};
+
+  height: ${(props) => props.height};
   &:hover {
-    background-color: ${props => props.variant === "contained" ? props.buttonColor : "transparent"};
+    background-color: ${(props) =>
+      props.variant === "contained" ? props.buttoncolor : "transparent"};
     box-shadow: 0 0 0 0;
   }
+  &: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 {
+  PrimaryButtonWithIconContainer,
+  IconStyled,
+  PrimaryButtonWithIconStyled,
+} from "./PrimaryButtonWithIcon.styled";
+
+const PrimaryButtonWithIcon = (props) => {
+  return (
+    <PrimaryButtonWithIconContainer
+      style={props.containerStyle}
+      className={props.className}
+    >
+      <PrimaryButtonWithIconStyled sx={props.style} {...props.buttonProps} onClick={props.onClick}>
+        <IconStyled style={props.iconStyle}>{props.icon}</IconStyled>
+        {props.children}
+      </PrimaryButtonWithIconStyled>
+    </PrimaryButtonWithIconContainer>
+  );
+};
+
+PrimaryButtonWithIcon.propTypes = {
+  children: PropTypes.node,
+  icon: PropTypes.node,
+  className: PropTypes.string,
+  containerStyle: PropTypes.any,
+  style: PropTypes.any,
+  iconStyle: PropTypes.any,
+  buttonProps: PropTypes.any,
+  onClick: PropTypes.func,
+};
+
+export default PrimaryButtonWithIcon;

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

+import { Box } from "@mui/material";
+import styled from "styled-components";
+import { Icon } from "../../Icon/Icon";
+import { PrimaryButton } from "../PrimaryButton/PrimaryButton";
+
+export const PrimaryButtonWithIconContainer = styled(Box)``;
+
+export const PrimaryButtonWithIconStyled = styled(PrimaryButton)`
+  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;
+    top: 0;
+    bottom: 0;
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+`;

src/components/CheckBox/CheckBox.js

+import React, { useState } from "react";
+import {
+  CheckBoxStyled,
+  CheckBoxContainer,
+  FormControlLabelStyled,
+} from "./CheckBox.styled";
+import PropTypes from "prop-types";
+import { Label } from "./Label";
+import selectedTheme from "../../themes";
+
+export const CheckBox = (props) => {
+  const [checked, setChecked] = useState(false);
+
+  const handleClick = () => {
+    if (props.onChange) props.onChange(!checked);
+    setChecked((prevState) => !prevState);
+  };
+
+  return (
+    <CheckBoxContainer
+      style={props.containerStyle}
+      fullWidth={props.fullWidth}
+      className={props.className}
+    >
+      <FormControlLabelStyled
+        fullWidth={props.fullWidth}
+        control={
+          <CheckBoxStyled
+            sx={props.checkBoxStyle}
+            boxcolor={props.color}
+            checked={props.value ? props.value : checked}
+            onClick={handleClick}
+          />
+        }
+        label={
+          <Label
+            sx={props.labelStyle}
+            onClick={handleClick}
+            leftText={props.leftText}
+            rightText={props.rightText}
+            maxWidth={props.maxWidth}
+          />
+        }
+      />
+    </CheckBoxContainer>
+  );
+};
+
+CheckBox.propTypes = {
+  fullWidth: PropTypes.bool,
+  color: PropTypes.string,
+  name: PropTypes.string,
+  leftText: PropTypes.string,
+  rightText: PropTypes.string,
+  maxWidth: PropTypes.string,
+  value: PropTypes.bool,
+  onChange: PropTypes.func,
+  containerStyle: PropTypes.any,
+  checkBoxStyle: PropTypes.any,
+  labelStyle: PropTypes.any,
+  className: PropTypes.string,
+};
+
+CheckBox.defaultProps = {
+  color: selectedTheme.primaryPurple,
+};

src/components/CheckBox/CheckBox.styled.js

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

src/components/CheckBox/Label.js

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

src/components/CheckBox/Label.styled.js

+import { Box, FormLabel } from "@mui/material";
+import styled from "styled-components";
+
+export const LabelContainer = styled(Box)`
+    display: flex;
+    flex: 1;
+    justify-content: space-between;
+    max-width: ${props => props.maxWidth};
+`
+
+export const LeftLabel = styled(FormLabel)`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 200px;
+    flex: 1;
+    cursor: pointer;
+`
+export const RightLabel = styled(FormLabel)`
+    margin-left: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100px;
+    cursor: pointer;
+`

src/components/Dropdown/DropdownItem/DropdownItem.js

+import React from 'react'
+import PropTypes from 'prop-types'
+import { DropdownItemContainer, DropdownItemStyled } from './DropdownItem.styled'
+
+const DropdownItem = (props) => {
+  return (
+    <DropdownItemContainer onClick={props.onClick}>
+        <DropdownItemStyled>
+            {props.children}
+        </DropdownItemStyled>
+    </DropdownItemContainer>
+  )
+}
+
+DropdownItem.propTypes = {
+    children: PropTypes.node,
+    onClick: PropTypes.func,
+}
+
+export default DropdownItem;

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

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

src/components/Dropdown/DropdownList/DropdownList.js

+import React, { useState } from "react";
+import {
+  DropdownListContainer,
+  DropdownHeader,
+  DropdownIcon,
+  DropdownTitle,
+  ListContainer,
+  ToggleIconClosed,
+  ToggleIconOpened,
+} from "./DropdownList.styled";
+import PropTypes from "prop-types";
+
+const DropdownList = (props) => {
+  const [listShown, setListShown] = useState(props.defaultOpen);
+  return (
+    <DropdownListContainer 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>
+    </DropdownListContainer>
+  );
+};
+
+export default DropdownList;
+
+DropdownList.propTypes = {
+  title: PropTypes.string,
+  dropdownIcon: PropTypes.node,
+  toggleIconOpened: PropTypes.node,
+  toggleIconClosed: PropTypes.node,
+  children: PropTypes.node,
+  fullWidth: PropTypes.bool,
+  defaultOpen: PropTypes.bool
+};
+
+DropdownList.defaultProps = {
+  fullWidth: false,
+  defaultOpen: true
+};

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

+import { Box, Typography } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../themes";
+import { Icon } from "../../Icon/Icon";
+
+export const DropdownListContainer = 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 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;
+        }
+    }
+`
+
+export const ListContainer = styled(Box)`
+    padding-left: 15px;
+    display: ${props => props.shouldShow ? "block" : "none"};
+`
+
+export const DropdownHeader = styled(Box)`
+    display: flex;
+    flex-direction: row;
+`

src/components/Icon/Icon.js

+import React from 'react';
+import { IconContainer, IconStyled } from './Icon.styled';
+import PropTypes from "prop-types";
+
+
+export const Icon = (props) => {
+  return (
+    <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>
+    </IconContainer>
+  )
+}
+
+Icon.propTypes = {
+    children: PropTypes.node,
+    containerStyle: PropTypes.any,
+    style: PropTypes.any,
+    color: PropTypes.string,
+    size: PropTypes.string,
+    fontSize: PropTypes.string,
+    className: PropTypes.any,
+    onClick: PropTypes.func,
+}

src/components/Icon/Icon.styled.js

+import { Box, Icon } from "@mui/material";
+import styled from "styled-components";
+
+export const IconContainer = styled(Box)`
+`
+
+export const IconStyled = styled(Icon)`
+    color: ${props => props.color};
+    width: ${props => props.size};
+    height: ${props => props.size};
+`

src/components/TextFields/TextField.js → src/components/TextFields/TextField/TextField.js

 import React, { useEffect, useState } from "react";
-import { ComponentContainer, TextFieldMUIStyled } 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}>
-      <TextFieldMUIStyled
+    <TextFieldContainer style={props.containerStyle} className={props.className}>
+      <TextFieldStyled
+        
         {...props}
         sx={props.style}
         label={props.showAnimation ? props.placeholder : ""}
         italic={props.italicPlaceholder && isFieldEmpty}
-      />
-    </ComponentContainer>
+      >
+        {props.children}
+      </TextFieldStyled>
+    </TextFieldContainer>
   );
 };
 
       pathname: PropTypes.string,
     }),
   }),
+  children: PropTypes.node,
+  className: PropTypes.string,
   placeholder: PropTypes.string,
   style: PropTypes.any,
   showAnimation: PropTypes.bool,
   autoFocus: PropTypes.bool,
   fullWidth: PropTypes.bool,
   type: PropTypes.string,
-  InputProps: {
+  InputProps: PropTypes.shape({
+    startAdornment: PropTypes.node,
     endAdornment: PropTypes.node,
-  },
+  }),
 };
 
 TextField.defaultProps = {

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

-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 TextFieldContainer = styled(Box)`
   width: 100%;
+  padding-left: 0;
 `;
 
-export const TextFieldMUIStyled = styled(TextField)`
+export const TextFieldStyled = styled(TextField)`
   background-color: ${backgroundColor};
   width: ${(props) => props.width};
   font-style: ${(props) => (props.italic === true ? "italic" : "normal")};
+  padding-left: 0;
+  & div {
+    padding-left: 2px;
+  }
 `;

src/components/TextFields/TextFieldWithIcon/TextFieldWithIcon.js

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

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

+import { Box } from "@mui/material";
+import styled from "styled-components";
+import { Icon } from "../../Icon/Icon";
+import { TextField } from "../TextField/TextField";
+
+export const TextFieldWithIconContainer = styled(Box)`
+`
+
+export const TextFieldStyled = styled(TextField)`
+    position: relative;
+`
+
+export const IconStyled = styled(Icon)`
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    background-color: blue;
+`

src/constants/stylesConstants.js

 export const PRIMARY_PURPLE_COLOR = `rgb(90, 57, 131)`;
-export const PRIMARY_YELLOW_COLOR = `rgb(247, 178, 38)`;
+export const PRIMARY_YELLOW_COLOR = `rgb(247, 178, 38)`;
+export const PRIMARY_PURPLE_DISABLED = `rgb(75, 92, 100)`;

src/pages/LoginPage/LoginPageMUI.js

 /* eslint-disable */
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { useFormik } from "formik";
 import { useDispatch, useSelector } from "react-redux";
   Button,
   Container,
   Grid,
-  IconButton,
   InputAdornment,
   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";
 import { LOGIN_USER_LOADING } from "../../store/actions/login/loginActionConstants";
-import { TextField } from "../../components/TextFields/TextField";
+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";
+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";
 
 const LoginPage = ({ history }) => {
   const dispatch = useDispatch();
             fullWidth
             InputProps={{
               endAdornment: (
-                <InputAdornment position="end">
-                  <IconButton
-                    onClick={handleClickShowPassword}
-                    onMouseDown={handleMouseDownPassword}
-                  >
-                    {showPassword ? <Visibility /> : <VisibilityOff />}
-                  </IconButton>
-                </InputAdornment>
+                <IconButton
+                  onClick={handleClickShowPassword}
+                  onMouseDown={handleMouseDownPassword}
+                >
+                  {showPassword ? <Visibility /> : <VisibilityOff />}
+                </IconButton>
               ),
             }}
           />
-          <PrimaryButton
-            type="submit"
-            variant="contained"
-            height="40px"
-            sx={{ mt: 3, mb: 2 }}
+
+          <DropdownList
+            title="Naslov"
+            toggleIconOpened={<Visibility />}
+            toggleIconClosed={<VisibilityOff />}
+            dropdownIcon={<LocationOnOutlined />}
             fullWidth
-            buttonColor={PRIMARY_PURPLE_COLOR}
-            textColor="white"
+            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",
+            }}
           >
             {t("login.logIn")}
-          </PrimaryButton>
+          </PrimaryButtonWithIcon>
           <Grid container>
             <Grid
               item

src/request/accountRequest.js

-import {
-  deleteRequest,
-  getRequest,
-  patchRequest,
-  replaceInUrl,
-  postRequest,
-} from './index';
-import apiEndpoints from './apiEndpoints';
-
-export const getAccount = (accountUid) =>
-  getRequest(replaceInUrl(apiEndpoints.accounts.get, { accountUid }));
-
-export const getAccountUsers = (accountUid) =>
-  getRequest(replaceInUrl(apiEndpoints.accounts.getUsers, { accountUid }));
-
-export const getUserPermissions = (currentAccountUid, currentUserUid) =>
-  getRequest(
-    replaceInUrl(apiEndpoints.accounts.getCurrentUserPermissions, {
-      currentAccountUid,
-      currentUserUid,
-    }),
-  );
-
-export const getAccountAddresses = (accountUid) =>
-  getRequest(replaceInUrl(apiEndpoints.accounts.getAddresses, { accountUid }));
-
-export const getAccountSettingsRequest = (accountUid) =>
-  getRequest(replaceInUrl(apiEndpoints.accounts.getSettings, { accountUid }));
-
-export const updateAccountAddressRequest = (accountUid, addressUid, data) =>
-  patchRequest(
-    replaceInUrl(apiEndpoints.accounts.updateAddress, {
-      accountUid,
-      addressUid,
-    }),
-    data,
-  );
-
-export const deleteAccountAddressRequest = (accountUid, addressUid) =>
-  deleteRequest(
-    replaceInUrl(apiEndpoints.accounts.deleteAddress, {
-      accountUid,
-      addressUid,
-    }),
-  );
-
-export const postNewAccountUserRequest = (accountUid, data) =>
-  postRequest(
-    replaceInUrl(apiEndpoints.accounts.createUser, {
-      accountUid,
-    }),
-    data,
-  );
-
-export const updateAccountUserRequest = (
-  accountUid,
-  userUid,
-  actionType,
-  data,
-) =>
-  patchRequest(
-    replaceInUrl(apiEndpoints.accounts.updateUser, {
-      accountUid,
-      userUid,
-      actionType,
-    }),
-    data,
-  );
-
-export const postAgreementRequest = (data) =>
-  postRequest(apiEndpoints.accounts.agreement, data);

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"
+}