Added global styles

src/assets/styles/_functions.scss

@@ -1,7 +1,7 @@
-@function pxToRem($target, $context: $base-font-size) {
-  @return ($target / $context) * 1rem;
-}
+// @function pxToRem($target, $context: $base-font-size) {
+//   @return ($target / $context) * 1rem;
+// }
 
-@function pxToRemMd($target, $context: $base-font-size-md) {
-  @return ($target / $context) * 1rem;
-}
+// @function pxToRemMd($target, $context: $base-font-size-md) {
+//   @return calc($target / $context) * 1rem;
+// }

src/assets/styles/_layout.scss

@@ -1,17 +0,0 @@
-.l-page {
-  @include flex-column;
-  flex: 1 1 auto;
-  padding-bottom: 7rem;
-  position:relative;
-  @include media-below($bp-xl) {
-    padding-bottom: 4rem;
-  }
-}
-
-.l-section {
-  padding: 0 3.25rem;
-
-  @include media-below($bp-xl) {
-    padding: 0;
-  }
-}

src/assets/styles/_mixins.scss

@@ -1,81 +1,81 @@
-@mixin desktop {
-  @media (min-width: 1280px) {
-    @content;
-  }
-}
+// @mixin desktop {
+//   @media (min-width: 1280px) {
+//     @content;
+//   }
+// }
 
-@mixin desktop-lg {
-  @media (min-width: 1480px) {
-    @content;
-  }
-}
+// @mixin desktop-lg {
+//   @media (min-width: 1480px) {
+//     @content;
+//   }
+// }
 
-@mixin tablet {
-  @media (max-width: 1024px) {
-    @content;
-  }
-}
+// @mixin tablet {
+//   @media (max-width: 1024px) {
+//     @content;
+//   }
+// }
 
-@mixin media-up($media) {
-  @media only screen and (min-width: $media) {
-    @content;
-  }
-}
+// @mixin media-up($media) {
+//   @media only screen and (min-width: $media) {
+//     @content;
+//   }
+// }
 
-@mixin media-below($media) {
-  @media only screen and (max-width: #{$media - 0.02px}) {
-    @content;
-  }
-}
+// @mixin media-below($media) {
+//   @media only screen and (max-width: #{$media - 0.02px}) {
+//     @content;
+//   }
+// }
 
-@mixin media-between($mediaMin, $mediaMax) {
-  @media screen and (min-width: $mediaMin) and (max-width: #{$mediaMax - 0.02px}) {
-    @content;
-  }
-}
+// @mixin media-between($mediaMin, $mediaMax) {
+//   @media screen and (min-width: $mediaMin) and (max-width: #{$mediaMax - 0.02px}) {
+//     @content;
+//   }
+// }
 
-@mixin flex-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+// @mixin flex-center {
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+// }
 
-@mixin flex-column {
-  display: flex;
-  flex-direction: column;
-}
+// @mixin flex-column {
+//   display: flex;
+//   flex-direction: column;
+// }
 
-@mixin button-clear {
-  border: none;
-  padding: 0;
-  background-color: transparent;
-}
+// @mixin button-clear {
+//   border: none;
+//   padding: 0;
+//   background-color: transparent;
+// }
 
-@mixin outline-none {
-  &,
-  &:active,
-  &:focus {
-    outline: none;
-  }
-}
+// @mixin outline-none {
+//   &,
+//   &:active,
+//   &:focus {
+//     outline: none;
+//   }
+// }
 
-@mixin reset-position {
-  position: relative;
-  top: initial;
-  left: initial;
-  right: initial;
-  bottom: initial;
-}
+// @mixin reset-position {
+//   position: relative;
+//   top: initial;
+//   left: initial;
+//   right: initial;
+//   bottom: initial;
+// }
 
-@mixin text-ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+// @mixin text-ellipsis {
+//   white-space: nowrap;
+//   overflow: hidden;
+//   text-overflow: ellipsis;
+// }
 
-@mixin line-clamp($lines) {
-  display: -webkit-box;
-  -webkit-line-clamp: $lines;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
+// @mixin line-clamp($lines) {
+//   display: -webkit-box;
+//   -webkit-line-clamp: $lines;
+//   -webkit-box-orient: vertical;
+//   overflow: hidden;
+// }

src/assets/styles/_utility.scss

@@ -1,39 +0,0 @@
-.u-mr-24 {
-  margin-right: 24px;
-}
-
-.u-ml-32 {
-  margin-left: pxToRem(32px);
-}
-
-.u-position-relative {
-  position: relative;
-}
-
-.u-column {
-  @include flex-column;
-}
-
-.u-display-none {
-  display: none;
-}
-
-.u-superscript {
-  font-size: pxToRem(14px);
-  font-weight: medium;
-}
-
-.u-text-align-right {
-  text-align: right;
-}
-
-.u-hide {
-  width: 0;
-  height: 0;
-  visibility: hidden;
-  display: none;
-  position: fixed;
-  top: -20px;
-  right: -20px;
-  z-index: -1;
-}

src/components/About/AboutHeader/AboutHeader.styled.js

@@ -5,23 +5,23 @@ export const AboutHeaderContainer = styled(Box)`
   margin: 72px;
 `;
 export const AboutHeaderTitle = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-style: normal;
   font-weight: 700;
   font-size: 72px;
   line-height: 98px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
 `;
 export const AboutHeaderParagraph = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
   line-height: 22px;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
 `;
 export const AboutHeaderLine = styled(Box)`
-    border-top: 1px solid ${selectedTheme.iconYellowColor};
+    border-top: 1px solid ${selectedTheme.colors.iconYellowColor};
     width: 90px;
     margin-bottom: 26px;
 `;

src/components/About/AboutSection/AboutSection.styled.js

@@ -15,21 +15,21 @@ export const AboutSectionContainer = styled(Box)`
   margin-bottom: 72px;
 `;
 export const AboutSectionTitle = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-style: normal;
   font-weight: 600;
   font-size: 24px;
   line-height: 33px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-bottom: 18px;
 `;
 export const AboutSectionText = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
   line-height: 22px;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
 `;
 export const AboutSectionImage = styled.img`
   display: flex;

src/components/About/CheckOffersButton/CheckOffersButton.js

@@ -14,7 +14,7 @@ const CheckOffersButton = () => {
   };
   return (
     <CheckOffersButtonContainer
-      buttoncolor={selectedTheme.primaryPurple}
+      buttoncolor={selectedTheme.colors.primaryPurple}
       variant="outlined"
       onClick={handleClick}
     >

src/components/About/CheckOffersButton/CheckOffersButton.styled.js

@@ -9,8 +9,8 @@ export const CheckOffersButtonContainer = styled(PrimaryButton)`
   width: 180px;
   height: 49px;
   & button {
-    color: ${selectedTheme.primaryPurple};
-    font-family: "DM Sans";
+    color: ${selectedTheme.colors.primaryPurple};
+    font-family: ${selectedTheme.fonts.textFont};
     font-style: normal;
     font-weight: 600;
     font-size: 12px;
@@ -20,6 +20,6 @@ export const CheckOffersButtonContainer = styled(PrimaryButton)`
   }
   & button:hover {
     color: white;
-    background-color: ${selectedTheme.primaryPurple} !important;
+    background-color: ${selectedTheme.colors.primaryPurple} !important;
   }
 `;

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

@@ -15,12 +15,12 @@ export const ArrowIcon = styled(DownArrow)`
     ${(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;
@@ -32,7 +32,7 @@ export const ArrowContainer = styled(IconButton)`
   margin-bottom: auto;
   transition: 0.2s all ease;
   &:hover {
-    background-color: ${selectedTheme.primaryPurple};
+    background-color: ${selectedTheme.colors.primaryPurple};
     & svg path {
       stroke: white;
     }
@@ -40,15 +40,15 @@ export const ArrowContainer = styled(IconButton)`
   ${(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

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

src/components/Buttons/PrimaryButton/PrimaryButton.js

@@ -4,6 +4,7 @@ import {
   PrimaryButtonContainer,
   PrimaryButtonStyled,
 } from "./PrimaryButton.styled";
+import selectedTheme from "../../../themes";
 
 export const PrimaryButton = (props) => {
   return (
@@ -37,5 +38,5 @@ PrimaryButton.propTypes = {
 };
 
 PrimaryButton.defaultProps = {
-  font: "DM Sans",
+  font: selectedTheme.fonts.textFont,
 };

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

@@ -9,7 +9,7 @@ export const PrimaryButtonContainer = styled.div`
 export const PrimaryButtonStyled = styled(Button)`
   background-color: ${(props) =>
     props.disabled
-      ? selectedTheme.primaryPurpleDisabled
+      ? selectedTheme.colors.primaryPurpleDisabled
       : props.variant === "contained"
       ? props.buttoncolor
       : "transparent"} !important;
@@ -17,7 +17,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;
@@ -33,7 +33,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/ChatCard/ChatCard.styled.js

@@ -10,10 +10,10 @@ export const ChatCardContainer = 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};`}
+    props.sponsored === "true" && `border: 1px solid ${selectedTheme.colors.borderSponsoredColor};`}
   padding: 16px;
   max-width: 2000px;
   height: 180px;
@@ -67,8 +67,8 @@ export const Col = styled(Box)`
 `;
 export const UserName = styled(Typography)`
   margin-bottom: 12px;
-  font-family: "DM Sans";
-  color: ${selectedTheme.primaryPurple};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryPurple};
   font-weight: 700;
   font-size: 24px;
   cursor: pointer;
@@ -77,8 +77,8 @@ export const UserName = styled(Typography)`
   }
 `;
 export const LastMessage = styled(Typography)`
-  font-family: "DM Sans";
-  color: ${selectedTheme.primaryDarkTextThird};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryDarkTextThird};
   line-height: 22px;
   font-size: 16px;
   max-width: 220px;

src/components/Cards/ChatCard/ChatCommands/ChatCommands.js

