Finished feature 1400

src/assets/images/svg/unpin-outlined.svg

@@ -0,0 +1,13 @@
+<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3135_12913)">
+<path d="M17.5239 7.36219L16.7758 6.93024L16.4025 7.70932L14.1445 12.4218L13.9563 12.8146L14.1841 13.1859C14.8482 14.2683 15.1028 15.5843 14.8378 16.889L14.8162 16.9944C14.8162 16.9945 14.8161 16.9947 14.8161 16.9949C14.8045 17.0494 14.745 17.1479 14.6047 17.2108L14.5786 17.2225L14.5533 17.2361C14.5179 17.2551 14.4348 17.27 14.3339 17.2118L4.59109 11.5868C4.49874 11.5334 4.44062 11.442 4.4307 11.3405L4.43071 11.3405L4.43022 11.3357C4.41975 11.2349 4.46016 11.1311 4.53653 11.0637L4.53726 11.063L4.6205 10.9893L4.62095 10.9889C5.6152 10.107 6.88296 9.67 8.15351 9.70427L8.58904 9.71602L8.83518 9.35652L11.7873 5.04478L12.2754 4.33195L11.5272 3.9L10.6279 3.38074C10.4725 3.29105 10.4192 3.09214 10.5089 2.93679C10.5986 2.78144 10.7975 2.72814 10.9529 2.81783L18.7471 7.31783C18.9029 7.4078 18.956 7.60601 18.8661 7.76179C18.7761 7.91756 18.5779 7.97072 18.4221 7.88074L17.5239 7.36219ZM8.38144 16.9217L7.09394 19.1517C7.00372 19.3079 6.80624 19.3609 6.64998 19.2706C6.49372 19.1804 6.4408 18.9829 6.53102 18.8267L7.81852 16.5967L8.38144 16.9217Z" stroke="#5A3984" stroke-width="1.6"/>
+</g>
+<path d="M16.3418 22.6904L4.67453 2.48214" stroke="#E4E4E4" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.8252 21.0176L6.15793 0.809288" stroke="#E4E4E4" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.2607 22.1616L5.59348 1.95333" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<clipPath id="clip0_3135_12913">
+<rect width="13.5" height="18" fill="white" transform="translate(9.4043 1) rotate(30)"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -10,6 +10,7 @@ import {
   RemoveIconContainer,
   RemoveIcon,
   PinIcon,
+  UnpinIcon,
 } from "./DeleteOffer.styled";
 import BackdropComponent from "../../../MUI/BackdropComponent";
 import { useDispatch, useSelector } from "react-redux";
