Fixed feature 619 and fixed drawer

src/App.js

@@ -29,7 +29,7 @@ const App = () => {
       <StyledEngineProvider injectFirst>
         <Header />
         <GlobalStyle />
-        <ToastContainer />
+        <ToastContainer bodyClassName="ToastBody" />
         <AppRoutes />
       </StyledEngineProvider>
     </Router>

src/assets/images/svg/register.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="#FEB005" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 2V8H20" stroke="#FEB005" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 13H8" stroke="#FEB005" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 17H8" stroke="#FEB005" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 9H9H8" stroke="#FEB005" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/Cards/CreateOfferCard/CreateOffer.js

@@ -23,6 +23,7 @@ import { useTranslation } from "react-i18next";
 import BackdropComponent from "../../MUI/BackdropComponent";
 import CloseButton from "./CloseButton/CloseButton";
 import BackButton from "./BackButton/BackButton";
+import selectedTheme from "../../../themes";
 
 const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
   const dispatch = useDispatch();
@@ -51,11 +52,11 @@ const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
     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,", "")
+      .map(
+        (img) => img
+        // .replace("data:image/jpg;base64,", "")
+        // .replace("data:image/jpeg;base64,", "")
+        // .replace("data:image/png;base64,", "")
       );
 
   const offerData = {
@@ -150,6 +151,7 @@ const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
           </ModalHeader>
 
           <StepProgress
+            lineColor={selectedTheme.stepProgressAltColor}
             current={currentStep}
             numberOfSteps={3}
             functions={[() => goStepBack(1), () => goStepBack(2)]}

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

@@ -1,8 +1,20 @@
 import { ReactComponent as Category } from "../../../../../assets/images/svg/category.svg";
 import { ReactComponent as CategoryChosen } from "../../../../../assets/images/svg/category-chosen.svg";
-import styled from "styled-components"
+import styled from "styled-components";
 
 export const CategoryChosenIcon = styled(CategoryChosen)`
-`
+  @media (max-width: 600px) {
+    width: 21px;
+    height: 24px;
+    position: relative;
+    bottom: 2px;
+  }
+`;
 export const CategoryIcon = styled(Category)`
-`
+  @media (max-width: 600px) {
+    width: 16px;
+    height: 16px;
+    position: relative;
+    bottom: 2px;
+  }
+`;

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

@@ -2,4 +2,10 @@ import styled from "styled-components";
 import { ReactComponent as Location } from "../../../../../assets/images/svg/location.svg";
 
 export const LocationIcon = styled(Location)`
+    @media (max-width: 600px) {
+        width: 16px;
+        height: 16px;
+        position: relative;
+        bottom: 2px;
+    }
 `

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

@@ -1,4 +1,11 @@
 import styled from "styled-components";
 import { ReactComponent as Subcategory } from "../../../../../assets/images/svg/subcategory.svg";
 
-export const SubcategoryIcon = styled(Subcategory)``;
+export const SubcategoryIcon = styled(Subcategory)`
+    @media (max-width: 600px) {
+        width: 16px;
+        height: 16px;
+        position: relative;
+        bottom: 2px;
+    }
+`;

src/components/Cards/FilterCard/FilterCard.js

@@ -57,7 +57,12 @@ const FilterCard = (props) => {
         <LocationChoser filters={filters} ref={locationRef} />
       </ContentContainer>
 
-      <FilterFooter toggleFilters={props.toggleFilters} filters={offers} />
+      <FilterFooter
+        toggleFilters={props.toggleFilters}
+        filters={offers}
+        closeAllSections={closeAllSections}
+        isMyOffers={props.myOffers}
+      />
     </FilterCardContainer>
   );
 };

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

@@ -2,11 +2,11 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import DropdownList from "../../../../../Dropdown/DropdownList/DropdownList";
 import selectedTheme from "../../../../../../themes";
-import IconWithNumber from "../../../../../Icon/IconWithNumber/IconWithNumber";
 import { ReactComponent as DropdownDown } from "../../../../../../assets/images/svg/down-arrow.svg";
 import { ReactComponent as DropdownUp } from "../../../../../../assets/images/svg/up-arrow.svg";
-import { ReactComponent as Close } from "../../../../../../assets/images/svg/close-white.svg";
 import {
+  CloseIcon,
+  NumberedIcon,
   SelectedItem,
   SelectedItemsContainer,
 } from "./CheckboxDropdownList.styled";
@@ -14,7 +14,7 @@ import SearchField from "./SearchField/SearchField";
 
 const CheckboxDropdownList = (props) => {
   const data = props.data;
-  const [isOpened, setIsOpened] = useState(false)
+  const [isOpened, setIsOpened] = useState(false);
   const handleDelete = (item) => {
     props.setItemsSelected([...props.filters.filter((p) => p !== item)]);
   };
@@ -31,9 +31,9 @@ const CheckboxDropdownList = (props) => {
           : selectedTheme.primaryText
       }
       dropdownIcon={
-        <IconWithNumber number={props.filters.length}>
+        <NumberedIcon number={props.filters.length}>
           {props.icon}
-        </IconWithNumber>
+        </NumberedIcon>
       }
       toggleIconClosed={<DropdownDown />}
       toggleIconOpened={<DropdownUp />}
@@ -55,7 +55,7 @@ const CheckboxDropdownList = (props) => {
                     (p) => p?.city?.toString() === item?.city?.toString()
                   )?.city
                 }
-                <Close style={{ position: "relative", top: "3px" }} />
+                <CloseIcon />
               </SelectedItem>
             ))}
           </SelectedItemsContainer>

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

@@ -1,6 +1,8 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../../../themes";
+import { ReactComponent as Close } from "../../../../../../assets/images/svg/close-white.svg";
+import IconWithNumber from "../../../../../Icon/IconWithNumber/IconWithNumber";
 
 export const SelectedItemsContainer = styled(Box)`
   display: flex;
@@ -22,4 +24,20 @@ export const SelectedItem = styled(Box)`
   cursor: pointer;
   margin-right: 3px;
   height: 22px;
-`;
+`;
+export const CloseIcon = styled(Close)`
+  position: relative;
+  top: 3px;
+  left: 2px;
+  & path {
+    stroke: ${selectedTheme.primaryYellow};
+  }
+`;
+export const NumberedIcon = styled(IconWithNumber)`
+  @media (max-width: 600px) {
+    & div {
+      width: 14px;
+      height: 14px;
+    }
+  }
+`

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

@@ -1,15 +1,14 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { TextField } from "../../../../../../TextFields/TextField/TextField";
 import { ReactComponent as CloseBlack } from "../../../../../../../assets/images/svg/close-black.svg";
