changed color and font to pull from global theme

src/components/Buttons/ArrowButton/ArrowButton.styled.js

@@ -13,12 +13,12 @@ width: 18px;
 height: 18px;
 & path {
     ${props => props.disabled && `
-    stroke: ${selectedTheme.iconStrokeDisabledColor}
+    stroke: ${selectedTheme.colors.iconStrokeDisabledColor}
     `}
 }
 `
 export const ArrowContainer = styled(IconButton)`
-border: 1px solid ${selectedTheme.primaryPurple};
+border: 1px solid ${selectedTheme.colors.primaryPurple};
 border-radius: 100%;
 min-width: 40px;
 width: 40px;
@@ -30,21 +30,21 @@ margin-top: auto;
 margin-bottom: auto;
 transition: 0.2s all ease;
 &:hover {
-    background-color: ${selectedTheme.primaryPurple};
+    background-color: ${selectedTheme.colors.primaryPurple};
     & svg path {
         stroke: white;
     }
 }
 ${props => props.disabled && `
-    border 1px solid ${selectedTheme.iconStrokeDisabledColor};
+    border 1px solid ${selectedTheme.colors.iconStrokeDisabledColor};
     &:hover {
         background-color: inherit;
         & svg path {
-            stroke: ${selectedTheme.iconStrokeDisabledColor};
+            stroke: ${selectedTheme.colors.iconStrokeDisabledColor};
         }
     }
     & svg path {
-        stroke: ${selectedTheme.iconStrokeDisabledColor};
+        stroke: ${selectedTheme.colors.iconStrokeDisabledColor};
         transition: 0.2s all ease;
         
     }

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

@@ -14,5 +14,5 @@ export const IconButtonStyled = styled(IconButton)`
             stroke: ${props.iconcolor};
         }
     `}
-    border: ${props => props.border ? "1px solid " + selectedTheme.backgroundSponsoredColor : "none"}
+    border: ${props => props.border ? "1px solid " + selectedTheme.colors.backgroundSponsoredColor : "none"}
 `

src/components/Buttons/PrimaryButton/PrimaryButton.js

@@ -1,10 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 import {
   PrimaryButtonContainer,
   PrimaryButtonStyled,
 } from "./PrimaryButton.styled";
+import selectedTheme from "../../../themes";
 
 export const PrimaryButton = (props) => {
   return (
@@ -34,5 +34,5 @@ PrimaryButton.propTypes = {
 };
 
 PrimaryButton.defaultProps = {
-  font: TextFont,
+  font: selectedTheme.fonts.textFont,
 };

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

@@ -7,7 +7,7 @@ export const PrimaryButtonContainer = styled(Box)``;
 export const PrimaryButtonStyled = styled(Button)`
   background-color: ${(props) =>
     props.disabled
-      ? selectedTheme.primaryPurpleDisabled
+      ? selectedTheme.colors.primaryPurpleDisabled
       : props.variant === "contained"
       ? props.buttoncolor
       : "transparent"} !important;
@@ -15,7 +15,7 @@ export const PrimaryButtonStyled = styled(Button)`
     props.variant === "outlined" ? props.buttoncolor : "transparent"};
   color: ${(props) =>
     props.disabled
-      ? selectedTheme.primaryTextDisabled
+      ? selectedTheme.colors.primaryTextDisabled
       : props.textcolor} !important;
   box-shadow: 0 0 0 0;
   font-size: 12px;
@@ -31,7 +31,7 @@ export const PrimaryButtonStyled = styled(Button)`
     box-shadow: 0 0 0 0;
   }
   &:disabled {
-    background-color: ${selectedTheme.primaryPurpleDisabled};
+    background-color: ${selectedTheme.colors.primaryPurpleDisabled};
     color: ${(props) => props.textcolor};
   }
 `;

src/components/Cards/CreateOfferCard/CreateOffer.styled.js

@@ -1,7 +1,6 @@
 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 import { Label } from "../../CheckBox/Label";
 import Select from "../../Select/Select";
 
@@ -13,7 +12,7 @@ export const CreateOfferContainer = styled(Container)`
   align-items: center;
 `;
 export const CreateOfferTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   width: 328px;
   height: 33px;
   text-align: center;
@@ -22,12 +21,12 @@ export const CreateOfferTitle = styled(Typography)`
   font-weight: 700;
   font-size: 24px;
   line-height: 33px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-top: 36px;
   margin-bottom: 40px;
 `;
 export const CreateOfferDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;
@@ -37,7 +36,7 @@ export const CreateOfferDescription = styled(Typography)`
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   margin-bottom: 20px;
 `;
 export const CreateOfferFormContainer = styled(Box)`
@@ -47,7 +46,7 @@ export const CreateOfferFormContainer = styled(Box)`
 `;
 export const RegisterAltText = styled(Typography)`
   font-family: "Poppins";
-  color: ${selectedTheme.primaryText};
+  color: ${selectedTheme.fonts.textFont};
   font-size: 14px;
   padding-right: 6px;
   line-height: 14px;
@@ -65,7 +64,7 @@ export const FieldLabel = styled(Label)`
     font-size: 12px;
     font-weight: 600;
     line-height: 20px;
-    color: ${selectedTheme.primaryGrayText};
+    color: ${selectedTheme.colors.primaryGrayText};
     cursor: auto;
     letter-spacing: 0.2px;
   }

src/components/Cards/CreateOfferCard/FirstPart/FirstPartCreateOffer.js

@@ -98,7 +98,7 @@ const FirstPartCreateOffer = (props) => {
         variant="contained"
         height="48px"
         fullWidth
-        buttoncolor={selectedTheme.primaryPurple}
+        buttoncolor={selectedTheme.colors.primaryPurple}
         textcolor="white"
         //   disabled={
         //     formik.values.username.length === 0 ||

src/components/Cards/CreateOfferCard/FirstPart/FirstPartCreateOffer.styled.js

@@ -1,13 +1,12 @@
 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../themes";
-import { TextFont } from "../../../../themes/primaryTheme/primaryThemeFonts";
 import { PrimaryButton } from "../../../Buttons/PrimaryButton/PrimaryButton";
 import { Label } from "../../../CheckBox/Label";
 import { TextField } from "../../../TextFields/TextField/TextField";
 
 export const CreateOfferTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   width: 328px;
   height: 33px;
   text-align: center;
@@ -16,13 +15,13 @@ export const CreateOfferTitle = styled(Typography)`
   font-weight: 700;
   font-size: 24px;
   line-height: 33px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-top: 36px;
   margin-bottom: 40px;
   position: relative;
 `;
 export const CreateOfferDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;
@@ -32,7 +31,7 @@ export const CreateOfferDescription = styled(Typography)`
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   margin-bottom: 18px;
 `;
 export const CreateOfferFormContainer = styled(Box)`
@@ -47,7 +46,7 @@ export const FieldLabel = styled(Label)`
     font-size: 12px;
     font-weight: 600;
     line-height: 20px;
-    color: ${selectedTheme.primaryGrayText};
+    color: ${selectedTheme.colors.primaryGrayText};
     cursor: auto;
     letter-spacing: 0.2px;
   }

src/components/Cards/FilterCard/FilterCard.js

@@ -23,7 +23,6 @@ import { HOME_PAGE } from "../../../constants/pages";
 import qs from "query-string";
 import { useTranslation } from "react-i18next";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 const FilterCard = () => {
   const [appliedFilters, setAppliedFilters] = useState([]);
@@ -118,7 +117,7 @@ const FilterCard = () => {
     <FilterCardContainer>
       <Header>
         <Title>{t("filters.title")}</Title>
-        <Link to="#" textsize={"12px"} font={TextFont} onClick={clearFilters}>
+        <Link to="#" textsize={"12px"} font={selectedTheme.fonts.textFont} onClick={clearFilters}>
           {t("filters.cancel")}
         </Link>
       </Header>
@@ -168,12 +167,12 @@ const FilterCard = () => {
           variant="outlined"
           fullWidth
           onClick={handleFilters}
-          textcolor={selectedTheme.primaryPurple}
-          font={TextFont}
+          textcolor={selectedTheme.colors.primaryPurple}
+          font={selectedTheme.fonts.textFont}
           style={{
             fontWeight: "600",
             fontSize: "12px",
-            borderColor: selectedTheme.primaryPurple,
+            borderColor: selectedTheme.colors.primaryPurple,
           }}
         >
           {t("filters.usefilters")}

src/components/Cards/FilterCard/FilterCard.styled.js

@@ -1,7 +1,6 @@
 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 export const FilterCardContainer = styled(Box)`
   position: fixed;
@@ -32,8 +31,8 @@ export const Title = styled(Typography)`
   font-size: 24px;
   line-height: 33px;
   font-weight: 700;
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   position: relative;
 `;
 export const Header = styled(Box)`
@@ -52,8 +51,8 @@ export const Footer = styled(Box)`
     padding-top: 7px;
   }
   & div button:hover {
-    background-color: ${selectedTheme.primaryPurple} !important;
-    color: ${selectedTheme.primaryBackgroundColor} !important;
+    background-color: ${selectedTheme.colors.primaryPurple} !important;
+    color: ${selectedTheme.colors.primaryBackgroundColor} !important;
   }
 `;
 export const ContentContainer = styled(Box)`

