Added theme

src/components/Link/Link.styled.js

@@ -1,9 +1,9 @@
 import { Link } from "@mui/material";
 import styled from "styled-components";
-import { PRIMARY_PURPLE_COLOR } from "../../constants/stylesConstants";
+import selectedTheme from "../../themes";
 
 export const LinkStyled = styled(Link)`
-  color: ${PRIMARY_PURPLE_COLOR};
+  color: ${selectedTheme.primaryPurple};
   font-family: ${(props) => props.font};
   font-style: normal;
   font-weight: 400;

src/components/Loader/FullPageLoader.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import {ReactComponent as Logo} from "../../assets/images/svg/big-logo-vertical.svg";
-import { ComponentContainer } from './FullPageLoader.styled';
+import { FullPageLoaderContainer } from './FullPageLoader.styled';
 
 const FullPageLoader = () => {
   return (
-    <ComponentContainer>
+    <FullPageLoaderContainer>
       <Logo />
-    </ComponentContainer>
+    </FullPageLoaderContainer>
   );
 };
 

src/components/Loader/FullPageLoader.styled.js

@@ -2,7 +2,7 @@
 import { Container } from "@mui/material";
 import styled from "styled-components";
 
-export const ComponentContainer = styled(Container)`
+export const FullPageLoaderContainer = styled(Container)`
     height: 100%;
     width: 100vw;
     padding-top: 250px;

src/components/StepProgress/StepProgress.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { ComponentContainer, Progress, StepBar, StepLine } from "./StepProgress.styled";
+import { StepProgressContainer, Progress, StepBar, StepLine } from "./StepProgress.styled";
 import { ReactComponent as Checkmark } from "../../assets/images/svg/checkmark.svg";
 
 const StepProgress = (props) => {
@@ -12,7 +12,7 @@ const StepProgress = (props) => {
     });
   }
   return (
-    <ComponentContainer done>
+    <StepProgressContainer done>
       {steps.map((item, index) =>
         index === 0 ? (
           <StepBar current={item.current} done={item.done} key={index}>
@@ -29,7 +29,7 @@ const StepProgress = (props) => {
           </React.Fragment>
         )
       )}
-    </ComponentContainer>
+    </StepProgressContainer>
   );
 };
 

src/components/StepProgress/StepProgress.styled.js

@@ -1,11 +1,8 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
-import {
-  PRIMARY_DARK_GRAY_COLOR,
-  PRIMARY_PURPLE_COLOR,
-} from "../../constants/stylesConstants";
+import selectedTheme from "../../themes";
 
-export const ComponentContainer = styled(Box)`
+export const StepProgressContainer = styled(Box)`
   display: flex;
   height: 35px;
   flex-direction: row;
@@ -25,12 +22,12 @@ export const StepLine = styled(Box)`
 export const StepBar = styled(Box)`
   flex: 0 0 35px;
   background-color: ${(props) =>
-    props.done ? PRIMARY_PURPLE_COLOR : PRIMARY_DARK_GRAY_COLOR};
+    props.done ? selectedTheme.primaryPurple : selectedTheme.primaryDarkGrayText};
   border-radius: 100%;
   font-family: "Open Sans";
   text-align: center;
   border: 5px solid
-    ${(props) => (props.current || props.done ? PRIMARY_PURPLE_COLOR : "white")};
+    ${(props) => (props.current || props.done ? selectedTheme.primaryPurple : "white")};
   padding-top: 2px;
   line-height: 19px;
   margin-left: -2px;
@@ -42,6 +39,6 @@ export const StepBar = styled(Box)`
 export const Progress = styled(Box)`
   height: 9px;
   width: ${(props) => (props.done ? "100%" : "0")};
-  background-color: ${PRIMARY_PURPLE_COLOR};
+  background-color: ${selectedTheme.primaryPurple};
   transition: width 1s;
 `;

src/constants/stylesConstants.js