-import { ClearText } from "./SearchField.styled";
+import { ClearText, SearchBar } from "./SearchField.styled";
 
 const SearchField = (props) => {
   const handleClear = () => {
     props.onChange("");
   };
   return (
-    <TextField
+    <SearchBar
       placeholder={props.placeholder}
       italicPlaceholder
       value={props.value}

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

@@ -1,6 +1,7 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../../../../themes";
+import { TextField } from "../../../../../../TextFields/TextField/TextField";
 
 export const ClearText = styled(Box)`
   padding-top: 1px;
@@ -14,4 +15,9 @@ export const ClearText = styled(Box)`
   &:hover {
     background-color: ${selectedTheme.primaryIconBackgroundColor};
   }
-`;
+`;
+export const SearchBar = styled(TextField)`
+  & div {
+    background-color: white;
+  }
+`

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

@@ -5,8 +5,7 @@ import selectedTheme from "../../../../../themes";
 import { ReactComponent as DropdownDown } from "../../../../../assets/images/svg/down-arrow.svg";
 import { ReactComponent as DropdownUp } from "../../../../../assets/images/svg/up-arrow.svg";
 import { ReactComponent as CloseBlack } from "../../../../../assets/images/svg/close-black.svg";
-import { ClearText } from "./FilterRadioDropdown.styled";
-import { TextField } from "../../../../TextFields/TextField/TextField";
+import { ClearText, SearchBar } from "./FilterRadioDropdown.styled";
 import DropdownItem from "../../../../Dropdown/DropdownItem/DropdownItem";
 import RadioButton from "../../../../Radio/Button/RadioButton";
 import RadioGroup from "../../../../Radio/Group/RadioGroup";
@@ -78,7 +77,7 @@ const FilterRadioDropdown = (props) => {
       headerOptions={
         // SearchBar
         <React.Fragment>
-          <TextField
+          <SearchBar
             placeholder={props.searchPlaceholder}
             italicPlaceholder
             value={toSearch}

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

@@ -1,6 +1,7 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../../themes";
+import { TextField } from "../../../../TextFields/TextField/TextField";
 
 export const SelectedItemsContainer = styled(Box)`
   display: flex;
@@ -21,4 +22,9 @@ export const ClearText = styled(Box)`
     &:hover {
         background-color: ${selectedTheme.primaryIconBackgroundColor};
     }
+`
+export const SearchBar = styled(TextField)`
+  & div {
+    background-color: white;
+  }
 `

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

@@ -15,13 +15,22 @@ const FilterFooter = (props) => {
     filters.apply();
     props.toggleFilters();
   };
+  const clearFilters = () => {
+    if (props.isMyOffers) {
+      filters.clear();
+    } else {
+      filters.clearFiltersAndApply();
+    }
+    props.toggleFilters();
+    props.closeAllSections();
+  };
   return (
     <FilterFooterContainer responsiveOpen={isMobile}>
       {isMobile && (
         <PrimaryButton
           variant="outlined"
           fullWidth
-          onClick={props.toggleFilters}
+          onClick={clearFilters}
           textcolor={selectedTheme.primaryPurple}
           font="DM Sans"
           style={{
@@ -31,7 +40,7 @@ const FilterFooter = (props) => {
             textAlign: "center",
           }}
         >
-          {t("common.close")}
+          {t("filters.cancel")}
         </PrimaryButton>
       )}
       <PrimaryButton
@@ -56,6 +65,8 @@ const FilterFooter = (props) => {
   responsiveOpen: PropTypes.bool,
   toggleFilters: PropTypes.func,
   filters: PropTypes.any,
+  isMyOffers: PropTypes.bool,
+  closeAllSections: PropTypes.func,
 }),
   (FilterFooter.defaultProps = {
     responsiveOpen: false,

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

@@ -1,12 +1,14 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { FilterHeaderContainer, Title } from "./FilterHeader.styled";
+import { CloseIcon, FilterHeaderContainer, Title } from "./FilterHeader.styled";
 import { useTranslation } from "react-i18next";
 import Link from "../../../Link/Link";
+import useIsMobile from "../../../../hooks/useIsMobile";
 
 const FilterHeader = (props) => {
   const filters = props.filters;
   const { t } = useTranslation();
+  const { isMobile } = useIsMobile();
   const clearFilters = () => {
     if (props.isMyOffers) {
       filters.clear();
@@ -19,9 +21,13 @@ const FilterHeader = (props) => {
   return (
     <FilterHeaderContainer>
       <Title>{t("filters.title")}</Title>
-      <Link to="#" textsize={"12px"} font={"DM Sans"} onClick={clearFilters}>
-        {t("filters.cancel")}
-      </Link>
+      {isMobile ? (
+        <CloseIcon onClick={props.toggleFilters} />
+      ) : (
+        <Link to="#" textsize={"12px"} font={"DM Sans"} onClick={clearFilters}>
+          {t("filters.cancel")}
+        </Link>
+      )}
     </FilterHeaderContainer>
   );
 };

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

@@ -1,6 +1,8 @@
 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../themes";
+import { ReactComponent as Close } from "../../../../assets/images/svg/close-black.svg";
+
 
 export const FilterHeaderContainer = styled(Box)`
   display: flex;
@@ -16,4 +18,10 @@ export const Title = styled(Typography)`
   font-family: "DM Sans";
   color: ${selectedTheme.primaryText};
   position: relative;
-`;
+  @media (max-width: 600px) {
+    font-size: 18px;
+  }
+`;
+export const CloseIcon = styled(Close)`
+
+`

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

@@ -61,12 +61,12 @@ 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;
-  }
+  } */
 `;
 export const ScrollerHorizontal = styled(HorizontalScroller)`
   min-height: 144px;
@@ -107,6 +107,7 @@ export const OfferDescriptionText = styled(Box)`
   color: ${selectedTheme.primaryDarkText};
   line-height: 22px;
   white-space: pre-line;
+  padding-bottom: 70px;
   /* padding-bottom: 20px; */
   max-width: 100%;
   /* max-width: ${(props) =>

src/components/Cards/OfferCard/OfferCard.js

@@ -30,9 +30,9 @@ import {
   RemoveIconContainer,
   LikeIcon,
   LikeIconContainer,
+  CategoryIcon,
 } from "./OfferCard.styled";
 import DeleteOffer from "./DeleteOffer/DeleteOffer";
-import { ReactComponent as Category } from "../../../assets/images/svg/category.svg";
 import { ReactComponent as Message } from "../../../assets/images/svg/mail.svg";
 import selectedTheme from "../../../themes";
 import { useHistory } from "react-router-dom";
@@ -132,7 +132,7 @@ const OfferCard = (props) => {
             <OfferDetails>
               <OfferCategory vertical={props.vertical}>
                 <DetailIcon color="black" component="span" size="16px">
-                  <Category width={"14px"} />
+                  <CategoryIcon />
                 </DetailIcon>
                 <DetailText>{props?.offer?.category?.name}</DetailText>
               </OfferCategory>

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

@@ -9,6 +9,8 @@ import { ReactComponent as Remove } from "../../../assets/images/svg/trash.svg";
 import { ReactComponent as Edit } from "../../../assets/images/svg/edit.svg";
 import { ReactComponent as Like } from "../../../assets/images/svg/like.svg";
 import { ReactComponent as Pin } from "../../../assets/images/svg/pin.svg";
+import { ReactComponent as Category } from "../../../assets/images/svg/category.svg";
+
 
 export const OfferCardContainer = styled(Container)`
   display: ${(props) => (props.skeleton ? "none" : "flex")};
@@ -297,6 +299,8 @@ export const OfferImageContainer = styled(Box)`
   min-height: 144px;
   width: 144px;
   height: 144px;
+  border-radius: 4px;
+  overflow: hidden;
   @media (max-width: 600px) {
     ${(props) =>
       !props.vertical
@@ -332,10 +336,8 @@ export const OfferTitleAboveImage = styled(OfferTitle)`
 export const EyeIcon = styled(Eye)`
   width: 12px;
   height: 11px;
-  @media (max-width: 600px) {
-    position: relative;
-    top: 1px !important;
-  }
+  position: relative;
+  top: 1px !important;
 `;
 export const RemoveIconContainer = styled(MessageIcon)`
   display: block;
@@ -402,3 +404,9 @@ export const PinIcon = styled(Pin)`
     }
   `}
 `;
+export const CategoryIcon = styled(Category)`
+  width: 14px;
+    & path {
+      stroke-width: 1;
+    }
+`

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

@@ -23,10 +23,13 @@ const DirectChatContentHeader = (props) => {
   const { isMobile } = useIsMobile();
 
   const togglePhonePopover = (event) => {
+    console.log(phonePopoverAnchorEl);
+    console.log(event);
     setShowPhonePopover((prevState) => !prevState);
-    setPhonePopoverAnchorEl((prevState) =>
-      prevState ? null : event.currentTarget
-    );
+    setPhonePopoverAnchorEl((prevState) => {
+      if (prevState) return null;
+      return event.target;
+    });
   };
 
   return (

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

@@ -26,6 +26,9 @@ export const DropdownTitle = styled(Typography)`
       : props.textcolor
       ? props.textcolor
       : selectedTheme.primaryText};
+  @media (max-width: 600px) {
+    font-size: 14px;
+  }
 `;
 
 export const ToggleIconOpened = styled(IconButton)`

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

@@ -0,0 +1,37 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { DrawerButton } from "../../Drawer.styled";
+import { IconButton } from "../../../../Buttons/IconButton/IconButton";
+import { AboutIcon, GrayDrawerOption } from "./AboutButton.styled";
+import history from "../../../../../store/utils/history";
+import { ABOUT_PAGE } from "../../../../../constants/pages";
+import scrollConstants from "../../../../../constants/scrollConstants";
+
+const AboutButton = (props) => {
+  const { t } = useTranslation();
+  const handleClick = () => {
+    props.toggleDrawer();
+    history.push({
+      pathname: ABOUT_PAGE,
+      state: {
+        navigation: scrollConstants.about.aboutPage,
+        clicked: true,
+      },
+    });
+  };
+  return (
+    <DrawerButton onClick={handleClick}>
+      <IconButton sx={{ borderRadius: "4px" }}>
+        <AboutIcon />
+      </IconButton>
+      <GrayDrawerOption>{t("header.about")}</GrayDrawerOption>
+    </DrawerButton>
+  );
+};
+
+AboutButton.propTypes = {
+  toggleDrawer: PropTypes.func,
+};
+
+export default AboutButton;

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

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+import { ReactComponent as About } from "../../../../../assets/images/svg/info.svg";
+import selectedTheme from "../../../../../themes";
+import { DrawerOption } from "../../Drawer.styled";
+export const AboutIcon = styled(About)`
+  width: 24px;
+  height: 24px;
+  margin-right: 9px;
+  & path {
+    stroke-width: 0;
+  }
+`;
+export const GrayDrawerOption = styled(DrawerOption)`
+  color: ${selectedTheme.primaryGrayText};
+  letter-spacing: 0.05em;
+`;

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

@@ -0,0 +1,31 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { AddOfferButtonContainer } from "./AddOfferButton.styled";
+import { useTranslation } from "react-i18next";
+import selectedTheme from "../../../../../themes";
+
+const AddOfferButton = (props) => {
+  const { t } = useTranslation();
+  const handleClick = () => {
+    props.toggleDrawer();
+    props.addOffer();
+  };
+  return (
+    <AddOfferButtonContainer
+      type="submit"
+      variant="contained"
+      buttoncolor={selectedTheme.primaryYellow}
+      textcolor="black"
+      onClick={handleClick}
+    >
+      {t("header.addOffer")}
+    </AddOfferButtonContainer>
+  );
+};
+
+AddOfferButton.propTypes = {
+  toggleDrawer: PropTypes.func,
+  addOffer: PropTypes.func,
+};
+
+export default AddOfferButton;

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

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+import { PrimaryButton } from "../../../../Buttons/PrimaryButton/PrimaryButton";
+
+export const AddOfferButtonContainer = styled(PrimaryButton)`
+  width: 165px;
+  height: 44px;
+  position: relative;
+  bottom: -5px;
+`

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

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { LOGIN_PAGE } from "../../../../../constants/pages";
+import history from "../../../../../store/utils/history";
+import { DrawerButton, DrawerOption } from "../../Drawer.styled";
+import { IconButton } from "../../../../Buttons/IconButton/IconButton";
+import { LoginIcon } from "./LoginButton.styled";
+
+const LoginButton = (props) => {
+  const { t } = useTranslation();
+  const handleClick = () => {
+    props.toggleDrawer();
+    history.push(LOGIN_PAGE);
+  };
+  return (
+    <DrawerButton onClick={handleClick}>
+      <IconButton sx={{ borderRadius: "4px" }}>
+        <LoginIcon />
+      </IconButton>
+      <DrawerOption>{t("login.headerTitle")}</DrawerOption>
+    </DrawerButton>
+  );
+};
+
+LoginButton.propTypes = {
+  toggleDrawer: PropTypes.func,
+};
+
+export default LoginButton;

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

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import { PrimaryButton } from "../../../../Buttons/PrimaryButton/PrimaryButton";
+import { ReactComponent as Login } from "../../../../../assets/images/svg/log-out.svg";
+import selectedTheme from "../../../../../themes";
+
+export const LoginButtonContainer = styled(PrimaryButton)`
+  height: 49px;
+  width: 218px;
+  font-weight: 600;
+  position: absolute;
+  bottom: 85px;
+  right: 0;
+  left: 0;
+  margin-left: auto;
+  margin-right: auto;
+`;
+export const LoginIcon = styled(Login)`
+  width: 24px;
+  height: 24px;
+  margin-right: 9px;
+  & path {
+    stroke: ${selectedTheme.primaryYellow};
+  }
+`;

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

@@ -0,0 +1,34 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  LogoutButtonContainer,
+  LogoutIcon,
+  LogoutText,
+} from "./LogoutButton.styled";
+import { IconButton } from "../../../../Buttons/IconButton/IconButton";
+import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
+import { logoutUser } from "../../../../../store/actions/login/loginActions";
+
+const LogoutButton = (props) => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+  const handleClick = () => {
+    props.toggleDrawer();
+    dispatch(logoutUser());
+  };
+  return (
+    <LogoutButtonContainer>
+      <IconButton onClick={handleClick}>
+        <LogoutIcon />
+      </IconButton>
+      <LogoutText>{t("common.logout")}</LogoutText>
+    </LogoutButtonContainer>
+  );
+};
+
+LogoutButton.propTypes = {
+  toggleDrawer: PropTypes.func,
+};
+
+export default LogoutButton;

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

@@ -0,0 +1,24 @@
+import { Box, Typography } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../../../themes";
+import {ReactComponent as Logout} from "../../../../../assets/images/svg/log-out.svg"
+
+
+export const LogoutButtonContainer = styled(Box)`
+`
+export const LogoutIcon = styled(Logout)`
+  width: 20px;
+  height: 20px;
+  & path {
+    stroke: ${selectedTheme.primaryPurple};
+  }
+`
+export const LogoutText = styled(Typography)`
+  font-weight: 600;
+  font-size: 14px;
+  color: ${selectedTheme.primaryPurple};
+  font-family: "DM Sans";
+  position: relative;
+  left: -14px;
+  top: -3px;
+`

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

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { DrawerButton, DrawerOption } from "../../Drawer.styled";
+import { IconButton } from "../../../../Buttons/IconButton/IconButton";
+import { useTranslation } from "react-i18next";
+import { MailIcon } from "./MyMessagesButton.styled";
+import history from "../../../../../store/utils/history";
+import { CHAT_PAGE } from "../../../../../constants/pages";
+
+const MyMessagesButton = (props) => {
+  const { t } = useTranslation();
+  const handleClick = () => {
+    props.toggleDrawer();
+    history.push(CHAT_PAGE);
+  };
+  return (
+    <DrawerButton onClick={handleClick}>
+      <IconButton sx={{ borderRadius: "4px" }}>
+        <MailIcon />
+      </IconButton>
+      <DrawerOption>{t("header.myMessages")}</DrawerOption>
+    </DrawerButton>
+  );
+};
+
+MyMessagesButton.propTypes = {
+  toggleDrawer: PropTypes.func,
+};
+
+export default MyMessagesButton;

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

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+import { ReactComponent as Mail } from "../../../../../assets/images/svg/mail.svg";
+import selectedTheme from "../../../../../themes";
+export const MailIcon = styled(Mail)`
+  width: 24px;
+  height: 24px;
+  margin-right: 9px;
+  & path {
+    stroke: ${selectedTheme.primaryYellow};
+  }
+`;

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

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { DrawerButton, DrawerOption } from "../../Drawer.styled";
+import { IconButton } from "../../../../Buttons/IconButton/IconButton";
+import { PackageIcon } from "./MyPostsButton.styled";
+import history from "../../../../../store/utils/history";
+import { MY_OFFERS_PAGE } from "../../../../../constants/pages";
+
+const MyPostsButton = (props) => {
+  const { t } = useTranslation();
+  const handleClick = () => {
+    props.toggleDrawer();
+    history.push(MY_OFFERS_PAGE);
+  }
+  return (
+    <DrawerButton onClick={handleClick}>
+      <IconButton sx={{ borderRadius: "4px" }}>
+        <PackageIcon />
+      </IconButton>
+      <DrawerOption>{t("header.myOffers")}</DrawerOption>
+    </DrawerButton>
+  );
+};
+
+MyPostsButton.propTypes = {
+  toggleDrawer: PropTypes.func,
+};
+
+export default MyPostsButton;

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

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { ReactComponent as Package } from "../../../../../assets/images/svg/package.svg";
+import selectedTheme from "../../../../../themes";
+
+export const PackageIcon = styled(Package)`
+  width: 24px;
+  height: 24px;
+  margin-right: 9px;
+  & path {
+    stroke: ${selectedTheme.primaryYellow};
+  }
+`;

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

@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { DrawerButton, DrawerOption } from "../../Drawer.styled";
+import { IconButton } from "../../../../Buttons/IconButton/IconButton";
+import { MyUsername, UserIcon } from "./MyProfileButton.styled";
+import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+import { selectProfileName } from "../../../../../store/selectors/profileSelectors";
+import { selectUserId } from "../../../../../store/selectors/loginSelectors";
+import history from "../../../../../store/utils/history";
+
+const MyProfileButton = (props) => {
+  const name = useSelector(selectProfileName);
+  const userId = useSelector(selectUserId);
+  const { t } = useTranslation();
+  const handleClick = () => {
+    props.toggleDrawer();
+    history.push(`/profile/${userId}`);
+  };
+  return (
+    <DrawerButton onClick={handleClick}>
+      <IconButton sx={{ borderRadius: "4px" }}>
+        <UserIcon />
+      </IconButton>
+      <DrawerOption>{t("header.myProfile")}</DrawerOption>
+      <MyUsername>({name})</MyUsername>
+    </DrawerButton>
+  );
+};
+
+MyProfileButton.propTypes = {
+  toggleDrawer: PropTypes.func,
+};
+
+export default MyProfileButton;

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

@@ -0,0 +1,22 @@
+import { Typography } from "@mui/material";
+import styled from "styled-components";
+import {ReactComponent as User} from "../../../../../assets/images/svg/user.svg"
+import selectedTheme from "../../../../../themes";
+
+export const MyUsername = styled(Typography)`
+  font-size: 12px;
+  font-family: "DM Sans";
+  color: ${selectedTheme.primaryPurple};
+  position: relative;
+  top: 12px;
+  left: 4px;
+  letter-spacing: 2%;
+`
+export const UserIcon = styled(User)`
+  width: 24px;
+  height: 24px;
+  margin-right: 9px;
+  & path {
+    stroke: ${selectedTheme.primaryYellow};
+  }
+`

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

@@ -0,0 +1,37 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { DrawerButton, DrawerOption } from "../../Drawer.styled";
+import { IconButton } from "../../../../Buttons/IconButton/IconButton";
+import { PricesIcon } from "./PricesButton.styled";
+import history from "../../../../../store/utils/history";
+import { ABOUT_PAGE } from "../../../../../constants/pages";
+import scrollConstants from "../../../../../constants/scrollConstants";
+
+const PricesButton = (props) => {
+  const { t } = useTranslation();
+  const handleClick = () => {
+    props.toggleDrawer();
+    history.push({
+      pathname: ABOUT_PAGE,
+      state: {
+        navigation: scrollConstants.about.pricesPage,
+        clicked: true,
+      },
+    });
+  };
+  return (
+    <DrawerButton onClick={handleClick}>
+      <IconButton sx={{ borderRadius: "4px" }}>
+        <PricesIcon />
+      </IconButton>
+      <DrawerOption>{t("header.prices")}</DrawerOption>
+    </DrawerButton>
+  );
+};
+
+PricesButton.propTypes = {
+  toggleDrawer: PropTypes.func,
+};
+
+export default PricesButton;

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

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+import { ReactComponent as Prices } from "../../../../../assets/images/svg/dollar.svg";
+import selectedTheme from "../../../../../themes";
+
+export const PricesIcon = styled(Prices)`
+  width: 24px;
+  height: 24px;
+  margin-right: 9px;
+  & path {
+    stroke-width: 0;
+    stroke: ${selectedTheme.primaryYellow};
+  }
+`;

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

@@ -0,0 +1,39 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { DrawerButton } from "../../Drawer.styled";
+import { IconButton } from "../../../../Buttons/IconButton/IconButton";
+import {
+  GrayDrawerOption,
+  PrivacyPolicyIcon,
+} from "./PrivacyPolicyButton.styled";
+import { ABOUT_PAGE } from "../../../../../constants/pages";
+import scrollConstants from "../../../../../constants/scrollConstants";
+
+const PrivacyPolicyButton = (props) => {
+  const { t } = useTranslation();
+  const handleClick = () => {
+    props.toggleDrawer();
+    history.push({
+      pathname: ABOUT_PAGE,
+      state: {
+        navigation: scrollConstants.about.privacyPolicyPage,
+        clicked: true,
+      },
+    });
+  };
+  return (
+    <DrawerButton onClick={handleClick}>
+      <IconButton sx={{ borderRadius: "4px" }}>
+        <PrivacyPolicyIcon />
+      </IconButton>
+      <GrayDrawerOption>{t("header.privacy")}</GrayDrawerOption>
+    </DrawerButton>
+  );
+};
+
+PrivacyPolicyButton.propTypes = {
+  toggleDrawer: PropTypes.func,
+};
+
+export default PrivacyPolicyButton;

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

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+import selectedTheme from "../../../../../themes";
+import { DrawerOption } from "../../Drawer.styled";
+import { ReactComponent as BuildingShield } from "../../../../../assets/images/svg/building-shield.svg";
+
+export const GrayDrawerOption = styled(DrawerOption)`
+  color: ${selectedTheme.primaryGrayText};
+  letter-spacing: 0.05em;
+`;
+export const PrivacyPolicyIcon = styled(BuildingShield)`
+  width: 24px;
+  height: 24px;
+  margin-right: 9px;
+  & path {
+    stroke-width: 0;
+  }
+`;

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

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import history from "../../../../../store/utils/history";
+import { REGISTER_PAGE } from "../../../../../constants/pages";
+import { DrawerButton, DrawerOption } from "../../Drawer.styled";
+import { IconButton } from "../../../../Buttons/IconButton/IconButton";
+import { RegisterIcon } from "./RegisterButton.styled";
+
+const RegisterButton = (props) => {
+  const { t } = useTranslation();
+  const handleClick = () => {
+    props.toggleDrawer();
+    history.push(REGISTER_PAGE);
+  };
+  return (
+    <DrawerButton onClick={handleClick}>
+      <IconButton sx={{ borderRadius: "4px" }}>
+        <RegisterIcon />
+      </IconButton>
+      <DrawerOption>{t("register.headerTitle")}</DrawerOption>
+    </DrawerButton>
+  );
+};
+
+RegisterButton.propTypes = {
+  toggleDrawer: PropTypes.func,
+};
+
+export default RegisterButton;

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

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import { PrimaryButton } from "../../../../Buttons/PrimaryButton/PrimaryButton";
+import { ReactComponent as Register } from "../../../../../assets/images/svg/register.svg";
+import selectedTheme from "../../../../../themes";
+
+export const RegisterButtonContainer = styled(PrimaryButton)`
+  height: 49px;
+  width: 218px;
+  font-weight: 600;
+  position: absolute;
+  bottom: 40px;
+  right: 0;
+  left: 0;
+  margin-left: auto;
+  margin-right: auto;
+`;
+export const RegisterIcon = styled(Register)`
+  width: 24px;
+  height: 24px;
+  margin-right: 9px;
+  & path {
+    stroke: ${selectedTheme.primaryYellow};
+  }
+`;

src/components/Header/Drawer/Drawer.js

@@ -1,142 +1,68 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {
-  AddOfferButton,
-  AuthButtonsDrawerContainer,
   CloseButton,
   CloseIcon,
-  DrawerButton,
   DrawerContainer,
-  DrawerOption,
   FooterButtons,
   HeaderTitle,
-  LoginButton,
-  LogoutButton,
-  LogoutIcon,
-  LogoutText,
-  MailIcon,
-  MyUsername,
-  PackageIcon,
-  RegisterButton,
+  Separator,
   ToolsContainer,
-  UserIcon,
 } from "./Drawer.styled";
-import { useDispatch, useSelector } from "react-redux";
-import { selectUserId } from "../../../store/selectors/loginSelectors";
-import selectedTheme from "../../../themes";
-import { IconButton } from "../../Buttons/IconButton/IconButton";
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
-import { CHAT_PAGE, LOGIN_PAGE, MY_OFFERS_PAGE, REGISTER_PAGE } from "../../../constants/pages";
-import { selectProfileName } from "../../../store/selectors/profileSelectors";
-import { logoutUser } from "../../../store/actions/login/loginActions";
+import LogoutButton from "./Buttons/LogoutButton/LogoutButton";
+import MyProfileButton from "./Buttons/MyProfileButton/MyProfileButton";
+import MyMessagesButton from "./Buttons/MyMessagesButton/MyMessagesButton";
+import MyPostsButton from "./Buttons/MyPostsButton/MyPostsButton";
+import LoginButton from "./Buttons/LoginButton/LoginButton";
+import RegisterButton from "./Buttons/RegisterButton/RegisterButton";
+import AddOfferButton from "./Buttons/AddOfferButton/AddOfferButton";
+import PricesButton from "./Buttons/PricesButton/PricesButton";
+import AboutButton from "./Buttons/AboutButton/AboutButton";
+import PrivacyPolicyButton from "./Buttons/PrivacyPolicyButton/PrivacyPolicyButton";
+import { useSelector } from "react-redux";
+import { selectUserId } from "../../../store/selectors/loginSelectors";
 
 export const Drawer = (props) => {
-  const user = useSelector(selectUserId);
   const { t } = useTranslation();
-  const history = useHistory();
-  const name = useSelector(selectProfileName);
-  const dispatch = useDispatch();
+  const user = useSelector(selectUserId);
 
-  const goToMyPosts = () => {
-    props.toggleDrawer();
-    history.push(MY_OFFERS_PAGE);
-  };
-  const goToMyMessages = () => {
-    props.toggleDrawer();
-    history.push(CHAT_PAGE);
-  };
-  const goToMyProfile = () => {
-    props.toggleDrawer();
-    history.push(`/profile/${user}`)
-  };
-  const goToRegister = () => {
-    props.toggleDrawer();
-    history.push(REGISTER_PAGE);
-  };
-  const goToLogin = () => {
-    props.toggleDrawer();
-    history.push(LOGIN_PAGE);
-  };
-  const handleAddOffer = () => {
-    props.toggleDrawer();
-    props.addOffer();
-  }
-  const logout = () => {
-    props.toggleDrawer();
-    dispatch(logoutUser());
-  };
   return (
     <DrawerContainer>
       <CloseButton onClick={props.toggleDrawer}>
         <CloseIcon />
       </CloseButton>
-      {user ? (
-        <React.Fragment>
-          <HeaderTitle>{t("header.navMenu")}</HeaderTitle>
-          <ToolsContainer mobile>
-            <DrawerButton onClick={goToMyPosts}>
-              <IconButton sx={{ borderRadius: "4px" }}>
-                <PackageIcon />
-              </IconButton>
-              <DrawerOption>{t("header.myOffers")}</DrawerOption>
-            </DrawerButton>
-            <DrawerButton onClick={goToMyMessages} >
-              <IconButton sx={{ borderRadius: "4px" }}>
-                <MailIcon />
-              </IconButton>
-              <DrawerOption>{t("header.myMessages")}</DrawerOption>
-            </DrawerButton>
-            <DrawerButton onClick={goToMyProfile} >
-              <IconButton sx={{ borderRadius: "4px" }}>
-                <UserIcon />
-              </IconButton>
-              <DrawerOption>{t("header.myProfile")}</DrawerOption>
-              <MyUsername>({name})</MyUsername>
-            </DrawerButton>
-          </ToolsContainer>
+      <HeaderTitle>{t("header.navMenu")}</HeaderTitle>
+      <React.Fragment>
+        <ToolsContainer mobile>
+          {user ? (
+            <>
+              <MyPostsButton toggleDrawer={props.toggleDrawer} />
+              <MyMessagesButton toggleDrawer={props.toggleDrawer} />
+              <MyProfileButton toggleDrawer={props.toggleDrawer} />
+              <Separator />
+              <PricesButton toggleDrawer={props.toggleDrawer} />
+              <AboutButton toggleDrawer={props.toggleDrawer} />
+              <PrivacyPolicyButton toggleDrawer={props.toggleDrawer} />
+              <Separator />
+            </>
+          ) : (
+            <>
+              <LoginButton toggleDrawer={props.toggleDrawer} />
+              <RegisterButton toggleDrawer={props.toggleDrawer} />
+            </>
+          )}
+        </ToolsContainer>
+        {user && (
           <FooterButtons>
             <AddOfferButton
-              type="submit"
-              variant="contained"
-              buttoncolor={selectedTheme.primaryYellow}
-              textcolor="black"
-              onClick={handleAddOffer}
-            >
-              {t("header.addOffer")}
-            </AddOfferButton>
-            <LogoutButton>
-              <IconButton onClick={logout}>
-                <LogoutIcon />
-              </IconButton>
-              <LogoutText>{t("common.logout")}</LogoutText>
-            </LogoutButton>
+              toggleDrawer={props.toggleDrawer}
+              addOffer={props.addOffer}
+            />
+            <LogoutButton toggleDrawer={props.toggleDrawer} />
           </FooterButtons>
-        </React.Fragment>
-      ) : (
-        <AuthButtonsDrawerContainer>
-          <RegisterButton
-            type="submit"
-            variant="contained"
-            height="36px"
-            buttoncolor={selectedTheme.primaryYellow}
-            textcolor={selectedTheme.primaryDarkText}
-            onClick={goToRegister}
-          >
-            {t("register.headerTitle")}
-          </RegisterButton>
-          <LoginButton
-            type="submit"
-            variant="contained"
-            height="36px"
-            buttoncolor={selectedTheme.primaryPurple}
-            textcolor={selectedTheme.primaryIconBackgroundColor}
-            onClick={goToLogin}
-          >
-            {t("login.headerTitle")}
-          </LoginButton>
-        </AuthButtonsDrawerContainer>
-      )}
+        )}
+      </React.Fragment>
     </DrawerContainer>
   );
 };

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

@@ -1,22 +1,17 @@
 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
-import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
-import IconButton from "../../IconButton/IconButton";
-import {ReactComponent as Close} from "../../../assets/images/svg/close-modal.svg"
+import { ReactComponent as Close } from "../../../assets/images/svg/close-modal.svg";
 import selectedTheme from "../../../themes";
-import {ReactComponent as User} from "../../../assets/images/svg/user.svg"
-import {ReactComponent as Mail} from "../../../assets/images/svg/mail.svg"
-import {ReactComponent as Package} from "../../../assets/images/svg/package.svg"
-import {ReactComponent as Logout} from "../../../assets/images/svg/log-out.svg"
-
+import { IconButton } from "../../Buttons/IconButton/IconButton";
 
 export const DrawerContainer = styled(Box)`
   width: 100vw;
   position: relative;
   height: 100%;
-`
+`;
 export const ToolsContainer = styled(Box)`
   display: flex;
+  width: calc(100% - 72px);
   flex-direction: column;
   justify-content: ${(props) => (props.mobile ? "center" : "space-between")};
   align-items: ${(props) => (props.mobile ? "start" : "center")};
@@ -35,80 +30,32 @@ export const AuthButtonsDrawerContainer = styled(Box)`
   height: 100%;
   width: 100%;
 `;
-export const LoginButton = styled(PrimaryButton)`
-  height: 49px;
-  width: 218px;
-  font-weight: 600;
-  position: absolute;
-  bottom: 85px;
-  right: 0;
-  left: 0;
-  margin-left: auto;
-  margin-right: auto;
-`;
-export const RegisterButton = styled(PrimaryButton)`
-  height: 49px;
-  width: 218px;
-  font-weight: 600;
-  position: absolute;
-  bottom: 40px;
-  right: 0;
-  left: 0;
-  margin-left: auto;
-  margin-right: auto;
-`;
+
 export const CloseButton = styled(IconButton)`
   position: absolute;
   top: 40px;
   right: 36px;
-`
+  z-index: 1000;
+`;
 export const CloseIcon = styled(Close)`
   color: ${selectedTheme.primaryYellow};
   width: 16px;
   height: 16px;
-`
+`;
 export const DrawerOption = styled(Typography)`
   font-weight: 600;
   font-family: "DM Sans";
+  letter-spacing: 0.05em;
   color: ${selectedTheme.primaryPurple};
   font-size: 18px;
   position: relative;
   top: 4px;
-`
+`;
 export const DrawerButton = styled(Box)`
   display: flex;
   flex-direction: row;
-`
-export const UserIcon = styled(User)`
-  width: 24px;
-  height: 24px;
-  margin-right: 9px;
-  & path {
-    stroke: ${selectedTheme.primaryYellow};
-  }
-`
-export const MailIcon = styled(Mail)`
-  width: 24px;
-  height: 24px;
-  margin-right: 9px;
-  & path {
-    stroke: ${selectedTheme.primaryYellow};
-  }
-`
-export const PackageIcon = styled(Package)`
-  width: 24px;
-  height: 24px;
-  margin-right: 9px;
-  & path {
-    stroke: ${selectedTheme.primaryYellow};
-  }
-`
-export const AddOfferButton = styled(PrimaryButton)`
-  width: 165px;
-  height: 44px;
-  position: relative;
-  bottom: -5px;
-`
+`;
+
 export const FooterButtons = styled(Box)`
   position: absolute;
   bottom: 36px;
@@ -116,25 +63,8 @@ export const FooterButtons = styled(Box)`
   flex-direction: row;
   width: 100vw;
   justify-content: space-around;
-`
-export const LogoutButton = styled(Box)`
-`
-export const LogoutIcon = styled(Logout)`
-  width: 20px;
-  height: 20px;
-  & path {
-    stroke: ${selectedTheme.primaryPurple};
-  }
-`
-export const LogoutText = styled(Typography)`
-  font-weight: 600;
-  font-size: 14px;
-  color: ${selectedTheme.primaryPurple};
-  font-family: "DM Sans";
-  position: relative;
-  left: -14px;
-  top: -3px;
-`
+`;
+
 export const HeaderTitle = styled(Typography)`
   font-weight: 700;
   font-family: "DM Sans";
@@ -143,14 +73,9 @@ export const HeaderTitle = styled(Typography)`
   position: absolute;
   top: 36px;
   left: 36px;
-`
-export const MyUsername = styled(Typography)`
-  font-size: 12px;
-  font-family: "DM Sans";
-  color: ${selectedTheme.primaryPurple};
-  position: relative;
-  top: 12px;
-  left: 4px;
-  letter-spacing: 2%;
-`
-
+`;
+export const Separator = styled(Box)`
+  border-bottom: 1px solid ${selectedTheme.primaryPurpleDisabled};
+  opacity: 0.12;
+  width: 100%;
+`;

src/components/Header/Header.js

@@ -224,9 +224,9 @@ const Header = () => {
       <AppBar
         elevation={0}
         position="fixed"
-        sx={{ backgroundColor: "white", zIndex: "80" }}
+        sx={{ backgroundColor: "white", zIndex: "80", height: "72px" }}
       >
-        <Toolbar>
+        <Toolbar sx={{p: "15px"}}>
           <ToolsContainer>
             <LogoContainer onClick={() => handleLogoClick()}>
               <LogoHorizontal />
@@ -283,7 +283,7 @@ const Header = () => {
                           variant="contained"
                           fullWidth
                           buttoncolor={selectedTheme.primaryYellow}
-                          textcolor={selectedTheme.primaryDarkText}
+                          textcolor={selectedTheme.yellowButtonTextColor}
                           onClick={() => {
                             setUserPopoverOpen(false);
                             setUserAnchorEl(null);
@@ -356,7 +356,7 @@ const Header = () => {
                       variant="contained"
                       fullWidth
                       buttoncolor={selectedTheme.primaryPurple}
-                      textcolor={selectedTheme.offerBackgroundColor}
+                      textcolor="white"
                       onClick={handleNavigateLogin}
                     >
                       {t("login.headerTitle")}
@@ -366,7 +366,7 @@ const Header = () => {
                       variant="contained"
                       fullWidth
                       buttoncolor={selectedTheme.primaryYellow}
-                      textcolor={selectedTheme.primaryDarkText}
+                      textcolor={selectedTheme.yellowButtonTextColor}
                       onClick={handleNavigateRegister}
                     >
                       {t("register.headerTitle")}

src/components/Header/Header.styled.js

@@ -52,20 +52,26 @@ export const LogoContainer = styled(Box)`
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  @media (min-width: 800px) {
+    position: relative;
+    left: 15px;
+  }
 `;
 export const ToolsButtonsContainer = styled(Box)`
   display: flex;
-  flex: ${props => props.shrink ? "none" : "4"};;
-  justify-content: space-between;
-  min-width: ${(props) => (props.mobile ? "40px" : props.shrink ? "0" : "600px")};
+  flex: ${(props) => (props.shrink ? "none" : "4")};
+  justify-content: flex-end;
+  gap: 2.5rem;
+  min-width: ${(props) =>
+    props.mobile ? "40px" : props.shrink ? "0" : "600px"};
   max-width: 600px;
   align-items: center;
   flex-wrap: nowrap;
   @media (max-width: 1400px) {
-    min-width: ${props => props.shrink ? "0" : "450px"};
+    min-width: ${(props) => (props.shrink ? "0" : "450px")};
   }
   @media (max-width: 1200px) {
-    min-width: ${props => props.shrink ? "0" : "400px"};
+    min-width: ${(props) => (props.shrink ? "0" : "400px")};
   }
   @media (max-width: 900px) {
     flex: 0.35;
@@ -179,7 +185,7 @@ export const SearchInputMobile = styled(SearchInput)`
     height: 46px;
     left: -5px;
     font-family: "DM Sans";
-    ${props => !props.shouldShow && `display: none;`}
+    ${(props) => !props.shouldShow && `display: none;`}
     & div {
       background-color: white;
       height: 40px;
@@ -195,6 +201,4 @@ export const SearchInputMobile = styled(SearchInput)`
   }
 `;
 export const HeaderContainer = styled(Box)``;
-export const SwapsIcon = styled(Swaps)`
-
-`
+export const SwapsIcon = styled(Swaps)``;

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

@@ -4,6 +4,7 @@ import selectedTheme from "../../../themes";
 
 export const IconWithNumberContainer = styled(Box)`
     position: relative;
+    padding-top: 3px;
 `
 export const Number = styled(Box)`
     background-color: ${selectedTheme.primaryPurple};

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

@@ -12,11 +12,12 @@ export const ButtonContainer = styled(Link)`
   justify-content: start;
   align-items: center;
   gap: 12px;
+  text-decoration: none;
 `;
 export const HeaderText = styled(Typography)`
   font-family: "DM Sans";
   line-height: 22px;
   font-size: 16px;
   color: ${selectedTheme.primaryPurple};
-  text-decoration: underline;
+  border-bottom: 1px dotted ${selectedTheme.primaryPurple};
 `;

src/components/ItemDetails/ItemDetails.styled.js

@@ -1,5 +1,6 @@
 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
+import selectedTheme from "../../themes";
 
 export const ItemDetailsContainer = styled(Box)``;
 
@@ -24,6 +25,7 @@ export const OfferIconContainer = styled(Box)`
 
 export const OfferIconText = styled(Typography)`
   font-family: "DM Sans";
+  color: ${selectedTheme.primaryDarkTextThird};
   font-size: 16px;
   margin-left: 7.2px;
 

src/components/MarketPlace/Header/Header.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import {
   CategoryHeaderIcon,
@@ -37,6 +37,14 @@ const Header = (props) => {
   const headerString = useSelector(selectHeaderString);
   // Changing header string on refresh or on load
 
+  const showAltString = useMemo(() => {
+    return (
+      sorting.selectedSortOption === sortEnum.INITIAL ||
+      sorting.selectedSortOption === sortEnum.NEW ||
+      !sorting.selectedSortOption
+    );
+  }, [sorting.selectedSortOption]);
+
   const handleChangeSelect = (event) => {
     // let chosenOption;
     sorting.changeSorting(event.target.value);
@@ -61,19 +69,11 @@ const Header = (props) => {
             {!props.myOffers ? (
               <>
                 <CategoryHeaderIcon />
-                {headerString === "Sve kategorije" &&
-                (sorting.selectedSortOption === sortEnum.INITIAL ||
-                  sorting.selectedSortOption === sortEnum.NEW) ? (
-                  <React.Fragment>
-                    <HeaderLocation initial>{headerString}</HeaderLocation>
-                    <HeaderAltLocation>
-                      {t("header.newOffers")}
-                    </HeaderAltLocation>
-                  </React.Fragment>
-                ) : (
-                  <>
-                    <HeaderLocation>{headerString}</HeaderLocation>
-                  </>
+                <HeaderLocation initial={showAltString}>
+                  {headerString}
+                </HeaderLocation>
+                {showAltString && (
+                  <HeaderAltLocation>{t("header.newOffers")}</HeaderAltLocation>
                 )}
               </>
             ) : (

src/components/MarketPlace/Offers/HeaderMyOffers.js/HeadersMyOffers.styled.js

@@ -26,6 +26,7 @@ export const SearchIcon = styled(Search)`
 export const SearchInput = styled(TextField)`
   & div {
     height: 40px;
+    background-color: white;
   }
   @media (max-width: 600px) {
     width: 90%;

src/components/MarketPlace/Offers/Offers.styled.js

@@ -16,7 +16,7 @@ export const OffersContainer = styled(Box)`
 `;
 export const FilterContainer = styled(IconWithNumber)`
   position: absolute;
-  top: ${props => props.myOffers ? "126px" : "93px"};
+  top: ${props => props.myOffers ? "143px" : "93px"};
   right: 18px;
   cursor: pointer;
   background-color: ${selectedTheme.primaryBackgroundColor} !important;

src/components/Popovers/MyPosts/MyPosts.js

@@ -19,8 +19,8 @@ import PropTypes from "prop-types";
 import HeaderPopover from "../HeaderPopover/HeaderPopover";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
-import { selectMineOffers } from "../../../store/selectors/offersSelectors";
-import { fetchMineOffers } from "../../../store/actions/offers/offersActions";
+import { selectMineHeaderOffers } from "../../../store/selectors/offersSelectors";
+import { fetchMineHeaderOffers } from "../../../store/actions/offers/offersActions";
 import { selectProfileName } from "../../../store/selectors/profileSelectors";
 import { useHistory } from "react-router-dom";
 import { MY_OFFERS_PAGE } from "../../../constants/pages";
@@ -29,12 +29,12 @@ import { useMemo } from "react";
 export const MyPosts = (props) => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
-  const mineOffers = useSelector(selectMineOffers);
+  const mineOffers = useSelector(selectMineHeaderOffers);
   const name = useSelector(selectProfileName);
   const history = useHistory();
   const [arrayOfMineOffers, setArrayOfMineOffers] = useState([]);
   useEffect(() => {
-    dispatch(fetchMineOffers());
+    dispatch(fetchMineHeaderOffers());
   }, []);
   useEffect(() => {
     if (mineOffers.length > 1) {

src/components/Profile/Header/Header.styled.js

@@ -16,11 +16,12 @@ export const ButtonContainer = styled(Link)`
   justify-content: start;
   align-items: center;
   gap: 12px;
+  text-decoration: none;
 `;
 export const HeaderText = styled(Typography)`
   font-family: "DM Sans";
   line-height: 22px;
   font-size: 16px;
   color: ${selectedTheme.primaryPurple};
-  text-decoration: underline;
+  border: 1px dotted ${selectedTheme.primaryPurple};
 `;

src/components/ProfileMini/ProfileMini.styled.js

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import { Box } from "@mui/system";
 import { Typography } from "@mui/material";
+import selectedTheme from "../../themes";
 
 export const ProfileHeader = styled(Box)`
   margin-top: 60px;
@@ -25,6 +26,8 @@ export const ProfileHeaderIconContainer = styled(Box)`
 export const ProfileHeaderText = styled(Typography)`
   font-family: "DM Sans";
   font-size: 16px;
+
+  color: ${selectedTheme.primaryDarkTextThird};
   margin-left: 7.2px;
 
   @media screen and (max-width: 600px) {

src/components/StepProgress/StepProgress.js

@@ -39,12 +39,13 @@ const StepProgress = (props) => {
           </StepBar>
         ) : (
           <React.Fragment key={index}>
-            <StepLine done={item.done || item.current}>
+            <StepLine done={item.done || item.current} lineColor={props.lineColor}>
               <Progress done={item.done || item.current} />
             </StepLine>
             <StepBar
               current={item.current}
               done={item.done}
+              lineColor={props.lineColor}
               onClick={item.done ? props.functions[index] : () => {}}
             >
               {item.done ? <Checkmark /> : index + 1}
@@ -62,9 +63,11 @@ StepProgress.propTypes = {
   current: PropTypes.number,
   numberOfSteps: PropTypes.number,
   functions: PropTypes.array,
+  lineColor: PropTypes.string,
 };
 StepProgress.defaultProps = {
   functions: [],
+  lineColor: "white"
 };
 
 export default StepProgress;

src/components/StepProgress/StepProgress.styled.js

@@ -17,7 +17,7 @@ export const StepProgressContainer = styled(Box)`
 
 export const StepLine = styled(Box)`
   margin-top: 13px;
-  background-color: white;
+  background-color: ${props => props.lineColor};
   width: 100%;
   margin-left: -1px;
   height: 9px;
@@ -34,7 +34,7 @@ export const StepBar = styled(Box)`
   text-align: center;
   border: 5px solid
     ${(props) =>
-      props.current || props.done ? selectedTheme.primaryPurple : "white"};
+      props.current || props.done ? selectedTheme.primaryPurple : props.lineColor};
   padding-top: 2px;
   line-height: 19px;
   margin-left: -2px;

src/components/UserReviews/UserReviews.styled.js

@@ -42,6 +42,7 @@ export const ReviewsHeader = styled(Grid)`
 
 export const ReviewsTitle = styled(Typography)`
   font-family: "DM Sans";
+  color: ${selectedTheme.primaryDarkTextThird};
   font-size: 16px;
   @media (max-width: 600px) {
     font-size: 12px;
@@ -142,7 +143,6 @@ export const ReviewSortDescription = styled(Typography)`
   font-size: 16px;
   font-family: "DM Sans";
   color: ${selectedTheme.primaryDarkTextThird};
-
 `;
 export const ReviewSortOption = styled(Typography)`
   font-family: "DM Sans";
@@ -162,9 +162,8 @@ export const ReviewSortContainer = styled(Box)`
   gap: 4px;
   position: relative;
   top: 4px;
-`
+`;
 export const ReviewSortOptionContainer = styled(Box)`
   cursor: pointer;
-`
-export const ReviewsHeaderTitle = styled(Box)`
-`
+`;
+export const ReviewsHeaderTitle = styled(Box)``;

src/i18n/resources/rs.js

@@ -186,9 +186,9 @@ export default {
     navMenu: "Navigacioni Meni",
     noItems: "Trenutno nema ni jedne stavke...",
     logout: "Odjavite se",
-    about: "O TRAMPI",
-    prices: "CENOVNIK",
-    privacy: "POLITIKA PRIVATNOSTI",
+    about: "O trampi",
+    prices: "Cenovnik",
+    privacy: "Politika privatnosti",
   },
   reviews: {
     title: "Ova kompanija još uvek nema ocenu.",

src/index.css

@@ -1,13 +1,3 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+.ToastBody * {
+  font-family: "DM Sans";
+}

src/index.js

@@ -4,6 +4,7 @@ import { Provider } from "react-redux";
 import { HelmetProvider } from "react-helmet-async";
 
 import "./main.scss";
+import "./index.css";
 import App from "./App";
 import { store, persistor } from "./store";
 

src/layouts/ChatGridLayout/ChatGridLayout.styled.js

@@ -9,7 +9,7 @@ export const ChatGridLayoutContainer = styled(Container)`
     margin-right: 0;
     max-width: 100%;
     @media (max-width: 600px) {
-        margin-top: 60px;
+        margin-top: 80px;
     }
 `;
 export const GridContainer = styled(Grid)`

src/layouts/ChatLayout/ChatLayout.js

@@ -9,7 +9,6 @@ export const ChatLayout = (props) => {
 
       <ChatContent
         maxHeight="xl"
-        spacing={2}
         justifyContent={"center"}
         item
         xs={12}

src/layouts/MainLayout/MainLayout.styled.js

@@ -11,6 +11,9 @@ export const MainLayoutContainer = styled(Container)`
     flex: 1;
     height: 100%;
     margin-top: 80px;
+    @media (max-width: 600px) {
+        margin-top: 100px;
+    }
 `
 
 export const LeftCard = styled(Grid)`

src/pages/Chat/Chat.styled.js

@@ -13,4 +13,7 @@ export const ChatPageContainer = styled(Container)`
   flex: 1;
   display: flex;
   flex-direction: column;
+  @media (max-width: 600px) {
+    margin-top: 100px;
+  }
 `;

src/pages/ChatMessages/ChatMessages.styled.js

@@ -11,4 +11,7 @@ export const ChatMessagesPageContainer = styled(Container)`
   max-width: none;
   flex: 1;
   display: flex;
+  @media (max-width: 600px) {
+    margin-top: 80px;
+  }
 `;

src/pages/ItemDetailsPage/ItemDetailsPage.styled.js

@@ -14,7 +14,7 @@ export const ItemDetailsPageContainer = styled(Container)`
   background-color: ${selectedTheme.offerBackgroundColor};
 
   @media screen and (max-width: 600px) {
-    margin-top: 55px;
+    margin-top: 65px;
   }
 `;
 export const GridStyled = styled(Grid)``;

src/pages/ItemDetailsPage/ItemDetailsPageMUI.js

@@ -4,7 +4,10 @@ import { ItemDetailsPageContainer } from "./ItemDetailsPage.styled";
 import { useDispatch, useSelector } from "react-redux";
 import ItemDetails from "../../components/ItemDetails/ItemDetails";
 import ItemDetailsLayout from "../../layouts/ItemDetailsLayout/ItemDetailsLayout";
-import { clearSelectedOffer, fetchOneOffer } from "../../store/actions/offers/offersActions";
+import {
+  clearSelectedOffer,
+  fetchOneOffer,
+} from "../../store/actions/offers/offersActions";
 import UserReviews from "../../components/UserReviews/UserReviews";
 import { selectOffer } from "../../store/selectors/offersSelectors";
 import ProfileMini from "../../components/ProfileMini/ProfileMini";

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

@@ -15,7 +15,7 @@ export const RegisterPageContainer = styled(Container)`
   position: relative;
   /* position: relative; */
   transition: 1s all;
-  margin-bottom: 60px;
+  margin-bottom: 84px;
   ${(props) => props.currentstep === 3 && `margin-top: 40px;`};
   @media (max-height: 900px) {
     margin-top: 60px;
@@ -78,6 +78,7 @@ export const LoginTextContainer = styled(Box)`
   display: flex;
   flex-direction: row;
   margin-top: 36px;
+  margin-bottom: 12px;
   justify-content: center;
   @media (max-height: 800px) {
     margin-top: 26px;

src/store/actions/offers/offersActionConstants.js

@@ -25,14 +25,21 @@ export const OFFERS_ALL_ERROR = createErrorType(OFFERS_ALL_SCOPE);
 
 export const OFFERS_MORE_SCOPE = "OFFERS_MORE_SCOPE";
 export const OFFERS_FETCH_MORE = createFetchType(OFFERS_MORE_SCOPE);
-export const OFFERS_FETCH_MORE_SUCCESS = createSuccessType(OFFERS_MORE_SCOPE)
-export const OFFERS_FETCH_MORE_ERROR = createErrorType(OFFERS_MORE_SCOPE)
+export const OFFERS_FETCH_MORE_SUCCESS = createSuccessType(OFFERS_MORE_SCOPE);
+export const OFFERS_FETCH_MORE_ERROR = createErrorType(OFFERS_MORE_SCOPE);
 
 export const OFFERS_MINE_SCOPE = "OFFERS_MINE_SCOPE";
 export const OFFERS_MINE_FETCH = createFetchType(OFFERS_MINE_SCOPE);
 export const OFFERS_MINE_FETCH_SUCCESS = createSuccessType(OFFERS_MINE_SCOPE);
 export const OFFERS_MINE_FETCH_ERROR = createErrorType(OFFERS_MINE_SCOPE);
 
+export const OFFERS_MINE_HEADER_SCOPE = "OFFERS_MINE_HEADER_SCOPE";
+export const OFFERS_MINE_HEADER_FETCH = createFetchType(OFFERS_MINE_HEADER_SCOPE);
+export const OFFERS_MINE_HEADER_FETCH_SUCCESS =
+  createSuccessType(OFFERS_MINE_HEADER_SCOPE);
+export const OFFERS_MINE_HEADER_FETCH_ERROR =
+  createErrorType(OFFERS_MINE_HEADER_SCOPE);
+
 export const OFFERS_PROFILE_SCOPE = "OFFERS_PROFILE_SCOPE";
 export const OFFERS_PROFILE_FETCH = createFetchType(OFFERS_PROFILE_SCOPE);
 export const OFFERS_PROFILE_SUCCESS = createSuccessType(OFFERS_PROFILE_SCOPE);
@@ -46,6 +53,7 @@ export const ONE_OFFER_ERROR = createErrorType(ONE_OFFER_SCOPE);
 export const OFFERS_PINNED_SET = createSetType("OFFERS_PINNED_SET");
 export const OFFERS_PINNED_ADD = createSetType("OFFERS_PINNED_ADD");
 export const OFFERS_SET = createSetType("OFFERS_SET");
+export const OFFERS_HEADER_SET = createSetType("OFFERS_HEADER_SET");
 export const OFFERS_FEATURED_SET = createSetType("OFFERS_FEATURED_SET");
 export const OFFER_SET = createSetType("OFFER_SET");
 export const OFFERS_ADD = createSetType("OFFERS_ADD");
@@ -57,7 +65,7 @@ export const OFFER_INDEX_SET = createSetType("OFFER_INDEX_SET");
 export const OFFER_INDEX_CLEAR = createClearType("OFFER_INDEX_CLEAR");
 export const OFFER_PAGE_SET = createSetType("OFFER_PAGE_SET");
 export const OFFER_FEATURED_PAGE_SET = createSetType("OFFER_FEATURED_PAGE_SET");
-export const OFFER_SELECTED_CLEAR = createClearType("OFFER_SELECTED_CLEAR")
+export const OFFER_SELECTED_CLEAR = createClearType("OFFER_SELECTED_CLEAR");
 
 export const OFFER_ADD_SCOPE = "OFFER_ADD_SCOPE";
 export const OFFER_ADD = createFetchType(OFFER_ADD_SCOPE);

src/store/actions/offers/offersActions.js

@@ -11,9 +11,13 @@ import {
   OFFERS_FETCH_MORE,
   OFFERS_FETCH_MORE_ERROR,
   OFFERS_FETCH_MORE_SUCCESS,
+  OFFERS_HEADER_SET,
   OFFERS_MINE_FETCH,
   OFFERS_MINE_FETCH_ERROR,
   OFFERS_MINE_FETCH_SUCCESS,
+  OFFERS_MINE_HEADER_FETCH,
+  OFFERS_MINE_HEADER_FETCH_ERROR,
+  OFFERS_MINE_HEADER_FETCH_SUCCESS,
   OFFERS_MINE_SET,
   OFFERS_NO_MORE,
   OFFERS_PINNED_ADD,
@@ -114,6 +118,17 @@ export const fetchMineOffersError = () => ({
   type: OFFERS_MINE_FETCH_ERROR,
 });
 
+// Fetch header offers
+export const fetchMineHeaderOffers = () => ({
+  type: OFFERS_MINE_HEADER_FETCH,
+});
+export const fetchMineHeaderOffersSuccess = () => ({
+  type: OFFERS_MINE_HEADER_FETCH_SUCCESS,
+});
+export const fetchMineHeaderOffersError = () => ({
+  type: OFFERS_MINE_HEADER_FETCH_ERROR,
+});
+
 // Fetch profile offers
 export const fetchProfileOffers = (payload) => ({
   type: OFFERS_PROFILE_FETCH,
@@ -161,8 +176,8 @@ export const removeOfferSuccess = () => ({
   type: OFFER_REMOVE_SUCCESS,
 });
 export const removeOfferError = () => ({
-  type: OFFER_REMOVE_ERROR
-})
+  type: OFFER_REMOVE_ERROR,
+});
 
 // Edit offer
 export const editOneOffer = (payload) => ({
@@ -173,10 +188,8 @@ export const editOfferSuccess = () => ({
   type: OFFER_EDIT_SUCCESS,
 });
 export const editOfferError = () => ({
-    type: OFFER_EDIT_ERROR
-})
-
-
+  type: OFFER_EDIT_ERROR,
+});
 
 export const setOffers = (payload) => ({
   type: OFFERS_SET,
@@ -203,6 +216,10 @@ export const setTotalOffers = (payload) => ({
   type: OFFERS_SET_TOTAL,
   payload,
 });
+export const setMineHeaderOffers = (payload) => ({
+  type: OFFERS_HEADER_SET,
+  payload,
+});
 export const setMineOffers = (payload) => ({
   type: OFFERS_MINE_SET,
   payload,
@@ -217,16 +234,16 @@ export const setOffer = (payload) => ({
 });
 export const setFeaturedOffers = (payload) => ({
   type: OFFERS_FEATURED_SET,
-  payload
-})
+  payload,
+});
 export const setOfferPage = (payload) => ({
   type: OFFER_PAGE_SET,
-  payload
-})
+  payload,
+});
 export const setFeaturedOfferPage = (payload) => ({
   type: OFFER_FEATURED_PAGE_SET,
-  payload
-})
+  payload,
+});
 export const clearSelectedOffer = () => ({
-  type: OFFER_SELECTED_CLEAR
-})
+  type: OFFER_SELECTED_CLEAR,
+});

src/store/reducers/offers/offersReducer.js

@@ -20,6 +20,7 @@ import {
   OFFER_PAGE_SET,
   OFFER_FEATURED_PAGE_SET,
   OFFER_SELECTED_CLEAR,
+  OFFERS_HEADER_SET,
 } from "../../actions/offers/offersActionConstants";
 import createReducer from "../../utils/createReducer";
 
@@ -27,6 +28,7 @@ const initialState = {
   offers: [],
   pinnedOffers: [],
   mineOffers: [],
+  mineHeaderOffers: [],
   profileOffers: [],
   total: 0,
   error: "",
@@ -53,6 +55,7 @@ export default createReducer(
     [OFFERS_PINNED_SET]: setPinnedOffers,
     [OFFERS_SET_TOTAL]: setTotalOffers,
     [OFFERS_MINE_SET]: setMineOffers,
+    [OFFERS_HEADER_SET]: setHeaderOffers,
     [OFFERS_PROFILE_SET]: setProfileOffers,
     [OFFERS_FEATURED_CLEAR]: clearFeaturedOffers,
     [OFFERS_FEATURED_SET]: setFeaturedOffers,
@@ -187,3 +190,9 @@ function clearSelectedOffer(state) {
     selectedOffer: "",
   };
 }
+function setHeaderOffers(state, { payload }) {
+  return {
+    ...state,
+    mineHeaderOffers: payload,
+  };
+}

src/store/saga/offersSaga.js

@@ -10,6 +10,7 @@ import {
   // OFFERS_ALL_FETCH,
   OFFERS_FEATURED_FETCH,
   OFFERS_FETCH,
+  OFFERS_MINE_HEADER_FETCH,
   OFFERS_PROFILE_FETCH,
   OFFER_ADD,
   OFFER_EDIT,
@@ -36,6 +37,9 @@ import {
   removeOfferError,
   editOfferError,
   clearFeaturedOffers,
+  setMineHeaderOffers,
+  fetchMineHeaderOffersSuccess,
+  fetchMineHeaderOffersError,
   // fetchAllOffersSuccess,
   // fetchAllOffersError,
   // setFeaturedOfferPage,
@@ -239,6 +243,18 @@ function* fetchMineOffers() {
     console.dir(e);
   }
 }
+function* fetchMineHeaderOffers() {
+  try {
+    const userId = yield select(selectUserId);
+    const data = yield call(attemptFetchProfileOffers, userId);
+    console.log('povezivanje')
+    yield put(setMineHeaderOffers(data.data.slice(0, 2)));
+    yield put(fetchMineHeaderOffersSuccess());
+  } catch (e) {
+    yield put(fetchMineHeaderOffersError());
+    console.dir(e);
+  }
+}
 
 function* fetchProfileOffers(payload) {
   try {
@@ -320,6 +336,7 @@ export default function* offersSaga() {
     takeLatest(OFFERS_PROFILE_FETCH, fetchProfileOffers),
     takeLatest(OFFER_REMOVE, removeOffer),
     takeLatest(OFFER_EDIT, editOffer),
+    takeLatest(OFFERS_MINE_HEADER_FETCH, fetchMineHeaderOffers),
     takeLatest(OFFERS_FEATURED_FETCH, fetchFeaturedOffers),
     // takeLatest(OFFERS_ALL_FETCH, fetchAllOffers),
   ]);

src/store/selectors/offersSelectors.js

@@ -1,46 +1,50 @@
-import { createSelector } from 'reselect';
+import { createSelector } from "reselect";
 
 const offersSelector = (state) => state.offers;
 
 export const selectOffers = createSelector(
   offersSelector,
-  (state) => state.offers,
+  (state) => state.offers
 );
 
 export const selectOffer = createSelector(
   offersSelector,
-  (state) => state.selectedOffer,
+  (state) => state.selectedOffer
 );
 
 export const selectOffersError = createSelector(
   offersSelector,
-  (state) => state.error,
+  (state) => state.error
 );
 export const selectNoMoreOffers = createSelector(
   offersSelector,
   (state) => state.noMoreOffers
-)
+);
 export const selectPinnedOffers = createSelector(
   offersSelector,
   (state) => state.pinnedOffers
-)
+);
 export const selectTotalOffers = createSelector(
   offersSelector,
   (state) => state.total
-)
+);
 export const selectMineOffers = createSelector(
   offersSelector,
   (state) => state.mineOffers
-)
+);
 export const selectProfileOffers = createSelector(
   offersSelector,
   (state) => state.profileOffers
-)
+);
 export const selectFeaturedOfferPage = createSelector(
   offersSelector,
   (state) => state.featuredOfferPage
-)
+);
 export const selectOfferPage = createSelector(
   offersSelector,
   (state) => state.offerPage
-)
+);
+export const selectMineHeaderOffers = createSelector(
+  offersSelector,
+  (state) => state.mineHeaderOffers
+);

src/themes/primaryTheme/primaryThemeColors.js

@@ -14,6 +14,7 @@ export const primaryThemeColors = {
     backgroundSponsoredColor: "#F5EDFF",
     offerBackgroundColor: "#F5F5F5",
     selectOptionTextColor: "#1D1D1D",
+    yellowButtonTextColor: "#1D1D1D",
     primaryDarkText: "#505050",
     primaryDarkTextThird: "#4D4D4D",
     iconStrokeColor: "#8C8C8C",
@@ -33,5 +34,6 @@ export const primaryThemeColors = {
     filterSkeletonBackgroundSecond: "#D4D4D4",
     filterSkeletonItems: "#D4D4D4",
     filterSkeletonItemsSecond: "#DDDDDD",
-    staticBackgroundColor: "#F3EFF8"
+    staticBackgroundColor: "#F3EFF8",
+    stepProgressAltColor: "#F4F4F4"
 }

src/util/helpers/imageUrlGetter.js

@@ -36,8 +36,6 @@ const cloudFlareVariants = {
 };
 export const getImageUrl = (imageUrl, variant, isMobile = false) => {
   let imageVariant = "";
-  console.log(imageUrl);
-  console.log(variant);
   if (IMAGE_PLATFORM === CLOUDFLARE) {
     imageVariant = isMobile
       ? cloudFlareVariants[variant + "Mobile"]