Finished feature 1464

src/components/Cards/OfferCard/OfferCard.js

@@ -32,6 +32,7 @@ import {
   PinIconContainer,
   PinOutlinedIcon,
   ButtonsContainer,
+  TooltipInnerContainer,
 } from "./OfferCard.styled";
 import { ReactComponent as Message } from "../../../assets/images/svg/mail.svg";
 import { useHistory } from "react-router-dom";
@@ -46,6 +47,8 @@ import {
   toggleDeleteOfferModal,
   toggleEditOfferModal,
 } from "../../../store/actions/modal/modalActions";
+import { Tooltip } from "@mui/material";
+import { useTranslation } from "react-i18next";
 
 const OfferCard = (props) => {
   const dispatch = useDispatch();
@@ -53,6 +56,7 @@ const OfferCard = (props) => {
   const userId = useSelector(selectUserId);
   const { isMobile } = useIsMobile();
   const date = formatDateLocale(new Date(props.offer?._created));
+  const { t } = useTranslation();
 
   const pinOffer = (event) => {
     event.stopPropagation();
@@ -211,18 +215,26 @@ const OfferCard = (props) => {
             )}
             {props.isMyOffer ? (
               <>
-                <RemoveIconContainer
-                  vertical={props.vertical}
-                  onClick={openRemoveModal}
-                >
-                  <RemoveIcon />
-                </RemoveIconContainer>
-                <EditIconContainer
-                  vertical={props.vertical}
-                  onClick={openEditOfferModal}
-                >
-                  <EditIcon />
-                </EditIconContainer>
+                <Tooltip title={t("deleteOffer.tooltip")}>
+                  <TooltipInnerContainer>
+                    <RemoveIconContainer
+                      vertical={props.vertical}
+                      onClick={openRemoveModal}
+                    >
+                      <RemoveIcon />
+                    </RemoveIconContainer>
+                  </TooltipInnerContainer>
+                </Tooltip>
+                <Tooltip title={t("offer.tooltip")}>
+                  <TooltipInnerContainer>
+                    <EditIconContainer
+                      vertical={props.vertical}
+                      onClick={openEditOfferModal}
+                    >
+                      <EditIcon />
+                    </EditIconContainer>
+                  </TooltipInnerContainer>
+                </Tooltip>
               </>
             ) : props.aboveChat ? (
               <LikeIconContainer
@@ -233,13 +245,17 @@ const OfferCard = (props) => {
                 <LikeIcon disabled={props.disabledReviews} />
               </LikeIconContainer>
             ) : (
-              <MessageIcon
-                showMessageIcon={showMessageIcon}
-                vertical={props.vertical}
-                onClick={messageUser}
-              >
-                <Message />
-              </MessageIcon>
+              <Tooltip title={t("messages.tooltip")}>
+                <TooltipInnerContainer>
+                  <MessageIcon
+                    showMessageIcon={showMessageIcon}
+                    vertical={props.vertical}
+                    onClick={messageUser}
+                  >
+                    <Message />
+                  </MessageIcon>
+                </TooltipInnerContainer>
+              </Tooltip>
             )}
             {props.isAdmin && !props.pinned && (
               <PinIconContainer

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

@@ -431,3 +431,5 @@ export const ButtonsContainer = styled(Box)`
       `}
   }
 `;
+
+export const TooltipInnerContainer = styled(Box)``;

src/components/Cards/ProfileCard/ProfileCard.js

@@ -51,6 +51,7 @@ import {
   USERS_DELETE_TYPE,
   USERS_UNBLOCK_TYPE,
 } from "../../../constants/adminTypeConstants";
+import { Tooltip } from "@mui/material";
 
 const ProfileCard = (props) => {
   const isLoading = useSelector(selectIsLoadingByActionType(PROFILE_SCOPE));
@@ -188,13 +189,15 @@ const ProfileCard = (props) => {
                   </>
                 )}
                 {(isMyProfile || props.isAdmin) && (
-                  <EditButton
-                    onClick={handleEditProfile}
-                    isAdmin={props.isAdmin}
-                    disabled={!props.isAdmin && profile?._blocked}
-                  >
-                    <EditIcon />
-                  </EditButton>
+                  <Tooltip title={t("editProfile.tooltip")}>
+                    <EditButton
+                      onClick={handleEditProfile}
+                      isAdmin={props.isAdmin}
+                      disabled={!props.isAdmin && profile?._blocked}
+                    >
+                      <EditIcon />
+                    </EditButton>
+                  </Tooltip>
                 )}
               </ButtonsContainer>
               <ProfileInfoContainer>

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.js

@@ -8,6 +8,7 @@ import {
   HeaderTop,
   UserIcon,
   UserIconContainer,
+  TooltipInnerContainer,
 } from "./ItemDetailsHeaderCard.styled";
 import { ItemDetailsHeaderContainer } from "./ItemDetailsHeaderCard.styled";
 import { ReactComponent as MessageColor } from "../../../assets/images/svg/mailColor.svg";
@@ -22,11 +23,14 @@ import useIsMobile from "../../../hooks/useIsMobile";
 import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter";
 import { useMemo } from "react";
 import itemDetailsData from "../../../notFoundData/itemDetailsData";
+import { Tooltip } from "@mui/material";
+import { useTranslation } from "react-i18next";
 
 const ItemDetailsHeaderCard = (props) => {
   const history = useHistory();
   const chats = useSelector(selectLatestChats);
   const routeMatch = useRouteMatch();
+  const { t } = useTranslation();
   const offer = useMemo(() => {
     if (props.offer) {
       if (props.offer.offer._id === routeMatch.params.idProizvod) {
@@ -80,9 +84,13 @@ const ItemDetailsHeaderCard = (props) => {
             <UserIcon />
           </UserIconContainer>
         ) : (
-          <MessageIcon onClick={() => messageUser(offer)}>
-            <MessageColor />
-          </MessageIcon>
+          <Tooltip title={t("messages.tooltip")}>
+            <TooltipInnerContainer>
+              <MessageIcon onClick={() => messageUser(offer)}>
+                <MessageColor />
+              </MessageIcon>
+            </TooltipInnerContainer>
+          </Tooltip>
         )}
       </HeaderTop>
       {!props.singleOffer && <StatisticDetails offer={offer} />}

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

@@ -45,7 +45,7 @@ export const OfferInfo = styled(Box)`
   margin-left: 18px;
 `;
 export const OfferTitle = styled(Typography)`
-  margin-bottom:12px;
+  margin-bottom: 12px;
   font-family: ${selectedTheme.fonts.textFont};
   color: ${(props) =>
     props.isMyProfile
@@ -156,9 +156,6 @@ export const CheckButton = styled(PrimaryButton)`
 export const MessageIcon = styled(IconButton)`
   width: 40px;
   height: 40px;
-  position: absolute;
-  top: 10px;
-  right: 10px;
   background-color: ${selectedTheme.colors.primaryPurple};
   border-radius: 100%;
   padding-top: 2px;
@@ -179,3 +176,16 @@ export const UserIconContainer = styled(MessageIcon)`
   background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
 `;
 export const UserIcon = styled(User)``;
+
+export const TooltipInnerContainer = styled(Box)`
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+
+  @media (max-width: 600px) {
+    width: 32px;
+    height: 32px;
+  }
+`;

src/i18n/resources/rs.js

@@ -188,6 +188,7 @@ export default {
     descriptionLabel: "Opis:",
     checkButtonLabel: "Pogledaj proizvod",
     offers: "Objave",
+    tooltip: "Izmeni objavu",
   },
   apiErrors: {
     somethingWentWrong: "Greška sa serverom!",
@@ -245,6 +246,7 @@ export default {
     goBack: "Nazad na sve poruke",
     noMessages: "Poruke nisu pronađene.",
     noMessagesSecond: "Nažalost, nemate ni jednu poruku.",
+    tooltip: "Pošalji poruku",
   },
   editProfile: {
     website: "Web Sajt*",
@@ -259,11 +261,13 @@ export default {
     labelLocationValid: "Unesite ispravnu lokaciju!",
     labelPhoneValid: "Unesite validan broj telefona",
     labelPhoneRequired: "Broj telefona je obavezan!",
+    tooltip: "Izmeni profil",
   },
   deleteOffer: {
     areYouSure: "Da li ste sigurni da želite da <br /> obrišete proizvod?",
     cancel: "Otkaži",
     delete: "Obriši",
+    tooltip: "Obriši objavu",
   },
   itemDetailsCard: {
     description: "Opis: ",
@@ -306,7 +310,7 @@ export default {
     blockedProfile: "Trenutno blokiran profil",
     blockedProfileShort: "Blokiran profil",
     mineProfileBlocked: "Vaš profil je trenutno blokiran.",
-    deletedProfile: "Obrisan profil"
+    deletedProfile: "Obrisan profil",
   },
   about: {
     header: {