@@ -1,8 +0,0 @@
-export const PRIMARY_PURPLE_COLOR = `#5A3984`;
-export const PRIMARY_YELLOW_COLOR = `#f7b126`;
-export const PRIMARY_PURPLE_DISABLED = `#4D4D4D`;
-export const PRIMARY_BACKGROUND_COLOR = '#F1F1F1';
-export const PRIMARY_TEXT_DISABLED_COLOR = "#F1F1F1";
-export const PRIMARY_TEXT_COLOR = "#4D4D4D";
-export const PRIMARY_GRAY_TEXT_COLOR = "#818181";
-export const PRIMARY_DARK_GRAY_COLOR = "#DCDCDC";

src/pages/ForgotPasswordPage/ForgotPassword.styled.js

@@ -1,8 +1,8 @@
 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
-import { PRIMARY_GRAY_TEXT_COLOR, PRIMARY_PURPLE_COLOR} from "../../constants/stylesConstants";
+import selectedTheme from "../../themes";
 
-export const ComponentContainer = styled(Container)`
+export const ForgotPasswordPageContainer = styled(Container)`
   margin-top: 200px;
   display: flex;
   flex-direction: column;
@@ -18,7 +18,7 @@ export const ForgotPasswordTitle = styled(Typography)`
   font-weight: 400;
   font-size: 24px;
   line-height: 33px;
-  color: ${PRIMARY_PURPLE_COLOR};
+  color: ${selectedTheme.primaryPurple};
   margin-top: 36px;
 `;
 export const ForgotPasswordDescription = styled(Typography)`
@@ -32,7 +32,7 @@ export const ForgotPasswordDescription = styled(Typography)`
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${PRIMARY_GRAY_TEXT_COLOR};
+  color: ${selectedTheme.primaryGrayText};
   margin-bottom: 20px;
 `;
 export const FormContainer = styled(Box)`