@@ -47,8 +48,13 @@ const DeleteOffer = (props) => {
   };
 
   const removeOfferHandler = () => {
-    if (props.pin) dispatch(pinOffer({ offerId: props.offer?._id, handleApiResponseSuccess }));
-    else dispatch(removeOffer({ offerId, handleApiResponseSuccess }));
+    if (props.pin) {
+      dispatch(
+        pinOffer({ offerId: props.offer?._id, handleApiResponseSuccess })
+      );
+    } else {
+      dispatch(removeOffer({ offerId, handleApiResponseSuccess }));
+    }
     closeDeleteModalHandler();
     if (history.location.pathname.includes("proizvodi")) {
       history.goBack();
@@ -78,19 +84,32 @@ const DeleteOffer = (props) => {
             categoryName={props.offer.category.name}
           />
           <RemoveIconContainer>
-            {props.pin ? <PinIcon /> : <RemoveIcon />}
+            {props.deleteOffer !== false ? (
+              <RemoveIcon />
+            ) : !props.pinnedOffer ? (
+              <PinIcon />
+            ) : (
+              <UnpinIcon />
+            )}
           </RemoveIconContainer>
         </OfferInfo>
         <DeleteQuestion>
-          {props.pin ? (
+          {props.deleteOffer !== false ? (
+            <Trans i18nKey="deleteOffer.areYouSure" />
+          ) : !props.pinnedOffer ? (
             t("admin.pin.reassurancePin")
           ) : (
-            <Trans i18nKey="deleteOffer.areYouSure" />
+            t("admin.unpin.reassurancePin")
           )}
         </DeleteQuestion>
         <ButtonsContainer>
           <CancelButton pin={props.pin} onClick={closeDeleteModalHandler} />
-          <SaveButton pin={props.pin} onClick={removeOfferHandler} />
+          <SaveButton
+            pin={props.pin}
+            pinnedOffer={props.pinnedOffer}
+            deleteOffer={props.deleteOffer}
+            onClick={removeOfferHandler}
+          />
         </ButtonsContainer>
       </DeleteOfferContainer>
     </>
@@ -101,6 +120,8 @@ DeleteOffer.propTypes = {
   offer: PropTypes.any,
   closeModalHandler: PropTypes.func,
   pin: PropTypes.bool,
+  deleteOffer: PropTypes.bool,
+  pinnedOffer: PropTypes.bool,
 };
 
 export default DeleteOffer;

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

@@ -3,6 +3,7 @@ import { Box } from "@mui/system";
 import styled from "styled-components";
 import { ReactComponent as Remove } from "../../../../assets/images/svg/trash-gold.svg";
 import { ReactComponent as Pin } from "../../../../assets/images/svg/pin-outlined.svg";
+import { ReactComponent as Unpin } from "../../../../assets/images/svg/unpin-outlined.svg";
 import selectedTheme from "../../../../themes";
 import { Icon } from "../../../Icon/Icon";
 
@@ -116,6 +117,14 @@ export const PinIcon = styled(Pin)`
     stroke: ${selectedTheme.colors.iconYellowColor};
   }
 `;
+export const UnpinIcon = styled(Unpin)`
+  cursor: default;
+  position: relative;
+  top: 3px;
+  & path {
+    stroke: ${selectedTheme.colors.iconYellowColor};
+  }
+`;
 
 export const ButtonsContainer = styled(Box)`
   display: flex;

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

@@ -17,7 +17,11 @@ const SaveButton = (props) => {
       textcolor={props.pin ? "white" : selectedTheme.colors.primaryPurple}
       onClick={props.onClick}
     >
-      {props.pin ? t("admin.pin.confirm") : t("deleteOffer.delete")}
+      {props.deleteOffer !== false
+        ? t("deleteOffer.delete")
+        : !props.pinnedOffer
+        ? t("admin.pin.confirm")
+        : t("admin.unpin.confirm")}
     </SaveButtonContainer>
   );
 };
@@ -25,6 +29,8 @@ const SaveButton = (props) => {
 SaveButton.propTypes = {
   onClick: PropTypes.func,
   pin: PropTypes.bool,
+  deleteOffer: PropTypes.bool,
+  pinnedOffer: PropTypes.bool,
 };
 
 export default SaveButton;

src/components/Cards/OfferCard/OfferCard.js

@@ -22,7 +22,7 @@ import {
   OfferTitleAboveImage,
   OfferViews,
   OfferDate,
-  PinIcon,
+  // PinIcon,
   RemoveIcon,
   RemoveIconContainer,
   LikeIcon,
@@ -33,6 +33,7 @@ import {
   PinOutlinedIcon,
   ButtonsContainer,
   TooltipInnerContainer,
+  UnpinOutlinedIcon,
 } from "./OfferCard.styled";
 import { ReactComponent as Message } from "../../../assets/images/svg/mail.svg";
 import { useHistory } from "react-router-dom";
@@ -64,6 +65,8 @@ const OfferCard = (props) => {
       toggleDeleteOfferModal({
         offer: props.offer,
         pin: true,
+        pinnedOffer: props.offer.pinned,
+        deleteOffer: false,
       })
     );
   };
@@ -210,9 +213,9 @@ const OfferCard = (props) => {
             <></>
           )}
           <ButtonsContainer vertical={props.vertical}>
-            {props?.offer?.pinned && (
+            {/* {props?.offer?.pinned && (
               <PinIcon vertical={props.vertical} isMyOffer={props.isMyOffer} />
-            )}
+            )} */}
             {props.isMyOffer ? (
               <>
                 <Tooltip title={t("deleteOffer.tooltip")}>
@@ -257,15 +260,32 @@ const OfferCard = (props) => {
                 </TooltipInnerContainer>
               </Tooltip>
             )}
-            {props.isAdmin && !props.pinned && (
-              <PinIconContainer
-                showMessageIcon
-                onClick={pinOffer}
-                vertical={props.vertical}
-              >
-                <PinOutlinedIcon />
-              </PinIconContainer>
-            )}
+            {props.isAdmin &&
+              (!props?.offer?.pinned ? (
+                <Tooltip title={t("admin.pin.tooltip")}>
+                  <TooltipInnerContainer>
+                    <PinIconContainer
+                      showMessageIcon
+                      onClick={pinOffer}
+                      vertical={props.vertical}
+                    >
+                      <PinOutlinedIcon />
+                    </PinIconContainer>
+                  </TooltipInnerContainer>
+                </Tooltip>
+              ) : (
+                <Tooltip title={t("admin.unpin.tooltip")}>
+                  <TooltipInnerContainer>
+                    <PinIconContainer
+                      showMessageIcon
+                      onClick={pinOffer}
+                      vertical={props.vertical}
+                    >
+                      <UnpinOutlinedIcon />
+                    </PinIconContainer>
+                  </TooltipInnerContainer>
+                </Tooltip>
+              ))}
           </ButtonsContainer>
         </OfferFlexContainer>
       </OfferCardContainer>

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

@@ -9,6 +9,7 @@ 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 PinOutlined } from "../../../assets/images/svg/pin-outlined.svg";
+import { ReactComponent as UnpinOutlined } from "../../../assets/images/svg/unpin-outlined.svg";
 import { ReactComponent as Category } from "../../../assets/images/svg/category.svg";
 import { ReactComponent as Calendar } from "../../../assets/images/svg/calendar.svg";
 
@@ -394,6 +395,7 @@ export const PinOutlinedIcon = styled(PinOutlined)`
     /* stroke: ${selectedTheme.colors.primaryPurple} !important; */
   }
 `;
+export const UnpinOutlinedIcon = styled(UnpinOutlined)``;
 export const PinIcon = styled(Pin)`
   position: relative;
   top: 6px;

src/components/Cards/ProfileCard/ProfileCard.js

@@ -14,8 +14,6 @@ import {
   BlockIcon,
   ButtonsContainer,
   BlockLabelIcon,
-  // MessageButton,
-  // MessageIcon,
   ProfileInfoAndContactContainer,
   UnblockButton,
   UnblockIcon,
@@ -175,17 +173,23 @@ const ProfileCard = (props) => {
                 {props.isAdmin && (
                   <>
                     {profile?._blocked ? (
-                      <UnblockButton onClick={unblockUser}>
-                        <UnblockIcon />
-                      </UnblockButton>
+                      <Tooltip title={t("admin.unblockUser.tooltip")}>
+                        <UnblockButton onClick={unblockUser}>
+                          <UnblockIcon />
+                        </UnblockButton>
+                      </Tooltip>
                     ) : (
-                      <BlockButton onClick={blockUser}>
-                        <BlockIcon />
-                      </BlockButton>
+                      <Tooltip title={t("admin.blockUser.tooltip")}>
+                        <BlockButton onClick={blockUser}>
+                          <BlockIcon />
+                        </BlockButton>
+                      </Tooltip>
                     )}
-                    <RemoveButton onClick={removeUser}>
-                      <RemoveIcon />
-                    </RemoveButton>
+                    <Tooltip title={t("admin.deleteUser.tooltip")}>
+                      <RemoveButton onClick={removeUser}>
+                        <RemoveIcon />
+                      </RemoveButton>
+                    </Tooltip>
                   </>
                 )}
                 {(isMyProfile || props.isAdmin) && (

src/i18n/resources/rs.js

@@ -540,23 +540,33 @@ export default {
         "Da li ste sigurni da želite da obrišete profil kompanje?",
       cancel: "Otkaži",
       delete: "Obriši",
+      tooltip: "Obriši korisnika",
     },
     blockUser: {
       reassuranceDelete:
         "Da li ste sigurni da želite da blokirate profil kompanje?",
       cancel: "Otkaži",
       delete: "Blokiraj",
+      tooltip: "Blokiraj korisnika",
     },
     unblockUser: {
       reassuranceDelete:
         "Da li ste sigurni da želite da odblokirate profil kompanje?",
       cancel: "Otkaži",
       delete: "Odblokiraj",
+      tooltip: "Odblokiraj korisnika",
     },
     pin: {
       reassurancePin:
         "Da li ste sigurni da želite da zakačite proizvod na vrhu?",
       confirm: "Zakači",
+      tooltip: "Zakači objavu",
+    },
+    unpin: {
+      reassurancePin:
+        "Da li ste sigurni da želite da otkačite proizvod sa vrha?",
+      confirm: "Otkači",
+      tooltip: "Otkači objavu",
     },
     review: {
       title: "Brisanje Komentara",