Added and modified existing components

src/components/Buttons/IconButton/IconButton.js

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

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

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

src/components/Buttons/PrimaryButton/PrimaryButton.js

@@ -7,8 +7,9 @@ import {
 
 export const PrimaryButton = (props) => {
   return (
-    <ComponentContainer style={props.containerStyle}>
-      <PrimaryButtonStyled fullWidth {...props} sx={props.style}>
+    <ComponentContainer style={props.containerStyle} className={props.className}>
+      <PrimaryButtonStyled {...props} sx={props.style}>
+        
         {props.children}
       </PrimaryButtonStyled>
     </ComponentContainer>
@@ -17,11 +18,12 @@ export const PrimaryButton = (props) => {
 
 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,
 };

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

@@ -1,20 +1,29 @@
 import { Button } from "@mui/material";
 import styled from "styled-components";
+import { PRIMARY_PURPLE_DISABLED } from "../../../constants/stylesConstants";
 
 export const ComponentContainer = styled.div``;
 
 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: ${PRIMARY_PURPLE_DISABLED};
+    color: ${(props) => props.textcolor};
+  }
 `;

src/components/Buttons/PrimaryButtonWithIcon/PrimaryButtonWithIcon.js

@@ -0,0 +1,33 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  ComponentContainer,
+  IconStyled,
+  PrimaryButtonWithIconStyled,
+} from "./PrimaryButtonWithIcon.styled";
+
+const PrimaryButtonWithIcon = (props) => {
+  return (
+    <ComponentContainer
+      style={props.containerStyle}
+      className={props.className}
+    >
+      <PrimaryButtonWithIconStyled sx={props.style} {...props.buttonProps}>
+        <IconStyled style={props.iconStyle}>{props.icon}</IconStyled>
+        {props.children}
+      </PrimaryButtonWithIconStyled>
+    </ComponentContainer>
+  );
+};
+
+PrimaryButtonWithIcon.propTypes = {
+  children: PropTypes.node,
+  icon: PropTypes.node,
+  className: PropTypes.string,
+  containerStyle: PropTypes.any,
+  style: PropTypes.any,
+  iconStyle: PropTypes.any,
+  buttonProps: PropTypes.any,
+};
+
+export default PrimaryButtonWithIcon;

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

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+import { Icon } from "../../Icon/Icon";
+import { PrimaryButton } from "../PrimaryButton/PrimaryButton";
+
+export const ComponentContainer = styled.div`
+`
+
+export const PrimaryButtonWithIconStyled = styled(PrimaryButton)`
+    position: relative;
+`
+
+export const IconStyled = styled(Icon)`
+    position: absolute;
+    left: 10px;
+    top: 5px;
+`

src/components/CheckBox/CheckBox.js

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import {
+  CheckBoxStyled,
+  ComponentContainer,
+  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";
+
+export const CheckBox = (props) => {
+  const [checked, setChecked] = useState(false);
+
+  const handleClick = () => {
+    if (props.onChange) props.onChange(!checked);
+    setChecked((prevState) => !prevState);
+  };
+
+  return (
+    <ComponentContainer
+      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}
+          />
+        }
+      />
+    </ComponentContainer>
+  );
+};
+
+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: PRIMARY_PURPLE_COLOR,
+};

src/components/CheckBox/CheckBox.styled.js

@@ -0,0 +1,25 @@
+import { Checkbox, FormControlLabel } from "@mui/material";
+import styled from "styled-components";
+
+export const ComponentContainer = styled.div`
+    ${props => props.fullWidth && (`
+        width: 100%;
+        display: flex;
+        flex: 1;
+    `)}
+`
+
+export const CheckBoxStyled = styled(Checkbox)`
+    color: ${props => props.boxcolor} !important;
+`
+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

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

src/components/CheckBox/Label.styled.js

@@ -0,0 +1,24 @@
+import { FormLabel } from "@mui/material";
+import styled from "styled-components";
+
+export const ComponentContainer = styled.div`
+    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;
+`
+export const RightLabel = styled(FormLabel)`
+    margin-left: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100px;
+`

src/components/Dropdown/DropdownItem/DropdownItem.js

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

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

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const ComponentContainer = styled.div`
+`
+
+export const DropdownItemStyled = styled.div`
+`

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

@@ -0,0 +1,18 @@
+import { Box, Typography } from "@mui/material";
+import styled from "styled-components";
+import { Icon } from "../../Icon/Icon";
+
+export const ComponentContainer = styled.div`
+`
+
+export const DropdownTitleStyled = styled(Typography)`
+`
+
+export const ToggleIconStyled = styled(Icon)`
+`
+
+export const DropdownIconStyled = styled(Icon)`
+`
+
+export const ListContainerStyled = styled(Box)`
+`

src/components/Icon/Icon.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ComponentContainer, IconStyled } from './Icon.styled';
+import PropTypes from "prop-types";
+
+
+export const Icon = (props) => {
+  return (
+    <ComponentContainer style={props.containerStyle} className={props.className}>
+        <IconStyled sx={props.style} color={props.color} size={props.size} fontSize={props.fontSize}>
+            {props.children}
+        </IconStyled>
+    </ComponentContainer>
+  )
+}
+
+Icon.propTypes = {
+    children: PropTypes.node,
+    containerStyle: PropTypes.any,
+    style: PropTypes.any,
+    color: PropTypes.string,
+    size: PropTypes.string,
+    fontSize: PropTypes.string,
+    className: PropTypes.any,
+}

src/components/Icon/Icon.styled.js

@@ -0,0 +1,11 @@
+import { Icon } from "@mui/material";
+import styled from "styled-components";
+
+export const ComponentContainer = styled.div`
+`
+
+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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { ComponentContainer, TextFieldMUIStyled } from "./TextField.styled";
+import { ComponentContainer, TextFieldStyled } from "./TextField.styled";
 import PropTypes from "prop-types";
 
 export const TextField = (props) => {
@@ -15,13 +15,16 @@ export const TextField = (props) => {
   }, [props.value]);
 
   return (
-    <ComponentContainer style={props.containerStyle}>
-      <TextFieldMUIStyled
+    <ComponentContainer style={props.containerStyle} className={props.className}>
+      <TextFieldStyled
+        
         {...props}
         sx={props.style}
         label={props.showAnimation ? props.placeholder : ""}
         italic={props.italicPlaceholder && isFieldEmpty}
-      />
+      >
+        {props.children}
+      </TextFieldStyled>
     </ComponentContainer>
   );
 };
@@ -34,6 +37,8 @@ TextField.propTypes = {
       pathname: PropTypes.string,
     }),
   }),
+  children: PropTypes.node,
+  className: PropTypes.string,
   placeholder: PropTypes.string,
   style: PropTypes.any,
   showAnimation: PropTypes.bool,
@@ -50,9 +55,10 @@ TextField.propTypes = {
   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

@@ -5,10 +5,15 @@ const backgroundColor = `rgb(241, 241, 241)`;
 
 export const ComponentContainer = styled.div`
   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

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

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

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+import { Icon } from "../../Icon/Icon";
+import { TextField } from "../TextField/TextField";
+
+export const ComponentContainer = styled.div`
+`
+
+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

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

@@ -1,5 +1,5 @@
 /* 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";
@@ -18,7 +18,6 @@ import {
   Button,
   Container,
   Grid,
-  IconButton,
   InputAdornment,
   Link,
   Typography,
@@ -28,9 +27,13 @@ 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";
 
 const LoginPage = ({ history }) => {
   const dispatch = useDispatch();
@@ -123,39 +126,45 @@ 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
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position="end">
-                  <IconButton
-                    onClick={handleClickShowPassword}
-                    onMouseDown={handleMouseDownPassword}
-                  >
-                    {showPassword ? <Visibility /> : <VisibilityOff />}
-                  </IconButton>
-                </InputAdornment>
-              ),
-            }}
+          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>
+            ),
+          }}
           />
-          <PrimaryButton
-            type="submit"
-            variant="contained"
-            height="40px"
+
+          <Icon>
+            <Visibility fontSize="large" />
+          </Icon>
+
+          <PrimaryButtonWithIcon
+            icon={<Visibility />}
             sx={{ mt: 3, mb: 2 }}
-            fullWidth
-            buttonColor={PRIMARY_PURPLE_COLOR}
-            textColor="white"
+            buttonProps={{
+              type: "submit",
+              variant: "contained",
+              height: "40px",
+              fullWidth: true,
+              buttoncolor: PRIMARY_PURPLE_COLOR,
+              textcolor: "white",
+            }}
           >
             {t("login.logIn")}
-          </PrimaryButton>
+          </PrimaryButtonWithIcon>
           <Grid container>
             <Grid
               item

src/request/accountRequest.js

@@ -1,71 +0,0 @@
-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);