src/components/Cards/FilterCard/FilterDropdown/Checkbox/FilterCheckboxDropdown.js

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import DropdownList from "../../../../Dropdown/DropdownList/DropdownList";
 import selectedTheme from "../../../../../themes";
-import {TextFont} from "../../../../../themes/primaryTheme/primaryThemeFonts"
 import IconWithNumber from "../../../../Icon/IconWithNumber/IconWithNumber";
 import { ReactComponent as DropdownDown } from "../../../../../assets/images/svg/down-arrow.svg";
 import { ReactComponent as DropdownUp } from "../../../../../assets/images/svg/up-arrow.svg";
@@ -68,8 +67,8 @@ const FilterCheckboxDropdown = (props) => {
       title={props.title}
       textcolor={
         props.filters.length > 0
-          ? selectedTheme.primaryPurple
-          : selectedTheme.primaryText
+          ? selectedTheme.colors.primaryPurple
+          : selectedTheme.colors.primaryText
       }
       dropdownIcon={
         <IconWithNumber number={props.filters.length}>
@@ -81,7 +80,7 @@ const FilterCheckboxDropdown = (props) => {
       fullWidth
       setIsOpened={setIsOpened}
       toggleIconStyles={{
-        backgroundColor: isOpened ?  "white" : selectedTheme.primaryIconBackgroundColor,
+        backgroundColor: isOpened ?  "white" : selectedTheme.colors.primaryIconBackgroundColor,
       }}
       headerOptions={
         <React.Fragment>
@@ -100,7 +99,7 @@ const FilterCheckboxDropdown = (props) => {
             value={toSearch}
             onChange={(event) => setToSearch(event.target.value)}
             textsize={"12px"}
-            font={TextFont}
+            font={selectedTheme.fonts.textFont}
             fullWidth
             height={"40px"}
             containerStyle={{ marginTop: "6px" }}

src/components/Cards/FilterCard/FilterDropdown/Checkbox/FilterCheckboxDropdown.styled.js

@@ -1,7 +1,6 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../../themes";
-import { TextFont } from "../../../../../themes/primaryTheme/primaryThemeFonts";
 
 export const SelectedItemsContainer = styled(Box)`
   display: flex;
@@ -11,14 +10,14 @@ export const SelectedItemsContainer = styled(Box)`
 `;
 export const SelectedItem = styled(Box)`
   margin-top: 2px;
-  background-color: ${selectedTheme.primaryPurple};
+  background-color: ${selectedTheme.colors.primaryPurple};
   border-radius: 8px;
   color: white;
   padding-left: 8px;
   padding-right: 6px;
   line-height: 12px;
   letter-spacing: 0.02em;
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 12px;
   cursor: pointer;
   margin-right: 3px;
@@ -34,6 +33,6 @@ export const ClearText = styled(Box)`
   width: 21px;
   height: 21px;
   &:hover {
-    background-color: ${selectedTheme.primaryIconBackgroundColor};
+    background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
   }
 `;

src/components/Cards/FilterCard/FilterDropdown/Radio/FilterRadioDropdown.js

@@ -10,7 +10,6 @@ import { TextField } from "../../../../TextFields/TextField/TextField";
 import DropdownItem from "../../../../Dropdown/DropdownItem/DropdownItem";
 import RadioButton from "../../../../Radio/Button/RadioButton";
 import RadioGroup from "../../../../Radio/Group/RadioGroup";
-import { TextFont } from "../../../../../themes/primaryTheme/primaryThemeFonts";
 
 const FilterRadioDropdown = (props) => {
   const [toSearch, setToSearch] = useState("");
@@ -46,8 +45,8 @@ const FilterRadioDropdown = (props) => {
       title={props.title}
       textcolor={
         props.selected !== 0
-          ? selectedTheme.primaryPurple
-          : selectedTheme.primaryText
+          ? selectedTheme.colors.primaryPurple
+          : selectedTheme.colors.primaryText
       }
       dropdownIcon={props.icon}
       toggleIconClosed={<DropdownDown />}
@@ -55,7 +54,7 @@ const FilterRadioDropdown = (props) => {
       fullWidth
       setIsOpened={setIsOpened}
       toggleIconStyles={{
-        backgroundColor: isOpened ?  "white" : selectedTheme.primaryIconBackgroundColor,
+        backgroundColor: isOpened ?  "white" : selectedTheme.colors.primaryIconBackgroundColor,
       }}
       headerOptions={
         <React.Fragment>
@@ -65,7 +64,7 @@ const FilterRadioDropdown = (props) => {
             value={toSearch}
             onChange={(event) => setToSearch(event.target.value)}
             textsize={"12px"}
-            font={TextFont}
+            font={selectedTheme.fonts.textFont}
             fullWidth
             height={"40px"}
             containerStyle={{ marginTop: "6px" }}

src/components/Cards/FilterCard/FilterDropdown/Radio/FilterRadioDropdown.styled.js

@@ -19,6 +19,6 @@ export const ClearText = styled(Box)`
     width: 21px;
     height: 21px;
     &:hover {
-        background-color: ${selectedTheme.primaryIconBackgroundColor};
+        background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
     }
 `

src/components/Cards/ItemDetailsCard/ItemDetailsCard.js

@@ -35,19 +35,19 @@ const ItemDetailsCard = (props) => {
       <OfferInfo>
         <Info>
           <InfoGroup>
-          <InfoIcon color={selectedTheme.iconStrokeColor} component="span" size="16px">
+          <InfoIcon color={selectedTheme.colors.iconStrokeColor} component="span" size="16px">
               <Category width={"14px"} />
             </InfoIcon>
           <InfoText>{offerMock.category}</InfoText>
           </InfoGroup>
           <InfoGroup>
-          <InfoIcon color={selectedTheme.iconStrokeColor} component="span" size="16px">
+          <InfoIcon color={selectedTheme.colors.iconStrokeColor} component="span" size="16px">
               <Subcategory width={"14px"} />
             </InfoIcon>
           <InfoText>{offerMock.subcategory}</InfoText>
           </InfoGroup>
           <InfoGroup>
-          <InfoIcon color={selectedTheme.iconStrokeColor} component="span" size="16px">
+          <InfoIcon color={selectedTheme.colors.iconStrokeColor} component="span" size="16px">
           <Quantity width={"22px"} height={"16px"} />
             </InfoIcon>
           <InfoText>{props.offer.condition}</InfoText>
@@ -83,8 +83,8 @@ const ItemDetailsCard = (props) => {
         <React.Fragment>
           <CheckButton
             variant={props.sponsored ? "contained" : "outlined"}
-            buttoncolor={selectedTheme.primaryPurple}
-            textcolor={props.sponsored ? "white" : selectedTheme.primaryPurple}
+            buttoncolor={selectedTheme.colors.primaryPurple}
+            textcolor={props.sponsored ? "white" : selectedTheme.colors.primaryPurple}
             style={{fontWeight: "600"}}
           >
             Trampi

src/components/Cards/ItemDetailsCard/ItemDetailsCard.styled.js

@@ -1,7 +1,6 @@
 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 //import { IconButton } from "../../Buttons/IconButton/IconButton";
 import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
 import { Icon } from "../../Icon/Icon";
@@ -12,9 +11,9 @@ export const ItemDetailsCardContainer = styled(Container)`
   width: ${(props) => (!props.halfwidth ? "100%" : "49%")};
   box-sizing: border-box;
   margin: 10px 0;
-  border: 1px solid ${selectedTheme.borderNormal};
+  border: 1px solid ${selectedTheme.colors.borderNormal};
   background-color: ${(props) =>
-    props.sponsored === 'true' ? selectedTheme.backgroundSponsoredColor : "white"};
+    props.sponsored === 'true' ? selectedTheme.colors.backgroundSponsoredColor : "white"};
   border-radius: 4px;
   padding: 18px;
   max-width: 2000px;
@@ -35,9 +34,9 @@ export const InfoGroup = styled(Box)`
     gap:4px;
 `;
 export const PostDate = styled(Typography)`
-font-family: ${TextFont};
+font-family: ${selectedTheme.fonts.textFont};
 font-size: 12px;
-color: ${selectedTheme.primaryText};
+color: ${selectedTheme.colors.primaryText};
 `;
 export const Info = styled(Box)`
     display:flex;
@@ -48,13 +47,13 @@ export const InfoIcon = styled(Box)`
     align-items:center;
 `;
 export const InfoText = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   text-transform: capitalize;
 `;
 export const OfferTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   flex: 1;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   font-weight: 700;
   font-size: 24px;
   padding: 0 72px;
@@ -65,14 +64,14 @@ export const OfferAuthor = styled(Box)`
   flex-direction: column;
 `;
 export const OfferAuthorName = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   line-height: 22px;
   font-size: 16px;
   color: ${selectedTheme.primaryDarkText};
 `;
 export const OfferLocation = styled(Typography)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
 `;
@@ -84,36 +83,36 @@ export const OfferDetails = styled(Box)`
   padding: 0 72px;
 `;
 export const OfferCategory = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 33%;
 `;
 export const OfferPackage = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 34%;
 `;
 export const OfferViews = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 34%;
 `;
 export const OfferDescriptionTitle = styled(Box)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 12px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
   line-height: 16px;
 `;
 export const OfferDescriptionText = styled(Box)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
   line-height: 22px;
   max-width: calc(100% - 230px);
   max-height: 120px;
@@ -139,8 +138,8 @@ export const DetailIcon = styled(Icon)`
   }
 `;
 export const DetailText = styled(Typography)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   position: relative;
@@ -154,7 +153,7 @@ export const CheckButton = styled(PrimaryButton)`
   bottom: 9px;
   right: 9px;
   &:hover button {
-    background-color: ${selectedTheme.primaryPurple} !important;
+    background-color: ${selectedTheme.colors.primaryPurple} !important;
     color: white !important;
   }
 `;

src/components/Cards/OfferCard/OfferCard.js

@@ -79,8 +79,8 @@ const OfferCard = (props) => {
 
           <CheckButton
             variant={props.sponsored ? "contained" : "outlined"}
-            buttoncolor={selectedTheme.primaryPurple}
-            textcolor={props.sponsored ? "white" : selectedTheme.primaryPurple}
+            buttoncolor={selectedTheme.colors.primaryPurple}
+            textcolor={props.sponsored ? "white" : selectedTheme.colors.primaryPurple}
             style={{fontWeight: "600"}}
             onClick = {() => routeToItem(props.offer._id)}
           >

src/components/Cards/OfferCard/OfferCard.styled.js

@@ -1,7 +1,6 @@
 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 import { IconButton } from "../../Buttons/IconButton/IconButton";
 import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
 import { Icon } from "../../Icon/Icon";
@@ -13,11 +12,11 @@ export const OfferCardContainer = styled(Container)`
   box-sizing: border-box;
   margin: 10px 0;
   background-color: ${(props) =>
-    props.sponsored === 'true' ? selectedTheme.backgroundSponsoredColor : "white"};
+    props.sponsored === 'true' ? selectedTheme.colors.backgroundSponsoredColor : "white"};
   border-radius: 4px;
   ${(props) =>
     props.sponsored === 'true' &&
-    `border: 1px solid ${selectedTheme.borderSponsoredColor};`}
+    `border: 1px solid ${selectedTheme.colors.borderSponsoredColor};`}
   padding: 16px;
   max-width: 2000px;
   height: 180px;
@@ -32,9 +31,9 @@ export const OfferInfo = styled(Box)`
   margin-left: 18px;
 `;
 export const OfferTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   flex: 1;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   font-weight: 700;
   font-size: 24px;
 `;
@@ -44,14 +43,14 @@ export const OfferAuthor = styled(Box)`
   flex-direction: column;
 `;
 export const OfferAuthorName = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   line-height: 22px;
   font-size: 16px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
 `;
 export const OfferLocation = styled(Typography)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
 `;
@@ -63,8 +62,8 @@ export const OfferDetails = styled(Box)`
   gap: 1rem;
 `;
 export const OfferCategory = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   @media (max-width: 1000px) {
@@ -72,14 +71,14 @@ export const OfferCategory = styled(Box)`
   }
 `;
 export const OfferPackage = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
 `;
 export const OfferViews = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   @media (max-width: 1200px) {
@@ -87,15 +86,15 @@ export const OfferViews = styled(Box)`
   }
 `;
 export const OfferDescriptionTitle = styled(Box)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 12px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
   line-height: 16px;
 `;
 export const OfferDescriptionText = styled(Box)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
   line-height: 22px;
   max-width: calc(100% - 230px);
   max-height: 120px;
@@ -132,8 +131,8 @@ export const DetailIcon = styled(Icon)`
   }
 `;
 export const DetailText = styled(Typography)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   position: relative;
@@ -147,7 +146,7 @@ export const CheckButton = styled(PrimaryButton)`
   bottom: 9px;
   right: 9px;
   &:hover button {
-    background-color: ${selectedTheme.primaryPurple} !important;
+    background-color: ${selectedTheme.colors.primaryPurple} !important;
     color: white !important;
   }
   @media (max-width: 650px) {
@@ -160,7 +159,7 @@ export const MessageIcon = styled(IconButton)`
   position: absolute;
   top: 10px;
   right: 10px;
-  background-color: ${selectedTheme.primaryIconBackgroundColor};
+  background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
   border-radius: 100%;
   padding-top: 2px;
   text-align: center;

src/components/CheckBox/CheckBox.js

@@ -64,5 +64,5 @@ CheckBox.propTypes = {
 };
 
 CheckBox.defaultProps = {
-  color: selectedTheme.primaryPurple,
+  color: selectedTheme.colors.primaryPurple,
 };

src/components/CheckBox/CheckBox.styled.js

@@ -1,6 +1,6 @@
 import { Box, Checkbox, FormControlLabel } from "@mui/material";
 import styled from "styled-components";
-import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
+import selectedTheme from "../../themes";
 
 export const CheckBoxContainer = styled(Box)`
   ${(props) =>
@@ -26,7 +26,7 @@ export const FormControlLabelStyled = styled(FormControlLabel)`
     `}
   margin-right: 0;
   & label {
-    font-family: ${TextFont};
+    font-family: ${selectedTheme.fonts.textFont};
     font-size: 12px;
   }
   & span:nth-child(1) svg {

src/components/CheckBox/Label.styled.js

@@ -1,7 +1,6 @@
 import { Box, FormLabel } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
-import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const LabelContainer = styled(Box)`
     display: flex;
@@ -11,14 +10,14 @@ export const LabelContainer = styled(Box)`
 `
 
 export const LeftLabel = styled(FormLabel)`
-    font-family: ${TextFont};
+    font-family: ${selectedTheme.fonts.textFont};
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: 200px;
     flex: 1;
     cursor: pointer;
-    color: ${selectedTheme.primaryText};
+    color: ${selectedTheme.colors.primaryText};
 `
 export const RightLabel = styled(FormLabel)`
     margin-left: 10px;
@@ -27,7 +26,7 @@ export const RightLabel = styled(FormLabel)`
     white-space: nowrap;
     max-width: 100px;
     cursor: pointer;
-    color: ${selectedTheme.primaryText};
-    font-family: ${TextFont};
+    color: ${selectedTheme.colors.primaryText};
+    font-family: ${selectedTheme.fonts.textFont};
 
 `

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

@@ -1,10 +1,10 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
+import selectedTheme from "../../../themes";
 
 export const DropdownItemContainer = styled(Box)`
 `
 
 export const DropdownItemStyled = styled(Box)`
-    font-family: ${TextFont};
+    font-family: ${selectedTheme.fonts.textFont};
 `

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

@@ -1,7 +1,6 @@
 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 import { IconButton } from "../../Buttons/IconButton/IconButton";
 
 export const DropdownListContainer = styled(Box)`
@@ -20,13 +19,13 @@ export const DropdownTitle = styled(Typography)`
   padding-bottom: 10px;
   padding-top: 5px;
   padding-right: 0.9rem;
-  font-family: ${TextFont};
-  color: ${props => props.textcolor ? props.textcolor : selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${props => props.textcolor ? props.textcolor : selectedTheme.colors.primaryText};
 `;
 
 export const ToggleIconOpened = styled(IconButton)`
   cursor: pointer;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   & span {
     ${props => props.backgroundColor ? `background-color: ${props.backgroundColor}` : ``}
   }
@@ -34,7 +33,7 @@ export const ToggleIconOpened = styled(IconButton)`
 
 export const ToggleIconClosed = styled(IconButton)`
   cursor: pointer;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   & span {
     ${props => props.backgroundColor ? `background-color: ${props.backgroundColor}` : ``}
   }

src/components/Icon/IconWithNumber/IconWithNumber.styled.js

@@ -1,13 +1,13 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
+
 
 export const IconWithNumberContainer = styled(Box)`
     position: relative;
 `
 export const Number = styled(Box)`
-    background-color: ${selectedTheme.primaryPurple};
+    background-color: ${selectedTheme.colors.primaryPurple};
     border-radius: 100%;
     color: white;
     position: absolute;
@@ -16,5 +16,5 @@ export const Number = styled(Box)`
     font-size: 10px;
     bottom: 0;
     right: -5px;
-    font-family: ${TextFont};
+    font-family: ${selectedTheme.fonts.textFont};
 `

src/components/ImagePicker/ImagePicker.styled.js

@@ -16,23 +16,23 @@ export const ImagePickerContainer = styled(Box)`
   border-radius: 4px;
   position: relative;
   cursor: pointer;
-  background-color: ${selectedTheme.imagePickerBackground};
+  background-color: ${selectedTheme.colors.imagePickerBackground};
   background-image: linear-gradient(
       to right,
-      ${selectedTheme.primaryPurple} 50%,
+      ${selectedTheme.colors.primaryPurple} 50%,
       rgba(255, 255, 255, 0) 0%
     ),
     linear-gradient(
-      ${selectedTheme.primaryPurple} 50%,
+      ${selectedTheme.colors.primaryPurple} 50%,
       rgba(255, 255, 255, 0) 0%
     ),
     linear-gradient(
       to right,
-      ${selectedTheme.primaryPurple} 50%,
+      ${selectedTheme.colors.primaryPurple} 50%,
       rgba(255, 255, 255, 0) 0%
     ),
     linear-gradient(
-      ${selectedTheme.primaryPurple} 50%,
+      ${selectedTheme.colors.primaryPurple} 50%,
       rgba(255, 255, 255, 0) 0%
     );
   background-position: bottom, right, top, left;
@@ -48,7 +48,7 @@ export const ImagePickerContainer = styled(Box)`
     props.hasImage &&
     `
     background-image: none;
-    border: 1px solid ${selectedTheme.primaryPurple};
+    border: 1px solid ${selectedTheme.colors.primaryPurple};
   `}
 `;
 export const AddIcon = styled(Plus)`
@@ -102,7 +102,7 @@ export const Tools = styled(Box)`
   flex-direction: row;
   display: flex;
   & div {
-    background-color: ${selectedTheme.primaryIconBackgroundColor};
+    background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
     border-radius: 100px;
     display: flex;
     flex: 1;

src/components/ItemDetails/Header/Header.styled.js

@@ -1,7 +1,6 @@
 import { Box, Link, Typography} from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 export const HeaderContainer = styled(Box)`
     margin-top: 20px;
@@ -15,9 +14,9 @@ export const ButtonContainer = styled(Link)`
     gap:12px;
 `
 export const HeaderText = styled(Typography) `
-    font-family: ${TextFont};
+    font-family: ${selectedTheme.fonts.textFont};
     line-height: 22px;
     font-size: 16px;
-    color: ${selectedTheme.primaryPurple};
+    color: ${selectedTheme.colors.primaryPurple};
     text-decoration: underline;
 `

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.js

@@ -30,13 +30,13 @@ const ItemDetailsHeaderCard = (props) => {
         <OfferDetails>
          <OfferTitle>{author.title}</OfferTitle>
          <DetailContainer>
-           <DetailIcon color={selectedTheme.iconStrokeColor} component="span" size="22px">
+           <DetailIcon color={selectedTheme.colors.iconStrokeColor} component="span" size="22px">
               <PIB width={"22px"} />
             </DetailIcon>
           <DetailText>PIB - {author.pib}</DetailText>
          </DetailContainer>
          <DetailContainer>
-            <DetailIcon color={selectedTheme.iconStrokeColor} component="span" size="22px">
+            <DetailIcon color={selectedTheme.colors.iconStrokeColor} component="span" size="22px">
               <Category width={"22px"} />
             </DetailIcon>
           <DetailText>{author.location}</DetailText>

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.styled.js

@@ -1,7 +1,6 @@
 import { Box, Grid, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 import { IconButton } from "../../Buttons/IconButton/IconButton";
 import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
 import { Icon } from "../../Icon/Icon";
@@ -13,9 +12,9 @@ export const ItemDetailsHeaderContainer = styled(Box)`
   box-sizing: border-box;
   margin: 10px 0;
   background-color: ${(props) =>
-    props.sponsored === 'true' ? selectedTheme.backgroundSponsoredColor : "white"};
+    props.sponsored === 'true' ? selectedTheme.colors.backgroundSponsoredColor : "white"};
   border-radius: 4px;
-  border: 1px solid ${selectedTheme.borderNormal};
+  border: 1px solid ${selectedTheme.colors.borderNormal};
   max-width: 2000px;
   position: relative;
 `;
@@ -24,8 +23,8 @@ export const DetailContainer = styled(Box)`
     flex-direction: row;
     align-items: center;
     gap:7px;
-    font-family: ${TextFont};
-    color: ${selectedTheme.primaryText};
+    font-family: ${selectedTheme.fonts.textFont};
+    color: ${selectedTheme.colors.primaryText};
     line-height: 16px;
     font-size: 12px;
 `;
@@ -36,7 +35,7 @@ export const HeaderTop = styled(Box)`
     gap:18px;
 `;
 export const HeaderDetails = styled(Box)`
-    background-color: ${selectedTheme.primaryIconBackgroundColor};
+    background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
   `;
 export const BottomDetails = styled(Box)`
   max-width:fit-content;
@@ -59,8 +58,8 @@ export const OfferInfo = styled(Box)`
 `;
 export const OfferTitle = styled(Typography)`
   margin-bottom:12px;
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryPurple};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryPurple};
   font-weight: 700;
   font-size: 24px;
 `;
@@ -70,20 +69,20 @@ export const OfferAuthor = styled(Box)`
   flex-direction: column;
 `;
 export const OfferAuthorName = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   line-height: 22px;
   font-size: 16px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
 `;
 export const OfferLocation = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
 `;
 export const OfferPIB = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
 `;
@@ -95,40 +94,40 @@ export const OfferDetails = styled(Box)`
 `;
 
 export const StatusText = styled(Grid)`
-font-family: ${TextFont};
-color: ${selectedTheme.primaryText};
+font-family: ${selectedTheme.fonts.textFont};
+color: ${selectedTheme.colors.primaryText};
 `
 export const OfferCategory = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 33%;
 `;
 export const OfferPackage = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 34%;
 `;
 export const OfferViews = styled(Box)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   width: 34%;
 `;
 export const OfferDescriptionTitle = styled(Box)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 12px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
   line-height: 16px;
 `;
 export const OfferDescriptionText = styled(Box)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
   line-height: 22px;
   max-width: calc(100% - 230px);
   max-height: 120px;
@@ -157,8 +156,8 @@ export const DetailIcon = styled(Icon)`
   }
 `;
 export const DetailText = styled(Typography)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 16px;
   position: relative;
@@ -170,7 +169,7 @@ export const CheckButton = styled(PrimaryButton)`
   bottom: 9px;
   right: 9px;
   &:hover button {
-    background-color: ${selectedTheme.primaryPurple} !important;
+    background-color: ${selectedTheme.colors.primaryPurple} !important;
     color: white !important;
   }
 `;
@@ -180,7 +179,7 @@ export const MessageIcon = styled(IconButton)`
   position: absolute;
   top: 10px;
   right: 10px;
-  background-color: ${selectedTheme.primaryPurple};
+  background-color: ${selectedTheme.colors.primaryPurple};
   border-radius: 100%;
   padding-top: 2px;
   text-align: center;

src/components/Link/Link.styled.js

@@ -4,7 +4,7 @@ import selectedTheme from "../../themes";
 
 export const LinkStyled = styled(Link)`
   cursor: pointer;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   font-family: ${(props) => props.font};
   font-style: normal;
   font-weight: 400;

src/components/MarketPlace/Header/Header.js

@@ -92,8 +92,8 @@ const Header = (props) => {
           <HeaderButton
             iconColor={
               props.isGrid
-                ? selectedTheme.iconStrokeColor
-                : selectedTheme.primaryPurple
+                ? selectedTheme.colors.iconStrokeColor
+                : selectedTheme.colors.primaryPurple
             }
             onClick={() => props.setIsGrid(false)}
           >
@@ -102,8 +102,8 @@ const Header = (props) => {
           <HeaderButton
             iconColor={
               props.isGrid
-                ? selectedTheme.primaryPurple
-                : selectedTheme.iconStrokeColor
+                ? selectedTheme.colors.primaryPurple
+                : selectedTheme.colors.iconStrokeColor
             }
             onClick={() => props.setIsGrid(true)}
           >

src/components/MarketPlace/Header/Header.styled.js

@@ -3,7 +3,6 @@ import styled from "styled-components";
 import selectedTheme from "../../../themes";
 import { IconButton } from "../../Buttons/IconButton/IconButton";
 import Select from "../../Select/Select";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 export const HeaderContainer = styled(Box)`
     margin-top: 20px;
@@ -12,8 +11,8 @@ export const HeaderContainer = styled(Box)`
     align-items: center;
 `
 export const HeaderLocation = styled(Box)`
-    font-family: ${TextFont};
-    color: ${selectedTheme.primaryPurple};
+    font-family: ${selectedTheme.fonts.textFont};
+    color: ${selectedTheme.colors.primaryPurple};
     font-weight: 700;
     line-height: 22px;
     font-size: 16px;
@@ -34,7 +33,7 @@ export const HeaderOptions = styled(Box)`
 export const HeaderSelect = styled(Select)`
     width: 210px;
     height: 35px;
-    font-family: ${TextFont};
+    font-family: ${selectedTheme.fonts.textFont};
     margin-top: 3px;
     font-weight: 400;
     position: relative;
@@ -44,7 +43,7 @@ export const HeaderSelect = styled(Select)`
     }
 `
 export const SelectItem = styled(MenuItem)`
-    font-family: ${TextFont};
+    font-family: ${selectedTheme.fonts.textFont};
 `
 export const IconStyled = styled(Box)`
     position: relative;
@@ -56,4 +55,4 @@ export const HeaderButtons = styled(Box)`
     display: flex;
     justify-content: space-between;
     margin-right: 40px;
-`
+`

src/components/Radio/Button/RadioButton.styled.js

@@ -1,6 +1,6 @@
 import { Box, FormControlLabel, Radio } from "@mui/material";
 import styled from "styled-components";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
+import selectedTheme from "../../../themes";
 
 export const RadioButtonContainer = styled(Box)`
   ${(props) =>
@@ -28,7 +28,7 @@ export const FormControlLabelStyled = styled(FormControlLabel)`
     `}
   margin-right: 0;
   & label {
-    font-family: ${TextFont};
+    font-family: ${selectedTheme.fonts.textFont};
     font-size: 12px;
   }
   & span:nth-child(1) svg {

src/components/Scroller/HorizontalScroller.styled.js

@@ -14,7 +14,7 @@ export const HorizontalScrollerContainer = styled(Box)`
     overflow: hidden;
 `
 export const Arrow = styled(IconButton)`
-    border: 1px solid ${selectedTheme.primaryPurple};
+    border: 1px solid ${selectedTheme.colors.primaryPurple};
     border-radius: 100%;
     min-width: 40px;
     width: 40px;
@@ -28,15 +28,15 @@ export const Arrow = styled(IconButton)`
     margin-bottom: auto;
     transition: 0.2s all ease;
     &:hover {
-        background-color: ${selectedTheme.primaryPurple};
+        background-color: ${selectedTheme.colors.primaryPurple};
         & svg path {
             stroke: white;
         }
     }
     ${props => props.disabled && `
-        border 1px solid ${selectedTheme.iconStrokeDisabledColor};
+        border 1px solid ${selectedTheme.colors.iconStrokeDisabledColor};
         & svg path {
-            stroke: ${selectedTheme.iconStrokeDisabledColor};
+            stroke: ${selectedTheme.colors.iconStrokeDisabledColor};
             transition: 0.2s all ease;
             
         }
@@ -60,7 +60,7 @@ export const ArrowIcon = styled(DownArrow)`
     height: 18px;
     & path {
         ${props => props.disabled && `
-        stroke: ${selectedTheme.iconStrokeDisabledColor}
+        stroke: ${selectedTheme.colors.iconStrokeDisabledColor}
         `}
     }
 `

src/components/Select/Option/Option.styled.js

@@ -3,12 +3,12 @@ import styled from "styled-components";
 import selectedTheme from "../../../themes";
 
 export const OptionStyled = styled(MenuItem)`
-    background-color: ${props => props.selected ? selectedTheme.primaryPurple : "white"} !important;
-    color: ${props => props.selected ? "white" : selectedTheme.selectOptionTextColor};
+    background-color: ${props => props.selected ? selectedTheme.colors.primaryPurple : "white"} !important;
+    color: ${props => props.selected ? "white" : selectedTheme.colors.selectOptionTextColor};
     margin:2px 9px;
     border-radius: 4px;
     &:hover {
-        background-color: ${selectedTheme.primaryPurple} !important;
+        background-color: ${selectedTheme.colors.primaryPurple} !important;
         color: white;
     }
 `

src/components/Select/Select.styled.js

@@ -1,6 +1,6 @@
 import { Box, Select } from "@mui/material";
 import styled from "styled-components";
-import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
+import selectedTheme from "../../themes";
 
 export const SelectStyled = styled(Select)`
     width: ${props => props.width};
@@ -8,7 +8,7 @@ export const SelectStyled = styled(Select)`
     padding: 2px;
     font-size: 16px;
     font-weight: 600;
-    font-family: ${TextFont};
+    font-family: ${selectedTheme.fonts.textFont};
 `
 export const SelectIcon = styled(Box)`
     position: relative;

src/components/StepProgress/StepProgress.styled.js

@@ -1,7 +1,6 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
-import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const StepProgressContainer = styled(Box)`
   display: flex;
@@ -23,12 +22,12 @@ export const StepLine = styled(Box)`
 export const StepBar = styled(Box)`
   flex: 0 0 35px;
   background-color: ${(props) =>
-    props.done ? selectedTheme.primaryPurple : selectedTheme.primaryDarkGrayText};
+    props.done ? selectedTheme.colors.primaryPurple : selectedTheme.colors.primaryDarkGrayText};
   border-radius: 100%;
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   text-align: center;
   border: 5px solid
-    ${(props) => (props.current || props.done ? selectedTheme.primaryPurple : "white")};
+    ${(props) => (props.current || props.done ? selectedTheme.colors.primaryPurple : "white")};
   padding-top: 2px;
   line-height: 19px;
   margin-left: -2px;
@@ -41,6 +40,6 @@ export const StepBar = styled(Box)`
 export const Progress = styled(Box)`
   height: 9px;
   width: ${(props) => (props.done ? "100%" : "0")};
-  background-color: ${selectedTheme.primaryPurple};
+  background-color: ${selectedTheme.colors.primaryPurple};
   transition: width 1s;
 `;

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

@@ -11,7 +11,7 @@ export const TextFieldContainer = styled(Box)`
 `;
 
 export const TextFieldStyled = styled(TextField)`
-  background-color: ${selectedTheme.primaryBackgroundColor};
+  background-color: ${selectedTheme.colors.primaryBackgroundColor};
   width: ${(props) => props.width};
   font-style: ${(props) =>
     props.italicplaceholder === "true" ? "italic" : "normal"};

src/components/UserReviewsCard/UserReviewsCard.js

@@ -44,7 +44,7 @@ const UserReviewsCard = (props) => {
                 <ListItemAvatar sx={{ mt: 0 }}>
                   <Avatar alt={review.name} src="/static/images/avatar/1.jpg" />
                 </ListItemAvatar>
-                <Typography sx={{ color: selectedTheme.primaryPurple }}>
+                <Typography sx={{ color: selectedTheme.colors.primaryPurple }}>
                   <b>{review.name}</b>
                 </Typography>
               </ListItem>

src/pages/CreateOffer/CreateOffer.styled.js

@@ -1,7 +1,6 @@
 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
-import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const CreateOfferContainer = styled(Container)`
   margin-top: 0px;
@@ -11,7 +10,7 @@ export const CreateOfferContainer = styled(Container)`
   align-items: center;
 `;
 export const CreateOfferTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   width: 328px;
   height: 33px;
   text-align: center;
@@ -20,12 +19,12 @@ export const CreateOfferTitle = styled(Typography)`
   font-weight: 700;
   font-size: 24px;
   line-height: 33px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-top: 36px;
   margin-bottom: 40px;
 `;
 export const CreateOfferDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;
@@ -35,7 +34,7 @@ export const CreateOfferDescription = styled(Typography)`
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   margin-bottom: 20px;
 `;
 export const CreateOfferFormContainer = styled(Box)`
@@ -43,8 +42,8 @@ export const CreateOfferFormContainer = styled(Box)`
   height: 216px;
 `;
 export const RegisterAltText = styled(Typography)`
-  font-family: "Poppins";
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   font-size: 14px;
   padding-right: 6px;
   line-height: 14px;

src/pages/ForgotPasswordPage/ForgotPassword.styled.js

@@ -1,7 +1,6 @@
 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
-import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const ForgotPasswordPageContainer = styled(Container)`
   margin-top: 200px;
@@ -16,7 +15,7 @@ export const ForgotPasswordPageContainer = styled(Container)`
   }
 `;
 export const ForgotPasswordTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   width: 328px;
   height: 33px;
   text-align: center;
@@ -25,11 +24,11 @@ export const ForgotPasswordTitle = styled(Typography)`
   font-weight: 400;
   font-size: 24px;
   line-height: 33px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-top: 36px;
 `;
 export const ForgotPasswordDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;
@@ -39,7 +38,7 @@ export const ForgotPasswordDescription = styled(Typography)`
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   margin-bottom: 20px;
 `;
 export const FormContainer = styled(Box)`
@@ -48,14 +47,14 @@ export const FormContainer = styled(Box)`
 `;
 export const ErrorMessage = styled(Typography)`
   color: red;
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   position: relative;
   top: -7px;
   font-size: 14px;
 `
 export const LoginAltText = styled(Typography)`
-  font-family: "Poppins";
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   font-size: 14px;
   padding-right: 6px;
   line-height: 14px;

src/pages/ForgotPasswordPage/ForgotPasswordMailSent/MailSent.js

@@ -61,7 +61,7 @@ const MailSent = () => {
           variant="contained"
           height="48px"
           fullWidth
-          buttoncolor={selectedTheme.primaryPurple}
+          buttoncolor={selectedTheme.colors.primaryPurple}
           textcolor="white"
           onClick={navigateLogin}
         >

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

@@ -1,7 +1,6 @@
 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 export const MailSentContainer = styled(Container)`
   margin-top: 300px;
@@ -16,8 +15,8 @@ export const MailSentContainer = styled(Container)`
   }
 `;
 export const Title = styled(Typography)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   width: 328px;
   height: 33px;
   text-align: center;
@@ -26,11 +25,11 @@ export const Title = styled(Typography)`
   font-weight: 400;
   font-size: 24px;
   line-height: 33px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-top: 6px;
 `;
 export const Description = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 9px;
   width: 279px;
   font-style: normal;
@@ -40,7 +39,7 @@ export const Description = styled(Typography)`
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   margin-bottom: 36px;
 `;
 export const FormContainer = styled(Box)`
@@ -48,8 +47,8 @@ export const FormContainer = styled(Box)`
   height: 216px;
 `;
 export const StandardText = styled(Typography)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   font-size: 16px;
   padding-right: 6px;
   line-height: 14px;

src/pages/ForgotPasswordPage/ForgotPasswordPage.js

@@ -99,7 +99,7 @@ const ForgotPasswordPage = () => {
           variant="contained"
           height="48px"
           fullWidth
-          buttoncolor={selectedTheme.primaryPurple}
+          buttoncolor={selectedTheme.colors.primaryPurple}
           textcolor="white"
           disabled={formik.values.email?.length === 0}
         >

src/pages/HomePage/HomePage.styled.js

@@ -10,7 +10,7 @@ export const HomePageContainer = styled(Container)`
   flex: 1;
   display: flex;
   flex-direction: column;
-  background-color: ${selectedTheme.offerBackgroundColor};
+  background-color: ${selectedTheme.colors.offerBackgroundColor};
 `;
 export const GridStyled = styled(Grid)`
   

src/pages/ItemDetailsPage/ItemDetailsPage.styled.js

@@ -10,7 +10,7 @@ export const ItemDetailsPageContainer = styled(Container)`
   flex: 1;
   display: flex;
   flex-direction: column;
-  background-color: ${selectedTheme.offerBackgroundColor};
+  background-color: ${selectedTheme.colors.offerBackgroundColor};
 `;
 export const GridStyled = styled(Grid)`
   

src/pages/LoginPage/Login.styled.js

@@ -1,7 +1,6 @@
 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
-import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const LoginPageContainer = styled(Container)`
   margin-top: 150px;
@@ -16,7 +15,7 @@ export const LoginPageContainer = styled(Container)`
   }
 `;
 export const LoginTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   width: 328px;
   height: 33px;
   text-align: center;
@@ -25,11 +24,11 @@ export const LoginTitle = styled(Typography)`
   font-weight: 400;
   font-size: 24px;
   line-height: 33px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-top: 36px;
 `;
 export const LoginDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;
@@ -39,7 +38,7 @@ export const LoginDescription = styled(Typography)`
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   margin-bottom: 20px;
 `;
 export const LoginFormContainer = styled(Box)`
@@ -47,8 +46,8 @@ export const LoginFormContainer = styled(Box)`
   height: 216px;
 `;
 export const RegisterAltText = styled(Typography)`
-  font-family: "Poppins";
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   font-size: 14px;
   padding-right: 6px;
   line-height: 14px;
@@ -61,7 +60,7 @@ export const RegisterTextContainer = styled(Box)`
 `;
 export const ErrorMessage = styled(Typography)`
   color: red;
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   position: relative;
   top: -12px;
   height: 20px;

src/pages/LoginPage/LoginPage.js

@@ -176,7 +176,7 @@ const LoginPage = ({ history }) => {
           variant="contained"
           height="48px"
           fullWidth
-          buttoncolor={selectedTheme.primaryPurple}
+          buttoncolor={selectedTheme.colors.primaryPurple}
           textcolor="white"
           disabled={
             formik.values.email.length === 0 ||

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

@@ -106,7 +106,7 @@ const FirstPartOfRegistration = (props) => {
         variant="contained"
         height="48px"
         fullWidth
-        buttoncolor={selectedTheme.primaryPurple}
+        buttoncolor={selectedTheme.colors.primaryPurple}
         textcolor="white"
         disabled={
           formik.values.mail.length === 0 ||

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

@@ -1,18 +1,17 @@
 import { Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../themes";
-import { TextFont } from "../../../../themes/primaryTheme/primaryThemeFonts";
 
 export const FormContainer = styled.form`
   width: 335px;
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-style: normal;
   font-weight: 400;
   display: flex;
   align-items: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   font-size: 12px;
   width: 100%;
   text-align: left;
@@ -27,7 +26,7 @@ export const RegisterDescription = styled(Typography)`
 `;
 export const ErrorMessage = styled(Typography)`
   color: red;
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   position: relative;
   top: -7px;
   font-size: 14px;

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

@@ -2,7 +2,6 @@ import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import ImagePicker from "../../../components/ImagePicker/ImagePicker";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 import { ReactComponent as ProfilePictureSVG } from "../../../assets/images/profile-picture.svg";
 
 export const RegisterPageContainer = styled(Container)`
@@ -28,7 +27,7 @@ export const RegisterPageContainer = styled(Container)`
   }
 `;
 export const RegisterTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   width: 328px;
   height: 33px;
   text-align: center;
@@ -36,14 +35,14 @@ export const RegisterTitle = styled(Typography)`
   font-weight: 400;
   font-size: 24px;
   line-height: 33px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-top: 34px;
   @media (max-height: 800px) {
     margin-top: 26px;
   }
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;
@@ -53,7 +52,7 @@ export const RegisterDescription = styled(Typography)`
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   margin-bottom: 20px;
   @media (max-height: 800px) {
     margin-bottom: 14px;
@@ -65,7 +64,7 @@ export const FormContainer = styled(Box)`
 `;
 export const LoginAltText = styled(Typography)`
   font-family: "Poppins";
-  color: ${selectedTheme.primaryText};
+  color: ${selectedTheme.colors.primaryText};
   font-size: 14px;
   padding-right: 6px;
   line-height: 14px;
@@ -95,7 +94,7 @@ export const Footer = styled(Box)`
   }
 `;
 export const FooterText = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   color: #505050;
   text-align: center;
   width: 330px;
@@ -108,7 +107,7 @@ export const FooterText = styled(Typography)`
 export const ProfileImagePicker = styled(ImagePicker)`
   background: none;
   margin: 36px;
-  background: ${selectedTheme.primaryIconBackgroundColor};
+  background: ${selectedTheme.colors.primaryIconBackgroundColor};
   background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%235A3984FF' stroke-width='2' stroke-dasharray='7%2c 12' stroke-dashoffset='44' stroke-linecap='square'/%3e%3c/svg%3e");
   border-radius: 100px;
   overflow: hidden;

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

@@ -79,7 +79,7 @@ const SecondPartOfRegistration = (props) => {
         variant="contained"
         height="48px"
         fullWidth
-        buttoncolor={selectedTheme.primaryPurple}
+        buttoncolor={selectedTheme.colors.primaryPurple}
         textcolor="white"
         disabled={
           formik.values.PIB.length === 0 ||

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

@@ -1,19 +1,18 @@
 import { Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../themes";
-import { TextFont } from "../../../../themes/primaryTheme/primaryThemeFonts";
 
 
 export const FormContainer = styled.form`
   width: 335px;
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-style: normal;
   font-weight: 400;
   display: flex;
   align-items: center;
-  color: ${selectedTheme.primaryText};
+  color: ${selectedTheme.colors.primaryText};
   font-size: 12px;
   width: 100%;
   text-align: left;
@@ -27,7 +26,7 @@ export const RegisterDescription = styled(Typography)`
 `;
 export const ErrorMessage = styled(Typography)`
   color: red;
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   position: relative;
   top: -7px;
   font-size: 14px;

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

@@ -82,7 +82,7 @@ const ThirdPartOfRegistration = (props) => {
         variant="contained"
         height="48px"
         fullWidth
-        buttoncolor={selectedTheme.primaryPurple}
+        buttoncolor={selectedTheme.colors.primaryPurple}
         textcolor="white"
         disabled={
           formik.values.location.length === 0 &&

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

@@ -1,18 +1,17 @@
 import {  Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../themes";
-import { TextFont } from "../../../../themes/primaryTheme/primaryThemeFonts";
 
 export const FormContainer = styled.form`
   width: 335px;
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   font-style: normal;
   font-weight: 400;
   display: flex;
   align-items: center;
-  color: ${selectedTheme.primaryText};
+  color: ${selectedTheme.colors.primaryText};
   font-size: 12px;
   width: 100%;
   text-align: left;

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

@@ -1,7 +1,6 @@
 import { Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
-import { TextFont } from "../../../themes/primaryTheme/primaryThemeFonts";
 
 export const RegisterSuccessfulContainer = styled(Container)`
   margin-top: 300px;
@@ -12,7 +11,7 @@ export const RegisterSuccessfulContainer = styled(Container)`
   padding: 0;
 `;
 export const RegisterTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   width: 430px;
   text-align: center;
   flex: 1;
@@ -20,11 +19,11 @@ export const RegisterTitle = styled(Typography)`
   font-weight: 400;
   font-size: 39px;
   line-height: 48px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-top: 32px;
 `;
 export const RegisterDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 36px;
   width: 430px;
   font-style: normal;
@@ -34,6 +33,6 @@ export const RegisterDescription = styled(Typography)`
   display: block;
   align-items: center;
   text-align: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   margin-bottom: 20px;
 `;

src/pages/ResetPasswordPage/ResetPasswordPage.js

@@ -147,7 +147,7 @@ const ResetPasswordPage = () => {
           variant="contained"
           height="48px"
           fullWidth
-          buttoncolor={selectedTheme.primaryPurple}
+          buttoncolor={selectedTheme.colors.primaryPurple}
           textcolor="white"
           disabled={
             formik.values.password.length < 8 ||

src/pages/ResetPasswordPage/ResetPasswordPage.styled.js

@@ -1,7 +1,6 @@
 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
-import { TextFont } from "../../themes/primaryTheme/primaryThemeFonts";
 
 export const ResetPasswordPageContainer = styled(Container)`
   margin-top: 200px;
@@ -16,7 +15,7 @@ export const ResetPasswordPageContainer = styled(Container)`
   }
 `;
 export const ResetPasswordTitle = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   width: 328px;
   height: 33px;
   text-align: center;
@@ -25,11 +24,11 @@ export const ResetPasswordTitle = styled(Typography)`
   font-weight: 400;
   font-size: 24px;
   line-height: 33px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-top: 36px;
 `;
 export const ResetPasswordDescription = styled(Typography)`
-  font-family: ${TextFont};
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 9px;
   width: 270px;
   font-style: normal;
@@ -39,7 +38,7 @@ export const ResetPasswordDescription = styled(Typography)`
   display: flex;
   align-items: center;
   text-align: center;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   margin-bottom: 20px;
 `;
 export const FormContainer = styled(Box)`
@@ -56,8 +55,8 @@ export const Footer = styled(Box)`
   justify-content: center;
 `;
 export const FooterText = styled(Typography)`
-  font-family: ${TextFont};
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   padding-right: 6px;
   text-align: center;
   width: 340px;

src/themes/index.js

@@ -1,10 +1,11 @@
-import { primaryThemeColors } from "./primaryTheme/primaryThemeColors";
+import primary from "./primaryTheme/primaryTheme";
+
 
 let selectedThemeNumber = 0;
 
 const getTheme = () => {
     if (selectedThemeNumber === 0) {
-        return {...primaryThemeColors}
+        return {...primary}
     }
 }
 

src/themes/primaryTheme/base.js

@@ -1,6 +1,6 @@
 import { createGlobalStyle } from "styled-components";
 import { pxToRemMd } from "./helper";
-import { TextFont } from "./primaryThemeFonts";
+import selectedTheme from "..";
 import { variables } from './variables';
 
 
@@ -51,7 +51,7 @@ p,
 blockquote,
 th,
 td {
-  ${TextFont}
+  ${selectedTheme.fonts.textFont}
 }
 
 p {

src/themes/primaryTheme/primaryTheme.js

@@ -0,0 +1,28 @@
+const primary = {
+    colors : {
+        primaryPurple: "#5A3984",
+        primaryYellow: "#f7b126",
+        primaryPurpleDisabled: "#4D4D4D",
+        primaryBackgroundColor: "#F1F1F1",
+        primaryTextDisabled: "#F1F1F1",
+        primaryText: "#4D4D4D",
+        primaryGrayText: "#818181",
+        primaryDarkGrayText: "#DCDCDC",
+        primaryIconBackgroundColor: "#E4E4E4",
+        borderNormal: "#D4D4D4",
+        borderSponsoredColor: "#E5D0FF",
+        backgroundSponsoredColor: "#F5EDFF",
+        offerBackgroundColor: "#F5F5F5",
+        selectOptionTextColor: "#1D1D1D",
+        primaryDarkText: "#505050",
+        iconStrokeColor: "#8C8C8C",
+        iconStrokeDisabledColor: "#818181"
+    },
+     fonts : {
+        textFont: "Open Sans",
+        titleFont: "Josefin Sans"
+    }
+}
+
+export default primary;
+ 

src/themes/primaryTheme/primaryThemeColors.js

@@ -1,19 +0,0 @@
-export const primaryThemeColors = {
-    primaryPurple: "#5A3984",
-    primaryYellow: "#f7b126",
-    primaryPurpleDisabled: "#4D4D4D",
-    primaryBackgroundColor: "#F1F1F1",
-    primaryTextDisabled: "#F1F1F1",
-    primaryText: "#4D4D4D",
-    primaryGrayText: "#818181",
-    primaryDarkGrayText: "#DCDCDC",
-    primaryIconBackgroundColor: "#E4E4E4",
-    borderNormal: "#D4D4D4",
-    borderSponsoredColor: "#E5D0FF",
-    backgroundSponsoredColor: "#F5EDFF",
-    offerBackgroundColor: "#F5F5F5",
-    selectOptionTextColor: "#1D1D1D",
-    primaryDarkText: "#505050",
-    iconStrokeColor: "#8C8C8C",
-    iconStrokeDisabledColor: "#818181"
-}

src/themes/primaryTheme/primaryThemeFonts.js

@@ -1,9 +1,4 @@
-import { css } from "styled-components";
-
-export const TextFont = css`
-    font-family: "Open Sans";
-`;
-
-export const AppTitle = css`
-    font-famili: "Josefin Sans";
-`;
+export const primaryThemeFonts = {
+    textFont: "OpenSans",
+    titleFont: "Josefin Sans"
+}

src/themes/primaryTheme/variables.js

@@ -1,4 +1,7 @@
 export const variables = {
+    font:{
+      textFont: "Open Sans"
+    },
     typography: {
       p: {
         large: {