src/pages/ForgotPasswordPage/ForgotPasswordMailSent/MailSent.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {
-  ComponentContainer,
+  MailSentContainer,
   Description,
   Footer,
   FooterText,
@@ -14,9 +14,9 @@ import { ReactComponent as MailSentImage } from "../../../assets/images/svg/mail
 import { PrimaryButton } from "../../../components/Buttons/PrimaryButton/PrimaryButton";
 import { NavLink, useHistory } from "react-router-dom";
 import Link from "../../../components/Link/Link";
-import { PRIMARY_PURPLE_COLOR } from "../../../constants/stylesConstants";
 import { Trans, useTranslation } from "react-i18next";
 import { LOGIN_PAGE } from "../../../constants/pages";
+import selectedTheme from "../../../themes";
 
 const MailSent = () => {
   const { t } = useTranslation();
@@ -27,7 +27,7 @@ const MailSent = () => {
   };
 
   return (
-    <ComponentContainer>
+    <MailSentContainer>
 
       <MailSentImage />
 
@@ -46,7 +46,7 @@ const MailSent = () => {
           variant="contained"
           height="48px"
           fullWidth={true}
-          buttoncolor={PRIMARY_PURPLE_COLOR}
+          buttoncolor={selectedTheme.primaryPurple}
           textcolor="white"
           onClick={navigateLogin}
         >
@@ -75,7 +75,7 @@ const MailSent = () => {
 
       </Footer>
       
-    </ComponentContainer>
+    </MailSentContainer>
   );
 };
 

src/pages/ForgotPasswordPage/ForgotPasswordMailSent/MailSent.styled.js

@@ -1,8 +1,8 @@
 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
-import { PRIMARY_GRAY_TEXT_COLOR, PRIMARY_PURPLE_COLOR, PRIMARY_TEXT_COLOR } from "../../../constants/stylesConstants";
+import selectedTheme from "../../../themes";
 
-export const ComponentContainer = styled(Container)`
+export const MailSentContainer = styled(Container)`
   margin-top: 300px;
   display: flex;
   flex-direction: column;
@@ -10,7 +10,7 @@ export const ComponentContainer = styled(Container)`
 `;
 export const Title = styled(Typography)`
   font-family: "Open Sans";
-  color: ${PRIMARY_TEXT_COLOR};
+  color: ${selectedTheme.primaryText};
   width: 328px;
   height: 33px;
   text-align: center;
@@ -19,7 +19,7 @@ export const Title = styled(Typography)`
   font-weight: 400;
   font-size: 24px;
   line-height: 33px;
-  color: ${PRIMARY_PURPLE_COLOR};
+  color: ${selectedTheme.primaryPurple};
   margin-top: 6px;
 `;
 export const Description = styled(Typography)`
@@ -33,7 +33,7 @@ export const Description = styled(Typography)`
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${PRIMARY_GRAY_TEXT_COLOR};
+  color: ${selectedTheme.primaryGrayText};
   margin-bottom: 36px;
 `;
 export const FormContainer = styled(Box)`
@@ -42,7 +42,7 @@ export const FormContainer = styled(Box)`
 `;
 export const StandardText = styled(Typography)`
   font-family: "Open Sans";
-  color: ${PRIMARY_TEXT_COLOR};
+  color: ${selectedTheme.primaryText};
   font-size: 16px;
   padding-right: 6px;
   line-height: 14px;

src/pages/ForgotPasswordPage/ForgotPasswordPageMUI.js

@@ -5,16 +5,16 @@ import * as Yup from "yup";
 import i18next from "i18next";
 import { ReactComponent as Logo } from "../../assets/images/svg/logo-vertical.svg";
 import {
-  ComponentContainer,
+  ForgotPasswordPageContainer,
   ForgotPasswordDescription,
   ForgotPasswordTitle,
   FormContainer,
 } from "./ForgotPassword.styled";
 import { TextField } from "../../components/TextFields/TextField/TextField";
 import { PrimaryButton } from "../../components/Buttons/PrimaryButton/PrimaryButton";
-import { PRIMARY_PURPLE_COLOR } from "../../constants/stylesConstants";
 import { useHistory } from "react-router-dom";
 import { FORGOT_PASSWORD_MAIL_SENT } from "../../constants/pages";
+import selectedTheme from "../../themes";
 
 const forgotPasswordValidationSchema = Yup.object().shape({
   email: Yup.string()
@@ -42,7 +42,7 @@ const ForgotPasswordPage = () => {
   });
 
   return (
-    <ComponentContainer>
+    <ForgotPasswordPageContainer>
       <Logo />
 
       <ForgotPasswordTitle component="h1" variant="h5">
@@ -73,14 +73,14 @@ const ForgotPasswordPage = () => {
           variant="contained"
           height="48px"
           fullWidth={true}
-          buttoncolor={PRIMARY_PURPLE_COLOR}
+          buttoncolor={selectedTheme.primaryPurple}
           textcolor="white"
           disabled={formik.values.email?.length === 0}
         >
           {t("common.send")}
         </PrimaryButton>
       </FormContainer>
-    </ComponentContainer>
+    </ForgotPasswordPageContainer>
   );
 };
 

src/pages/LoginPage/Login.styled.js

@@ -1,8 +1,8 @@
 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
-import { PRIMARY_GRAY_TEXT_COLOR, PRIMARY_PURPLE_COLOR, PRIMARY_TEXT_COLOR } from "../../constants/stylesConstants";
+import selectedTheme from "../../themes";
 
-export const ComponentContainer = styled(Container)`
+export const LoginPageContainer = styled(Container)`
   margin-top: 150px;
   display: flex;
   flex-direction: column;
@@ -18,7 +18,7 @@ export const LoginTitle = styled(Typography)`
   font-weight: 400;
   font-size: 24px;
   line-height: 33px;
-  color: ${PRIMARY_PURPLE_COLOR};
+  color: ${selectedTheme.primaryPurple};
   margin-top: 36px;
 `;
 export const LoginDescription = styled(Typography)`
@@ -32,7 +32,7 @@ export const LoginDescription = styled(Typography)`
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${PRIMARY_GRAY_TEXT_COLOR};
+  color: ${selectedTheme.primaryGrayText};
   margin-bottom: 20px;
 `;
 export const LoginFormContainer = styled(Box)`
@@ -41,7 +41,7 @@ export const LoginFormContainer = styled(Box)`
 `;
 export const RegisterAltText = styled(Typography)`
   font-family: "Poppins";
-  color: ${PRIMARY_TEXT_COLOR};
+  color: ${selectedTheme.primaryText};
   font-size: 14px;
   padding-right: 6px;
   line-height: 14px;

src/pages/LoginPage/LoginPageMUI.js

@@ -20,26 +20,17 @@ import { LOGIN_USER_LOADING } from "../../store/actions/login/loginActionConstan
 import { TextField } from "../../components/TextFields/TextField/TextField";
 import { PrimaryButton } from "../../components/Buttons/PrimaryButton/PrimaryButton";
 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 {
-  ComponentContainer,
+  LoginPageContainer,
   LoginTitle,
   LoginDescription,
   LoginFormContainer,
   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();
@@ -101,7 +92,7 @@ const LoginPage = ({ history }) => {
   });
 
   return (
-    <ComponentContainer>
+    <LoginPageContainer>
       <Logo />
 
       <LoginTitle component="h1" variant="h5">
@@ -157,7 +148,6 @@ const LoginPage = ({ history }) => {
           align="right"
           style={{ marginTop: "18px", marginBottom: "18px" }}
         >
-<<<<<<< HEAD
           {t("login.forgotYourPassword")}
         </Link>
 
@@ -166,7 +156,7 @@ const LoginPage = ({ history }) => {
           variant="contained"
           height="48px"
           fullWidth={true}
-          buttoncolor={PRIMARY_PURPLE_COLOR}
+          buttoncolor={selectedTheme.primaryPurple}
           textcolor="white"
           disabled={
             formik.values.username.length === 0 ||
@@ -187,84 +177,6 @@ const LoginPage = ({ history }) => {
             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>
@@ -273,7 +185,7 @@ const LoginPage = ({ history }) => {
 
       </LoginFormContainer>
 
-    </ComponentContainer>
+    </LoginPageContainer>
   );
 };
 

src/pages/RegisterPages/Register/FirstPart/FirstPartOfRegistration.js

@@ -12,7 +12,7 @@ import { IconButton } from "../../../../components/Buttons/IconButton/IconButton
 import { ReactComponent as VisibilityOn } from "../../../../assets/images/svg/VisibilityOn.svg";
 import { ReactComponent as VisibilityOff } from "../../../../assets/images/svg/VisibilityOff.svg";
 import { PrimaryButton } from "../../../../components/Buttons/PrimaryButton/PrimaryButton";
-import { PRIMARY_PURPLE_COLOR } from "../../../../constants/stylesConstants";
+import selectedTheme from "../../../../themes";
 
 const FirstPartOfRegistration = (props) => {
   const [showPassword, setShowPassword] = useState(false);
@@ -87,7 +87,7 @@ const FirstPartOfRegistration = (props) => {
         variant="contained"
         height="48px"
         fullWidth={true}
-        buttoncolor={PRIMARY_PURPLE_COLOR}
+        buttoncolor={selectedTheme.primaryPurple}
         textcolor="white"
         disabled={
           formik.values.mail.length === 0 ||

src/pages/RegisterPages/Register/FirstPart/FirstPartOfRegistration.styled.js

@@ -1,15 +1,7 @@
-import { Container, Typography } from "@mui/material";
+import { Typography } from "@mui/material";
 import styled from "styled-components";
-import { PRIMARY_GRAY_TEXT_COLOR } from "../../../../constants/stylesConstants";
+import selectedTheme from "../../../../themes";
 
-export const ComponentContainer = styled(Container)`
-  margin-top: 100px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 335px;
-  padding: 0;
-`;
 export const FormContainer = styled.form`
   width: 335px;
 `;
@@ -19,7 +11,7 @@ export const RegisterDescription = styled(Typography)`
   font-weight: 400;
   display: flex;
   align-items: center;
-  color: ${PRIMARY_GRAY_TEXT_COLOR};
+  color: ${selectedTheme.primaryGrayText};
   font-size: 12px;
   width: 100%;
   text-align: left;

src/pages/RegisterPages/Register/Register.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import {
-  ComponentContainer,
+  RegisterPageContainer,
   Footer,
   FooterText,
   LoginAltText,
@@ -36,7 +36,7 @@ const Register = () => {
     }
   };
   return (
-    <ComponentContainer>
+    <RegisterPageContainer>
       <Logo />
 
       <RegisterTitle component="h1" variant="h5">
@@ -80,7 +80,7 @@ const Register = () => {
           </NavLink>
         </FooterText>
       </Footer>
-    </ComponentContainer>
+    </RegisterPageContainer>
   );
 };
 

src/pages/RegisterPages/Register/Register.styled.js

@@ -1,8 +1,8 @@
 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
-import { PRIMARY_GRAY_TEXT_COLOR, PRIMARY_PURPLE_COLOR, PRIMARY_TEXT_COLOR } from "../../../constants/stylesConstants";
+import selectedTheme from "../../../themes";
 
-export const ComponentContainer = styled(Container)`
+export const RegisterPageContainer = styled(Container)`
   margin-top: 100px;
   display: flex;
   flex-direction: column;
@@ -20,7 +20,7 @@ export const RegisterTitle = styled(Typography)`
   font-weight: 400;
   font-size: 24px;
   line-height: 33px;
-  color: ${PRIMARY_PURPLE_COLOR};
+  color: ${selectedTheme.primaryPurple};
   margin-top: 34px;
 `;
 export const RegisterDescription = styled(Typography)`
@@ -34,7 +34,7 @@ export const RegisterDescription = styled(Typography)`
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${PRIMARY_GRAY_TEXT_COLOR};
+  color: ${selectedTheme.primaryGrayText};
   margin-bottom: 20px;
 `;
 export const FormContainer = styled(Box)`
@@ -42,7 +42,7 @@ export const FormContainer = styled(Box)`
 `;
 export const LoginAltText = styled(Typography)`
   font-family: "Poppins";
-  color: ${PRIMARY_TEXT_COLOR};
+  color: ${selectedTheme.primaryText};
   font-size: 14px;
   padding-right: 6px;
   line-height: 14px;

src/pages/RegisterPages/Register/SecondPart/SecondPartOfRegistration.js

@@ -9,7 +9,7 @@ import * as Yup from "yup";
 import { useTranslation } from "react-i18next";
 import { TextField } from "../../../../components/TextFields/TextField/TextField";
 import { PrimaryButton } from "../../../../components/Buttons/PrimaryButton/PrimaryButton";
-import { PRIMARY_PURPLE_COLOR } from "../../../../constants/stylesConstants";
+import selectedTheme from "../../../../themes";
 
 const SecondPartOfRegistration = (props) => {
   const { t } = useTranslation();
@@ -62,7 +62,7 @@ const SecondPartOfRegistration = (props) => {
         variant="contained"
         height="48px"
         fullWidth={true}
-        buttoncolor={PRIMARY_PURPLE_COLOR}
+        buttoncolor={selectedTheme.primaryPurple}
         textcolor="white"
         disabled={
           formik.values.PIB.length === 0 ||

src/pages/RegisterPages/Register/SecondPart/SecondPartOfRegistration.styled.js

@@ -1,15 +1,8 @@
-import { Container, Typography } from "@mui/material";
+import { Typography } from "@mui/material";
 import styled from "styled-components";
 import { PRIMARY_GRAY_TEXT_COLOR } from "../../../../constants/stylesConstants";
 
-export const ComponentContainer = styled(Container)`
-  margin-top: 100px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 335px;
-  padding: 0;
-`;
+
 export const FormContainer = styled.form`
   width: 335px;
 `;

src/pages/RegisterPages/Register/ThirdPart/ThirdPartOfRegistration.js

@@ -9,7 +9,7 @@ import * as Yup from "yup";
 import { useTranslation } from "react-i18next";
 import { TextField } from "../../../../components/TextFields/TextField/TextField";
 import { PrimaryButton } from "../../../../components/Buttons/PrimaryButton/PrimaryButton";
-import { PRIMARY_PURPLE_COLOR } from "../../../../constants/stylesConstants";
+import selectedTheme from "../../../../themes";
 
 const ThirdPartOfRegistration = (props) => {
   const { t } = useTranslation();
@@ -80,7 +80,7 @@ const ThirdPartOfRegistration = (props) => {
         variant="contained"
         height="48px"
         fullWidth={true}
-        buttoncolor={PRIMARY_PURPLE_COLOR}
+        buttoncolor={selectedTheme.primaryPurple}
         textcolor="white"
         disabled={
           formik.values.location.length === 0 &&

src/pages/RegisterPages/Register/ThirdPart/ThirdPartOfRegistration.styled.js

@@ -1,15 +1,7 @@
-import { Container, Typography } from "@mui/material";
+import {  Typography } from "@mui/material";
 import styled from "styled-components";
 import { PRIMARY_GRAY_TEXT_COLOR } from "../../../../constants/stylesConstants";
 
-export const ComponentContainer = styled(Container)`
-  margin-top: 100px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 335px;
-  padding: 0;
-`;
 export const FormContainer = styled.form`
   width: 335px;
 `;

src/pages/RegisterPages/RegisterSuccessful.js/RegisterSuccessful.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import {
-  ComponentContainer,
+  RegisterSuccessfulContainer,
   RegisterDescription,
   RegisterTitle,
 } from "./RegisterSuccessful.styled";
@@ -22,7 +22,7 @@ const RegisterSuccessful = () => {
   }, []);
 
   return (
-    <ComponentContainer>
+    <RegisterSuccessfulContainer>
       <Success />
 
       <RegisterTitle component="h1" variant="h5">
@@ -32,7 +32,7 @@ const RegisterSuccessful = () => {
       <RegisterDescription component="h1" variant="h6">
         {t("register.welcome")}
       </RegisterDescription>
-    </ComponentContainer>
+    </RegisterSuccessfulContainer>
   );
 };
 

src/pages/RegisterPages/RegisterSuccessful.js/RegisterSuccessful.styled.js

@@ -1,8 +1,8 @@
 import { Container, Typography } from "@mui/material";
 import styled from "styled-components";
-import { PRIMARY_GRAY_TEXT_COLOR, PRIMARY_PURPLE_COLOR } from "../../../constants/stylesConstants";
+import selectedTheme from "../../../themes";
 
-export const ComponentContainer = styled(Container)`
+export const RegisterSuccessfulContainer = styled(Container)`
   margin-top: 300px;
   display: flex;
   flex-direction: column;
@@ -19,7 +19,7 @@ export const RegisterTitle = styled(Typography)`
   font-weight: 400;
   font-size: 39px;
   line-height: 48px;
-  color: ${PRIMARY_PURPLE_COLOR};
+  color: ${selectedTheme.primaryPurple};
   margin-top: 32px;
 `;
 export const RegisterDescription = styled(Typography)`
@@ -33,6 +33,6 @@ export const RegisterDescription = styled(Typography)`
   display: block;
   align-items: center;
   text-align: center;
-  color: ${PRIMARY_GRAY_TEXT_COLOR};
+  color: ${selectedTheme.primaryGrayText};
   margin-bottom: 20px;
 `;