@@ -29,8 +29,8 @@ const ChatCommands = (props) => {
         <PhoneIcon />
       </PhoneIconContainer>
       <CheckButton
-        buttoncolor={selectedTheme.primaryPurple}
-        textcolor={selectedTheme.primaryPurple}
+        buttoncolor={selectedTheme.colors.primaryPurple}
+        textcolor={selectedTheme.colors.primaryPurple}
         variant={"outlined"}
         style={{ fontWeight: "600" }}
         onClick={props.routeToItem}

src/components/Cards/ChatCard/ChatCommands/ChatCommands.styled.js

@@ -27,7 +27,7 @@ export const PhoneIcon = styled(Phone)`
 export const PhoneIconContainer = styled(IconButton)`
   width: 40px;
   height: 40px;
-  background-color: ${selectedTheme.primaryIconBackgroundColor};
+  background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
   border-radius: 100%;
   padding-top: 2px;
   text-align: center;
@@ -56,7 +56,7 @@ export const CheckButton = styled(PrimaryButton)`
   width: 180px;
   height: 48px;
   &:hover {
-    background-color: ${selectedTheme.primaryPurple};
+    background-color: ${selectedTheme.colors.primaryPurple};
     color: white !important;
     border-radius: 4px;
   }

src/components/Cards/ChatCard/LittleOfferDetails/LittleOfferDetails.styled.js

@@ -13,15 +13,15 @@ export const ChatOffer = styled(Box)`
 `;
 
 export const OfferText = styled(Box)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: "12px";
-  color: ${selectedTheme.primaryText};
+  color: ${selectedTheme.colors.primaryText};
 `;
 
 export const OfferTitle = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   flex: 1;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   font-weight: 700;
   font-size: 18px;
   cursor: pointer;

src/components/Cards/ChatCard/MobileOfferDetails/MobileOfferDetails.styled.js

@@ -14,10 +14,10 @@ export const OfferCardContainerMobile = styled(Box)`
 `;
 
 export const OfferTitleMobile = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   display: none;
   flex: 1;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   font-weight: 700;
   font-size: 12px;
   cursor: pointer;
@@ -37,7 +37,7 @@ export const OfferTitleMobile = styled(Typography)`
   }
 `;
 export const OfferTextMobile = styled(Box)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 9px;
-  color: ${selectedTheme.primaryText};
+  color: ${selectedTheme.colors.primaryText};
 `;

src/components/Cards/ChatCard/OfferLocation/OfferLocation.styled.js

@@ -20,8 +20,8 @@ export const LocationIconContainer = styled(Box)`
 `;
 
 export const XSText = styled(Typography)`
-  font-family: "DM Sans";
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 14px;
   position: relative;

src/components/Cards/CreateOfferCard/CreateOffer.js

@@ -151,7 +151,7 @@ const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
           </ModalHeader>
 
           <StepProgress
-            lineColor={selectedTheme.stepProgressAltColor}
+            lineColor={selectedTheme.colors.stepProgressAltColor}
             current={currentStep}
             numberOfSteps={3}
             functions={[() => goStepBack(1), () => goStepBack(2)]}

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

@@ -90,16 +90,16 @@ export const CreateOfferContainer = styled(Container)`
   }
 `;
 export const CreateOfferTitle = styled(Typography)`
-  font-family: "DM Sans";
-  /* width: 328px;
-  height: 33px; */
+  font-family: ${selectedTheme.fonts.textFont};
+  width: 328px;
+  height: 33px;
   text-align: center;
   flex: 1;
   font-style: normal;
   font-weight: 700;
   font-size: 24px;
   line-height: 33px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   margin-top: 36px;
   margin-bottom: 40px;
 
@@ -109,7 +109,7 @@ export const CreateOfferTitle = styled(Typography)`
   }
 `;
 export const CreateOfferDescription = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;
@@ -119,7 +119,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)`
@@ -128,8 +128,8 @@ export const CreateOfferFormContainer = styled(Box)`
   ${(props) => props.currentStep === 3 && `width: 120%; height: 420px;`}
 `;
 export const RegisterAltText = styled(Typography)`
-  font-family: "Poppins";
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.altText};
+  color: ${selectedTheme.fonts.textFont};
   font-size: 14px;
   padding-right: 6px;
   line-height: 14px;
@@ -147,7 +147,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;
   }
@@ -159,7 +159,7 @@ export const FieldLabel = styled(Label)`
 `;
 export const SelectText = styled(Typography)`
   font-size: 16px;
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-weight: 400;
 `;
 export const SelectField = styled(Select)`
@@ -178,7 +178,7 @@ export const SelectField = styled(Select)`
 `;
 
 export const SelectAltText = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
 
   font-style: italic;
   white-space: pre;

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

