Merge branch 'master' of http://git.dilig.net/selenaaasi/trampa-frontend into release

.env

@@ -0,0 +1 @@
+REACT_APP_BASE_API_URL=https://trampa-api-test.dilig.net/

.gitignore

@@ -4,6 +4,8 @@
 /node_modules
 /.pnp
 .pnp.js
+/src/components/CreateOfferCard
+/src/components/ItemDetailsCard
 
 # testing
 /coverage
@@ -13,7 +15,6 @@
 
 # misc
 .DS_Store
-.env
 .env.local
 .env.development.local
 .env.test.local

src/AppRoutes.js

@@ -41,20 +41,21 @@ import ChatPage from "./pages/Chat/Chat";
 import MyOffers from "./pages/MyOffers/MyOffers";
 // import PricesPage from "./pages/Prices/PricesPage";
 import AboutPage from "./pages/About/AboutPage";
+import AuthRoute from "./components/Router/AuthRoute";
 // import PrivacyPolicyPage from "./pages/PrivacyPolicy/PrivacyPolicyPage";
 
 const AppRoutes = () => {
   return (
     <Switch>
       <Route exact path={BASE_PAGE} component={HomePage} />
-      <Route exact path={LOGIN_PAGE} component={LoginPage} />
+      <AuthRoute exact path={LOGIN_PAGE} component={LoginPage} />
       <Route path={NOT_FOUND_PAGE} component={NotFoundPage} />
-      <Route path={REGISTER_SUCCESSFUL_PAGE} component={RegisterSuccessful} />
-      <Route path={REGISTER_PAGE} component={Register} />
       <Route path={ERROR_PAGE} component={ErrorPage} />
-      <Route path={FORGOT_PASSWORD_MAIL_SENT} component={MailSent} />
-      <Route path={FORGOT_PASSWORD_PAGE} component={ForgotPasswordPage} />
-      <Route path={RESET_PASSWORD_PAGE} component={ResetPasswordPage} />
+      <AuthRoute path={REGISTER_SUCCESSFUL_PAGE} component={RegisterSuccessful} />
+      <AuthRoute path={REGISTER_PAGE} component={Register} />
+      <AuthRoute path={FORGOT_PASSWORD_MAIL_SENT} component={MailSent} />
+      <AuthRoute path={FORGOT_PASSWORD_PAGE} component={ForgotPasswordPage} />
+      <AuthRoute path={RESET_PASSWORD_PAGE} component={ResetPasswordPage} />
       <Route path={CREATE_OFFER_PAGE} component={CreateOffer} />
       <Route path={ITEM_DETAILS_PAGE} component={ItemDetailsPage} />
       <Route path={PROFILE_PAGE} component={ProfilePage} />

src/assets/styles/_base.scss

@@ -1,48 +0,0 @@
-body {
-  margin: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  overflow-anchor: none;
-  background-color: #F1F1F1;
-}
-
-* {
-  box-sizing: border-box;
-  font-family: "DM Sans";
-}
-
-html {
-  min-height: 100%;
-  font-size: 16px;
-
-  @include media-below($bp-xxl) {
-    font-size: 14px;
-  }
-
-  @include media-below($bp-xs) {
-    font-size: 13px;
-  }
-
-  @include media-below($bp-xxs) {
-    font-size: 10.5px;
-  }
-}
-
-html,
-body,
-#root {
-  @include flex-column;
-  flex: 1 0 auto;
-}
-
-input[type='search']::-webkit-search-decoration,
-input[type='search']::-webkit-search-cancel-button,
-input[type='search']::-webkit-search-results-button,
-input[type='search']::-webkit-search-results-decoration {
-  -webkit-appearance: none;
-}
-
-ul {
-  list-style: none;
-  padding: 0;
-}

src/assets/styles/_functions.scss

@@ -1,7 +0,0 @@
-@function pxToRem($target, $context: $base-font-size) {
-  @return ($target / $context) * 1rem;
-}
-
-@function pxToRemMd($target, $context: $base-font-size-md) {
-  @return ($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 +0,0 @@
-@mixin desktop {
-  @media (min-width: 1280px) {
-    @content;
-  }
-}
-
-@mixin desktop-lg {
-  @media (min-width: 1480px) {
-    @content;
-  }
-}
-
-@mixin tablet {
-  @media (max-width: 1024px) {
-    @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-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-column {
-  display: flex;
-  flex-direction: column;
-}
-
-@mixin button-clear {
-  border: none;
-  padding: 0;
-  background-color: transparent;
-}
-
-@mixin outline-none {
-  &,
-  &:active,
-  &:focus {
-    outline: none;
-  }
-}
-
-@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 line-clamp($lines) {
-  display: -webkit-box;
-  -webkit-line-clamp: $lines;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}

src/assets/styles/_overwrite.scss

@@ -1,244 +0,0 @@
-// Overwrite
-.ais-ClearRefinements-button {
-  color: $grey-11;
-  font-size: pxToRem(14px);
-  letter-spacing: 0;
-  line-height: 1.15;
-  background-color: transparent;
-  border: none;
-  text-decoration: underline;
-  position: relative;
-  transition: all 0.2s;
-  outline: none;
-  cursor: pointer;
-
-  &[disabled] {
-    pointer-events: none;
-    opacity: 0.5;
-    cursor: auto;
-  }
-
-  &:hover {
-    color: $color-primary-light;
-  }
-
-  &:active {
-    color: $color-primary-dark;
-  }
-}
-
-.ais-RefinementList {
-  margin-bottom: pxToRem(32px);
-  margin-left: pxToRem(16px);
-
-  &.c-filter__refinement--closed {
-    display: none;
-  }
-}
-
-.ais-RefinementList.expanded {
-  .ais-RefinementList-showMore::before {
-    transform: rotate(180deg);
-  }
-}
-
-.ais-RefinementList-showMore {
-  color: $color-primary;
-  font-size: pxToRem(14px);
-  font-weight: 600;
-  letter-spacing: 0;
-  line-height: 1.56;
-  text-align: center;
-  background-color: transparent;
-  border: none;
-  position: relative;
-  margin-left: pxToRem(20px);
-  outline: none;
-  transition: all ease-in-out 0.3s;
-  cursor: pointer;
-
-  &[disabled] {
-    display: none;
-  }
-
-  &:hover {
-    color: $color-primary-light;
-  }
-
-  &:active {
-    color: $color-primary-dark;
-  }
-
-  &::before {
-    content: '';
-    background-image: url('../images/chevron-down.svg');
-    fill: $color-primary;
-    -webkit-text-stroke-color: $color-primary;
-    background-position: center;
-    width: pxToRem(20px);
-    height: pxToRem(20px);
-    position: absolute;
-    left: pxToRem(-22px);
-    transition: all 0.2s;
-  }
-}
-
-.ais-SearchBox {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: pxToRem(24px);
-}
-
-.ais-SearchBox-input {
-  border: none;
-  color: $blue;
-  font-size: pxToRem(16px);
-  letter-spacing: 0;
-  line-height: 1.5;
-  outline: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  flex-grow: 1;
-
-  &::placeholder {
-    color: $blue;
-    font-size: pxToRem(16px);
-  }
-
-  @include media-below($bp-xl) {
-    font-size: pxToRemMd(16px);
-
-    &::placeholder {
-      font-size: pxToRemMd(16px);
-    }
-  }
-}
-
-.ais-SearchBox-form {
-  border: 1px solid $grey-6;
-  border-radius: $border-radius;
-  overflow: hidden;
-  padding: 0 pxToRem(12px);
-  height: pxToRem(33px);
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  min-width: pxToRem(340px);
-}
-
-.ais-SearchBox-submit,
-.ais-SearchBox-reset {
-  border: none;
-  background: transparent;
-  outline: none;
-  height: pxToRem(16px);
-
-  > svg {
-    color: $blue-1;
-    fill: $blue-1;
-  }
-}
-
-.ais-SearchBox-submitIcon {
-  width: pxToRem(14px);
-  height: pxToRem(14px);
-  color: $blue-1;
-  fill: $blue-1;
-}
-
-.ais-SearchBox-resetIcon {
-  width: pxToRem(14px);
-  height: pxToRem(14px);
-}
-
-.ais-SearchBox-reset {
-  margin-left: pxToRem(10px);
-  cursor: pointer;
-}
-
-.c-plaid-link {
-  padding: 0 !important;
-  background: transparent !important;
-  border-width: 0 !important;
-  border-radius: 0 !important;
-  box-shadow: $box-shadow !important;
-
-  &.c-plaid-link--select-card {
-    margin-top: pxToRem(40px);
-
-    .c-select-card__button {
-      margin-top: 0;
-    }
-  }
-}
-
-.ais-InfiniteHitsWrap {
-  min-height: pxToRem(200px);
-}
-
-.ais-Highlight-highlighted {
-  background: #fff1d6;
-  font-style: normal;
-}
-
-.acsb-trigger {
-  display: none !important;
-  visibility: hidden !important;
-  width: 0 !important;
-  height: 0 !important;
-}
-
-.ais-CurrentRefinements-list {
-  display: flex;
-  flex-wrap: wrap;
-
-  > :not(:last-child) {
-    margin-right: pxToRem(16px);
-  }
-}
-
-.ais-CurrentRefinements-item {
-  border-radius: $border-radius;
-  background-color: $dark-blue;
-  padding: pxToRem(4px) pxToRem(8px);
-  flex-shrink: 0;
-  margin-bottom: pxToRem(16px);
-}
-
-.ais-CurrentRefinements-item-link {
-  font-size: pxToRem(16px);
-  line-height: 1.5;
-  font-weight: 600;
-  color: $white;
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-}
-
-.ais-CurrentRefinements-close {
-  color: $white;
-  width: pxToRem(24px);
-  margin-left: pxToRem(8px);
-}
-
-.recharts-surface {
-  overflow: visible;
-}
-
-.recharts-cartesian-axis-tick-value {
-  color: #9aa1a9;
-  font-size: 10px;
-  letter-spacing: 0;
-  line-height: 20px;
-}
-.recharts-tooltip-wrapper:empty{
-  display: 'none',
-}
-.recharts-text{
-  &.recharts-pie-label-text{
-  font-size: 14px;
-  @include media-below($bp-xl) {
-    font-size: 12px;
-  }
-  }
-}

src/assets/styles/_typography.scss

@@ -1,57 +0,0 @@
-body,
-div,
-dl,
-dt,
-dd,
-ul,
-ol,
-li,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-pre,
-form,
-fieldset,
-button,
-input,
-textarea,
-p,
-blockquote,
-th,
-td {
-  font-family: $font-family;
-}
-
-p {
-  vertical-align: middle;
-  display: inline-block;
-  word-break: break-word;
-  font-size: pxToRem(16px);
-  line-height: 1.5;
-
-  @include media-below($bp-md) {
-    font-size: pxToRemMd(16px);
-  }
-}
-
-a {
-  font-size: inherit;
-  line-height: inherit;
-  color: inherit;
-}
-
-strong {
-  font-weight: bold;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 500;
-}

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/assets/styles/_variables.scss

@@ -1,72 +0,0 @@
-$base-font-size: 16px;
-$base-font-size-md: 14px;
-
-$font-family: 'Avenir Next';
-
-// Colors
-$color-primary: #024f86;
-$color-primary-light: #024f86;
-$color-primary-dark: #003246;
-$yellow: #ffeac1;
-$white: #ffffff;
-$grey: #f4f4f4;
-$grey-1: #ccced0;
-$grey-2: #fafafa;
-$grey-3: #c2c5c6;
-$grey-4: #d8d8d8;
-$grey-5: #808285;
-$grey-6: #c9d6db;
-$grey-7: rgba(128, 130, 133, 0.5);
-$grey-8: rgba(201, 214, 219, 0.25);
-$grey-9: #ebeff2;
-$grey-10: #f0f5f6;
-$grey-11: #8b8b8b;
-$grey-12: #b0bfc540;
-$grey-13: #9d9ea4;
-$grey-14: #f7fafa;
-$grey-15: #ebf2f2;
-$dark-blue: #003246;
-$blue: #4e7a8c;
-$blue-1: #6e8fae;
-$blue-2: #024f86;
-$blue-3: #0f85ec;
-$blue-4: #5c7e9f;
-$blue-5: #dde5e7;
-$black: #000;
-$black-1: rgba(0, 0, 0, 0.3);
-$black-2: rgba(32, 38, 43, 0.9);
-$black-4: #172029;
-$black-5: #272727;
-$black-6: #1d2731;
-$red: #ff5028;
-$success: #09846b;
-$success-1: #00876a;
-$success-2: #008a68;
-
-// Shadow
-$button-shadow-hover: 0 5px 6px 0 rgba(112, 120, 135, 0.24);
-$button-shadow-pressed: 0 2px 4px 0 rgba(112, 120, 135, 0.24);
-$box-shadow: 0 3px 8px 0 rgba(112, 120, 135, 0.24);
-$account-dropdown-shadow: 0 6px 38px 0 rgba(112, 120, 135, 0.56);
-
-// Border Radius
-$border-radius: 4px;
-$border-radius-md: 8px;
-
-// Breakpoints
-$bp-xxs: 325px;
-$bp-xs: 400px;
-$bp-sm: 576px;
-$bp-md: 768px;
-$bp-lg: 992px;
-$bp-xl: 1200px;
-$bp-xxl: 1350px;
-
-// z-index
-$index-xxs: 1;
-$index-xs: 2;
-$index-sm: 3;
-$index-md: 4;
-$index-lg: 5;
-$index-xl: 6;
-$index-xxl: 7;

src/assets/styles/components/_app-button.scss

@@ -1,60 +0,0 @@
-.c-button {
-  display: inline-flex;
-  align-items: center;
-  border-radius: $border-radius;
-  background-color: $color-primary;
-  box-shadow: 0 2px 4px 0 rgba(112, 120, 135, 0.24);
-  border: transparent;
-  padding: 8px 0;
-  color: $white;
-  width: 100%;
-  text-align: center;
-  justify-content: center;
-  font-family: "Avenir Next";
-  font-size: pxToRem(18px);
-  font-weight: 600;
-  letter-spacing: 0;
-  line-height: 26px;
-  outline: none;
-  text-transform: uppercase;
-  transition: all 0.3s ease-in-out;
-  cursor: pointer;
-
-  &.c-button--clean {
-    background: transparent;
-    border: 1px solid $color-primary;
-    color: $color-primary;
-
-    &:hover {
-      border-color: $color-primary-light;
-      color: $color-primary-light;
-      background-color: transparent;
-    }
-
-    &:active {
-      border-color: $color-primary-dark;
-      color: $color-primary-dark;
-    }
-  }
-
-  &.c-button--dropdown {
-    justify-content: flex-end;
-    padding: 8px 14px;
-    background-image: url("../../images/down.svg");
-    background-repeat: no-repeat;
-    background-position: 8% 50%;
-  }
-
-  &[disabled] {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  &:hover {
-    background-color: $color-primary-light;
-  }
-
-  &:active {
-    background-color: $color-primary-dark;
-  }
-}

src/assets/styles/components/_auth-card.scss

@@ -1,45 +0,0 @@
-.c-auth-card {
-  max-width: pxToRem(624px);
-  width: 100%;
-  box-shadow: $box-shadow;
-  border-radius: $border-radius;
-  border: 1px solid $color-primary-light;
-  padding: pxToRem(24px) pxToRem(40px) pxToRem(32px);
-
-  @include media-below($bp-md) {
-    border: none;
-    box-shadow: none;
-    padding: 0;
-    max-width: 100%;
-
-    .c-auth-card__title {
-      text-align: left;
-      font-size: pxToRemMd(36px);
-      margin-bottom: pxToRemMd(6px);
-    }
-
-    .c-auth-card__subtitle {
-      font-size: pxToRemMd(16px);
-      text-align: left;
-    }
-  }
-}
-
-.c-auth-card__title {
-  text-align: left;
-  font-size: pxToRem(36px);
-  line-height: 1.22;
-  color: $dark-blue;
-  font-weight: 400;
-  margin-bottom: pxToRem(16px);
-}
-
-.c-auth-card__subtitle {
-  font-size: pxToRem(16px);
-  line-height: 1.5;
-  letter-spacing: 0;
-  color: $color-primary;
-  text-align: left;
-  width: 100%;
-  font-weight: 600;
-}

src/assets/styles/components/_auth.scss

@@ -1,23 +0,0 @@
-.c-auth {
-  @include flex-center;
-  flex-direction: column;
-  padding-bottom: pxToRem(56px);
-
-  @include media-below($bp-md) {
-    padding: 0 pxToRemMd(24px) pxToRemMd(92px);
-
-    .c-auth__title {
-      margin: pxToRemMd(48px) auto;
-      font-size: pxToRemMd(24px);
-      line-height: 1.35;
-    }
-  }
-}
-
-.c-auth__title {
-  margin: pxToRem(56px) auto pxToRem(80px);
-  font-size: pxToRem(36px);
-  line-height: 1.22;
-  color: $dark-blue;
-  font-weight: bold;
-}

src/assets/styles/components/_button.scss

@@ -1,173 +0,0 @@
-.c-btn {
-  @include outline-none;
-  @include button-clear;
-  @include flex-center;
-  font-size: pxToRem(18px);
-  line-height: 1.35;
-  padding: pxToRem(8px) pxToRem(8px);
-  border-radius: $border-radius;
-  box-shadow: $button-shadow-pressed;
-  color: inherit;
-  font-weight: 600;
-  letter-spacing: 0;
-  text-align: center;
-  text-transform: uppercase;
-  user-select: none;
-  white-space: nowrap;
-  min-width: pxToRem(120px);
-  flex-shrink: 0;
-  cursor: pointer;
-  transition: background-color 0.2s, color 0.2s;
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: auto;
-  }
-
-  &.c-btn--primary {
-    background-color: $color-primary;
-    color: $white;
-    border: 1px solid $color-primary;
-
-    &:disabled {
-      &:hover {
-        background-color: $color-primary;
-        box-shadow: none;
-      }
-    }
-
-    &:hover {
-      background-color: $color-primary-light;
-      box-shadow: $button-shadow-hover;
-    }
-
-    &:focus,
-    &:active {
-      background-color: $color-primary-dark;
-      box-shadow: $button-shadow-pressed;
-    }
-  }
-
-  &.c-btn--primary-outlined {
-    background-color: transparent;
-    color: $color-primary;
-    border: 1px solid $color-primary;
-
-    &:disabled {
-      &:hover {
-        color: $color-primary;
-        border: 1px solid $color-primary;
-      }
-    }
-
-    &:hover {
-      color: $color-primary;
-      border: 1px solid $color-primary;
-    }
-
-    &:focus,
-    &:active {
-      color: $color-primary;
-      border: 1px solid $color-primary;
-    }
-  }
-
-  &.c-btn--blue {
-    background-color: $blue-3;
-    color: $white;
-    background-color: $blue-3;
-  }
-
-  &.c-btn--white {
-    background-color: $white;
-    color: $grey-3;
-    border: 1px solid $grey-4;
-    box-shadow: $box-shadow;
-
-    &:disabled {
-      &:hover {
-        background-color: $white;
-        color: $grey-3;
-      }
-    }
-
-    &:hover {
-      color: $grey-5;
-    }
-
-    &:focus,
-    &:active {
-      background-color: $grey;
-    }
-  }
-
-  &.c-btn--primary-clear {
-    background-color: transparent;
-    color: $color-primary;
-    border: none;
-    box-shadow: none;
-    padding: 0;
-  }
-
-  &.c-btn--auto {
-    min-width: auto;
-  }
-
-  &.c-btn--sm {
-    font-size: pxToRem(16px);
-    line-height: 1.5;
-    padding: pxToRem(4px) pxToRem(15px);
-  }
-
-  &.c-btn--capitalize {
-    text-transform: capitalize;
-  }
-
-  &.c-btn--bank-acount-card {
-    padding: 0 pxToRem(16px);
-    min-height: pxToRem(32px);
-    min-width: pxToRem(120px);
-    font-size: pxToRem(16px);
-    line-height: 1.5;
-  }
-
-  &.c-btn--hidden {
-    visibility: hidden;
-    height: 0;
-  }
-
-  @include media-below($bp-md) {
-    padding: pxToRemMd(4px) pxToRemMd(25px);
-    font-size: pxToRemMd(16px);
-    line-height: 1.5;
-    min-width: pxToRemMd(80px);
-
-    &.c-btn--auth {
-      padding: pxToRemMd(12px) pxToRemMd(25px);
-      line-height: 1.35;
-      font-size: pxToRemMd(18px);
-    }
-
-    &.c-btn--sm {
-      padding: pxToRemMd(4px) pxToRemMd(15px);
-    }
-
-    &.c-btn--bank-acount-card {
-      flex-grow: 1;
-      min-height: pxToRemMd(40px);
-      padding: pxToRemMd(8px) pxToRemMd(16px);
-      font-size: pxToRemMd(18px);
-      line-height: 1.33;
-    }
-
-    &.c-btn--lg {
-      padding: pxToRemMd(7.5px) pxToRemMd(15px);
-      font-size: pxToRemMd(18px);
-      line-height: 1.5;
-    }
-  }
-
-  @include media-below($bp-xs) {
-    white-space: unset;
-  }
-}

src/assets/styles/components/_error-page.scss

@@ -1,46 +0,0 @@
-.c-error-page {
-  margin-top: pxToRem(120px);
-
-  @include media-below($bp-md) {
-    margin-top: pxToRemMd(120px);
-
-    .c-error-page__title {
-      font-size: pxToRemMd(160px);
-      margin-bottom: pxToRemMd(27px);
-    }
-
-    .c-error-page__text {
-      margin-bottom: pxToRem(24px);
-    }
-  }
-}
-
-.c-error-page__content-container {
-  @include flex-center;
-}
-
-.c-error-page__content {
-  @include flex-column;
-  align-items: center;
-  padding: 0 pxToRem(32px);
-}
-
-.c-error-page__title {
-  font-size: pxToRem(160px);
-  line-height: 1.35;
-  color: $dark-blue;
-  margin-bottom: pxToRem(32px);
-  color: $color-primary;
-  font-weight: bold;
-}
-
-.c-error-page__text {
-  font-weight: 600;
-  margin-bottom: pxToRem(24px);
-  text-align: center;
-}
-
-.c-error-page__button {
-  margin-bottom: pxToRem(16px);
-  min-width: pxToRem(250px);
-}

src/assets/styles/components/_forgot-password.scss

@@ -1,23 +0,0 @@
-.c-reset-security {
-  padding-top: pxToRem(56px);
-
-  @include media-below($bp-md) {
-    padding-top: pxToRemMd(40px);
-
-    .c-reset-security__button {
-      width: 100%;
-      margin-top: pxToRemMd(44px);
-    }
-  }
-}
-
-.c-reset-security__question {
-  color: $dark-blue;
-  font-weight: 600;
-  margin-bottom: pxToRem(20px);
-}
-
-.c-reset-security__button {
-  width: 100%;
-  margin-top: pxToRem(48px);
-}

src/assets/styles/components/_icon-button.scss

@@ -1,7 +0,0 @@
-.c-icon-button {
-  @include flex-center;
-  @include outline-none;
-  @include button-clear;
-  user-select: none;
-  cursor: pointer;
-}

src/assets/styles/components/_input.scss

@@ -1,479 +0,0 @@
-.c-input {
-  @include flex-column;
-  position: relative;
-
-  &.c-input--error {
-    .c-input__field,
-    .c-select__control,
-    .c-select__control:hover {
-      border-color: $red;
-    }
-  }
-
-  &.c-input--password {
-    .c-input__icon {
-      position: absolute;
-      right: 0;
-      top: 50%;
-      transform: translate(0, -50%);
-      margin-right: pxToRem(12px);
-      width: pxToRem(24px);
-      height: pxToRem(24px);
-      display: flex;
-
-      svg {
-        width: pxToRem(24px);
-        height: pxToRem(24px);
-        color: $black;
-      }
-    }
-
-    .c-input__caps-lock {
-      position: absolute;
-      right: 0;
-      top: 50%;
-      transform: translate(0, -50%);
-      margin-right: pxToRem(40px);
-      width: pxToRem(24px);
-      height: pxToRem(24px);
-      display: flex;
-      width: pxToRem(24px);
-      height: pxToRem(24px);
-      color: $black;
-    }
-
-    .c-input__field {
-      padding-right: pxToRem(72px);
-    }
-  }
-
-  &.c-input--demi-bold {
-    .c-input__field {
-      font-weight: 600;
-    }
-  }
-
-  &.c-input--search {
-    position: relative;
-    width: 100%;
-
-    .c-input__icon {
-      width: pxToRem(24px);
-      height: pxToRem(24px);
-      position: absolute;
-      right: 0;
-      top: 50%;
-      transform: translate(0, -50%);
-      color: $blue-1;
-      margin-right: pxToRem(12px);
-    }
-
-    &.c-input--search-management {
-      max-width: pxToRem(344px);
-      margin-right: pxToRem(24px);
-
-      .c-input__field {
-        height: pxToRem(34px);
-        font-size: pxToRem(16px);
-        line-height: 1.5;
-        letter-spacing: 0;
-      }
-    }
-  }
-
-  &.c-input--center-text {
-    input {
-      text-align: center;
-    }
-  }
-
-  @include media-below($bp-xl) {
-    &.c-input--search {
-      &.c-input--search-management {
-        max-width: 100%;
-        margin-right: pxToRemMd(16px);
-
-        .c-input__field {
-          height: pxToRemMd(32px);
-          font-size: pxToRemMd(16px);
-          line-height: 1.5;
-          letter-spacing: 0;
-        }
-      }
-    }
-
-    .c-input__label {
-      font-size: pxToRemMd(16px);
-    }
-
-    .c-input__field {
-      font-size: pxToRemMd(16px);
-    }
-
-    .c-input__error {
-      font-size: pxToRemMd(14px);
-    }
-
-    .c-select__control {
-      &.c-select__control {
-        font-size: pxToRemMd(16px);
-        min-height: 0;
-
-        .c-select__input,
-        .c-select__placeholder {
-          font-size: pxToRemMd(16px);
-        }
-
-        .c-select__indicator {
-          > svg {
-            width: pxToRemMd(16px);
-            height: pxToRemMd(16px);
-          }
-        }
-      }
-    }
-
-    .c-select__menu {
-      .c-select__option,
-      .c-select__menu-notice {
-        font-size: pxToRemMd(16px);
-      }
-    }
-
-    .c-input__link {
-      a,
-      span {
-        font-size: pxToRemMd(16px);
-      }
-    }
-
-    //Overide
-    .c-password-strength__container {
-      font-size: pxToRemMd(16px);
-    }
-
-    .c-phone-number {
-      .PhoneInput {
-        font-size: pxToRemMd(16px);
-
-        &::placeholder {
-          font-size: pxToRemMd(16px);
-        }
-      }
-
-      .PhoneInputInput {
-        font-size: pxToRemMd(16px);
-      }
-    }
-  }
-
-  &.c-input--dropdown-full-height {
-    .c-select__menu {
-      max-height: initial;
-    }
-  }
-}
-
-.c-input__label {
-  color: $blue;
-  font-size: pxToRem(16px);
-  font-weight: 600;
-  letter-spacing: 0;
-  line-height: 1.75;
-  margin-bottom: pxToRem(4px);
-}
-
-.c-input__field-wrap {
-  width: 100%;
-  position: relative;
-}
-
-.c-input__field {
-  @include outline-none;
-  border: 1px solid $grey-6;
-  border-radius: $border-radius;
-  font-size: pxToRem(16px);
-  line-height: 1.75;
-  height: pxToRem(50px);
-  padding: 0 pxToRem(12px);
-  color: $blue;
-  background-color: $white;
-  width: 100%;
-
-  &:disabled {
-    background-color: $grey-8;
-    border-color: $grey-6;
-  }
-
-  &:focus {
-    border-color: $color-primary;
-  }
-}
-
-.c-input__error {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  color: $red;
-  font-size: pxToRem(14px);
-  line-height: 1.35;
-  font-weight: 500;
-  margin: pxToRem(4px) 0;
-}
-
-.c-select__control {
-  &.c-select__control {
-    @include outline-none;
-    border: 1px solid $grey-6;
-    border-radius: $border-radius;
-    font-size: pxToRem(16px);
-    line-height: 1.75;
-    height: pxToRem(50px);
-    padding: 0 pxToRem(12px);
-    color: $blue;
-    background-color: $white;
-    box-shadow: none;
-
-    &:hover {
-      border-color: $grey-6;
-    }
-
-    &.c-select__control--is-focused {
-      border-color: $color-primary;
-      box-shadow: none;
-
-      &:hover {
-        border-color: $color-primary;
-      }
-      &.c-select__control--menu-is-open{
-      .c-select__indicator {
-        svg {
-          transform: rotate(-180deg);
-        }
-      }
-    }
-    }
-
-    .css-1uccc91-singleValue {
-      color: $blue;
-      margin: 0;
-    }
-
-    .css-b8ldur-Input {
-      margin: 0;
-    }
-
-    .c-select__value-container {
-      height: 100%;
-      padding: 0;
-      padding-right: pxToRem(32px);
-    }
-
-    .c-select__input,
-    .c-select__placeholder {
-      font-size: pxToRem(16px);
-      line-height: 1.75;
-      letter-spacing: 0;
-      color: $blue;
-    }
-
-    .c-select__indicator-separator {
-      display: none;
-    }
-
-    .c-select__indicator {
-      padding: 0;
-
-      > svg {
-        width: pxToRem(16px);
-        height: pxToRem(16px);
-        color: $blue;
-        transform: rotate(0);
-        transition: transform 0.2s;
-      }
-    }
-
-    &.c-select__control--is-disabled {
-      background-color: $grey-8;
-    }
-  }
-}
-
-.c-select__menu {
-  @include flex-column;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  margin-top: pxToRem(4px);
-  margin-bottom: pxToRem(4px);
-  border: 1px solid $grey-6;
-  border-radius: $border-radius;
-  box-shadow: $box-shadow;
-  max-height: pxToRem(150px);
-  overflow: auto;
-
-  .c-select__menu-list {
-    @include flex-column;
-    padding: 0;
-    flex-grow: 1;
-  }
-
-  .c-select__option,
-  .c-select__menu-notice {
-    padding: pxToRem(12px) pxToRem(15px);
-    font-size: pxToRem(16px);
-    line-height: 1.75;
-    letter-spacing: 0;
-    color: $blue;
-    text-align: left;
-
-    &:hover {
-      background-color: $grey-2;
-    }
-
-    &.c-select__option--is-selected {
-      background-color: $grey-2;
-    }
-
-    &.c-select__option--is-focused {
-      background-color: $grey-2;
-    }
-  }
-}
-
-.c-input__link {
-  position: absolute;
-  top: 0;
-  right: 0;
-
-  a,
-  span {
-    color: $grey-11;
-    font-size: pxToRem(16px);
-    letter-spacing: 0;
-    line-height: 1.15;
-    text-decoration: underline;
-    cursor: pointer;
-  }
-}
-
-//Overide
-.c-password-strength__container {
-  margin-top: pxToRem(8px);
-  font-size: pxToRem(16px);
-
-  & .c-password-strength__line--wrapper {
-    border-radius: 8px;
-    overflow: hidden;
-    background-color: $grey;
-    height: pxToRem(5px);
-
-    .c-password-strength__line {
-      height: pxToRem(5px);
-      left: 0;
-      top: 0;
-    }
-  }
-}
-
-.c-password {
-  min-height: pxToRem(110px);
-
-  @include media-below($bp-xl) {
-    min-height: pxToRemMd(110px);
-  }
-}
-
-.c-phone-number {
-  .PhoneInput {
-    @include outline-none;
-    box-sizing: border-box;
-    border: 1px solid $grey-6;
-    border-radius: $border-radius;
-    font-size: pxToRem(16px);
-    line-height: 1.75;
-    min-height: pxToRem(50px);
-    color: $blue;
-    background-color: $white;
-    box-shadow: none;
-    width: 100%;
-    overflow: hidden;
-
-    &::placeholder {
-      font-size: pxToRem(16px);
-      line-height: 1.75;
-    }
-
-    &:disabled {
-      background-color: $grey-8;
-      border-color: $grey-6;
-    }
-
-    &.PhoneInput--focus {
-      border-color: $color-primary;
-
-      .PhoneInputCountry {
-        border-color: $color-primary;
-      }
-    }
-  }
-
-  .PhoneInputCountry {
-    @include flex-center;
-    width: pxToRem(96px);
-    border-right: 1px solid $grey-6;
-  }
-
-  .PhoneInputCountryIcon {
-    margin-right: pxToRem(16px);
-    width: auto;
-    height: auto;
-    border: none;
-  }
-
-  .PhoneInputCountryIconImg {
-    width: pxToRem(36px);
-    object-fit: contain;
-  }
-
-  .PhoneInputCountrySelectArrow {
-    border: none;
-    width: 0;
-    height: 0;
-    transform: translate(0);
-    border-left: pxToRem(8px) solid transparent;
-    border-right: pxToRem(8px) solid transparent;
-    border-top: pxToRem(8px) solid $blue;
-  }
-
-  .PhoneInputInput {
-    @include outline-none;
-    border-color: transparent;
-    height: 100%;
-    font-size: pxToRem(16px);
-    line-height: 1.75;
-    padding: 0;
-    color: $blue;
-    background-color: $white;
-    width: 100%;
-    margin: 0;
-    padding: 0 pxToRem(26px);
-    height: pxToRem(50px);
-  }
-
-  .PhoneInputCountry {
-    margin-right: 0;
-  }
-
-  &.c-input--error {
-    .PhoneInput {
-      border-color: $red;
-
-      .PhoneInputCountry {
-        border-color: $red;
-      }
-    }
-  }
-}

src/assets/styles/components/_loader.scss

@@ -1,72 +0,0 @@
-.c-loader__wrapper {
-  @include flex-column;
-  flex: 1 1 auto;
-  position: relative;
-  min-height: 0;
-  min-width: 0;
-
-  &.c-loader__wrapper--block {
-    box-shadow: $box-shadow;
-
-    .c-loader {
-      position: relative;
-      top: unset;
-      left: unset;
-      right: unset;
-      bottom: unset;
-    }
-  }
-
-  &.c-loader__wrapper--full-height {
-    height: 100%;
-  }
-
-  &.c-loader__wrapper--no-shadow {
-    box-shadow: none;
-  }
-
-  .c-loader {
-    @include flex-center;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    padding: pxToRem(15px) 0;
-    background-color: rgba(255, 255, 255, 0.4);
-    z-index: $index-lg;
-
-    &.c-loader--page {
-      position: fixed;
-
-      .c-loader__icon {
-        border: 20px solid transparent;
-        width: pxToRem(200px);
-        height: pxToRem(200px);
-        border-bottom-color: $color-primary;
-        border-top-color: $color-primary;
-      }
-    }
-  }
-
-  .c-loader__icon {
-    border-radius: 50%;
-    border: 10px solid transparent;
-    border-bottom-color: $color-primary;
-    border-top-color: $color-primary;
-    animation: 1s loader-animation linear infinite;
-    width: pxToRem(100px);
-    height: pxToRem(100px);
-  }
-
-  @keyframes loader-animation {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-}

src/assets/styles/components/_login-card.scss

@@ -1,31 +0,0 @@
-.c-login-card {
-  border: 1px solid $color-primary-light;
-  border-radius: $border-radius;
-  box-shadow: $box-shadow;
-  max-width: pxToRem(624px);
-  width: 100%;
-  margin: pxToRem(28px) auto 0;
-  padding: pxToRem(36px) pxToRem(40px) pxToRem(32px);
-}
-
-.c-login-card__note {
-  color: $color-primary;
-  font-weight: 600;
-  margin-bottom: pxToRem(37px);
-}
-
-.c-login-card__form {
-  display: grid;
-  grid-row-gap: pxToRem(24px);
-}
-
-.c-login-card__submit {
-  margin-top: pxToRem(24px);
-  width: 100%;
-}
-
-.c-login-card__question {
-  color: $blue;
-  font-weight: 600;
-  margin-bottom: pxToRem(16px);
-}

src/assets/styles/components/_login.scss

@@ -1,72 +0,0 @@
-.c-login {
-  &.c-login--user {
-    .c-login__form {
-      .c-input:first-child {
-        margin-bottom: pxToRem(20px);
-      }
-    }
-  }
-
-  @include media-below($bp-xl) {
-    .c-login__link {
-      margin-top: pxToRemMd(70px);
-    }
-  }
-
-  @include media-below($bp-md) {
-    .c-login__form {
-      margin: pxToRemMd(36px) 0 0;
-    }
-
-    .c-login__button {
-      margin-bottom: pxToRemMd(40px);
-      margin-top: pxToRemMd(36px);
-    }
-
-    .c-login__link {
-      margin-top: pxToRemMd(80px);
-    }
-
-    &.c-login--user {
-      .c-login__form {
-        .c-input:first-child {
-          margin-bottom: pxToRemMd(20px);
-        }
-      }
-    }
-  }
-}
-
-.c-login__link {
-  color: $color-primary;
-  font-weight: 600;
-  margin-top: pxToRem(40px);
-  width: max-content;
-}
-
-.c-login__form {
-  margin: pxToRem(36px) 0 0;
-  > form {
-    @include flex-column;
-  }
-}
-
-.c-login__button {
-  width: 100%;
-  margin-top: pxToRem(68px);
-  margin-bottom: pxToRem(24px);
-}
-
-.c-login__text {
-  text-align: center;
-  width: 100%;
-  color: $blue;
-
-  a {
-    color: $color-primary;
-    font-weight: bold;
-    letter-spacing: inherit;
-    font-size: inherit;
-    line-height: inherit;
-  }
-}

src/assets/styles/components/_modal.scss

@@ -1,169 +0,0 @@
-$header-height-desktop: pxToRem(80px);
-$header-height-mobile: pxToRemMd(74px);
-
-.c-modal-wrap {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: $index-xl;
-  background-color: $black-1;
-
-  &.c-modal-wrap--no-bg {
-    background-color: transparent;
-  }
-
-  &.c-modal-wrap--over-modal {
-    background-color: transparent;
-    z-index: $index-xxl;
-  }
-
-  &.c-modal-wrap--sm {
-    .c-modal {
-      max-width: pxToRem(390px);
-      width: 100%;
-    }
-
-    .c-modal__header {
-      padding: pxToRem(12px);
-    }
-  }
-
-  .c-modal__header {
-    padding: pxToRem(12px);
-  }
-
-  &.c-modal-wrap--md {
-    .c-modal {
-      max-width: pxToRem(521px);
-      width: 100%;
-    }
-
-    .c-modal__header {
-      padding: pxToRem(12px) pxToRem(20px);
-    }
-  }
-
-  &.c-modal-wrap--lg {
-    .c-modal {
-      max-width: pxToRem(782px);
-      width: 100%;
-    }
-
-    .c-modal__header {
-      padding: pxToRem(12px) pxToRem(20px);
-    }
-  }
-
-  &.c-modal-wrap--close {
-    display: none;
-  }
-
-  @include media-below($bp-xl) {
-    &,
-    &.c-modal-wrap--sm,
-    &.c-modal-wrap--md {
-      .c-modal {
-        margin: $header-height-mobile auto $header-height-mobile;
-        max-height: calc(100vh - #{2 * $header-height-mobile});
-      }
-    }
-  }
-
-  @include media-below($bp-md) {
-    &,
-    &.c-modal-wrap--sm,
-    &.c-modal-wrap--md {
-      .c-modal__header {
-        padding: pxToRemMd(16px);
-      }
-
-      .c-modal__title {
-        font-size: pxToRemMd(16px);
-        line-height: 1.4;
-      }
-
-      .c-modal__close {
-        width: pxToRemMd(24px);
-        height: pxToRemMd(24px);
-      }
-
-      .c-modal__back {
-        width: pxToRemMd(24px);
-        height: pxToRemMd(24px);
-        margin-right: pxToRemMd(8px);
-      }
-
-      .c-modal__back-button {
-        margin-left: -#{pxToRemMd(8px)};
-      }
-
-      .c-modal,
-      &.c-modal-wrap--lg .c-modal {
-        max-width: 100%;
-        max-height: 100vh;
-        height: 100%;
-        margin: 0;
-        border-radius: 0;
-      }
-
-      &.c-modal-wrap--mobile-modal {
-        display: flex;
-        padding: 0 pxToRemMd(20px);
-
-        .c-modal {
-          height: auto;
-          margin: auto;
-          border-radius: 2px;
-        }
-      }
-    }
-  }
-}
-
-.c-modal {
-  @include flex-column;
-  box-shadow: $box-shadow;
-  border-radius: $border-radius;
-  background-color: $white;
-  margin: $header-height-desktop auto $header-height-desktop;
-  max-height: calc(100vh - #{2 * $header-height-desktop});
-  position: relative;
-}
-
-.c-modal__header {
-  display: flex;
-  align-items: center;
-  box-shadow: $box-shadow;
-  z-index: $index-xxs;
-}
-
-.c-modal__title {
-  @include text-ellipsis;
-  font-size: pxToRem(16px);
-  font-weight: 600;
-  line-height: 1.5;
-  color: $dark-blue;
-  padding-right: pxToRem(10px);
-  margin-right: auto;
-}
-
-.c-modal__close {
-  width: pxToRem(16px);
-  height: pxToRem(16px);
-  color: $dark-blue;
-}
-
-.c-modal__back {
-  width: pxToRem(16px);
-  height: pxToRem(16px);
-  color: $dark-blue;
-  margin-right: pxToRem(10px);
-}
-
-.c-modal__body {
-  @include flex-column;
-  flex: 1 1 auto;
-  overflow: auto;
-}

src/assets/styles/components/_radio.scss

@@ -1,29 +0,0 @@
-.c-radio {
-  display: flex;
-  cursor: pointer;
-
-  &.c-radio--selected {
-    border-color: $dark-blue;
-  }
-}
-
-.c-radio__field {
-  display: none;
-}
-
-.c-radio__indicator {
-  margin-top: pxToRem(4px);
-  margin-right: pxToRem(16px);
-}
-
-.c-radio__icon {
-  width: pxToRem(16px);
-  height: pxToRem(16px);
-}
-
-.c-radio__text {
-  font-size: pxToRem(14px);
-  line-height: 1.15;
-  color: $blue;
-  user-select: none;
-}

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

@@ -3,18 +3,17 @@ import PropTypes from "prop-types";
 import { CheckOffersButtonContainer } from "./CheckOffersButton.styled";
 import selectedTheme from "../../../themes";
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
 import { HOME_PAGE } from "../../../constants/pages";
+import history from "../../../store/utils/history";
 
 const CheckOffersButton = () => {
   const { t } = useTranslation();
-  const history = useHistory();
   const handleClick = () => {
     history.push(HOME_PAGE);
   };
   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

@@ -1,7 +1,7 @@
-import IconButton from "../../IconButton/IconButton";
 import { ReactComponent as DownArrow } from "../../../assets/images/svg/arrow-down.svg";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
+import { IconButton } from "../IconButton/IconButton";
 
 export const ArrowIcon = styled(DownArrow)`
   ${(props) =>
@@ -11,16 +11,23 @@ export const ArrowIcon = styled(DownArrow)`
 `}
   width: 18px;
   height: 18px;
+  position: relative;
+  top: 1px;
+  left: 1px;
   & path {
     ${(props) =>
       props.disabled &&
       `
-    stroke: ${selectedTheme.iconStrokeDisabledColor}
+    stroke: ${selectedTheme.colors.iconStrokeDisabledColor}
     `}
   }
+  @media (max-width: 600px) {
+    top: -3px;
+    left: -2px;
+  }
 `;
 export const ArrowContainer = styled(IconButton)`
-  border: 1px solid ${selectedTheme.primaryPurple};
+  border: 1px solid ${selectedTheme.colors.primaryPurple} !important;
   border-radius: 100%;
   min-width: 40px;
   width: 40px;
@@ -32,7 +39,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 +47,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.js

@@ -3,92 +3,54 @@ import PropTypes from "prop-types";
 import {
   ChatInfo,
   ChatCardContainer,
-  Col,
   UserImage,
   UserImgWrapper,
   UserName,
-  LastMessage,
-  Line,
 } from "./ChatCard.styled";
-import { useHistory } from "react-router-dom";
-import LittleOfferDetails from "./LittleOfferDetails/LittleOfferDetails";
 import MobileOfferDetails from "./MobileOfferDetails/MobileOfferDetails";
-import OfferLocation from "./OfferLocation/OfferLocation";
-import ChatCommands from "./ChatCommands/ChatCommands";
 import useIsMobile from "../../../hooks/useIsMobile";
 import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter";
+import history from "../../../store/utils/history";
+import { replaceInRoute } from "../../../util/helpers/routeHelpers";
+import { CHAT_MESSAGE_PAGE } from "../../../constants/pages";
 
+// Chat card is shown only on mobile phones (route /messages)
 const ChatCard = (props) => {
-  const history = useHistory();
   const { isMobile } = useIsMobile();
 
   const chat = useMemo(() => {
     return props.chat;
   }, [props.chat]);
 
-  const lastMessage = useMemo(() => {
-    if (chat?.chat?.messages && chat?.chat?.messages?.length > 0) {
-      return chat.chat.messages[chat.chat.messages.length - 1]?.text;
-    }
-    return "";
-  }, [chat]);
   const routeToItem = () => {
-    history.push(`/messages/${chat?.chat?._id}`);
+    history.push(
+      replaceInRoute(CHAT_MESSAGE_PAGE, {
+        idChat: chat?.chat?._id,
+      })
+    );
   };
-  return (
-    <ChatCardContainer
-      onClick={isMobile ? () => routeToItem(chat?.chat?._id) : () => {}}
-    >
-      <Col>
-        <UserImgWrapper>
-          {/* <UserImage src={chat?.interlocutorData?.image} /> */}
-          <UserImage
-            src={getImageUrl(
-              chat?.interlocutorData?.image,
-              variants.chatCard,
-              isMobile
-            )}
-          />
-        </UserImgWrapper>
-
-        <ChatInfo>
-          <UserName>{chat?.interlocutorData?.name}</UserName>
-
-          {/* Only shows on Mobile */}
-          <MobileOfferDetails chat={chat} />
-          {/* ^^^^^ */}
 
-          <LastMessage>{lastMessage}</LastMessage>
-          <OfferLocation chat={chat} />
-        </ChatInfo>
-      </Col>
-      <Line />
-
-      {/* Only shows on Desktop */}
-      <LittleOfferDetails chat={chat} />
-      {/* ^^^^^^^ */}
-
-      <ChatCommands routeToItem={() => routeToItem(chat?.chat?._id)} />
+  return (
+    <ChatCardContainer onClick={routeToItem}>
+      <UserImgWrapper>
+        <UserImage
+          src={getImageUrl(
+            chat?.interlocutorData?.image,
+            variants.chatCard,
+            isMobile
+          )}
+        />
+      </UserImgWrapper>
+
+      <ChatInfo>
+        <UserName>{chat?.interlocutorData?.name}</UserName>
+        <MobileOfferDetails chat={chat} />
+      </ChatInfo>
     </ChatCardContainer>
   );
 };
 
 ChatCard.propTypes = {
-  children: PropTypes.node,
-  title: PropTypes.string,
-  description: PropTypes.string,
-  category: PropTypes.string,
-  author: PropTypes.string,
-  location: PropTypes.string,
-  image: PropTypes.node,
-  quantity: PropTypes.number,
-  package: PropTypes.string,
-  numberOfViews: PropTypes.number,
-  halfwidth: PropTypes.bool,
-  sponsored: PropTypes.bool,
-  offer: PropTypes.any,
-  pinned: PropTypes.bool,
-  vertical: PropTypes.bool,
   chat: PropTypes.any,
 };
 ChatCard.defaultProps = {

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

@@ -10,15 +10,15 @@ 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;
   position: relative;
-  justify-content: space-between;
+  gap: 18px;
   @media (max-width: 550px) {
     max-height: 108px;
     margin: 0;
@@ -55,20 +55,10 @@ export const ChatInfo = styled(Box)`
   flex-direction: column;
   justify-content: space-between;
 `;
-export const Col = styled(Box)`
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  gap: 18px;
-  flex: 1;
-  @media (max-width: 600px) {
-    ${props => props.mobileDisappear && 'display: none;'}
-  }
-`;
 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;
@@ -76,28 +66,3 @@ export const UserName = styled(Typography)`
     font-size: 18px;
   }
 `;
-export const LastMessage = styled(Typography)`
-  font-family: "DM Sans";
-  color: ${selectedTheme.primaryDarkTextThird};
-  line-height: 22px;
-  font-size: 16px;
-  max-width: 220px;
-  flex: 1;
-  overflow: hidden;
-  max-height: 66px;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  position: relative;
-  @media (max-width: 600px) {
-    display: none;
-  }
-`;
-export const Line = styled(Box)`
-  border-left: 1px solid rgba(0, 0, 0, 0.15);
-  height: 100px;
-  width: 0;
-  margin: auto 0;
-  @media (max-width: 600px) {
-    display: none;
-  }`;

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

@@ -11,6 +11,7 @@ import selectedTheme from "../../../../themes";
 import { useTranslation } from "react-i18next";
 import PhonePopover from "../../../Popovers/PhonePopover/PhonePopover";
 
+// Not being used, but kept for potential future needs
 const ChatCommands = (props) => {
   const { t } = useTranslation();
   const [showPhonePopover, setShowPhonePopover] = useState(false);
@@ -29,8 +30,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

@@ -2,8 +2,8 @@ import { Box } from "@mui/material";
 import styled from "styled-components";
 import { ReactComponent as Phone } from "../../../../assets/images/svg/phone.svg";
 import selectedTheme from "../../../../themes";
+import { IconButton } from "../../../Buttons/IconButton/IconButton";
 import { PrimaryButton } from "../../../Buttons/PrimaryButton/PrimaryButton";
-import IconButton from "../../../IconButton/IconButton";
 import PopoverComponent from "../../../Popovers/PopoverComponent";
 
 
@@ -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.js

@@ -13,6 +13,7 @@ import { Col } from "../ChatCard.styled";
 import { getImageUrl, variants } from "../../../../util/helpers/imageUrlGetter";
 import useIsMobile from "../../../../hooks/useIsMobile";
 
+// Not being used, but kept for potential future needs
 const LittleOfferDetails = (props) => {
   const { t } = useTranslation();
   const { isMobile } = useIsMobile();
@@ -21,7 +22,6 @@ const LittleOfferDetails = (props) => {
     <Col mobileDisappear>
       <ChatOffer>
         <OfferImgWrapper>
-          {/* <OfferImage src={chat?.offerData?.firstImage} /> */}
           <OfferImage
             src={getImageUrl(
               chat?.offerData?.firstImage,

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.js

@@ -8,12 +8,11 @@ import {
 } from "./MobileOfferDetails.styled";
 
 const MobileOfferDetails = (props) => {
-  const chat = props.chat;
   const { t } = useTranslation();
   return (
     <OfferCardContainerMobile>
       <OfferTextMobile>{t("messages.cardProduct")}</OfferTextMobile>
-      <OfferTitleMobile>{chat?.offerData?.name}</OfferTitleMobile>
+      <OfferTitleMobile>{props.chat?.offerData?.name}</OfferTitleMobile>
     </OfferCardContainerMobile>
   );
 };

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.js

@@ -7,6 +7,7 @@ import {
   XSText,
 } from "./OfferLocation.styled";
 
+// Not being used, but kept for potential future needs
 const OfferLocation = (props) => {
   const chat = props.chat;
   return (

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/BackButton/BackButton.js

@@ -17,7 +17,7 @@ const BackButton = (props) => {
 
 BackButton.propTypes = {
   setCurrentStep: PropTypes.func,
-  currentStep: PropTypes.bool,
+  currentStep: PropTypes.number,
 };
 
 export default BackButton;

src/components/Cards/CreateOfferCard/CreateOffer.js

@@ -24,104 +24,73 @@ import BackdropComponent from "../../MUI/BackdropComponent";
 import CloseButton from "./CloseButton/CloseButton";
 import BackButton from "./BackButton/BackButton";
 import selectedTheme from "../../../themes";
+import { useMemo } from "react";
+import { useLocation } from "react-router-dom";
+import { BASE_PAGE, HOME_PAGE } from "../../../constants/pages";
+import { routeMatches } from "../../../util/helpers/routeHelpers";
 
 const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
   const dispatch = useDispatch();
+  const location = useLocation();
   const [informations, setInformations] = useState({});
   const [currentStep, setCurrentStep] = useState(1);
   const { t } = useTranslation();
   const userId = useSelector(selectUserId);
 
   const handleApiResponseSuccess = () => {
-    if (editOffer) {
-      dispatch(fetchOneOffer(offer._id));
-      dispatch(fetchProfileOffers(userId));
-    } else {
+    if (routeMatches(BASE_PAGE) || routeMatches(HOME_PAGE))
       dispatch(fetchOffers({ queryString: "" }));
+    if (location.pathname.includes("profile"))
       dispatch(fetchProfileOffers(userId));
+    if (location.pathname.includes("proizvodi"))
       dispatch(fetchOneOffer(offer._id));
-    }
   };
 
+  // Go to next step and save typed values
   const handleNext = (values) => {
     setInformations({ ...informations, ...values });
     setCurrentStep((prevState) => prevState + 1);
   };
 
-  const newImgs =
-    informations.images &&
-    informations.images
-      .filter((img) => img !== undefined)
-      .map(
-        (img) => img
-        // .replace("data:image/jpg;base64,", "")
-        // .replace("data:image/jpeg;base64,", "")
-        // .replace("data:image/png;base64,", "")
-      );
-
-  const offerData = {
-    name: informations.nameOfProduct,
-    description: informations.description,
-    location: {
-      city: informations.location,
-    },
-    condition: informations.condition,
-    category: {
-      name: informations.category,
-    },
-    subcategory: informations.subcategory,
-    images: newImgs,
-  };
-
-  const submitOffer = (values) => {
-    dispatch(addOffer({ values, handleApiResponseSuccess }));
-  };
+  // Get new images from 2nd step
+  const newImgs = useMemo(
+    () =>
+      informations.images &&
+      informations.images.filter((img) => img !== undefined),
+    [informations.images]
+  );
 
-  const submitEditOffer = (id, values) => {
-    dispatch(editOneOffer(id, values));
-  };
+  // Make offer data object with typed values
+  const offerData = useMemo(
+    () => ({
+      name: informations.nameOfProduct,
+      description: informations.description,
+      location: {
+        city: informations.location,
+      },
+      condition: informations.condition,
+      category: {
+        name: informations.category,
+      },
+      subcategory: informations.subcategory,
+      images: newImgs,
+    }),
+    [informations, newImgs]
+  );
 
+  // Create (or edit) offer
   const handleSubmitOffer = () => {
-    if (editOffer === undefined) {
-      submitOffer({ offerData, handleApiResponseSuccess });
+    if (editOffer) {
+      dispatch(editOneOffer(offer._id, offerData));
     } else {
-      const offerId = offer._id;
-      submitEditOffer({ offerId, offerData, handleApiResponseSuccess });
+      dispatch(addOffer({ offerData, handleApiResponseSuccess }));
     }
     closeCreateOfferModal(false);
   };
+
   const goStepBack = (stepNumber) => {
     setCurrentStep(stepNumber);
-    const {
-      category,
-      condition,
-      description,
-      images,
-      location,
-      nameOfProduct,
-      subcategory,
-    } = informations;
-    if (stepNumber === 1) {
-      setInformations({
-        category,
-        condition,
-        description,
-        location,
-        nameOfProduct,
-        subcategory,
-      });
-    }
-    if (stepNumber === 2) {
-      setInformations({
-        category,
-        condition,
-        description,
-        images,
-        location,
-        nameOfProduct,
-        subcategory,
-      });
-    }
+    // Here goes any additional logic
   };
 
   return (
@@ -131,8 +100,9 @@ const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
         handleClose={closeCreateOfferModal}
         position="fixed"
       />
-      <ModalCreateOfferContainer currentStep={currentStep}>
-        <CreateOfferContainer currentStep={currentStep}>
+      <ModalCreateOfferContainer currentstep={currentStep}>
+        <CreateOfferContainer currentstep={currentStep}>
+          {/* Modal header */}
           <ModalHeader>
             <BackButton
               currentStep={currentStep}
@@ -142,27 +112,31 @@ const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
               {currentStep === 3
                 ? `${t("offer.review")}`
                 : `${
-                    editOffer !== undefined
+                    editOffer
                       ? `${t("offer.changeOffer")}`
                       : `${t("offer.newOffer")}`
                   }`}
             </CreateOfferTitle>
             <CloseButton closeCreateOfferModal={closeCreateOfferModal} />
           </ModalHeader>
+          {/* ^^^^^^^^ */}
 
           <StepProgress
-            lineColor={selectedTheme.stepProgressAltColor}
+            lineColor={selectedTheme.colors.stepProgressAltColor}
             current={currentStep}
             numberOfSteps={3}
             functions={[() => goStepBack(1), () => goStepBack(2)]}
           />
+
           {currentStep === 1 && (
             <FirstPartCreateOffer
               handleNext={handleNext}
               offer={offer}
+              editOffer={editOffer}
               informations={informations}
             />
           )}
+
           {currentStep === 2 && (
             <SecondPartCreateOffer
               handleNext={handleNext}
@@ -170,6 +144,7 @@ const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
               informations={informations}
             />
           )}
+
           {currentStep === 3 && (
             <ThirdPartCreateOffer
               handleSubmitOffer={handleSubmitOffer}

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

@@ -1,21 +1,24 @@
 import { Box, Container, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
+import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
 import { Label } from "../../CheckBox/Label";
 import Select from "../../Select/Select";
 
 export const ModalCreateOfferContainer = styled(Box)`
   background-color: #fff;
   position: fixed;
-  ${(props) => props.currentStep === 3 && `overflow-y: auto;`}
+  ${(props) => props.currentstep === 3 && `overflow-y: auto;`}
   max-height: 90vh;
   top: ${(props) =>
-    props.currentStep === 1 ? "calc(50% - 400px);" : "calc(50% - 350px);"};
+    props.currentstep === 1 ? "calc(50% - 400px);" : "calc(50% - 350px);"};
   left: ${(props) =>
-    props.currentStep !== 3 ? "calc(50% - 310px);" : "calc(50% - 420px);"};
+    props.currentstep !== 3 ? "calc(50% - 310px);" : "calc(50% - 405px);"};
   z-index: 150;
-  padding: ${(props) => (props.currentStep !== 3 ? "0 120px" : "0 130px")};
+  padding: ${(props) => (props.currentstep !== 3 ? "0 120px" : "0 36px")};
   overflow-y: auto;
+  overflow-x: hidden;
+  ${(props) => props.currentstep === 3 && `height: 712px;`}
   &::-webkit-scrollbar {
     width: 5px;
   }
@@ -30,7 +33,15 @@ export const ModalCreateOfferContainer = styled(Box)`
 
   @media (max-height: 820px) {
     top: ${(props) =>
-      props.currentStep === 1 ? "calc(50% - 340px)" : "calc(50% - 340px)"};
+      props.currentstep === 1 ? "calc(50% - 340px)" : "calc(50% - 340px)"};
+  }
+
+  @media (max-width: 810px) {
+    left: ${(props) =>
+      props.currentStep === 3 &&
+      `
+      calc(50% - 336px);
+      `};
   }
 
   @media screen and (max-width: 628px) {
@@ -81,25 +92,33 @@ export const BackIcon = styled(Box)`
 export const CreateOfferContainer = styled(Container)`
   margin-top: 0px;
   display: flex;
-  width: ${(props) => (props.currentStep === 3 ? "580px" : "380px")};
+  width: ${(props) => (props.currentstep === 3 ? "739px" : "380px")};
   flex-direction: column;
   align-items: center;
 
+  @media (max-width: 810px) {
+    ${(props) =>
+      props.currentstep === 3 &&
+      `
+        width: 600px;
+    `}
+  }
+
   @media screen and (max-width: 600px) {
     width: 95%;
   }
 `;
 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 +128,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 +138,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 +147,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 +166,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 +178,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 +197,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;
@@ -186,3 +205,22 @@ export const SelectAltText = styled(Typography)`
   position: relative;
   bottom: -1px;
 `;
+export const NextButtonContainer = styled(PrimaryButton)`
+  margin-top: 16px;
+  width: 100%;
+
+  @media (min-width: 601px) {
+    margin-bottom: 18px;
+  }
+
+  @media screen and (max-width: 600px) {
+    position: absolute;
+    bottom: 18px;
+    height: 44px;
+    width: calc(100% - 18px);
+    left: 9px;
+    & button {
+      height: 44px;
+    }
+  }
+`;

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

@@ -1,230 +1,74 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { useFormik } from "formik";
-import {
-  CreateOfferFormContainer,
-  DescriptionField,
-  FieldLabel,
-  NextButton,
-  SelectOption,
-  TitleField,
-} from "./FirstPartCreateOffer.styled";
-import * as Yup from "yup";
-import selectedTheme from "../../../../themes";
-import { useTranslation } from "react-i18next";
-import { SelectField } from "../CreateOffer.styled";
+import { CreateOfferFormContainer } from "./FirstPartCreateOffer.styled";
 import { useSelector } from "react-redux";
-import useIsMobile from "../../../../hooks/useIsMobile";
+import { useMemo } from "react";
+import OfferTitleField from "./OfferTitleField/OfferTitleField";
+import OfferDescriptionField from "./OfferDescriptionField/OfferDescriptionField";
+import OfferLocationField from "./OfferLocationField/OfferLocationField";
+import OfferCategoryField from "./OfferCategoryField/OfferCategoryField";
+import OfferSubcategoryField from "./OfferSubcategoryField/OfferSubcategoryField";
+import NextButton from "./NextButton/NextButton";
+import firstPartCreateOfferInitialValues from "../../../../initialValues/createOfferInitialValues/firstPartCreateOfferInitialValues";
+import firstPartCreateOfferValidation from "../../../../validations/createOfferValidation/firstPartCreateOfferValidation";
 
 const FirstPartCreateOffer = (props) => {
-  const [subcat, setSubcat] = useState([]);
+  const [subcategories, setSubcategories] = useState([]);
   const locations = useSelector((state) => state.locations.locations);
   const categories = useSelector((state) => state.categories.categories);
-  const { isMobile } = useIsMobile();
 
-  const { t } = useTranslation();
+  // Change subcategory select options on category change
+  const handleSubcategories = (category) => {
+    setSubcategories(
+      categories
+        .find((cat) => cat.name === category)
+        ?.subcategories?.map((subcategory) => subcategory.name)
+    );
+  };
 
-  useEffect(() => {
-    if (!props.offer) {
-      if (Object.keys(props.informations).length !== 0) {
-        formik.setFieldValue("nameOfProduct", props.informations.nameOfProduct);
-        formik.setFieldValue("description", props.informations.description);
-        formik.setFieldValue("location", props.informations.location);
-        formik.setFieldValue("category", props.informations.category);
-        formik.setFieldValue("subcategory", props.informations.subcategory);
-        let scat = categories.filter(
-          (cat) => cat.name === props.informations.category
-        );
-        setSubcat(scat[0].subcategories.map((x) => x.name));
-      }
-    } else {
-      formik.setFieldValue("location", props.offer.location.city);
-      formik.setFieldValue("category", props.offer.category.name);
-      formik.setFieldValue("subcategory", props.offer.subcategory);
+  // Get initial values
+  const initialValues = useMemo(() => {
+    const newInitialValues = firstPartCreateOfferInitialValues(
+      props.offer,
+      props.informations
+    );
+    if (categories) {
+      handleSubcategories(newInitialValues.category);
     }
-  }, [props.offer, props.informations]);
+    return newInitialValues;
+  }, [props.offer, props.informations, categories]);
 
-  useEffect(() => {
-    if (props.offer !== undefined) {
-      let scat = categories.filter(
-        (cat) => cat.name === props.offer.category.name
-      );
-      setSubcat(scat[0].subcategories.map((x) => x.name));
-    }
-  }, [props.offer]);
+  // Get validation schema
+  const validationSchema = useMemo(() => {
+    return firstPartCreateOfferValidation(locations, categories, subcategories);
+  }, [subcategories]);
 
   const handleSubmit = (values) => {
     props.handleNext(values);
   };
+
   const formik = useFormik({
-    initialValues: {
-      nameOfProduct: `${!props.offer ? "" : props.offer.name}`,
-      description: `${!props.offer ? "" : props.offer.description}`,
-      location: "default",
-      category: "default",
-      subcategory: "default",
-    },
-    validationSchema: Yup.object().shape({
-      nameOfProduct: Yup.string().required(t("login.nameOfProductRequired")),
-      description: Yup.string().required(t("login.descriptionRequired")).min(8),
-      location: Yup.string().oneOf(locations.map((l) => l.city)),
-      category: Yup.string().oneOf(categories.map((c) => c.name)),
-      // subcategory: Yup.string().oneOf(
-      //   subcat[0]?.subcategories ? subcat[0].subcategories : []
-      // ),
-    }),
+    initialValues,
+    validationSchema,
     onSubmit: handleSubmit,
     validateOnBlur: true,
     enableReinitialize: true,
   });
 
-  const handleSubcategories = (category) => {
-    const filtered = categories.filter((cat) => cat.name === category);
-    setSubcat(filtered[0].subcategories.map((c) => c.name));
-  };
-
   return (
-    <>
-      <CreateOfferFormContainer component="form" onSubmit={formik.handleSubmit}>
-        <FieldLabel leftText={t("offer.title")} />
-        <TitleField
-          name="nameOfProduct"
-          placeholder={t("offer.productName")}
-          italicPlaceholder
-          margin="normal"
-          value={formik.values.nameOfProduct}
-          onChange={formik.handleChange}
-          error={formik.touched.nameOfProduct && formik.errors.nameOfProduct}
-          helperText={
-            formik.touched.nameOfProduct && formik.errors.nameOfProduct
-          }
-          autoFocus
-          fullWidth
-        />
-
-        <FieldLabel leftText={t("offer.productDescription")} />
-        {!isMobile ? (
-          <DescriptionField
-            name="description"
-            placeholder={t("offer.description")}
-            margin="normal"
-            italicPlaceholder
-            value={formik.values.description}
-            onChange={formik.handleChange}
-            error={formik.touched.description && formik.errors.description}
-            helperText={formik.touched.description && formik.errors.description}
-            fullWidth
-            multiline
-            minRows={4}
-            height={"100px"}
-          />
-        ) : (
-          <DescriptionField
-            name="description"
-            placeholder={t("offer.description")}
-            margin="normal"
-            italicPlaceholder
-            value={formik.values.description}
-            onChange={formik.handleChange}
-            error={formik.touched.description && formik.errors.description}
-            helperText={formik.touched.description && formik.errors.description}
-            fullWidth
-          />
-        )}
-
-        <FieldLabel leftText={t("offer.location")} />
-        <SelectField
-          defaultValue={formik.values.location}
-          onChange={(value) => {
-            formik.setFieldValue("location", value.target.value);
-          }}
-          value={formik.values.location}
-        >
-          <SelectOption style={{ display: "none" }} value="default">
-            {t("offer.choseLocation")}
-          </SelectOption>
-          {locations.map((loc) => {
-            return (
-              <SelectOption key={loc._id} value={loc.city}>
-                {loc.city}
-              </SelectOption>
-            );
-          })}
-        </SelectField>
-
-        <FieldLabel leftText={t("offer.category")} />
-        <SelectField
-          defaultValue={formik.values.category}
-          onChange={(value) => {
-            formik.setFieldValue("category", value.target.value);
-          }}
-          value={formik.values.category}
-        >
-          <SelectOption style={{ display: "none" }} value="default">
-            {t("offer.choseCategory")}
-          </SelectOption>
-          {categories.map((cat, i) => {
-            return (
-              <SelectOption
-                key={i}
-                value={cat.name}
-                onClick={() => handleSubcategories(cat.name)}
-              >
-                {cat.name}
-              </SelectOption>
-            );
-          })}
-        </SelectField>
-
-        <FieldLabel leftText={t("offer.subcategory")} />
-        <SelectField
-          defaultValue={formik.values.subcategory}
-          onChange={(value) => {
-            formik.setFieldValue("subcategory", value.target.value);
-          }}
-          value={formik.values.subcategory}
-        >
-          <SelectOption style={{ display: "none" }} value="default">
-            {t("offer.choseSubcategory")}
-          </SelectOption>
-          {subcat &&
-            subcat.map((sub, i) => {
-              return (
-                <SelectOption key={i} value={sub}>
-                  {sub}
-                </SelectOption>
-              );
-            })}
-        </SelectField>
-      </CreateOfferFormContainer>
-
-      <NextButton
-        type="submit"
-        variant="contained"
-        height="48px"
-        fullWidth
-        buttoncolor={selectedTheme.primaryPurple}
-        textcolor="white"
-        onClick={formik.handleSubmit}
-        disabled={
-          formik.values?.nameOfProduct?.length === 0 ||
-          !formik.values?.nameOfProduct ||
-          formik.values?.description?.length === 0 ||
-          !formik.values?.description ||
-          formik.values?.category?.length === 0 ||
-          !formik.values?.category ||
-          formik.values?.category === "default" ||
-          formik.values?.subcategory?.length === 0 ||
-          !formik.values?.subcategory ||
-          formik.values?.subcategory === "default" ||
-          formik.values?.location?.length === 0 ||
-          !formik.values?.location ||
-          formik.values?.location === "default"
-        }
-      >
-        {t("offer.continue")}
-      </NextButton>
-    </>
+    <CreateOfferFormContainer component="form" onSubmit={formik.handleSubmit}>
+      <OfferTitleField formik={formik} />
+      <OfferDescriptionField formik={formik} />
+      <OfferLocationField formik={formik} locations={locations} />
+      <OfferCategoryField
+        formik={formik}
+        categories={categories}
+        handleSubcategories={handleSubcategories}
+      />
+      <OfferSubcategoryField formik={formik} subcategories={subcategories} />
+      <NextButton formik={formik} />
+    </CreateOfferFormContainer>
   );
 };
 
@@ -232,6 +76,7 @@ FirstPartCreateOffer.propTypes = {
   children: PropTypes.any,
   handleNext: PropTypes.func,
   offer: PropTypes.node,
+  editOffer: PropTypes.bool,
   informations: PropTypes.any,
 };
 

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

@@ -1,13 +1,11 @@
 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../themes";
-import { PrimaryButton } from "../../../Buttons/PrimaryButton/PrimaryButton";
 import { Label } from "../../../CheckBox/Label";
 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 +14,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 +30,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 +44,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;
   }
@@ -56,50 +54,8 @@ export const FieldLabel = styled(Label)`
     }
   }
 `;
-export const DescriptionField = styled(TextField)`
-  margin-bottom: 4px;
-  @media (max-width: 600px) {
-    margin-bottom: 0;
-    & div div input {
-      font-size: 12px !important;
-    }
-    & div {
-      height: 40px;
-    }
-  }
-`;
-export const TitleField = styled(TextField)`
-  @media (max-width: 600px) {
-    margin-bottom: 0;
-    & div div input {
-      font-size: 12px !important;
-    }
-    & div {
-      height: 40px;
-    }
-  }
-`;
-export const NextButton = styled(PrimaryButton)`
-  margin-top: 16px;
-  width: 100%;
-
-  @media (min-width: 601px) {
-    margin-bottom: 18px;
-  }
-
-  @media screen and (max-width: 600px) {
-    position: absolute;
-    bottom: 18px;
-    height: 44px;
-    width: calc(100% - 18px);
-    left: 9px;
-    & button {
-      height: 44px;
-    }
-  }
-`;
 export const SelectOption = styled(Option)`
   height: 40px !important;
   min-height: 40px;
   max-height: 40px;
-`
+`;

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

@@ -0,0 +1,44 @@
+import React from "react";
+import PropTypes from "prop-types";
+import selectedTheme from "../../../../../themes";
+import { useTranslation } from "react-i18next";
+import { NextButtonContainer } from "../../CreateOffer.styled";
+
+const NextButton = (props) => {
+  const { t } = useTranslation();
+  const formik = props.formik;
+  return (
+    <NextButtonContainer
+      type="submit"
+      variant="contained"
+      height="48px"
+      fullWidth
+      buttoncolor={selectedTheme.colors.primaryPurple}
+      textcolor="white"
+      onClick={formik.handleSubmit}
+      disabled={
+        formik.values?.nameOfProduct?.length === 0 ||
+        !formik.values?.nameOfProduct ||
+        formik.values?.description?.length === 0 ||
+        !formik.values?.description ||
+        formik.values?.category?.length === 0 ||
+        !formik.values?.category ||
+        formik.values?.category === "default" ||
+        formik.values?.subcategory?.length === 0 ||
+        !formik.values?.subcategory ||
+        formik.values?.subcategory === "default" ||
+        formik.values?.location?.length === 0 ||
+        !formik.values?.location ||
+        formik.values?.location === "default"
+      }
+    >
+      {t("offer.continue")}
+    </NextButtonContainer>
+  );
+};
+
+NextButton.propTypes = {
+  formik: PropTypes.any,
+};
+
+export default NextButton;

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

@@ -0,0 +1,45 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { FieldLabel, SelectOption } from "../FirstPartCreateOffer.styled";
+import { SelectField } from "../../CreateOffer.styled";
+
+const OfferCategoryField = (props) => {
+  const { t } = useTranslation();
+  const formik = props.formik;
+  return (
+    <>
+      <FieldLabel leftText={t("offer.category")} />
+      <SelectField
+        defaultValue={formik.values.category}
+        onChange={(value) => {
+          formik.setFieldValue("category", value.target.value);
+        }}
+        value={formik.values.category}
+      >
+        <SelectOption style={{ display: "none" }} value="default">
+          {t("offer.choseCategory")}
+        </SelectOption>
+        {props.categories.map((cat, i) => {
+          return (
+            <SelectOption
+              key={i}
+              value={cat.name}
+              onClick={() => props.handleSubcategories(cat.name)}
+            >
+              {cat.name}
+            </SelectOption>
+          );
+        })}
+      </SelectField>
+    </>
+  );
+};
+
+OfferCategoryField.propTypes = {
+  formik: PropTypes.any,
+  handleSubcategories: PropTypes.func,
+  categories: PropTypes.array,
+};
+
+export default OfferCategoryField;

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

@@ -0,0 +1,51 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import useIsMobile from "../../../../../hooks/useIsMobile";
+import { FieldLabel } from "../FirstPartCreateOffer.styled";
+import { DescriptionField } from "./OfferDescriptionField.styled";
+
+const OfferDescriptionField = (props) => {
+  const formik = props.formik;
+  const { t } = useTranslation();
+  const { isMobile } = useIsMobile();
+  return (
+    <>
+      <FieldLabel leftText={t("offer.productDescription")} />
+      {!isMobile ? (
+        <DescriptionField
+          name="description"
+          placeholder={t("offer.description")}
+          margin="normal"
+          italicPlaceholder
+          value={formik.values.description}
+          onChange={formik.handleChange}
+          error={formik.touched.description && formik.errors.description}
+          helperText={formik.touched.description && formik.errors.description}
+          fullWidth
+          multiline
+          minRows={4}
+          height={"100px"}
+        />
+      ) : (
+        <DescriptionField
+          name="description"
+          placeholder={t("offer.description")}
+          margin="normal"
+          italicPlaceholder
+          value={formik.values.description}
+          onChange={formik.handleChange}
+          error={formik.touched.description && formik.errors.description}
+          helperText={formik.touched.description && formik.errors.description}
+          fullWidth
+        />
+      )}
+    </>
+  );
+};
+
+OfferDescriptionField.propTypes = {
+  formik: PropTypes.any,
+};
+
+export default OfferDescriptionField;

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

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import { TextField } from "../../../../TextFields/TextField/TextField";
+
+export const DescriptionField = styled(TextField)`
+  margin-bottom: 4px;
+  @media (max-width: 600px) {
+    margin-bottom: 0;
+    & div div input {
+      font-size: 12px !important;
+    }
+    & div {
+      height: 40px;
+    }
+  }
+`;

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

@@ -0,0 +1,40 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { FieldLabel, SelectOption } from "../FirstPartCreateOffer.styled";
+import { SelectField } from "../../CreateOffer.styled";
+
+const OfferLocationField = (props) => {
+  const { t } = useTranslation();
+  const formik = props.formik;
+  return (
+    <>
+      <FieldLabel leftText={t("offer.location")} />
+      <SelectField
+        defaultValue={formik.values.location}
+        onChange={(value) => {
+          formik.setFieldValue("location", value.target.value);
+        }}
+        value={formik.values.location}
+      >
+        <SelectOption style={{ display: "none" }} value="default">
+          {t("offer.choseLocation")}
+        </SelectOption>
+        {props.locations.map((loc) => {
+          return (
+            <SelectOption key={loc._id} value={loc.city}>
+              {loc.city}
+            </SelectOption>
+          );
+        })}
+      </SelectField>
+    </>
+  );
+};
+
+OfferLocationField.propTypes = {
+  formik: PropTypes.any,
+  locations: PropTypes.array,
+};
+
+export default OfferLocationField;

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

@@ -0,0 +1,41 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { FieldLabel, SelectOption } from "../FirstPartCreateOffer.styled";
+import { SelectField } from "../../CreateOffer.styled";
+
+const OfferSubcategoryField = (props) => {
+  const { t } = useTranslation();
+  const formik = props.formik;
+  return (
+    <>
+      <FieldLabel leftText={t("offer.subcategory")} />
+      <SelectField
+        defaultValue={formik.values.subcategory}
+        onChange={(value) => {
+          formik.setFieldValue("subcategory", value.target.value);
+        }}
+        value={formik.values.subcategory}
+      >
+        <SelectOption style={{ display: "none" }} value="default">
+          {t("offer.choseSubcategory")}
+        </SelectOption>
+        {props.subcategories &&
+          props.subcategories.map((sub, i) => {
+            return (
+              <SelectOption key={i} value={sub}>
+                {sub}
+              </SelectOption>
+            );
+          })}
+      </SelectField>
+    </>
+  );
+};
+
+OfferSubcategoryField.propTypes = {
+  formik: PropTypes.any,
+  subcategories: PropTypes.array,
+};
+
+export default OfferSubcategoryField;

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

@@ -0,0 +1,33 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { FieldLabel } from "../FirstPartCreateOffer.styled";
+import { useTranslation } from "react-i18next";
+import { TitleField } from "./OfferTitleField.styled";
+
+const OfferTitleField = (props) => {
+  const { t } = useTranslation();
+  const formik = props.formik;
+  return (
+    <>
+      <FieldLabel leftText={t("offer.title")} />
+      <TitleField
+        name="nameOfProduct"
+        placeholder={t("offer.productName")}
+        italicPlaceholder
+        margin="normal"
+        value={formik.values.nameOfProduct}
+        onChange={formik.handleChange}
+        error={formik.touched.nameOfProduct && formik.errors.nameOfProduct}
+        helperText={formik.touched.nameOfProduct && formik.errors.nameOfProduct}
+        autoFocus
+        fullWidth
+      />
+    </>
+  );
+};
+
+OfferTitleField.propTypes = {
+  formik: PropTypes.any,
+};
+
+export default OfferTitleField;

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

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+import { TextField } from "../../../../TextFields/TextField/TextField";
+
+export const TitleField = styled(TextField)`
+  @media (max-width: 600px) {
+    margin-bottom: 0;
+    & div div input {
+      font-size: 12px !important;
+    }
+    & div {
+      height: 40px;
+    }
+  }
+`;

src/components/Cards/CreateOfferCard/SecondPart/NextButton/NextButton.js

@@ -0,0 +1,37 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import selectedTheme from "../../../../../themes";
+import { NextButtonContainer } from "../../CreateOffer.styled";
+
+const NextButton = (props) => {
+  const { t } = useTranslation();
+  const formik = props.formik;
+  return (
+    <NextButtonContainer
+      type="submit"
+      variant="contained"
+      height="48px"
+      fullWidth
+      buttoncolor={selectedTheme.colors.primaryPurple}
+      textcolor="white"
+      onClick={formik.handleSubmit}
+      disabled={
+        props.imagesEmpty === props.numberOfImages ||
+        formik.values?.condition?.length === 0 ||
+        !formik.values?.condition ||
+        formik.values?.condition === "default"
+      }
+    >
+      {t("offer.continue")}
+    </NextButtonContainer>
+  );
+};
+
+NextButton.propTypes = {
+  formik: PropTypes.any,
+  imagesEmpty: PropTypes.any,
+  numberOfImages: PropTypes.any,
+};
+
+export default NextButton;

src/components/Cards/CreateOfferCard/SecondPart/OfferConditionField/OfferConditionField.js

@@ -0,0 +1,47 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { FieldLabel } from "../SecondPartCreateOffer.styled";
+import {
+  SelectAltText,
+  SelectField,
+  SelectText,
+} from "../../CreateOffer.styled";
+import { SelectOption } from "../../FirstPart/FirstPartCreateOffer.styled";
+import { conditionSelectEnum } from "../../../../../enums/conditionEnum";
+import { useTranslation } from "react-i18next";
+import { InputButtonContainer } from "./OfferConditionField.styled";
+
+const OfferConditionField = (props) => {
+  const { t } = useTranslation();
+  const formik = props.formik;
+  return (
+    <InputButtonContainer>
+      <FieldLabel leftText={t("offer.condition")} />
+      <SelectField
+        onChange={(event) => {
+          formik.setFieldValue("condition", event.target.value);
+        }}
+        value={formik.values.condition}
+      >
+        <SelectOption style={{ display: "none" }} value="default">
+          {t("offer.choseCondition")}
+        </SelectOption>
+        {Object.keys(conditionSelectEnum).map((key) => {
+          var item = conditionSelectEnum[key];
+          return (
+            <SelectOption value={item.mainText} key={item.value}>
+              <SelectText>{item.mainText}</SelectText>
+              <SelectAltText>{item.altText}</SelectAltText>
+            </SelectOption>
+          );
+        })}
+      </SelectField>
+    </InputButtonContainer>
+  );
+};
+
+OfferConditionField.propTypes = {
+  formik: PropTypes.any,
+};
+
+export default OfferConditionField;

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

@@ -0,0 +1,10 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+
+export const InputButtonContainer = styled(Box)`
+  width: 332px;
+  margin: 25px auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;

src/components/Cards/CreateOfferCard/SecondPart/OfferImagePicker/OfferImagePicker.js

@@ -0,0 +1,29 @@
+import React from "react";
+import PropTypes from "prop-types";
+import ImagePicker from "../../../../ImagePicker/ImagePicker";
+import { Scroller } from "./OfferImagePicker.styled";
+
+const OfferImagePicker = (props) => {
+  return (
+    <Scroller>
+      {props.images.map((item, index) => {
+        return (
+          <ImagePicker
+            key={index}
+            image={item}
+            setImage={(image) => props.setImage(index, image)}
+            deleteImage={() => props.setImage(index, null)}
+            showDeleteIcon
+          />
+        );
+      })}
+    </Scroller>
+  );
+};
+
+OfferImagePicker.propTypes = {
+  images: PropTypes.array,
+  setImage: PropTypes.func,
+};
+
+export default OfferImagePicker;

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

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import HorizontalScroller from "../../../../Scroller/HorizontalScroller";
+
+export const Scroller = styled(HorizontalScroller)`
+  min-width: 100%;
+  position: relative;
+  margin-bottom: 36px;
+`;

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

@@ -1,23 +1,17 @@
-import React, { useMemo, useState, useEffect } from "react";
+import React, { useMemo, useState } from "react";
 import PropTypes from "prop-types";
 import {
   CreateOfferFormContainer,
-  FieldLabel,
-  Scroller,
   SupportedFormats,
-  InputButtonContainer,
 } from "./SecondPartCreateOffer.styled";
-import ImagePicker from "../../../ImagePicker/ImagePicker";
-import { useTranslation, Trans } from "react-i18next";
-import { SelectAltText, SelectField, SelectText } from "../CreateOffer.styled";
-import {
-  NextButton,
-  SelectOption,
-} from "../FirstPart/FirstPartCreateOffer.styled";
-import selectedTheme from "../../../../themes";
-import { conditionSelectEnum } from "../../../../enums/conditionEnum";
+import { Trans } from "react-i18next";
 import { useFormik } from "formik";
-import * as Yup from "yup";
+import { useEffect } from "react";
+import OfferImagePicker from "./OfferImagePicker/OfferImagePicker";
+import OfferConditionField from "./OfferConditionField/OfferConditionField";
+import NextButton from "./NextButton/NextButton";
+import secondPartCreateOfferValidation from "../../../../validations/createOfferValidation/secondPartCreateOfferValidation";
+import secondPartCreateOfferInitialValues from "../../../../initialValues/createOfferInitialValues/secondPartCreateOfferInitialValues";
 
 const numberOfImages = 3;
 
@@ -25,41 +19,29 @@ const SecondPartCreateOffer = (props) => {
   const [images, setImages] = useState(
     Array.apply(null, Array(numberOfImages)).map(() => {})
   ); // 3 images
-  const { t } = useTranslation();
 
-  useEffect(() => {
-    if (!props.offer) {
-      if (Object.keys(props.informations).length > 6) {
-        setImages(
-          props.informations?.images
-            ? [...props.informations.images]
-            : [...images]
-        );
-        formik.setFieldValue(
-          "condition",
-          props.informations?.condition
-            ? props.informations.condition
-            : "default"
-        );
-      }
-    } else {
-      formik.setFieldValue("condition", props.offer.condition);
-    }
-  }, [props.offer, props.informations]);
+  const initialValues = useMemo(() => {
+    return secondPartCreateOfferInitialValues(
+      props?.informations,
+      props?.offer,
+      images
+    );
+  }, [props?.informations, props?.offer, images]);
 
   useEffect(() => {
-    setImages((prevState) => {
-      let editedImages = [...prevState];
-      if (props.offer !== undefined && props.offer.images.length !== 0) {
-        editedImages[0] = props.offer.images[0];
-        props.offer.images.forEach((oldImage, index) => {
-          editedImages[index] = oldImage
-        })
-      }
+    formik.setFieldValue("images", images);
+  }, [images]);
 
-      return [...editedImages];
-    });
-  }, [props.offer]);
+  useEffect(() => {
+    if (props?.offer?.images || props?.informations?.images) {
+      const oldImages = props?.informations?.images || props?.offer?.images;
+      let newImages = [...images];
+      oldImages.forEach((newImage, index) => {
+        newImages[index] = newImage;
+      });
+      setImages([...newImages]);
+    }
+  }, [props?.offer, props?.informations]);
 
   const setImage = (index, image) => {
     setImages((prevState) => {
@@ -69,10 +51,11 @@ const SecondPartCreateOffer = (props) => {
     });
   };
 
+  //How many images are empty
   const imagesEmpty = useMemo(() => {
     let numOfImagesEmpty = 0;
     images.forEach((item) => {
-      if (item === null || item === undefined) numOfImagesEmpty++;
+      if (!item) numOfImagesEmpty++;
     });
     return numOfImagesEmpty;
   }, [images]);
@@ -81,22 +64,9 @@ const SecondPartCreateOffer = (props) => {
     props.handleNext(values);
   };
 
-  const conditionSelectEnumArray = Object.values(conditionSelectEnum);
-  const filteredconditionSelectEnumArray = conditionSelectEnumArray.map(
-    (item) => item.mainText
-  );
-
   const formik = useFormik({
-    initialValues: {
-      images: images,
-      condition:
-        props.informations?.condition || props.offer?.condition || "default",
-    },
-    validationSchema: Yup.object().shape({
-      condition: Yup.string()
-        .required()
-        .oneOf(filteredconditionSelectEnumArray),
-    }),
+    initialValues,
+    validationSchema: secondPartCreateOfferValidation,
     onSubmit: handleSubmit,
     validateOnBlur: true,
     enableReinitialize: true,
@@ -105,64 +75,18 @@ const SecondPartCreateOffer = (props) => {
   return (
     <>
       <CreateOfferFormContainer component="form" onSubmit={formik.handleSubmit}>
-        <Scroller>
-          {images.map((item, index) => {
-            return (
-              <ImagePicker
-                key={index}
-                image={item}
-                setImage={(image) => setImage(index, image)}
-                deleteImage={() => setImage(index, null)}
-                showDeleteIcon
-              />
-            );
-          })}
-        </Scroller>
+        <OfferImagePicker images={images} setImage={setImage} />
         <SupportedFormats>
           <Trans i18nKey="offer.supportedImagesFormats" />
         </SupportedFormats>
-        <InputButtonContainer>
-          <FieldLabel leftText={t("offer.condition")} />
-          <SelectField
-            onChange={(value) => {
-              formik.setFieldValue("condition", value.target.value);
-            }}
-            value={formik.values.condition}
-          >
-            <SelectOption style={{ display: "none" }} value="default">
-              {t("offer.choseCondition")}
-            </SelectOption>
-            {Object.keys(conditionSelectEnum).map((key) => {
-              var item = conditionSelectEnum[key];
-              return (
-                <SelectOption value={item.mainText} key={item.value}>
-                  <SelectText>{item.mainText}</SelectText>
-                  <SelectAltText>{item.altText}</SelectAltText>
-                </SelectOption>
-              );
-            })}
-          </SelectField>
-        </InputButtonContainer>
+        <OfferConditionField formik={formik} />
       </CreateOfferFormContainer>
       <NextButton
-        type="submit"
-        variant="contained"
-        height="48px"
-        fullWidth
-        buttoncolor={selectedTheme.primaryPurple}
-        textcolor="white"
-        onClick={formik.handleSubmit}
-        disabled={
-          (props.offer === undefined
-            ? imagesEmpty === numberOfImages
-            : false) ||
-          formik.values?.condition?.length === 0 ||
-          !formik.values?.condition ||
-          formik.values?.condition === "default"
-        }
-      >
-        {t("offer.continue")}
-      </NextButton>
+        formik={formik}
+        offer={props.offer}
+        imagesEmpty={imagesEmpty}
+        numberOfImages={numberOfImages}
+      />
     </>
   );
 };

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

@@ -2,7 +2,6 @@ import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../themes";
 import { Label } from "../../../CheckBox/Label";
-import HorizontalScroller from "../../../Scroller/HorizontalScroller";
 
 export const CreateOfferFormContainer = styled(Box)`
   padding-top: 20px;
@@ -17,30 +16,17 @@ 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;
   }
 `;
 
-export const InputButtonContainer = styled(Box)`
-  width: 332px;
-  margin: 25px auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-`;
-
-export const Scroller = styled(HorizontalScroller)`
-  min-width: 100%;
-  position: relative;
-  margin-bottom: 36px;
-`;
 
 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

@@ -1,26 +1,29 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { PreviewCard } from "./ThirdPartCreateOffer.styled";
-import { NextButton } from "../FirstPart/FirstPartCreateOffer.styled";
+import { PreviewCard, PublishButton } from "./ThirdPartCreateOffer.styled";
 import selectedTheme from "../../../../themes";
 import { CreateOfferFormContainer } from "../CreateOffer.styled";
 import { useTranslation } from "react-i18next";
+import { useMemo } from "react";
 
 const ThirdPartCreateOffer = (props) => {
   const { t } = useTranslation();
-  const offer = {
-    offer: {
-      category: {
-        name: props.informations.category,
+  const offer = useMemo(
+    () => ({
+      offer: {
+        category: {
+          name: props.informations.category,
+        },
+        subcategory: props.informations.subcategory,
+        condition: props.informations.condition,
+        _created: new Date().toString(),
+        images: props.informations.images.filter((item) => item !== undefined),
+        name: props.informations.nameOfProduct,
+        description: props.informations.description,
       },
-      subcategory: props.informations.subcategory,
-      condition: props.informations.condition,
-      _created: new Date().toString(),
-      images: props.informations.images.filter((item) => item !== undefined),
-      name: props.informations.nameOfProduct,
-      description: props.informations.description,
-    },
-  };
+    }),
+    [props.informations]
+  );
   const handleSubmit = (e) => {
     e.preventDefault();
     props.handleSubmitOffer();
@@ -40,19 +43,20 @@ const ThirdPartCreateOffer = (props) => {
           showExchangeButton={false}
           createOffer
           hideViews
+          singleOffer
+          previewCard
         />
       </CreateOfferFormContainer>
-      <NextButton
+      <PublishButton
         type="submit"
         variant="contained"
         height="48px"
-        buttoncolor={selectedTheme.primaryPurple}
+        buttoncolor={selectedTheme.colors.primaryPurple}
         textcolor="white"
-        fullWidth
         onClick={handleSubmit}
       >
         {t("offer.publish")}
-      </NextButton>
+      </PublishButton>
     </>
   );
 };

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

@@ -1,5 +1,6 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
+import { PrimaryButton } from "../../../Buttons/PrimaryButton/PrimaryButton";
 import ItemDetailsCard from "../../ItemDetailsCard/ItemDetailsCard";
 
 export const CreateOfferFormContainer = styled(Box)`
@@ -7,4 +8,19 @@ export const CreateOfferFormContainer = styled(Box)`
   margin-top: 20px;
   width: 380px;
 `;
-export const PreviewCard = styled(ItemDetailsCard)``;
+export const PreviewCard = styled(ItemDetailsCard)`
+  width: auto;
+`;
+export const PublishButton = styled(PrimaryButton)`
+  width: 332px;
+  margin-top: 16px;
+  /* position: absolute;
+  bottom: 12px; */
+
+  @media (max-width: 600px) {
+    width: 339px;
+    height: 44px;
+    position: absolute;
+    bottom: 18px;
+  }
+`;

src/components/Cards/FilterCard/FilterCard.js

@@ -27,7 +27,6 @@ const FilterCard = (props) => {
       skeleton={props.skeleton}
     >
       <SkeletonFilterCard
-        animationStage={props.animationStage}
         skeleton={props.skeleton}
       />
       {/* Header title for my offers */}
@@ -75,7 +74,6 @@ FilterCard.propTypes = {
   closeResponsive: PropTypes.func,
   myOffers: PropTypes.bool,
   skeleton: PropTypes.bool,
-  animationStage: PropTypes.number,
   filtersOpened: PropTypes.bool,
   toggleFilters: PropTypes.func,
 };

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/FilterCard/Mockupdata.js

@@ -1,68 +0,0 @@
-export default [[{
-    string: "Beograd",
-    numberOfProducts: 17,
-    id: 0,
-    checked: false
-}
-,{
-    string: "Nis",
-    numberOfProducts: 137,
-    id: 1,
-    checked: false
-}
-,{
-    string: "Novi Sad",
-    numberOfProducts: 57,
-    id: 2,
-    checked: false
-}
-,{
-    string: "Kragujevac",
-    numberOfProducts: 62,
-    id: 3,
-    checked: false
-}
-,{
-    string: "Leskovac",
-    numberOfProducts: 1,
-    id: 4,
-    checked: false
-}
-,{
-    string: "Vranje",
-    numberOfProducts: 23,
-    id: 5,
-    checked: false
-}],
-[
-    {
-        string: "SVE KATEGORIJE",
-        numberOfProducts: 259,
-        id: 0,
-    },
-    {
-        string: "Kategorija 1",
-        numberOfProducts: 46,
-        id: 1,
-    },
-    {
-        string: "Kategorija 2",
-        numberOfProducts: 26,
-        id: 2,
-    },
-    {
-        string: "Kategorija 3",
-        numberOfProducts: 91,
-        id: 3,
-    },
-    {
-        string: "Kategorija 4",
-        numberOfProducts: 23,
-        id: 4,
-    },
-    {
-        string: "Kategorija 5",
-        numberOfProducts: 20,
-        id: 5,
-    },
-]];

src/components/Cards/FilterCard/Skeleton/SkeletonChooserHeader/SkeletonChooserHeader.js

@@ -8,21 +8,20 @@ import {
   SkeletonChooserContainer,
 } from "./SkeletonChooserHeader.styled";
 
-const SkeletonChooserHeader = (props) => {
+const SkeletonChooserHeader = () => {
   return (
     <SkeletonChooserContainer>
       <LeftContainer>
-        <CircleOne animationStage={props.animationStage}/>
-        <Line animationStage={props.animationStage}/>
+        <CircleOne/>
+        <Line/>
       </LeftContainer>
-      <CircleSecond animationStage={props.animationStage}/>
+      <CircleSecond/>
     </SkeletonChooserContainer>
   );
 };
 
 SkeletonChooserHeader.propTypes = {
   children: PropTypes.node,
-  animationStage: PropTypes.any,
 };
 
 export default SkeletonChooserHeader;

src/components/Cards/FilterCard/Skeleton/SkeletonChooserTitle/SkeletonChooserTitle.js

@@ -4,8 +4,8 @@ import { SkeletonChooserTitleContainer, SkeletonChooserTitleLine } from './Skele
 
 const SkeletonChooserTitle = (props) => {
   return (
-    <SkeletonChooserTitleContainer center={props.center} animationStage={props.animationStage} >
-        <SkeletonChooserTitleLine center={props.center} animationStage={props.animationStage}/>
+    <SkeletonChooserTitleContainer center={props.center}  >
+        <SkeletonChooserTitleLine center={props.center} />
     </SkeletonChooserTitleContainer>
   )
 }
@@ -13,7 +13,6 @@ const SkeletonChooserTitle = (props) => {
 SkeletonChooserTitle.propTypes = {
     children: PropTypes.any,
     center: PropTypes.bool,
-    animationStage: PropTypes.number,
 }
 
 export default SkeletonChooserTitle

src/components/Cards/FilterCard/Skeleton/SkeletonFilterCard.js

@@ -13,26 +13,25 @@ import SkeletonSection from "./SkeletonSection/SkeletonSection";
 const SkeletonFilterCard = (props) => {
 
   return (
-    <SkeletonFilterCardContainer animationStage={props.animationStage} skeleton={props.skeleton}>
+    <SkeletonFilterCardContainer skeleton={props.skeleton}>
       <SkeletonHeader>
-        <SkeletonHeaderLineOne animationStage={props.animationStage}  />
-        <SkeletonHeaderLineSecond animationStage={props.animationStage} />
+        <SkeletonHeaderLineOne  />
+        <SkeletonHeaderLineSecond />
       </SkeletonHeader>
-      <SkeletonChooserHeader animationStage={props.animationStage}/>
-      <SkeletonChooserTitle animationStage={props.animationStage} />
-      <SkeletonSection numberOfOptions={14} animationStage={props.animationStage} />
-      <SkeletonChooserHeader animationStage={props.animationStage} />
-      <SkeletonChooserHeader animationStage={props.animationStage} />
-      <SkeletonChooserTitle animationStage={props.animationStage} />
-      <SkeletonSection numberOfOptions={3} animationStage={props.animationStage} />
-      <SkeletonChooserTitle center animationStage={props.animationStage} />
+      <SkeletonChooserHeader/>
+      <SkeletonChooserTitle />
+      <SkeletonSection numberOfOptions={14} />
+      <SkeletonChooserHeader />
+      <SkeletonChooserHeader />
+      <SkeletonChooserTitle />
+      <SkeletonSection numberOfOptions={3} />
+      <SkeletonChooserTitle center />
     </SkeletonFilterCardContainer>
   );
 };
 
 SkeletonFilterCard.propTypes = {
   children: PropTypes.any,
-  animationStage: PropTypes.number,
   skeleton: PropTypes.bool,
 };
 

src/components/Cards/FilterCard/Skeleton/SkeletonSection/SkeletonSection.js

@@ -10,7 +10,7 @@ const SkeletonSection = (props) => {
   return (
     <SkeletonSectionContainer>
       {arrayForMapping.map((item, index) => (
-        <SkeletonSectionOption key={index} animationStage={props.animationStage} />
+        <SkeletonSectionOption key={index} />
       ))}
     </SkeletonSectionContainer>
   );
@@ -19,7 +19,6 @@ const SkeletonSection = (props) => {
 SkeletonSection.propTypes = {
   children: PropTypes.node,
   numberOfOptions: PropTypes.number,
-  animationStage: PropTypes.number,
 };
 
 export default SkeletonSection;

src/components/Cards/FilterCard/Skeleton/SkeletonSection/SkeletonSectionOption/SkeletonSectionOption.js

@@ -2,21 +2,20 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Circle, EndLine, Line, OptionLeftContainer, SkeletonSectionOptionContainer } from './SkeletonSectionOption.styled'
 
-const SkeletonSectionOption = (props) => {
+const SkeletonSectionOption = () => {
   return (
     <SkeletonSectionOptionContainer>
         <OptionLeftContainer>
-            <Circle animationStage={props.animationStage} />
-            <Line animationStage={props.animationStage} />
+            <Circle/>
+            <Line/>
         </OptionLeftContainer>
-        <EndLine animationStage={props.animationStage} />
+        <EndLine/>
     </SkeletonSectionOptionContainer>
   )
 }
 
 SkeletonSectionOption.propTypes = {
     children: PropTypes.any,
-    animationStage: PropTypes.number,
 }
 
 export default SkeletonSectionOption

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

@@ -24,22 +24,38 @@ import { selectLatestChats } from "../../../store/selectors/chatSelectors";
 import { increaseCounter } from "../../../store/actions/counter/counterActions";
 import _ from "lodash";
 import { selectUserId } from "../../../store/selectors/loginSelectors";
-import { formatDateLocale } from "../../../util/helpers/dateHelpers";
+import {
+  formatDateLocale,
+} from "../../../util/helpers/dateHelpers";
 import { startChat } from "../../../util/helpers/chatHelper";
 import Information from "./Information/Information";
 import { useTranslation } from "react-i18next";
 import DeleteOffer from "../OfferCard/DeleteOffer/DeleteOffer";
 import CreateOffer from "../CreateOfferCard/CreateOffer";
 import OfferDetails from "./OfferDetails/OfferDetails";
+import { useRouteMatch } from "react-router-dom";
+import itemDetailsData from "../../../notFoundData/itemDetailsData";
 
 const ItemDetailsCard = (props) => {
   const [showModalRemove, setShowModalRemove] = useState(false);
   const [showModalEdit, setShowModalEdit] = useState(false);
-  const offer = props.offer;
+  // const offer = props.offer;
+  const routeMatch = useRouteMatch();
   const chats = useSelector(selectLatestChats);
   const userId = useSelector(selectUserId);
   const { t } = useTranslation();
   const dispatch = useDispatch();
+  const offer = useMemo(() => {
+    if (props.offer) {
+      if (
+        props.offer.offer._id === routeMatch.params.idProizvod ||
+        props.createOffer
+      ) {
+        return props.offer;
+      }
+    }
+    return itemDetailsData;
+  }, [props.offer, props.createOffer, routeMatch.params]);
 
   const increaseOfferCounter = useMemo(() => {
     return _.once(function (id) {
@@ -66,7 +82,6 @@ const ItemDetailsCard = (props) => {
   const closeRemoveModalHandler = () => {
     setShowModalRemove(false);
   };
-
   return (
     <>
       <ItemDetailsCardContainer
@@ -74,8 +89,9 @@ const ItemDetailsCard = (props) => {
         halfwidth={props.halfwidth ? 1 : 0}
         className={props.className}
         singleOffer={props.singleOffer}
+        previewCard={props.previewCard}
       >
-        <OfferInfo>
+        <OfferInfo previewCard={props.previewCard}>
           <Info>
             <Information
               icon={<CategoryIcon />}
@@ -94,7 +110,7 @@ const ItemDetailsCard = (props) => {
               value={offer?.offer?.views?.count}
             />
           </Info>
-          <PostDate>{date}</PostDate>
+          <PostDate previewCard={props.previewCard}>{date}</PostDate>
         </OfferInfo>
         <OfferDetails
           offer={offer}
@@ -102,6 +118,7 @@ const ItemDetailsCard = (props) => {
           showExchangeButton={props.showExchangeButton}
           showPublishButton={props.showPublishButton}
           singleOffer={props.singleOffer}
+          previewCard={props.previewCard}
         />
         <DateButtonsContainer>
           {props.isMyOffer && (
@@ -120,8 +137,10 @@ 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}
           >
@@ -157,6 +176,7 @@ ItemDetailsCard.propTypes = {
   className: PropTypes.string,
   singleOffer: PropTypes.bool,
   isMyOffer: PropTypes.bool,
+  previewCard: PropTypes.bool,
   createOffer: PropTypes.bool,
 };
 ItemDetailsCard.defaultProps = {

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

@@ -15,39 +15,55 @@ import { ReactComponent as Remove } from "../../../assets/images/svg/trash.svg";
 export const ItemDetailsCardContainer = styled(Container)`
   display: flex;
   flex-direction: column;
-  width: ${(props) => (!props.halfwidth ? "100%" : "49%")};
+  /* 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;
   max-width: 2000px;
   position: relative;
-  width: 100%;
+  ${(props) => !props.previewCard && `height: 654px;`}
+  /* height: 654px; */
   /* padding-bottom: 70px; */
 
   @media (max-width: 600px) {
     margin: 18px 0;
     padding: 10px;
     padding-bottom: 65px;
-    height: 656px;
   }
 
   @media screen and (max-width: 1200px) {
-    margin-left: 0;
+    margin: 10px 0;
+    ${(props) =>
+      props.previewCard === true && `width: 90% !important; margin: auto;`}
+  }
+
+  @media (min-width: 601px) and (max-width: 628px) {
+    margin-left: 10px;
+  }
+
+  @media (max-width: 600px) {
+    width: auto !important;
+    margin-top: 22px;
+  }
+
+  @media (max-height: 708px) {
+    height: 400px;
   }
 `;
 export const OfferInfo = styled(Box)`
   display: flex;
-  flex: 2;
+  ${(props) => props.previewCard && `flex: 2;`}
+  /* flex: 2; */
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  margin: 18px 0;
+  margin: 0 0 18px 0;
   @media (max-width: 600px) {
     margin: 0;
     flex: 0;
@@ -74,7 +90,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 +114,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 +150,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) {
@@ -153,6 +169,9 @@ export const PostDate = styled(Typography)`
     align-items: start;
   }
   @media screen and (min-width: 600px) and (max-width: 1200px) {
+    ${(props) => !props.previewCard && `display: none;`}
+  }
+  @media (max-height: 708px) {
     display: none;
   }
 `;
@@ -175,43 +194,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 +238,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 +273,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 +292,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.js

@@ -56,8 +56,9 @@ const OfferDetails = (props) => {
       hasScrollBar={!props.showPublishButton}
       exchange={props.showExchangeButton}
       singleOffer={props.singleOffer}
+      previewCard={props.previewCard}
     >
-      {dimension.width < 600 || !props.singleOffer ? (
+      {dimension.width <= 600 || !props.singleOffer ? (
         <ScrollerHorizontal>
           {props?.offer?.offer?.images.map((item, index) => {
             if (!item) return;
@@ -87,18 +88,26 @@ const OfferDetails = (props) => {
           ))}
         </ScrollerVertical>
       )}
-      <OfferInfoContainer singleOffer={props.singleOffer}>
+      <OfferInfoContainer
+        singleOffer={props.singleOffer}
+        previewCard={props.previewCard}
+      >
         <OfferTitle singleOffer={props.singleOffer}>
           {offer?.offer?.name}
         </OfferTitle>
-        <OfferLittleDetails singleOffer={props.singleOffer}>
+        <OfferLittleDetails
+          singleOffer={props.singleOffer}
+          previewCard={props.previewCard}
+        >
           <OfferDescriptionTitle>
             {t("itemDetailsCard.description")}
           </OfferDescriptionTitle>
           <OfferDescriptionText showBarterButton={props.showExchangeButton}>
             {offer?.offer?.description}
           </OfferDescriptionText>
-          <DesciprtionPostDate>{date}</DesciprtionPostDate>
+          <DesciprtionPostDate previewCard={props.previewCard}>
+            {date}
+          </DesciprtionPostDate>
         </OfferLittleDetails>
       </OfferInfoContainer>
     </Details>
@@ -110,6 +119,7 @@ OfferDetails.propTypes = {
   showExchangeButton: PropTypes.bool,
   showPublishButton: PropTypes.bool,
   singleOffer: PropTypes.bool,
+  previewCard: PropTypes.bool,
   createOffer: PropTypes.bool,
 };
 

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

@@ -8,17 +8,19 @@ export const Details = styled(Box)`
   display: flex;
   flex-direction: ${(props) => (props.singleOffer ? "row" : "column-reverse")};
   justify-content: start;
+  ${(props) => !props.previewCard && `flex: 2;`}
+  /* flex: 2; */
   gap: 12px;
-  ${(props) => props.hasScrollBar && !props.exchange && `height: 300px;`}
-  overflow-y: auto;
-  overflow-x: hidden;
-  ::-webkit-scrollbar {
+  ${(props) => props.hasScrollBar && !props.exchange && `height: 340px;`}
+  /* overflow-y: auto; */
+  overflow-y: hidden;
+  /* ::-webkit-scrollbar {
     width: 5px;
   }
   ::-webkit-scrollbar-thumb {
     background: #c4c4c4;
     border-radius: 3px;
-  }
+  } */
 
   @media screen and (max-width: 600px) {
     flex-direction: column-reverse;
@@ -34,9 +36,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")};
@@ -54,6 +56,7 @@ export const OfferLittleDetails = styled(Box)`
   padding: ${(props) => (props.singleOffer ? 0 : "0 60px")};
   margin-top: 10px;
   padding-right: 18px;
+  overflow-y: auto;
   ${(props) =>
     !props.singleOffer &&
     `
@@ -61,12 +64,15 @@ export const OfferLittleDetails = styled(Box)`
     top: 180px;
     height: 0;
   `}
-  /* @media (max-width: 600px) {
+  @media (max-width: 600px) {
     padding: 0 8px;
     position: absolute;
     top: 270px;
     justify-content: start;
-  } */
+    height: 300px;
+    ${(props) => props.previewCard && `height: 100px;`};
+    width: 97%;
+  }
 `;
 export const ScrollerHorizontal = styled(HorizontalScroller)`
   min-height: 144px;
@@ -87,14 +93,26 @@ export const ScrollerVertical = styled(VerticalScroller)`
   } */
 `;
 export const OfferInfoContainer = styled(Box)`
-  @media screen and (min-width: 600px) and (max-width: 1200px) {
+  ${(props) => props.previewCard === undefined && `height: 500px;`}
+  overflow-y: auto;
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #c4c4c4;
+    border-radius: 3px;
+  }
+  @media screen and (min-width: 601px) and (max-width: 1200px) {
     ${(props) => props.singleOffer && `flex: 2`};
   }
+  @media (max-width: 600px) {
+    height: auto;
+  }
 `;
 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,13 +120,11 @@ 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;
-  /* padding-bottom: 20px; */
   max-width: 100%;
   /* max-width: ${(props) =>
     props.showBarterButton ? "calc(100% - 230px)" : "100%"}; */
@@ -124,19 +140,19 @@ 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) {
-    display: block;
+    ${(props) => !props.previewCard && `display: block;`}
     align-self: flex-end;
   }
 `;

src/components/Cards/LittleOfferCard/LittleOfferCard.js

@@ -17,7 +17,6 @@ const LittleOfferCard = (props) => {
   const { isMobile } = useIsMobile();
   return (
     <LittleOfferCardContainer>
-      {/* <OfferImage src={props.image} /> */}
       <OfferImage
         src={getImageUrl(props.image, variants.reviewCard, isMobile)}
       />

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.js

@@ -18,7 +18,6 @@ const MessageCard = (props) => {
   const dateString = formatDateTime(new Date(message._created));
   return (
     <MessageCardContainer ismymessage={props.isMyMessage}>
-      {/* <ProfileImage src={props.image} /> */}
       <ProfileImage
         src={getImageUrl(props.image, variants.chatMessage, isMobile)}
       />

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.js

@@ -9,20 +9,24 @@ import {
   ProfileProductName,
 } from "./MiniChatCard.styled";
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
 import useIsMobile from "../../../hooks/useIsMobile";
 import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter";
+import history from "../../../store/utils/history";
+import { replaceInRoute } from "../../../util/helpers/routeHelpers";
+import { CHAT_MESSAGE_PAGE } from "../../../constants/pages";
 
 const MiniChatCard = (props) => {
   const { t } = useTranslation();
-  const history = useHistory();
   const { isMobile } = useIsMobile();
   const changeChat = () => {
-    history.push(`/messages/${props?.chat?.chat?._id}`);
+    history.push(
+      replaceInRoute(CHAT_MESSAGE_PAGE, {
+        idChat: props?.chat?.chat?._id,
+      })
+    );
   };
   return (
     <MiniChatCardContainer selected={props.selected} onClick={changeChat}>
-      {/* <ProfileImage src={props?.chat?.interlocutorData?.image} /> */}
       <ProfileImage
         src={getImageUrl(
           props?.chat?.interlocutorData?.image,

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;
 `;