Finished profile on tablet

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

@@ -345,8 +345,8 @@ export const RemoveIconContainer = styled(MessageIcon)`
   @media screen and (max-width: 600px) {
     display: block;
     position: absolute;
+    left: 59px;
     top: 325px;
-    left: 18px;
   }
 `;
 export const RemoveIcon = styled(Remove)``;
@@ -358,8 +358,8 @@ export const EditIconContainer = styled(MessageIcon)`
   @media screen and (max-width: 600px) {
     position: absolute;
     display: block;
-    left: 59px;
     top: 325px;
+    left: 18px;
   }
 `;
 export const EditIcon = styled(Edit)``;

src/components/Profile/Header/Header.js

@@ -0,0 +1,43 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useHistory } from "react-router-dom";
+import { HeaderContainer, HeaderText, ButtonContainer } from "./Header.styled";
+import { ArrowButton } from "../../Buttons/ArrowButton/ArrowButton";
+import { useTranslation } from "react-i18next";
+import { HOME_PAGE } from "../../../constants/pages";
+
+const Header = (props) => {
+  const history = useHistory();
+  const { t } = useTranslation();
+
+  const handleBackButton = () => {
+    history.push(HOME_PAGE);
+  };
+
+  return (
+    <HeaderContainer
+      onClick={handleBackButton}
+      component="header"
+      className={props.className}
+    >
+      <ButtonContainer>
+        <ArrowButton side={"left"}></ArrowButton>
+        <HeaderText>{t("profile.backToHome")}</HeaderText>
+      </ButtonContainer>
+    </HeaderContainer>
+  );
+};
+
+Header.propTypes = {
+  children: PropTypes.node,
+  setIsGrid: PropTypes.func,
+  isGrid: PropTypes.bool,
+  filters: PropTypes.array,
+  category: PropTypes.string,
+  className: PropTypes.string,
+};
+Header.defaultProps = {
+  isGrid: false,
+};
+
+export default Header;

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

@@ -0,0 +1,26 @@
+import { Box, Link, Typography } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../themes";
+
+export const HeaderContainer = styled(Box)`
+  margin-top: 20px;
+
+  @media (max-width: 600px) {
+    margin-top: 40px;
+  }
+`;
+export const ButtonContainer = styled(Link)`
+  width: fit-content;
+  cursor: pointer;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: 12px;
+`;
+export const HeaderText = styled(Typography)`
+  font-family: "Open Sans";
+  line-height: 22px;
+  font-size: 16px;
+  color: ${selectedTheme.primaryPurple};
+  text-decoration: underline;
+`;

src/components/Profile/Profile.js

@@ -1,13 +1,14 @@
-import React, { useEffect, useMemo } from 'react'
-import PropTypes from 'prop-types'
-import { ProfileContainer } from './Profile.styled'
-import ProfileCard from '../ProfileCard/ProfileCard'
-import ProfileOffers from './ProfileOffers/ProfileOffers'
-import { useDispatch, useSelector } from 'react-redux'
-import { selectUserId } from '../../store/selectors/loginSelectors'
-import { useRouteMatch } from 'react-router-dom'
-import { fetchProfile } from '../../store/actions/profile/profileActions'
-import { fetchProfileOffers } from '../../store/actions/offers/offersActions'
+import React, { useEffect, useMemo } from "react";
+import PropTypes from "prop-types";
+import { ProfileContainer } from "./Profile.styled";
+import ProfileCard from "../ProfileCard/ProfileCard";
+import ProfileOffers from "./ProfileOffers/ProfileOffers";
+import { useDispatch, useSelector } from "react-redux";
+import { selectUserId } from "../../store/selectors/loginSelectors";
+import { useRouteMatch } from "react-router-dom";
+import { fetchProfile } from "../../store/actions/profile/profileActions";
+import { fetchProfileOffers } from "../../store/actions/offers/offersActions";
+import Header from "./Header/Header";
 
 const Profile = () => {
   const userId = useSelector(selectUserId);
@@ -17,7 +18,7 @@ const Profile = () => {
   useEffect(() => {
     if (idProfile?.length > 0) {
       dispatch(fetchProfile(idProfile));
-      dispatch(fetchProfileOffers(idProfile))
+      dispatch(fetchProfileOffers(idProfile));
     }
   }, [idProfile]);
   const isMyProfile = useMemo(() => {
@@ -25,17 +26,18 @@ const Profile = () => {
       return true;
     }
     return false;
-  }, [userId, idProfile])
+  }, [userId, idProfile]);
   return (
     <ProfileContainer>
-        <ProfileCard isMyProfile={isMyProfile}/>
-        <ProfileOffers isMyProfile={isMyProfile}/>
+      <Header />
+      <ProfileCard isMyProfile={isMyProfile} />
+      <ProfileOffers isMyProfile={isMyProfile} />
     </ProfileContainer>
-  )
-}
+  );
+};
 
 Profile.propTypes = {
-    children: PropTypes.node,
-}
+  children: PropTypes.node,
+};
 
-export default Profile
+export default Profile;

src/components/Profile/ProfileOffers/ProfileOffers.styled.js

@@ -2,7 +2,7 @@ import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
 import { ReactComponent as Search } from "../../../assets/images/svg/magnifying-glass.svg";
-import { ReactComponent as Refresh } from "../../../assets/images/svg/refresh.svg";
+import { ReactComponent as Package } from "../../../assets/images/svg/package-gray.svg";
 import { TextField } from "../../TextFields/TextField/TextField";
 import { Icon } from "../../Icon/Icon";
 import Select from "../../Select/Select";
@@ -16,6 +16,9 @@ export const ProfileOffersContainer = styled(Box)`
   padding: 0 50px;
   margin-top: 34px;
   position: relative;
+  @media (max-width: 1200px) {
+    padding: 0 36px 0 0;
+  }
   @media (max-width: 600px) {
     padding: 0;
   }
@@ -30,7 +33,7 @@ export const HeaderTitle = styled(Typography)`
     font-size: 12px;
   }
 `;
-export const OffersIcon = styled(Refresh)`
+export const OffersIcon = styled(Package)`
   width: 18px;
   height: 18px;
   & path {
@@ -77,6 +80,10 @@ export const HeaderSelect = styled(Select)`
     padding-left: 8px;
   }
 
+  @media (max-width: 1200px) {
+    right: 36px;
+  }
+
   @media (max-width: 650px) {
     width: 144px;
     height: 30px;

src/components/ProfileCard/ProfileCard.styled.js

@@ -13,6 +13,10 @@ export const ProfileCardContainer = styled(Box)`
   box-sizing: border-box;
   padding: 0 50px;
   margin-top: 34px;
+
+  @media (max-width: 1200px) {
+    padding: 0 36px 0 0;
+  }
   @media (max-width: 600px) {
     padding: 0;
   }

src/i18n/resources/rs.js

@@ -259,6 +259,7 @@ export default {
       mainText: "Objave nisu pronađene",
       altText: "Nažalost nemate ni jednu objavu",
     },
+    backToHome: "Nazad na sve objave",
   },
   about: {
     header: {