@@ -203,7 +203,7 @@ const FirstPartCreateOffer = (props) => {
         variant="contained"
         height="48px"
         fullWidth
-        buttoncolor={selectedTheme.primaryPurple}
+        buttoncolor={selectedTheme.colors.primaryPurple}
         textcolor="white"
         onClick={formik.handleSubmit}
         disabled={

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

@@ -7,7 +7,7 @@ import Option from "../../../Select/Option/Option";
 import { TextField } from "../../../TextFields/TextField/TextField";
 
 export const CreateOfferTitle = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   width: 328px;
   height: 33px;
   text-align: center;
@@ -16,13 +16,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: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 9px;
   width: 221px;
   font-style: normal;
@@ -32,7 +32,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)`
@@ -46,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/CreateOfferCard/SecondPart/SecondPartCreateOffer.js

@@ -149,7 +149,7 @@ const SecondPartCreateOffer = (props) => {
         variant="contained"
         height="48px"
         fullWidth
-        buttoncolor={selectedTheme.primaryPurple}
+        buttoncolor={selectedTheme.colors.primaryPurple}
         textcolor="white"
         onClick={formik.handleSubmit}
         disabled={

src/components/Cards/CreateOfferCard/SecondPart/SecondPartCreateOffer.styled.js

@@ -17,7 +17,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;
   }
@@ -41,6 +41,6 @@ export const SupportedFormats = styled(Typography)`
   font-size: 13px;
   width: 100%;
   text-align: center;
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   /* margin-top: 0px; */
 `;

src/components/Cards/CreateOfferCard/ThirdPart/ThirdPartCreateOffer.js

@@ -46,7 +46,7 @@ const ThirdPartCreateOffer = (props) => {
         type="submit"
         variant="contained"
         height="48px"
-        buttoncolor={selectedTheme.primaryPurple}
+        buttoncolor={selectedTheme.colors.primaryPurple}
         textcolor="white"
         fullWidth
         onClick={handleSubmit}

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

@@ -27,8 +27,8 @@ const CheckboxDropdownList = (props) => {
       title={props.title}
       textcolor={
         props.filters.length > 0
-          ? selectedTheme.primaryPurple
-          : selectedTheme.primaryText
+          ? selectedTheme.colors.primaryPurple
+          : selectedTheme.colors.primaryText
       }
       dropdownIcon={
         <NumberedIcon number={props.filters.length}>
@@ -43,7 +43,7 @@ const CheckboxDropdownList = (props) => {
       toggleIconStyles={{
         backgroundColor: props.open
           ? "white"
-          : selectedTheme.primaryIconBackgroundColor,
+          : selectedTheme.colors.primaryIconBackgroundColor,
       }}
       headerOptions={
         <React.Fragment>

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

@@ -12,14 +12,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: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 12px;
   cursor: pointer;
   margin-right: 3px;
@@ -30,7 +30,7 @@ export const CloseIcon = styled(Close)`
   top: 3px;
   left: 2px;
   & path {
-    stroke: ${selectedTheme.primaryYellow};
+    stroke: ${selectedTheme.colors.primaryYellow};
   }
 `;
 export const NumberedIcon = styled(IconWithNumber)`

src/components/Cards/FilterCard/FilterDropdown/Checkbox/CheckboxDropdownList/SearchField/SearchField.js

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { ReactComponent as CloseBlack } from "../../../../../../../assets/images/svg/close-black.svg";
 import { ClearText, SearchBar } from "./SearchField.styled";
+import selectedTheme from "../../../../../../../themes";
 
 const SearchField = (props) => {
   const handleClear = () => {
@@ -14,7 +15,7 @@ const SearchField = (props) => {
       value={props.value}
       onChange={props.onChange}
       textsize={"12px"}
-      font={"DM Sans"}
+      font={selectedTheme.fonts.textFont}
       fullWidth
       height={"40px"}
       containerStyle={{ marginTop: "6px" }}

src/components/Cards/FilterCard/FilterDropdown/Checkbox/CheckboxDropdownList/SearchField/SearchField.styled.js

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

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

@@ -55,8 +55,8 @@ const FilterRadioDropdown = (props) => {
       title={props.title}
       textcolor={
         !props.selected || props.selected?._id === 0 || !props.selected?._id
-          ? selectedTheme.primaryText
-          : selectedTheme.primaryPurple
+          ? selectedTheme.colors.primaryText
+          : selectedTheme.colors.primaryPurple
       }
       dropdownIcon={props.icon}
       toggleIconClosed={<DropdownDown />}
@@ -72,7 +72,7 @@ const FilterRadioDropdown = (props) => {
             : isOpened
         )
           ? "white"
-          : selectedTheme.primaryIconBackgroundColor,
+          : selectedTheme.colors.primaryIconBackgroundColor,
       }}
       headerOptions={
         // SearchBar
@@ -83,7 +83,7 @@ const FilterRadioDropdown = (props) => {
             value={toSearch}
             onChange={(event) => setToSearch(event.target.value)}
             textsize={"12px"}
-            font={"DM Sans"}
+            font={selectedTheme.fonts.textFont}
             fullWidth
             height={"40px"}
             containerStyle={{ marginTop: "6px" }}

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

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

src/components/Cards/FilterCard/FilterFooter/FilterFooter.js

@@ -31,8 +31,8 @@ const FilterFooter = (props) => {
           variant="outlined"
           fullWidth
           onClick={clearFilters}
-          textcolor={selectedTheme.primaryPurple}
-          font="DM Sans"
+          textcolor={selectedTheme.colors.primaryPurple}
+          font={selectedTheme.fonts.textFont}
           style={{
             fontWeight: "600",
             fontSize: "12px",
@@ -47,12 +47,12 @@ const FilterFooter = (props) => {
         variant="outlined"
         fullWidth
         onClick={handleFilters}
-        textcolor={selectedTheme.primaryPurple}
-        font="DM Sans"
+        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/FilterFooter/FilterFooter.styled.js

@@ -16,7 +16,7 @@ export const FilterFooterContainer = 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;
   }
 `;

src/components/Cards/FilterCard/FilterHeader/FilterHeader.js

@@ -4,6 +4,7 @@ import { CloseIcon, FilterHeaderContainer, Title } from "./FilterHeader.styled";
 import { useTranslation } from "react-i18next";
 import Link from "../../../Link/Link";
 import useIsMobile from "../../../../hooks/useIsMobile";
+import selectedTheme from "../../../../themes";
 
 const FilterHeader = (props) => {
   const filters = props.filters;
@@ -24,7 +25,7 @@ const FilterHeader = (props) => {
       {isMobile ? (
         <CloseIcon onClick={props.toggleFilters} />
       ) : (
-        <Link to="#" textsize={"12px"} font={"DM Sans"} onClick={clearFilters}>
+        <Link to="#" textsize={"12px"} font={selectedTheme.fonts.textFont} onClick={clearFilters}>
           {t("filters.cancel")}
         </Link>
       )}

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

@@ -15,8 +15,8 @@ export const Title = styled(Typography)`
   font-size: 24px;
   line-height: 33px;
   font-weight: 700;
-  font-family: "DM Sans";
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   position: relative;
   @media (max-width: 600px) {
     font-size: 18px;

src/components/Cards/ItemDetailsCard/Information/Information.js

@@ -7,7 +7,7 @@ const Information = (props) => {
   return (
     <InfoGroup hide={props.hide}>
       <InfoIcon
-        color={selectedTheme.iconStrokeColor}
+        color={selectedTheme.colors.iconStrokeColor}
         component="span"
         size="16px"
       >

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

@@ -1,5 +1,6 @@
 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
+import selectedTheme from "../../../../themes";
 
 export const InfoGroup = styled(Box)`
   display: ${props => props.hide ? 'none' : 'flex'};
@@ -12,7 +13,7 @@ export const InfoIcon = styled(Box)`
   align-items: center;
 `;
 export const InfoText = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   text-transform: capitalize;
   @media (max-width: 600px) {
     font-size: 12px;

src/components/Cards/ItemDetailsCard/ItemDetailsCard.js

@@ -133,8 +133,8 @@ const ItemDetailsCard = (props) => {
         {!props.halfwidth && props.showExchangeButton && (
           <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}
             onClick={startExchange}
             disabled={props.isMyOffer}
           >

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

@@ -18,10 +18,10 @@ export const ItemDetailsCardContainer = styled(Container)`
   width: ${(props) => (!props.halfwidth ? "100%" : "49%")};
   box-sizing: border-box;
   margin: ${(props) => (props.singleOffer ? "10px 36px" : "10px 0")};
-  border: 1px solid ${selectedTheme.borderNormal};
+  border: 1px solid ${selectedTheme.colors.borderNormal};
   background-color: ${(props) =>
     props.sponsored === "true"
-      ? selectedTheme.backgroundSponsoredColor
+      ? selectedTheme.colors.backgroundSponsoredColor
       : "white"};
   border-radius: 4px;
   padding: 18px;
@@ -74,7 +74,7 @@ export const EditDeleteButtons = styled(Box)`
 export const EditIconContainer = styled(IconButton)`
   width: 40px;
   height: 40px;
-  background-color: ${selectedTheme.primaryIconBackgroundColor};
+  background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
   border-radius: 100%;
   padding-top: 2px;
   text-align: center;
@@ -98,7 +98,7 @@ export const EditIcon = styled(Edit)`
 export const RemoveIconContainer = styled(IconButton)`
   width: 40px;
   height: 40px;
-  background-color: ${selectedTheme.primaryIconBackgroundColor};
+  background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
   border-radius: 100%;
   padding-top: 2px;
   text-align: center;
@@ -134,14 +134,14 @@ export const DateButtonsContainer = styled(Box)`
 `;
 
 export const PostDate = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 12px;
-  color: ${selectedTheme.primaryText};
+  color: ${selectedTheme.colors.primaryText};
   &::before {
     content: "Objavljeno: ";
     @media (max-width: 600px) {
       font-size: 9px;
-      font-family: "DM Sans";
+      font-family: ${selectedTheme.fonts.textFont};
     }
   }
   @media (max-width: 600px) {
@@ -175,43 +175,43 @@ export const OfferAuthor = styled(Box)`
   flex-direction: column;
 `;
 export const OfferAuthorName = styled(Typography)`
-  font-family: "DM Sans";
+  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: "DM Sans";
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
 `;
 
 export const OfferCategory = styled(Box)`
-  font-family: "DM Sans";
-  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: "DM Sans";
-  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: "DM Sans";
-  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: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 12px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
   line-height: 16px;
   @media (max-width: 600px) {
     font-size: 9px;
@@ -219,9 +219,9 @@ export const OfferDescriptionTitle = styled(Box)`
   }
 `;
 export const OfferDescriptionText = styled(Box)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
   line-height: 22px;
   padding-bottom: 20px;
   max-width: ${(props) =>
@@ -254,8 +254,8 @@ export const DetailIcon = styled(Icon)`
   }
 `;
 export const DetailText = styled(Typography)`
-  font-family: "DM Sans";
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   position: relative;
@@ -273,8 +273,8 @@ export const CheckButton = styled(PrimaryButton)`
     color: white !important;
     background-color: ${(props) =>
       !props.disabled
-        ? selectedTheme.primaryPurple
-        : selectedTheme.primaryPurpleDisabled} !important;
+        ? selectedTheme.colors.primaryPurple
+        : selectedTheme.colors.primaryPurpleDisabled} !important;
   }
   @media (max-width: 600px) {
     height: 44px;

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

@@ -34,9 +34,9 @@ export const Details = styled(Box)`
 `;
 
 export const OfferTitle = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   flex: 1;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   font-weight: 700;
   font-size: 24px;
   padding: ${(props) => (props.singleOffer ? 0 : "0 60px")};
@@ -92,9 +92,9 @@ export const OfferInfoContainer = styled(Box)`
   }
 `;
 export const OfferDescriptionTitle = styled(Box)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 12px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
   line-height: 16px;
   @media (max-width: 600px) {
     font-size: 9px;
@@ -102,9 +102,9 @@ export const OfferDescriptionTitle = styled(Box)`
   }
 `;
 export const OfferDescriptionText = styled(Box)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
   line-height: 22px;
   white-space: pre-line;
   padding-bottom: 70px;
@@ -124,15 +124,15 @@ export const OfferDescriptionText = styled(Box)`
 `;
 export const DesciprtionPostDate = styled(Typography)`
   display: none;
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 12px;
-  color: ${selectedTheme.primaryText};
+  color: ${selectedTheme.colors.primaryText};
   margin-top: 18px;
   &::before {
     content: "Objavljeno: ";
     @media (max-width: 600px) {
       font-size: 9px;
-      font-family: "DM Sans";
+      font-family: ${selectedTheme.fonts.textFont};
     }
   }
   @media screen and (min-width: 600px) and (max-width: 1200px) {

src/components/Cards/LittleOfferCard/LittleOfferCard.styled.js

@@ -6,8 +6,8 @@ import { Icon } from "../../Icon/Icon";
 import {ReactComponent as Swaps} from "../../../assets/images/svg/refresh.svg";
 
 export const LittleOfferCardContainer = styled(Box)`
-    background-color: ${selectedTheme.chatHeaderColor};
-    border: 1px solid ${selectedTheme.borderNormal};
+    background-color: ${selectedTheme.colors.chatHeaderColor};
+    border: 1px solid ${selectedTheme.colors.borderNormal};
     border-radius: 2px;
     min-width: 211px;
     max-width: 300px;
@@ -36,13 +36,13 @@ export const OfferDetails = styled(Box)`
 export const OfferName = styled(Typography)`
     font-weight: 600;
     font-size: 16px;
-    font-family: "DM Sans";
-    color: ${selectedTheme.primaryPurple};
+    font-family: ${selectedTheme.fonts.textFont};
+    color: ${selectedTheme.colors.primaryPurple};
 `
 export const OfferCategory = styled(Typography)`
-    font-family: "DM Sans";
+    font-family: ${selectedTheme.fonts.textFont};
     font-size: 12px;
-    color: ${selectedTheme.primaryDarkText};
+    color: ${selectedTheme.colors.primaryDarkText};
 `
 export const OfferCategoryIcon = styled(Category)`
     width: 12px;
@@ -54,7 +54,7 @@ export const OfferCategoryIcon = styled(Category)`
 export const OfferSwapsIconContainer = styled(Icon)`
     width: 40px;
     height: 40px;
-    background-color: ${selectedTheme.primaryPurple};
+    background-color: ${selectedTheme.colors.primaryPurple};
     border-radius: 100%;
     position: absolute;
     top: -19px;

src/components/Cards/MessageCard/MessageCard.styled.js

@@ -19,8 +19,8 @@ export const ProfileImage = styled.img`
 export const MessageContent = styled(Box)`
   background-color: ${(props) =>
     props.ismymessage
-      ? selectedTheme.primaryPurple
-      : selectedTheme.messageBackground};
+      ? selectedTheme.colors.primaryPurple
+      : selectedTheme.colors.messageBackground};
   border-radius: ${(props) =>
     props.ismymessage ? "9px 0px 9px 9px" : "0px 9px 9px 9px"};
     padding: 9px;
@@ -33,13 +33,13 @@ export const MessageContent = styled(Box)`
     }
 `;
 export const MessageText = styled(Typography)`
-    font-family: "DM Sans";
+    font-family: ${selectedTheme.fonts.textFont};
     font-size: 16px;
     line-height: 22px;
-    color: ${props => props.ismymessage ? `white` : selectedTheme.messageText};
+    color: ${props => props.ismymessage ? `white` : selectedTheme.colors.messageText};
 `;
 export const MessageDate = styled(Typography)`
-    color: ${props => props.ismymessage ? selectedTheme.messageMyDate : selectedTheme.messageDate};
+    color: ${props => props.ismymessage ? selectedTheme.colors.messageMyDate : selectedTheme.colors.messageDate};
     font-size: 12px;
     font-style: italic;
     position: absolute;

src/components/Cards/MiniChatCard/MiniChatCard.styled.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import selectedTheme from "../../../themes";
 
 export const MiniChatCardContainer = styled(Box)`
-  background-color: ${props => props.selected ? selectedTheme.primaryPurple : "white"};
+  background-color: ${props => props.selected ? selectedTheme.colors.primaryPurple : "white"};
   border-radius: 4px;
   display: flex;
   flex-direction: row;
@@ -27,22 +27,22 @@ export const ProfileDetails = styled(Box)`
 export const ProfileName = styled(Typography)`
   font-size: 16px;
   font-weight: 600;
-  font-family: "DM Sans";
-  color: ${props => props.selected ? selectedTheme.primaryYellow : selectedTheme.primaryPurple};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${props => props.selected ? selectedTheme.colors.primaryYellow : selectedTheme.colors.primaryPurple};
 `;
 export const ProfileProduct = styled(Typography)`
   margin-top: 9px;
   font-size: 9px;
-  color: ${props => props.selected ? "white" : selectedTheme.primaryDarkTextThird};
-  font-family: "DM Sans";
+  color: ${props => props.selected ? "white" : selectedTheme.colors.primaryDarkTextThird};
+  font-family: ${selectedTheme.fonts.textFont};
   line-height: 10px;
   margin-left: 1px;
 `;
 export const ProfileProductName = styled(Typography)`
   font-size: 12px;
   font-weight: ${props => props.selected ? "400" : "600"};
-  color: ${props => props.selected ? "white" : selectedTheme.primaryDarkTextThird};
-  font-family: "DM Sans";
+  color: ${props => props.selected ? "white" : selectedTheme.colors.primaryDarkTextThird};
+  font-family: ${selectedTheme.fonts.textFont};
   line-height: 14px;
   margin-left: 1px;
 `;

src/components/Cards/OfferCard/DeleteOffer/DeleteOffer.js

@@ -97,7 +97,7 @@ const DeleteOffer = (props) => {
             height="48px"
             width="180px"
             fullWidth
-            buttoncolor={selectedTheme.primaryPurple}
+            buttoncolor={selectedTheme.colors.primaryPurple}
             textcolor="white"
             onClick={closeDeleteModalHandler}
           >
@@ -109,8 +109,8 @@ const DeleteOffer = (props) => {
             height="48px"
             width="180px"
             fullWidth
-            buttoncolor={selectedTheme.primaryPurple}
-            textcolor={selectedTheme.primaryPurple}
+            buttoncolor={selectedTheme.colors.primaryPurple}
+            textcolor={selectedTheme.colors.primaryPurple}
             onClick={removeOfferHandler}
           >
             {t("deleteOffer.delete")}

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

@@ -69,7 +69,7 @@ export const OfferDescription = styled(Box)`
 export const OfferDescriptionTitle = styled(Typography)`
   font-size: 16px;
   font-weight: 600;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
 
   @media screen and (max-width: 600px) {
     font-size: 14px;
@@ -91,7 +91,7 @@ export const CategoryIcon = styled(Icon)`
 `;
 
 export const DeleteQuestion = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
   font-weight: 600;
   text-align: center;
@@ -111,7 +111,7 @@ export const RemoveIconBorder = styled(IconButton)`
   position: absolute;
   top: 16px;
   right: 143px;
-  background-color: ${selectedTheme.primaryPurple};
+  background-color: ${selectedTheme.colors.primaryPurple};
   border-radius: 100%;
   padding-top: 2px;
   text-align: center;

src/components/Cards/OfferCard/OfferCard.js

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

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

@@ -20,12 +20,12 @@ export const OfferCardContainer = styled(Container)`
   margin: 10px 0;
   background-color: ${(props) =>
     props.sponsored === "true"
-      ? selectedTheme.backgroundSponsoredColor
+      ? 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;
@@ -87,9 +87,9 @@ export const OfferInfo = styled(Box)`
   `}
 `;
 export const OfferTitle = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   flex: 1;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   font-weight: 700;
   font-size: 24px;
   width: calc(100% - 120px);
@@ -124,10 +124,10 @@ export const OfferAuthor = styled(Box)`
   flex-direction: column;
 `;
 export const OfferAuthorName = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   line-height: 22px;
   font-size: 16px;
-  color: ${selectedTheme.primaryText};
+  color: ${selectedTheme.colors.primaryText};
   @media (max-width: 600px) {
     font-size: 14px;
     ${(props) =>
@@ -141,8 +141,8 @@ export const OfferAuthorName = styled(Typography)`
   }
 `;
 export const OfferLocation = styled(Typography)`
-  font-family: "DM Sans";
-  color: ${selectedTheme.primaryDarkText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryDarkText};
   line-height: 16px;
   font-size: 12px;
   ${(props) =>
@@ -167,8 +167,8 @@ export const OfferDetails = styled(Box)`
   }
 `;
 export const OfferCategory = styled(Box)`
-  font-family: "DM Sans";
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   ${(props) =>
@@ -179,14 +179,14 @@ export const OfferCategory = styled(Box)`
   `}
 `;
 export const OfferPackage = styled(Box)`
-  font-family: "DM Sans";
-  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: "DM Sans";
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   ${(props) =>
@@ -196,15 +196,15 @@ export const OfferViews = styled(Box)`
   `}
 `;
 export const OfferDescriptionTitle = styled(Box)`
-  font-family: "DM Sans";
+  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: "DM Sans";
+  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;
@@ -241,8 +241,8 @@ export const DetailIcon = styled(Icon)`
   }
 `;
 export const DetailText = styled(Typography)`
-  font-family: "DM Sans";
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
   position: relative;
@@ -256,7 +256,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) {
@@ -270,7 +270,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;
@@ -381,8 +381,8 @@ export const LikeIcon = styled(Like)`
   & path {
     stroke: ${(props) =>
       props.disabled
-        ? selectedTheme.primaryPurpleDisabled
-        : selectedTheme.primaryPurple};
+        ? selectedTheme.colors.primaryPurpleDisabled
+        : selectedTheme.colors.primaryPurple};
   }
 `;
 export const PinIcon = styled(Pin)`

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

@@ -5,13 +5,13 @@ import { BackgroundTransition } from "../../../MarketPlace/Header/SkeletonHeader
 
 export const SkeletonItemAnimation = keyframes`
   0% {
-    background-color: ${selectedTheme.filterSkeletonItems};
+    background-color: ${selectedTheme.colors.filterSkeletonItems};
   }
   50% {
-    background-color: ${selectedTheme.filterSkeletonItemsSecond};
+    background-color: ${selectedTheme.colors.filterSkeletonItemsSecond};
   }
   100% {
-    background-color: ${selectedTheme.filterSkeletonItems};
+    background-color: ${selectedTheme.colors.filterSkeletonItems};
   }
 `
 
@@ -28,7 +28,7 @@ export const SkeletonOfferCardContainer = styled(BackgroundTransition)`
   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;
@@ -106,30 +106,30 @@ export const SkeletonRowGroup = styled(Box)`
 export const SkeletonDetail = styled(ItemsTransition)`
   width: 72px;
   height: 14px;
-  background-color: ${selectedTheme.filterSkeletonItems};
+  background-color: ${selectedTheme.colors.filterSkeletonItems};
 `;
 export const SkeletonDescription = styled(ItemsTransition)`
   width: 72px;
   height: 14px;
-  background-color: ${selectedTheme.filterSkeletonItems};
+  background-color: ${selectedTheme.colors.filterSkeletonItems};
 `;
 export const SkeletonDescriptionLine = styled(ItemsTransition)`
   width: 221px;
   height: 18px;
-  background-color: ${selectedTheme.filterSkeletonItems};
+  background-color: ${selectedTheme.colors.filterSkeletonItems};
 `;
 export const SkeletonMessageButton = styled(ItemsTransition)`
   width: 40px;
   height: 40px;
   border-radius: 100%;
-  background-color: ${selectedTheme.filterSkeletonItems};
+  background-color: ${selectedTheme.colors.filterSkeletonItems};
   top: 18px;
   right: 18px;
 `;
 export const SkeletonExchangeButton = styled(ItemsTransition)`
   width: 180px;
   height: 48px;
-  background-color: ${selectedTheme.filterSkeletonItems};
+  background-color: ${selectedTheme.colors.filterSkeletonItems};
   bottom: 18px;
   right: 18px;
   position: absolute;
@@ -138,6 +138,6 @@ export const SkeletonExchangeButton = styled(ItemsTransition)`
 export const SkeletonExchangeLine = styled(BackgroundTransition)`
   width: 108px;
   height: 14px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   margin: auto;
 `;

src/components/Cards/UserReviewsCard/ReviewOffer/ReviewOffer.styled.js

@@ -19,13 +19,13 @@ export const ReviewOfferDetails = styled(Box)`
     padding-top: 6px;
 `;
 export const ReviewOfferDescription = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 12px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
 `;
 export const ReviewOfferTitle = styled(Typography)`
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   font-size: 16px;
   font-weight: 600;
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
 `;

src/components/Cards/UserReviewsCard/UserReviewsCard.js

@@ -71,7 +71,7 @@ const UserReviewsCard = (props) => {
             src={getImageUrl(review?.image, variants.reviewCard, isMobile)}
           />
         </ProfileImageContainer>
-        <ProfileName sx={{ color: selectedTheme.primaryPurple }}>
+        <ProfileName sx={{ color: selectedTheme.colors.primaryPurple }}>
           <b>{review?.name}</b>
         </ProfileName>
       </ListItem>

src/components/Cards/UserReviewsCard/UserReviewsCard.styled.js

@@ -28,7 +28,7 @@ export const ReviewsHeader = styled(Grid)`
 `
 
 export const ReviewsTitle = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
   @media (max-width: 800px) {
     display: none;
@@ -41,7 +41,7 @@ export const ReviewList = styled(List)`
     border-radius: 4px 0 0 4px;
     height: 100%;
     width: 100%;
-    border: 1px solid ${selectedTheme.borderNormal};
+    border: 1px solid ${selectedTheme.colors.borderNormal};
 
     /* overflow-y: auto; */
     &::-webkit-scrollbar {
@@ -69,9 +69,9 @@ export const ThumbDown = styled(ThumbDownIcon)`
 export const NoReviewsContainer = styled(Box)`
 `
 export const NoReviewsText = styled(Typography)`
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   font-size: 24px;
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   text-align: center;
   font-weight: 700;
   width: 100%;
@@ -79,8 +79,8 @@ export const NoReviewsText = styled(Typography)`
 `
 export const NoReviewsAltText = styled(Typography)`
   font-size: 12px;
-  color: ${selectedTheme.primaryDarkText};
-  font-family: "DM Sans";
+  color: ${selectedTheme.colors.primaryDarkText};
+  font-family: ${selectedTheme.fonts.textFont};
   text-align: center;
   width: 100%;
   margin-bottom: 36px;
@@ -106,28 +106,28 @@ export const ThumbBox = styled(Grid)`
 export const ReviewQuoteBox = styled(Grid)`
 `
 export const ReviewQuoteText = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 12px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
 `
 export const ReviewDetails = styled(Grid)`
 `
 export const ReviewDetailsText = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 12px;
-  color: ${selectedTheme.primaryDarkText};
+  color: ${selectedTheme.colors.primaryDarkText};
   font-style: italic;
   letter-spacing: 0.02em;
 `
 export const ReviewDetailsValue = styled(Typography)`
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   font-style: normal;
   font-weight: 600;
 `
 export const ProfileName = styled(Typography)`
   font-weight: 600;
   font-size: 16px;
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
 `
 export const ReviewContainer = styled(Box)`
   padding-bottom: 20px;

src/components/ChatColumn/ChatColumn.styled.js

@@ -39,7 +39,7 @@ export const TitleSortContainer = styled(Box)`
 export const HeaderSelect = styled(Select)`
   width: 210px;
   height: 35px;
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   margin-top: 3px;
   font-weight: 400;
   position: relative;
@@ -54,7 +54,7 @@ export const HeaderSelect = styled(Select)`
     font-size: 14px;
     background-color: white;
     & fieldset {
-      border: 1px solid ${selectedTheme.borderNormal} !important;
+      border: 1px solid ${selectedTheme.colors.borderNormal} !important;
     }
   }
 `;

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

src/components/CheckBox/Label.styled.js

@@ -10,14 +10,14 @@ export const LabelContainer = styled(Box)`
 `
 
 export const LeftLabel = styled(FormLabel)`
-    font-family: "DM Sans";
+    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;
@@ -26,7 +26,7 @@ export const RightLabel = styled(FormLabel)`
     white-space: nowrap;
     max-width: 100px;
     cursor: pointer;
-    color: ${selectedTheme.primaryText};
-    font-family: "DM Sans";
+    color: ${selectedTheme.colors.primaryText};
+    font-family: ${selectedTheme.fonts.textFont};
 
 `

src/components/CreateReview/CreateReview.styled.js

@@ -91,8 +91,8 @@ export const ArrowBackIcon = styled(ArrowBack)`
 export const CreateReviewTitle = styled(Typography)`
   width: 100%;
   text-align: center;
-  color: ${selectedTheme.primaryPurple};
-  font-family: "DM Sans";
+  color: ${selectedTheme.colors.primaryPurple};
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 24px;
   font-weight: 700;
   padding-bottom: 36px;

src/components/CreateReview/FirstStep/FirstStepCreateReview.js

@@ -127,7 +127,7 @@ const FirstStepCreateReview = (props) => {
 
       <NextButton
         variant="contained"
-        buttoncolor={selectedTheme.primaryPurple}
+        buttoncolor={selectedTheme.colors.primaryPurple}
         fullWidth
         height="48px"
         type="submit"

src/components/CreateReview/FirstStep/FirstStepCreateReview.styled.js

@@ -16,8 +16,8 @@ export const FirstStepCreateReviewContainer = styled(Box)`
 export const CreateReviewTitle = styled(Typography)`
   width: 100%;
   text-align: center;
-  color: ${selectedTheme.primaryPurple};
-  font-family: "DM Sans";
+  color: ${selectedTheme.colors.primaryPurple};
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 24px;
   font-weight: 700;
   padding-bottom: 36px;
@@ -53,7 +53,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;
     text-align: left;
@@ -70,7 +70,7 @@ export const SelectField = styled(Select)`
   margin-bottom: 18px;
   height: 48px;
   text-align: left;
-  ${props => props.exchange && `background-color: ${selectedTheme.backgroundSponsoredColor};`}
+  ${props => props.exchange && `background-color: ${selectedTheme.colors.backgroundSponsoredColor};`}
   @media (max-width: 600px) {
     height: 33px;
     font-size: 14px;
@@ -78,7 +78,7 @@ export const SelectField = styled(Select)`
   }
 `;
 export const SelectOption = styled(Option)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
   text-align: left;
   @media (max-width: 600px) {
@@ -89,7 +89,7 @@ export const SelectOption = styled(Option)`
 `;
 export const CommentField = styled(TextField)`
   & * {
-    font-family: "DM Sans";
+    font-family: ${selectedTheme.fonts.textFont};
     font-size: 16px;
     &::-webkit-scrollbar {
       width: 5px;

src/components/CreateReview/SecondStep/SecondStepCreateReview.js

@@ -39,7 +39,7 @@ const SecondStepCreateReview = (props) => {
       />
       <NextButton
         variant="contained"
-        buttoncolor={selectedTheme.primaryPurple}
+        buttoncolor={selectedTheme.colors.primaryPurple}
         fullWidth
         height="48px"
         onClick={goToNextStep}

src/components/CreateReview/SecondStep/SecondStepCreateReview.styled.js

@@ -13,7 +13,7 @@ export const ReviewCard = styled(UserReviews)`
     margin-bottom: 36px;
     margin-top: 18px;
     & ul {
-        background-color: ${selectedTheme.chatHeaderColor};
+        background-color: ${selectedTheme.colors.chatHeaderColor};
         padding: 0 14px;
     }
     & ul li {

src/components/CreateReview/ThirdStep/ThirdStepCreateReview.styled.js

@@ -20,16 +20,16 @@ export const LogoImage = styled(Logo)`
 export const MainTitle = styled(Typography)`
   font-weight: 700;
   font-size: 24px;
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   text-align: center;
   width: 100%;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
 `;
 export const AltTitle = styled(Typography)`
   width: 100%;
   text-align: center;
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-weight: 400;
   font-size: 16px;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
 `;

src/components/DirectChat/DirectChatContent/DirectChatContent.styled.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import selectedTheme from "../../../themes";
 
 export const DirectChatContentContainer = styled(Box)`
-  border: 1px solid ${selectedTheme.borderNormal};
+  border: 1px solid ${selectedTheme.colors.borderNormal};
   margin-top: 18px;
   border-radius: 4px;
   min-height: 600px;

src/components/DirectChat/DirectChatContent/DirectChatContentHeader/DirectChatContentHeader.styled.js

@@ -8,7 +8,7 @@ import { IconButton } from "../../../Buttons/IconButton/IconButton";
 
 export const DirectChatContentHeaderContainer = styled(Box)`
     height: 90px;
-    background-color: ${selectedTheme.chatHeaderColor};
+    background-color: ${selectedTheme.colors.chatHeaderColor};
     width: 100%;
     display: flex;
     flex-direction: row;
@@ -33,18 +33,18 @@ export const ProfileDetails = styled(Box)`
 `
 export const ProfileName = styled(Box)`
     font-weight: 600;
-    font-family: "DM Sans";
+    font-family: ${selectedTheme.fonts.textFont};
     font-size: 16px;
-    color: ${selectedTheme.primaryPurple};
+    color: ${selectedTheme.colors.primaryPurple};
 `
 export const ProfileLocation = styled(Box)`
     display: flex;
     flex-direction: row;
 `
 export const ProfileLocationText = styled(Box)`
-    color: ${selectedTheme.primaryDarkText};
+    color: ${selectedTheme.colors.primaryDarkText};
     font-size: 12px;
-    font-family: "DM Sans";
+    font-family: ${selectedTheme.fonts.textFont};
     margin-left: 5.5px;
 
 `
@@ -66,10 +66,10 @@ export const PhoneIconContainer = styled(IconButton)`
     border-radius: 100%;
     transition: .2s all;
     &:hover button:hover {
-        background-color: ${selectedTheme.primaryIconBackgroundColor};
+        background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
     }
     &:hover {
-        background-color: ${selectedTheme.primaryIconBackgroundColor};
+        background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
         cursor: pointer;
     }
 `

src/components/DirectChat/DirectChatContent/SkeletonDirectChatContent/SkeletonDirectChatContent.styled.js

@@ -4,29 +4,29 @@ import selectedTheme from "../../../../themes";
 
 const skeletonAnimation = keyframes`
     0% {
-        background-color: ${selectedTheme.filterSkeletonItems};
+        background-color: ${selectedTheme.colors.filterSkeletonItems};
     }
 
     50% {
-        background-color: ${selectedTheme.filterSkeletonItemsSecond};
+        background-color: ${selectedTheme.colors.filterSkeletonItemsSecond};
     }
 
     100% {
-        background-color: ${selectedTheme.filterSkeletonItems}
+        background-color: ${selectedTheme.colors.filterSkeletonItems}
     }
 `;
 
 const skeletonBackgroundAnimation = keyframes`
     0% {
-        background-color: ${selectedTheme.filterSkeletonBackground};
+        background-color: ${selectedTheme.colors.filterSkeletonBackground};
     }
 
     50% {
-        background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+        background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
     }
 
     100% {
-        background-color: ${selectedTheme.filterSkeletonBackground}
+        background-color: ${selectedTheme.colors.filterSkeletonBackground}
     }
 `;
 
@@ -39,7 +39,7 @@ export const SkeletonChatContentContainer = styled(Box)`
 export const SkeletonChatContentHeader = styled(Box)`
   display: flex;
   padding: 17px 35px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   justify-content: space-between;
   align-items: center;
   animation: ${skeletonBackgroundAnimation} 2s infinite;
@@ -53,7 +53,7 @@ export const SkeletonChatContentHeaderFirstColumnImage = styled(Box)`
   width: 54px;
   height: 54px;
   border-radius: 100%;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonAnimation} 2s infinite;
 `;
 
@@ -66,7 +66,7 @@ export const SkeletonChatContentHeaderFirstColumnInfo = styled(Box)`
 export const SkeletonChatContentHeaderFirstColumnFirstLine = styled(Box)`
   width: 124px;
   height: 18px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   margin-bottom: 15px;
   animation: ${skeletonAnimation} 2s infinite;
 `;
@@ -74,7 +74,7 @@ export const SkeletonChatContentHeaderFirstColumnFirstLine = styled(Box)`
 export const SkeletonChatContentHeaderFirstColumnSecondLine = styled(Box)`
   width: 72px;
   height: 14px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonAnimation} 2s infinite;
 `;
 
@@ -82,13 +82,13 @@ export const SkeletonChatContentHeaderSecondColumnImageSmall = styled(Box)`
   width: 40px;
   height: 40px;
   border-radius: 100%;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonAnimation} 2s infinite;
 `;
 
 export const SkeletonChatContentMain = styled(Box)`
   padding: 27px 36px 18px 36px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonAnimation} 2s infinite;
 `;
 
@@ -105,14 +105,14 @@ export const SkeletonChatContentMainImage = styled(Box)`
   width: 54px;
   height: 54px;
   border-radius: 100%;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
 `;
 
 export const SkeletonChatContentMainLeftRowInfo = styled(Box)`
   display: flex;
   flex-direction: column;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   padding: 9px;
   align-items: flex-end;
   margin-left: 18px;
@@ -124,7 +124,7 @@ export const SkeletonChatContentMainLeftRowInfo = styled(Box)`
 export const SkeletonChatContentMainFirstRowInfoFirstLine = styled(Box)`
   width: 715px;
   height: 18px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   margin-bottom: 15px;
   animation: ${skeletonAnimation} 2s infinite;
 
@@ -140,14 +140,14 @@ export const SkeletonChatContentMainFirstRowInfoFirstLine = styled(Box)`
 export const SkeletonChatContentMainFirstRowInfoSecondLine = styled(Box)`
   width: 72px;
   height: 14px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonAnimation} 2s infinite;
 `;
 
 export const SkeletonChatContentMainRightRowInfo = styled(Box)`
   display: flex;
   flex-direction: column;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
   padding: 9px;
   align-items: flex-start;
@@ -160,7 +160,7 @@ export const SkeletonChatContentSecondRowFirstLine = styled(Box)`
   width: 354px;
   height: 18px;
   margin-bottom: 15px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonAnimation} 2s infinite;
 
   @media (max-width: 600px) {
@@ -171,14 +171,14 @@ export const SkeletonChatContentSecondRowFirstLine = styled(Box)`
 export const SkeletonChatContentSecondRowSecondLine = styled(Box)`
   width: 72px;
   height: 14px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonAnimation} 2s infinite;
 `;
 
 export const SkeletonChatContentThirdRowFirstLine = styled(Box)`
   width: 394px;
   height: 18px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonAnimation} 2s infinite;
   margin-bottom: 15px;
 
@@ -190,14 +190,14 @@ export const SkeletonChatContentThirdRowFirstLine = styled(Box)`
 export const SkeletonChatContentThirdRowSecondLine = styled(Box)`
   width: 93px;
   height: 14px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonAnimation} 2s infinite;
 `;
 
 export const SkeletonChatContentFourthRowFirstLine = styled(Box)`
   width: 101px;
   height: 18px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonAnimation} 2s infinite;
   margin-bottom: 15px;
 `;
@@ -205,14 +205,14 @@ export const SkeletonChatContentFourthRowFirstLine = styled(Box)`
 export const SkeletonChatContentFourthRowSecondLine = styled(Box)`
   width: 72px;
   height: 14px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonAnimation} 2s infinite;
 `;
 
 export const SkeletonChatContentFifthRowFirstLine = styled(Box)`
   width: 131px;
   height: 18px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonAnimation} 2s infinite;
   margin-bottom: 15px;
 `;
@@ -220,14 +220,14 @@ export const SkeletonChatContentFifthRowFirstLine = styled(Box)`
 export const SkeletonChatContentFifthRowSecondLine = styled(Box)`
   width: 87px;
   height: 14px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonAnimation} 2s infinite;
 `;
 
 export const SkeletonChatContentHorizontalLine = styled(Box)`
   width: 100%;
   height: 1px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
   margin: 9px 0 18px 0;
 `;
@@ -235,7 +235,7 @@ export const SkeletonChatContentHorizontalLine = styled(Box)`
 export const SkeletonChatContentVerticalLine = styled(Box)`
   width: 5px;
   height: 180px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
   position: absolute;
   top: 490px;
@@ -249,7 +249,7 @@ export const SkeletonChatContentFooter = styled(Box)`
 export const SkeletonChatContentFooterFirstColumn = styled(Box)`
   flex: 1;
   padding: 17px 16px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
   margin-right: 36px;
 `;
@@ -257,7 +257,7 @@ export const SkeletonChatContentFooterFirstColumn = styled(Box)`
 export const SkeletonChatContentFooterColumnInside = styled(Box)`
   width: 108px;
   height: 14px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonAnimation} 2s infinite;
 
   @media (max-width: 600px) {
@@ -267,6 +267,6 @@ export const SkeletonChatContentFooterColumnInside = styled(Box)`
 
 export const SkeletonChatContentFooterSecondColumn = styled(Box)`
   padding: 17px 36px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
 `;

src/components/DirectChat/DirectChatHeaderTitle/DirectChatHeaderTitle.styled.js

@@ -1,6 +1,7 @@
 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
 import {ReactComponent as Message} from "../../../assets/images/svg/message.svg";
+import selectedTheme from "../../../themes";
 
 export const DirectChatHeaderTitleContainer = styled(Box)`
 
@@ -9,7 +10,7 @@ export const MessageIcon = styled(Message)`
 
 `
 export const HeaderTitleContent = styled(Typography)`
-    font-family: "DM Sans";
+    font-family: ${selectedTheme.fonts.textFont};
     font-size: 16px;
     position: relative;
     left: 9px;

src/components/DirectChat/DirectChatNewMessage/DirectChatNewMessage.js

@@ -97,7 +97,7 @@ const DirectChatNewMessage = (props) => {
       />
       <SendButton
         onClick={handleSend}
-        buttoncolor={selectedTheme.primaryPurple}
+        buttoncolor={selectedTheme.colors.primaryPurple}
         variant="contained"
       >
         {t("messages.send")}

src/components/DirectChat/DirectChatNewMessage/DirectChatNewMessage.styled.js

@@ -5,7 +5,7 @@ import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
 import { TextField } from "../../TextFields/TextField/TextField";
 
 export const DirectChatNewMessageContainer = styled(Box)`
-  border-top: 1px solid ${selectedTheme.messageBackground};
+  border-top: 1px solid ${selectedTheme.colors.messageBackground};
   height: 82px;
   position: absolute;
   bottom: 0;

src/components/DirectChat/MiniChatColumn/MiniChatColumnHeader/MiniChatColumnHeaderTitle.styled.js

@@ -13,11 +13,11 @@ export const MailIcon = styled(Mail)`
     position: relative;
     top: -1px;
     & path {
-        stroke: ${selectedTheme.primaryDarkTextThird};
+        stroke: ${selectedTheme.colors.primaryDarkTextThird};
     }
 `
 export const HeaderTitleContent = styled(Typography)`
-    font-family: "DM Sans";
+    font-family: ${selectedTheme.fonts.textFont};
     font-size: 16px;
     position: relative;
     left: 9px;

src/components/DirectChat/MiniChatColumn/SkeletonMiniChatColumn/SkeletonMiniChatColumn.styled.js

@@ -4,29 +4,29 @@ import selectedTheme from "../../../../themes";
 
 const skeletonAnimation = keyframes`
     0% {
-        background-color: ${selectedTheme.filterSkeletonItems};
+        background-color: ${selectedTheme.colors.filterSkeletonItems};
     }
 
     50% {
-        background-color: ${selectedTheme.filterSkeletonItemsSecond};
+        background-color: ${selectedTheme.colors.filterSkeletonItemsSecond};
     }
 
     100% {
-        background-color: ${selectedTheme.filterSkeletonItems}
+        background-color: ${selectedTheme.colors.filterSkeletonItems}
     }
 `;
 
 const skeletonBackgroundAnimation = keyframes`
     0% {
-        background-color: ${selectedTheme.filterSkeletonBackground};
+        background-color: ${selectedTheme.colors.filterSkeletonBackground};
     }
 
     50% {
-        background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+        background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
     }
 
     100% {
-        background-color: ${selectedTheme.filterSkeletonBackground}
+        background-color: ${selectedTheme.colors.filterSkeletonBackground}
     }
 `;
 
@@ -43,13 +43,13 @@ export const SkeletonMiniChatColumnHeading = styled(Box)`
   width: 90px;
   height: 18px;
   margin-bottom: 18px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
 `;
 
 export const SkeletonMiniChatColumnItem = styled(Box)`
   display: flex;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   padding: 18px;
   margin-bottom: 18px;
   animation: ${skeletonBackgroundAnimation} 2s infinite;
@@ -59,7 +59,7 @@ export const SkeletonMiniChatItemImage = styled(Box)`
   width: 72px;
   height: 72px;
   border-radius: 100%;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
 `;
 
@@ -72,7 +72,7 @@ export const SkeletonMiniChatItemInfo = styled(Box)`
 export const SkeletonMiniChatItemInfoFirstLine = styled(Box)`
   width: 117px;
   height: 18px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   margin-bottom: 9px;
   animation: ${skeletonAnimation} 2s infinite;
 `;
@@ -80,7 +80,7 @@ export const SkeletonMiniChatItemInfoFirstLine = styled(Box)`
 export const SkeletonMiniChatItemInfoSecondLine = styled(Box)`
   width: 90px;
   height: 9px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   margin-bottom: 4px;
   animation: ${skeletonAnimation} 2s infinite;
 `;
@@ -88,6 +88,6 @@ export const SkeletonMiniChatItemInfoSecondLine = styled(Box)`
 export const SkeletonMiniChatItemInfoThirdLine = styled(Box)`
   width: 90px;
   height: 18px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
 `;

src/components/DirectChat/SkeletonDirectChat/SkeletonDirectChat.styled.js

@@ -4,44 +4,44 @@ import selectedTheme from "../../../themes";
 
 const skeletonAnimation = keyframes`
     0% {
-        background-color: ${selectedTheme.filterSkeletonItems};
+        background-color: ${selectedTheme.colors.filterSkeletonItems};
     }
 
     50% {
-        background-color: ${selectedTheme.filterSkeletonItemsSecond};
+        background-color: ${selectedTheme.colors.filterSkeletonItemsSecond};
     }
 
     100% {
-        background-color: ${selectedTheme.filterSkeletonItems}
+        background-color: ${selectedTheme.colors.filterSkeletonItems}
     }
 `;
 
 const skeletonBackgroundAnimation = keyframes`
     0% {
-        background-color: ${selectedTheme.filterSkeletonBackground};
+        background-color: ${selectedTheme.colors.filterSkeletonBackground};
     }
 
     50% {
-        background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+        background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
     }
 
     100% {
-        background-color: ${selectedTheme.filterSkeletonBackground}
+        background-color: ${selectedTheme.colors.filterSkeletonBackground}
     }
 `;
 
 export const SkeletonDirectChatHeading = styled(Box)`
   width: 90px;
   height: 18px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonAnimation} 2s infinite;
   margin-bottom: 18px;
 `;
 
 export const SkeletonDirectChatContainer = styled(Box)`
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   display: flex;
-  border: 1px solid ${selectedTheme.filterSkeletonBackgroundSecond};
+  border: 1px solid ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   padding: 18px;
   justify-content: space-between;
   animation: ${skeletonAnimation} 2s infinite;
@@ -50,7 +50,7 @@ export const SkeletonDirectChatContainer = styled(Box)`
 export const SkeletonDirectChatImage = styled(Box)`
   width: 144px;
   height: 144px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
 
   @media (max-width: 600px) {
@@ -74,7 +74,7 @@ export const SkeletonDirectChatFirstColumn = styled(Box)`
 export const SkeletonDirectChatFirstLine = styled(Box)`
   width: 90px;
   height: 27px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
   margin-bottom: 28px;
 `;
@@ -82,7 +82,7 @@ export const SkeletonDirectChatFirstLine = styled(Box)`
 export const SkeletonDirectChatSecondLine = styled(Box)`
   width: 117px;
   height: 18px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
   margin-bottom: 4px;
 `;
@@ -90,7 +90,7 @@ export const SkeletonDirectChatSecondLine = styled(Box)`
 export const SkeletonDirectChatThirdLine = styled(Box)`
   width: 90px;
   height: 18px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
   margin-bottom: 35px;
 `;
@@ -102,7 +102,7 @@ export const SkeletonDirectChatFourthLineContainer = styled(Box)`
 export const SkeletonDirectChatFourthLine = styled(Box)`
   width: 72px;
   height: 14px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
   margin-right: 27px;
 
@@ -137,7 +137,7 @@ export const SkeletonDirectChatSecondColumn = styled(Box)`
 export const SkeletonDirectChatSecondColumnFirstLine = styled(Box)`
   width: 72px;
   height: 14px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
   margin-top: 18px;
   margin-bottom: 4px;
@@ -146,7 +146,7 @@ export const SkeletonDirectChatSecondColumnFirstLine = styled(Box)`
 export const SkeletonDirectChatSecondColumnSecondLine = styled(Box)`
   width: 221px;
   height: 18px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
   margin-bottom: 4px;
 `;
@@ -163,14 +163,14 @@ export const SkeletonDirectChatRoundImage = styled(Box)`
   width: 40px;
   height: 40px;
   border-radius: 100%;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
 `;
 
 export const SkeletonDirectChatThirdColumnSecondLine = styled(Box)`
   width: 180px;
   height: 48px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
   padding: 17px 36px;
 `;
@@ -178,6 +178,6 @@ export const SkeletonDirectChatThirdColumnSecondLine = styled(Box)`
 export const SkeletonDirectChatThirdColumnSecondLineInside = styled(Box)`
   width: 108px;
   height: 14px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonAnimation} 2s infinite;
 `;

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

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

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

@@ -19,13 +19,13 @@ export const DropdownTitle = styled(Typography)`
   padding-bottom: 10px;
   padding-top: 5px;
   padding-right: 0.9rem;
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   color: ${(props) =>
     props.disabled
-      ? selectedTheme.iconStrokeDisabledColor
+      ? selectedTheme.colors.iconStrokeDisabledColor
       : props.textcolor
       ? props.textcolor
-      : selectedTheme.primaryText};
+      : selectedTheme.coloros.primaryText};
   @media (max-width: 600px) {
     font-size: 14px;
   }
@@ -33,7 +33,7 @@ export const DropdownTitle = styled(Typography)`
 
 export const ToggleIconOpened = styled(IconButton)`
   cursor: pointer;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   & span {
     ${(props) =>
       props.backgroundColor ? `background-color: ${props.backgroundColor}` : ``}
@@ -42,11 +42,11 @@ export const ToggleIconOpened = styled(IconButton)`
 
 export const ToggleIconClosed = styled(IconButton)`
   cursor: pointer;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   &:hover button {
     ${(props) =>
       props.disabled &&
-      `background-color: ${selectedTheme.primaryIconBackgroundColor}`}
+      `background-color: ${selectedTheme.colors.primaryIconBackgroundColor}`}
   }
   & span {
     ${(props) =>
@@ -58,7 +58,7 @@ export const ToggleIconClosed = styled(IconButton)`
     ${(props) =>
       props.disabled &&
       `
-      stroke: ${selectedTheme.iconStrokeDisabledColor};
+      stroke: ${selectedTheme.colors.iconStrokeDisabledColor};
     `}
   }
 `;
@@ -72,7 +72,7 @@ export const DropdownIcon = styled(IconButton)`
       ${(props) =>
         props.disabled &&
         `
-        stroke: ${selectedTheme.iconStrokeDisabledColor};
+        stroke: ${selectedTheme.colors.iconStrokeDisabledColor};
         `}
     }
   }

src/components/Footer/AboutFooter.styled.js

@@ -11,11 +11,11 @@ export const AboutFooterContainer = styled(Box)`
   padding: 0 72px;
 `;
 export const AboutFooterText = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-weight: 400;
   font-size: 16px;
   line-height: 22px;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   width: 100%;
   text-align: center;
   position: relative;
@@ -29,17 +29,17 @@ export const ButtonContainer = styled(Link)`
   justify-content: flex-end;
   gap: 12px;
   text-decoration: none;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   width: 100%;
   text-align: right;
   position: relative;
   top: 29px;
 `;
 export const LinkText = styled(Typography)`
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   line-height: 22px;
   font-size: 16px;
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   position: relative;
   top: 8px;
 `;

src/components/Header/AboutHeader/AboutHeader.styled.js

@@ -1,5 +1,6 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
+import selectedTheme from "../../../themes";
 import Link from "../../Link/Link";
 
 export const AboutHeaderContainer = styled(Box)`
@@ -13,7 +14,7 @@ export const AboutHeaderContainer = styled(Box)`
 `;
 export const LinkRoute = styled(Link)`
   text-decoration: none;
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-weight: ${props => props.selected ? "600" : "400"};
   font-size: 16px;
   line-height: 22px;

src/components/Header/Drawer/Buttons/AboutButton/AboutButton.styled.js

@@ -11,6 +11,6 @@ export const AboutIcon = styled(About)`
   }
 `;
 export const GrayDrawerOption = styled(DrawerOption)`
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   letter-spacing: 0.05em;
 `;

src/components/Header/Drawer/Buttons/AddOfferButton/AddOfferButton.js

@@ -14,7 +14,7 @@ const AddOfferButton = (props) => {
     <AddOfferButtonContainer
       type="submit"
       variant="contained"
-      buttoncolor={selectedTheme.primaryYellow}
+      buttoncolor={selectedTheme.colors.primaryYellow}
       textcolor="black"
       onClick={handleClick}
     >

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

@@ -19,6 +19,6 @@ export const LoginIcon = styled(Login)`
   height: 24px;
   margin-right: 9px;
   & path {
-    stroke: ${selectedTheme.primaryYellow};
+    stroke: ${selectedTheme.colors.primaryYellow};
   }
 `;

src/components/Header/Drawer/Buttons/LogoutButton/LogoutButton.styled.js

@@ -10,14 +10,14 @@ export const LogoutIcon = styled(Logout)`
   width: 20px;
   height: 20px;
   & path {
-    stroke: ${selectedTheme.primaryPurple};
+    stroke: ${selectedTheme.colors.primaryPurple};
   }
 `
 export const LogoutText = styled(Typography)`
   font-weight: 600;
   font-size: 14px;
-  color: ${selectedTheme.primaryPurple};
-  font-family: "DM Sans";
+  color: ${selectedTheme.colors.primaryPurple};
+  font-family: ${selectedTheme.fonts.textFont};
   position: relative;
   left: -14px;
   top: -3px;

src/components/Header/Drawer/Buttons/MyMessagesButton/MyMessagesButton.styled.js

@@ -6,6 +6,6 @@ export const MailIcon = styled(Mail)`
   height: 24px;
   margin-right: 9px;
   & path {
-    stroke: ${selectedTheme.primaryYellow};
+    stroke: ${selectedTheme.colors.primaryYellow};
   }
 `;

src/components/Header/Drawer/Buttons/MyPostsButton/MyPostsButton.styled.js

@@ -7,6 +7,6 @@ export const PackageIcon = styled(Package)`
   height: 24px;
   margin-right: 9px;
   & path {
-    stroke: ${selectedTheme.primaryYellow};
+    stroke: ${selectedTheme.colors.primaryYellow};
   }
 `;

src/components/Header/Drawer/Buttons/MyProfileButton/MyProfileButton.styled.js

@@ -5,8 +5,8 @@ import selectedTheme from "../../../../../themes";
 
 export const MyUsername = styled(Typography)`
   font-size: 12px;
-  font-family: "DM Sans";
-  color: ${selectedTheme.primaryPurple};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryPurple};
   position: relative;
   top: 12px;
   left: 4px;
@@ -17,6 +17,6 @@ export const UserIcon = styled(User)`
   height: 24px;
   margin-right: 9px;
   & path {
-    stroke: ${selectedTheme.primaryYellow};
+    stroke: ${selectedTheme.colors.primaryYellow};
   }
 `

src/components/Header/Drawer/Buttons/PricesButton/PricesButton.styled.js

@@ -8,6 +8,6 @@ export const PricesIcon = styled(Prices)`
   margin-right: 9px;
   & path {
     stroke-width: 0;
-    stroke: ${selectedTheme.primaryYellow};
+    stroke: ${selectedTheme.colors.primaryYellow};
   }
 `;

src/components/Header/Drawer/Buttons/PrivacyPolicyButton/PrivacyPolicyButton.styled.js

@@ -4,7 +4,7 @@ import { DrawerOption } from "../../Drawer.styled";
 import { ReactComponent as BuildingShield } from "../../../../../assets/images/svg/building-shield.svg";
 
 export const GrayDrawerOption = styled(DrawerOption)`
-  color: ${selectedTheme.primaryGrayText};
+  color: ${selectedTheme.colors.primaryGrayText};
   letter-spacing: 0.05em;
 `;
 export const PrivacyPolicyIcon = styled(BuildingShield)`

src/components/Header/Drawer/Buttons/RegisterButton/RegisterButton.styled.js

@@ -19,6 +19,6 @@ export const RegisterIcon = styled(Register)`
   height: 24px;
   margin-right: 9px;
   & path {
-    stroke: ${selectedTheme.primaryYellow};
+    stroke: ${selectedTheme.colors.primaryYellow};
   }
 `;

src/components/Header/Drawer/Drawer.styled.js

@@ -38,15 +38,15 @@ export const CloseButton = styled(IconButton)`
   z-index: 1000;
 `;
 export const CloseIcon = styled(Close)`
-  color: ${selectedTheme.primaryYellow};
+  color: ${selectedTheme.colors.primaryYellow};
   width: 16px;
   height: 16px;
 `;
 export const DrawerOption = styled(Typography)`
   font-weight: 600;
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   letter-spacing: 0.05em;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   font-size: 18px;
   position: relative;
   top: 4px;
@@ -67,15 +67,15 @@ export const FooterButtons = styled(Box)`
 
 export const HeaderTitle = styled(Typography)`
   font-weight: 700;
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-size: 18px;
-  color: ${selectedTheme.primaryDarkTextThird};
+  color: ${selectedTheme.colors.primaryDarkTextThird};
   position: absolute;
   top: 36px;
   left: 36px;
 `;
 export const Separator = styled(Box)`
-  border-bottom: 1px solid ${selectedTheme.primaryPurpleDisabled};
+  border-bottom: 1px solid ${selectedTheme.colors.primaryPurpleDisabled};
   opacity: 0.12;
   width: 100%;
 `;

src/components/Header/Header.js

@@ -282,8 +282,8 @@ const Header = () => {
                           type="submit"
                           variant="contained"
                           fullWidth
-                          buttoncolor={selectedTheme.primaryYellow}
-                          textcolor={selectedTheme.yellowButtonTextColor}
+                          buttoncolor={selectedTheme.colors.primaryYellow}
+                          textcolor={selectedTheme.colors.yellowButtonTextColor}
                           onClick={() => {
                             setUserPopoverOpen(false);
                             setUserAnchorEl(null);
@@ -299,8 +299,8 @@ const Header = () => {
                           }}
                           style={{
                             background:
-                              selectedTheme.primaryIconBackgroundColor,
-                            color: selectedTheme.primaryPurple,
+                              selectedTheme.colors.primaryIconBackgroundColor,
+                            color: selectedTheme.colors.primaryPurple,
                           }}
                         >
                           <SwapsIcon />
@@ -312,8 +312,8 @@ const Header = () => {
                           }}
                           style={{
                             background:
-                              selectedTheme.primaryIconBackgroundColor,
-                            color: selectedTheme.primaryPurple,
+                              selectedTheme.colors.primaryIconBackgroundColor,
+                            color: selectedTheme.colors.primaryPurple,
                           }}
                         >
                           <Badge color="primary">
@@ -331,8 +331,8 @@ const Header = () => {
                       <UserName>{name}</UserName>
                       <IconButton
                         style={{
-                          background: selectedTheme.primaryIconBackgroundColor,
-                          color: selectedTheme.primaryPurple,
+                          background: selectedTheme.colors.primaryIconBackgroundColor,
+                          color: selectedTheme.colors.primaryPurple,
                         }}
                       >
                         <AccountCircle />
@@ -355,7 +355,7 @@ const Header = () => {
                       type="submit"
                       variant="contained"
                       fullWidth
-                      buttoncolor={selectedTheme.primaryPurple}
+                      buttoncolor={selectedTheme.colors.primaryPurple}
                       textcolor="white"
                       onClick={handleNavigateLogin}
                     >
@@ -365,8 +365,8 @@ const Header = () => {
                       type="submit"
                       variant="contained"
                       fullWidth
-                      buttoncolor={selectedTheme.primaryYellow}
-                      textcolor={selectedTheme.yellowButtonTextColor}
+                      buttoncolor={selectedTheme.colors.primaryYellow}
+                      textcolor={selectedTheme.colors.yellowButtonTextColor}
                       onClick={handleNavigateRegister}
                     >
                       {t("register.headerTitle")}

src/components/Header/Header.styled.js

@@ -8,12 +8,12 @@ import selectedTheme from "../../themes";
 import { Icon } from "../Icon/Icon";
 
 export const SearchInput = styled(TextField)`
-  background-color: ${selectedTheme.primaryBackgroundColor};
+  background-color: ${selectedTheme.colors.primaryBackgroundColor};
   width: 45%;
   flex: 3;
   max-width: 520px;
   margin-right: 30px;
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   @media (max-width: 1700px) {
     margin-left: 15%;
   }
@@ -94,7 +94,7 @@ export const SearchIcon = styled(Search)`
   top: 11px;
   left: 4px;
   cursor: pointer;
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   & path {
     width: 18px;
     height: 18px;
@@ -111,10 +111,10 @@ export const UserButton = styled(Box)`
   cursor: pointer;
 `;
 export const UserName = styled(Typography)`
-  color: ${selectedTheme.primaryPurple};
+  color: ${selectedTheme.colors.primaryPurple};
   padding-top: 5px;
   padding-right: 10px;
-  font-family: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   font-weight: 600;
   white-space: nowrap;
 `;
@@ -184,7 +184,7 @@ export const SearchInputMobile = styled(SearchInput)`
     top: 70px;
     height: 46px;
     left: -5px;
-    font-family: "DM Sans";
+    font-family: ${selectedTheme.fonts.textFont};
     ${(props) => !props.shouldShow && `display: none;`}
     & div {
       background-color: white;

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

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

src/components/ImagePicker/ImagePicker.js

@@ -78,6 +78,7 @@ const ImagePicker = (props) => {
       onClick={!image ? handleChange : () => {}}
       hasImage={props.image}
       component="form"
+      singleImage={props.singleImage}
     >
       <AddFile
         type="file"
@@ -119,5 +120,6 @@ ImagePicker.propTypes = {
   image: PropTypes.func,
   deleteImage: PropTypes.func,
   showDeleteIcon: PropTypes.bool,
+  singleImage: PropTypes.bool,
 };
 export default ImagePicker;

src/components/ImagePicker/ImagePicker.styled.js

@@ -17,23 +17,23 @@ export const ImagePickerContainer = styled(Box)`
   position: relative;
   cursor: pointer;
   overflow: hidden;
-  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;
@@ -49,8 +49,9 @@ export const ImagePickerContainer = styled(Box)`
     props.hasImage &&
     `
     background-image: none;
-    border: 1px solid ${selectedTheme.primaryPurple};
+    border: 1px solid ${selectedTheme.colors.primaryPurple};
   `}
+  ${props => props.singleImage && `margin: 0;`}
 `;
 export const AddIcon = styled(Plus)`
   margin: auto;
@@ -109,7 +110,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

@@ -6,18 +6,19 @@ export const HeaderContainer = styled(Box)`
   margin-top: 20px;
 `;
 export const ButtonContainer = styled(Link)`
-  width: fit-content;
-  cursor: pointer;
-  display: flex;
-  justify-content: start;
-  align-items: center;
-  gap: 12px;
-  text-decoration: none;
-`;
-export const HeaderText = styled(Typography)`
-  font-family: "DM Sans";
-  line-height: 22px;
-  font-size: 16px;
-  color: ${selectedTheme.primaryPurple};
-  border-bottom: 1px dotted ${selectedTheme.primaryPurple};
-`;
+    width:fit-content;
+    cursor:pointer;
+    display: flex;
+    justify-content: start;
+    align-items:center;
+    gap:12px;
+    text-decoration: none;
+`
+export const HeaderText = styled(Typography) `
+    font-family: ${selectedTheme.fonts.textFont};
+    line-height: 22px;
+    font-size: 16px;
+    color: ${selectedTheme.colors.primaryPurple};
+    text-decoration: none;
+    border-bottom: 1px dotted ${selectedTheme.colors.primaryPurple};
+`

src/components/ItemDetails/ItemDetails.styled.js

@@ -24,8 +24,8 @@ export const OfferIconContainer = styled(Box)`
 `;
 
 export const OfferIconText = styled(Typography)`
-  font-family: "DM Sans";
-  color: ${selectedTheme.primaryDarkTextThird};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryDarkTextThird};
   font-size: 16px;
   margin-left: 7.2px;
 

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

@@ -12,9 +12,9 @@ export const ItemDetailsHeaderContainer = styled(Box)`
   box-sizing: border-box;
   margin: 10px 0;
   background-color: ${(props) =>
-    props.isMyProfile ? selectedTheme.primaryPurple : "white"};
+    props.isMyProfile ? selectedTheme.colors.primaryPurple : "white"};
   border-radius: 4px;
-  border: 1px solid ${selectedTheme.primaryPurple};
+  border: 1px solid ${selectedTheme.colors.primaryPurple};
   max-width: 2000px;
   position: relative;
 
@@ -45,12 +45,12 @@ export const OfferInfo = styled(Box)`
   margin-left: 18px;
 `;
 export const OfferTitle = styled(Typography)`
-  margin-bottom: 12px;
-  font-family: "DM Sans";
+  margin-bottom:12px;
+  font-family: ${selectedTheme.fonts.textFont};
   color: ${(props) =>
     props.isMyProfile
-      ? selectedTheme.primaryYellow
-      : selectedTheme.primaryPurple};
+      ? selectedTheme.colors.primaryYellow
+      : selectedTheme.colors.primaryPurple};
   font-weight: 700;
   font-size: 24px;
   cursor: pointer;
@@ -64,23 +64,23 @@ export const OfferAuthor = styled(Box)`
   flex-direction: column;
 `;
 export const OfferAuthorName = styled(Typography)`
-  font-family: "DM Sans";
+  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: "DM Sans";
-  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: "DM Sans";
+  font-family: ${selectedTheme.fonts.textFont};
   color: ${(props) =>
     props.isMyProfile
-      ? selectedTheme.primaryDarkTextThird
-      : selectedTheme.primaryText};
+      ? selectedTheme.colors.primaryDarkTextThird
+      : selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 12px;
 `;
@@ -92,36 +92,36 @@ export const OfferDetails = styled(Box)`
 `;
 
 export const OfferCategory = styled(Box)`
-  font-family: "DM Sans";
-  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: "DM Sans";
-  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: "DM Sans";
-  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: "DM Sans";
+  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: "DM Sans";
+  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;
@@ -149,7 +149,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;
   }
 `;
@@ -159,7 +159,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;
@@ -176,6 +176,6 @@ export const MessageIcon = styled(IconButton)`
   }
 `;
 export const UserIconContainer = styled(MessageIcon)`
-  background-color: ${selectedTheme.primaryIconBackgroundColor};
+  background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
 `;
 export const UserIcon = styled(User)``;

src/components/ItemDetails/ItemDetailsHeaderCard/OfferDetail/Category/CategoryDetail.js

@@ -12,7 +12,7 @@ const CategoryDetail = (props) => {
   const offer = props.offer;
   return (
     <DetailContainer shouldHideResponsive>
-      <DetailIcon color={selectedTheme.iconStrokeColor} size="22px">
+      <DetailIcon color={selectedTheme.colors.iconStrokeColor} size="22px">
         <LocationIcon />
       </DetailIcon>
       <DetailText ismyprofile={props.isMyProfile}>

src/components/ItemDetails/ItemDetailsHeaderCard/OfferDetail/Category/CategoryDetail.styled.js

@@ -10,8 +10,8 @@ export const DetailContainer = styled(Box)`
   flex-direction: row;
   align-items: center;
   gap: 7px;
-  font-family: "DM Sans";
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   margin-bottom: 7px;
   font-size: 12px;
@@ -28,8 +28,8 @@ export const DetailIcon = styled(Icon)`
   }
 `;
 export const DetailText = styled(Typography)`
-  font-family: "DM Sans";
-  color: ${props => props.ismyprofile ? "white" : selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${props => props.ismyprofile ? "white" : selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 16px;
   position: relative;

src/components/ItemDetails/ItemDetailsHeaderCard/OfferDetail/PIB/PIBDetail.js

@@ -11,7 +11,7 @@ const PIBDetail = (props) => {
   const offer = props.offer;
   return (
     <DetailContainer>
-      <PIBIcon color={selectedTheme.iconStrokeColor} component="span">
+      <PIBIcon color={selectedTheme.colors.iconStrokeColor} component="span">
         <PIB />
       </PIBIcon>
       <DetailText isMyProfile={props.isMyProfile}>

src/components/ItemDetails/ItemDetailsHeaderCard/OfferDetail/PIB/PIBDetail.styled.js

@@ -8,8 +8,8 @@ export const DetailContainer = styled(Box)`
   flex-direction: row;
   align-items: center;
   gap: 7px;
-  font-family: "DM Sans";
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   line-height: 16px;
   margin-bottom: 7px;
   font-size: 12px;
@@ -26,8 +26,8 @@ export const DetailIcon = styled(Icon)`
   }
 `;
 export const DetailText = styled(Typography)`
-  font-family: "DM Sans";
-  color: ${props => props.isMyProfile ? "white" : selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${props => props.isMyProfile ? "white" : selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 16px;
   position: relative;

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

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import selectedTheme from "../../../../themes";
 
 export const HeaderDetails = styled(Box)`
-  background-color: ${selectedTheme.primaryIconBackgroundColor};
+  background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
 `;
 export const BottomDetails = styled(Box)`
   max-width: fit-content;
@@ -19,8 +19,8 @@ export const BottomDetails = styled(Box)`
   }
 `;
 export const StatusText = styled(Grid)`
-  font-family: "DM Sans";
-  color: ${selectedTheme.primaryText};
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
   @media (max-width: 600px) {
     font-size: 12px;
   }

src/components/ItemDetails/SkeletonItemDetails/SkeletonItemDetails.styled.js

@@ -4,29 +4,29 @@ import selectedTheme from "../../../themes";
 
 const skeletonAnimation = keyframes`
     0% {
-        background-color: ${selectedTheme.filterSkeletonItems};
+        background-color: ${selectedTheme.colors.filterSkeletonItems};
     }
 
     50% {
-        background-color: ${selectedTheme.filterSkeletonItemsSecond};
+        background-color: ${selectedTheme.colors.filterSkeletonItemsSecond};
     }
 
     100% {
-        background-color: ${selectedTheme.filterSkeletonItems}
+        background-color: ${selectedTheme.colors.filterSkeletonItems}
     }
 `;
 
 const skeletonBackgroundAnimation = keyframes`
     0% {
-        background-color: ${selectedTheme.filterSkeletonBackground};
+        background-color: ${selectedTheme.colors.filterSkeletonBackground};
     }
 
     50% {
-        background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+        background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
     }
 
     100% {
-        background-color: ${selectedTheme.filterSkeletonBackground}
+        background-color: ${selectedTheme.colors.filterSkeletonBackground}
     }
 `;
 
@@ -51,7 +51,7 @@ export const SkeletonItemDetailsHeader = styled(Box)`
   height: 18px;
   margin-top: 34px;
   margin-bottom: 18px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
 `;
 
@@ -59,8 +59,8 @@ export const SkeletonItemDetailsContent = styled(Box)`
   padding: 18px;
   display: flex;
   flex-direction: column;
-  border: 1px solid ${selectedTheme.filterSkeletonBackgroundSecond};
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  border: 1px solid ${selectedTheme.colors.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonBackgroundAnimation} 2s infinite;
 `;
 
@@ -79,7 +79,7 @@ export const SkeletonItemDetailsLineSmall = styled(Box)`
   width: 72px;
   height: 14px;
   border-radius: 2px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
 `;
 
@@ -87,7 +87,7 @@ export const SkeletonItemDetailsLineBig = styled(Box)`
   width: 108px;
   height: 14px;
   border-radius: 2px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
 `;
 
@@ -106,7 +106,7 @@ export const SkeletonItemDetailsArrow = styled(Box)`
   width: 36px;
   height: 36px;
   border-radius: 100%;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
 `;
 
@@ -120,7 +120,7 @@ export const SkeletonItemDetailsImage = styled(Box)`
   min-height: 144px;
   border-radius: 4px;
   margin-bottom: 18px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
 `;
 
@@ -128,7 +128,7 @@ export const SkeletonItemDetailsImageHalf = styled(Box)`
   width: 144px;
   height: 83px;
   border-radius: 4px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
 `;
 
@@ -152,7 +152,7 @@ export const SkeletonItemDetailsMainFirstLine = styled(Box)`
   height: 27px;
   border-radius: 2px;
   margin-bottom: 15px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
 `;
 
@@ -161,7 +161,7 @@ export const SkeletonItemDetailsMainSecondLine = styled(Box)`
   height: 18px;
   border-radius: 2px;
   margin-bottom: 4px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
 
   @media (max-width: 1200px) {
@@ -174,7 +174,7 @@ export const SkeletonItemDetailsMainThirdLine = styled(Box)`
   height: 18px;
   border-radius: 2px;
   margin-bottom: 4px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
 
   @media (max-width: 1200px) {
@@ -187,7 +187,7 @@ export const SkeletonItemDetailsMainFourthLine = styled(Box)`
   height: 18px;
   border-radius: 2px;
   margin-bottom: 4px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
 
   @media (max-width: 1200px) {
@@ -200,7 +200,7 @@ export const SkeletonItemDetailsMainFifthLine = styled(Box)`
   height: 18px;
   border-radius: 2px;
   margin-bottom: 4px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
 
   @media (max-width: 1200px) {
@@ -212,7 +212,7 @@ export const SkeletonItemDetailsMainSixthLine = styled(Box)`
   width: 307px;
   height: 18px;
   border-radius: 2px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
 
   @media (max-width: 1200px) {
@@ -232,7 +232,7 @@ export const SkeletonItemDetailsMainButtonRound = styled(Box)`
   height: 40px;
   border-radius: 100%;
   margin-right: 18px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
 `;
 
@@ -240,13 +240,13 @@ export const SkeletonItemDetailsMainButton = styled(Box)`
   width: 108px;
   height: 14px;
   border-radius: 2px;
-  background-color: ${selectedTheme.filterSkeletonBackground};
+  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   animation: ${skeletonAnimation} 2s infinite;
 `;
 
 export const SkeletonItemDetailsMainButtonContainer = styled(Box)`
   border-radius: 4px;
   padding: 17px 36px;
-  background-color: ${selectedTheme.filterSkeletonBackgroundSecond};
+  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   animation: ${skeletonAnimation} 2s infinite;
 `;