Finished feature 701

src/components/Cards/ChatCard/ChatCard.js

 import MobileOfferDetails from "./MobileOfferDetails/MobileOfferDetails";
 import useIsMobile from "../../../hooks/useIsMobile";
 import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter";
+import BlockedProfile from "../ProfileCard/BlockedProfile/BlockedProfile";
 
 // Chat card is shown only on mobile phones (route /messages)
 const ChatCard = (props) => {
           )}
         />
       </UserImgWrapper>
-
-      <ChatInfo>
+      <ChatInfo isBlocked={props.chat.interlocutorData?._blocked}>
+        {props.chat.interlocutorData?._blocked && (
+          <BlockedProfile redText chatCard shortText aboveTitle hideIcon />
+        )}
         <UserName>{chat?.interlocutorData?.name}</UserName>
         <MobileOfferDetails chat={chat} />
       </ChatInfo>

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

   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  position: relative;
+  top: ${props => props.isBlocked && `-12px`};
 `;
 export const UserName = styled(Typography)`
   margin-bottom: 12px;

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

 import { Box, Container, Typography } from "@mui/material";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import selectedTheme from "../../../themes";
 import { PrimaryButton } from "../../Buttons/PrimaryButton/PrimaryButton";
 import { Label } from "../../CheckBox/Label";
 export const CreateOfferFormContainer = styled(Box)`
   width: 335px;
   height: 700px;
-  ${(props) => props.currentStep === 3 && `width: 120%; height: 420px;`}
+  ${(props) =>
+    props.currentStep === 3 &&
+    css`
+      width: 120%;
+      border-radius: 4px;
+      height: 420px;
+      border: 1px solid ${selectedTheme.colors.borderNormal};
+      margin-top: 40px;
+    `}
 `;
 export const RegisterAltText = styled(Typography)`
   font-family: ${selectedTheme.fonts.altText};

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

 `;
 export const PreviewCard = styled(ItemDetailsCard)`
   width: auto;
+  border: 0;
 `;
 export const PublishButton = styled(PrimaryAnimatedButton)`
   width: 332px;

src/components/Cards/ItemDetailsCard/ItemDetailsCard.js

   EditIcon,
   RemoveIconContainer,
   RemoveIcon,
-  EditDeleteButtons,
+  ButtonContainer,
+  // EditDeleteButtons,
 } from "./ItemDetailsCard.styled";
 import selectedTheme from "../../../themes";
 import { useDispatch, useSelector } from "react-redux";
 import { increaseCounter } from "../../../store/actions/counter/counterActions";
 import _ from "lodash";
 import { selectUserId } from "../../../store/selectors/loginSelectors";
-import {
-  formatDateLocale,
-} from "../../../util/helpers/dateHelpers";
+import { formatDateLocale } from "../../../util/helpers/dateHelpers";
 import { startChat } from "../../../util/helpers/chatHelper";
 import Information from "./Information/Information";
 import { useTranslation } from "react-i18next";
           singleOffer={props.singleOffer}
           previewCard={props.previewCard}
         />
-        <DateButtonsContainer>
-          {props.isMyOffer && (
-            <ButtonsContainer>
-              <EditDeleteButtons>
-                <EditIconContainer onClick={() => setShowModalEdit(true)}>
-                  <EditIcon />
-                </EditIconContainer>
-                <RemoveIconContainer onClick={() => setShowModalRemove(true)}>
-                  <RemoveIcon />
-                </RemoveIconContainer>
-              </EditDeleteButtons>
-            </ButtonsContainer>
-          )}
-        </DateButtonsContainer>
+
         {!props.halfwidth && props.showExchangeButton && (
-          <CheckButton
-            variant={props.sponsored ? "contained" : "outlined"}
-            buttoncolor={selectedTheme.colors.primaryPurple}
-            textcolor={
-              props.sponsored ? "white" : selectedTheme.colors.primaryPurple
-            }
-            onClick={startExchange}
-            disabled={props.isMyOffer}
-          >
-            {t("itemDetailsCard.startExchangeButton")}
-          </CheckButton>
+          <ButtonContainer>
+            <DateButtonsContainer>
+              {props.isMyOffer && (
+                <ButtonsContainer>
+                  <EditIconContainer onClick={() => setShowModalEdit(true)}>
+                    <EditIcon />
+                  </EditIconContainer>
+                  <RemoveIconContainer onClick={() => setShowModalRemove(true)}>
+                    <RemoveIcon />
+                  </RemoveIconContainer>
+                </ButtonsContainer>
+              )}
+            </DateButtonsContainer>
+            <CheckButton
+              variant={props.sponsored ? "contained" : "outlined"}
+              buttoncolor={selectedTheme.colors.primaryPurple}
+              textcolor={
+                props.sponsored ? "white" : selectedTheme.colors.primaryPurple
+              }
+              onClick={startExchange}
+              disabled={props.isMyOffer}
+            >
+              {t("itemDetailsCard.startExchangeButton")}
+            </CheckButton>
+          </ButtonContainer>
         )}
       </ItemDetailsCardContainer>
       {showModalRemove && (

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

   max-width: 2000px;
   position: relative;
   width: auto;
-  ${(props) => !props.previewCard && `height: 654px;`}
+  /* ${(props) => !props.previewCard && `height: 654px;`} */
   /* height: 654px; */
   /* padding-bottom: 70px; */
 
   }
 
   @media (max-height: 708px) {
-    height: 400px;
+    /* height: 400px; */
   }
 `;
 export const OfferInfo = styled(Box)`
 `;
 export const ButtonsContainer = styled(Box)`
   display: flex;
-  align-items: center;
+  gap: 18px;
 
-  @media screen and (max-width: 600px) {
+
+  /* @media screen and (max-width: 600px) {
     position: absolute;
-    top: 75px;
-    right: 143px;
-  }
+    top: 0;
+    right: 0;
+  } */
 `;
 
 export const EditDeleteButtons = styled(Box)`
   display: flex;
 
-  @media screen and (max-width: 600px) {
+  /* @media screen and (max-width: 600px) {
     position: absolute;
-  }
+  } */
 `;
 export const EditIconContainer = styled(IconButton)`
   width: 40px;
   height: 40px;
+  position: relative;
+  top: 4px;
   background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
   border-radius: 100%;
   padding-top: 2px;
 
   @media screen and (max-width: 600px) {
     width: 32px;
+    top: 0;
     height: 32px;
   }
 `;
 export const RemoveIconContainer = styled(IconButton)`
   width: 40px;
   height: 40px;
+  position: relative;
+  top: 4px;
   background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
   border-radius: 100%;
   padding-top: 2px;
   text-align: center;
-  margin-left: 18px;
+  /* margin-left: 18px; */
 
   @media screen and (max-width: 600px) {
     width: 32px;
+    top: 0;
     height: 32px;
   }
 `;
 
 export const DateButtonsContainer = styled(Box)`
   display: flex;
-  align-items: center;
-  position: absolute;
-  right: 220px;
-  bottom: 22px;
-
+  
   @media screen and (max-width: 600px) {
-    top: 0;
-    right: -10px;
+    position: absolute;
+    bottom: initial;
+    top: 58px;
+    right: 12px;
   }
 `;
 
 export const CheckButton = styled(PrimaryButton)`
   width: 180px;
   height: 48px;
-  position: absolute;
-  bottom: 9px;
-  right: 12px;
+
   font-weight: 600;
   &:hover button {
     color: white !important;
   }
   @media (max-width: 600px) {
     height: 44px;
+    position: absolute;
+    bottom: 9px;
+    right: 9px;
   }
 `;
 // export const OfferImage = styled.img`
   width: 18px;
   height: 20px;
 `;
+export const ButtonContainer = styled(Box)`
+  position: absolute;
+  bottom: 18px;
+  right: 18px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 18px;
+  @media (max-width: 600px) {
+    position: static;
+  }
+`

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

   DesciprtionPostDate,
 } from "./OfferDetails.styled";
 import { useTranslation } from "react-i18next";
-import useScreenDimensions from "../../../../hooks/useScreenDimensions";
 import { formatDateLocale } from "../../../../util/helpers/dateHelpers";
 import useIsMobile from "../../../../hooks/useIsMobile";
 import { getImageUrl, variants } from "../../../../util/helpers/imageUrlGetter";
 const OfferDetails = (props) => {
   const offer = props.offer;
   const { t } = useTranslation();
-  const dimension = useScreenDimensions();
   const { isMobile } = useIsMobile();
   const [images, setImages] = useState([]);
   const [imagesCarouselModal, setImagesCarouselModal] = useState(false);
         singleOffer={props.singleOffer}
         previewCard={props.previewCard}
       >
-        {dimension.width <= 600 || !props.singleOffer ? (
-          <ScrollerHorizontal>
-            {props?.offer?.offer?.images.map((item, index) => {
-              if (!item) return;
-              return (
-                <OfferImage
-                  src={
-                    props.createOffer
-                      ? images[index]
-                      : getImageUrl(item, variants.offerCard, isMobile)
-                  }
-                  key={item}
-                  previewCard={props.previewCard}
-                  onClick={() =>
-                    !props.previewCard && setImagesCarouselModal(true)
-                  }
-                />
-              );
-            })}
-          </ScrollerHorizontal>
-        ) : (
+        {!isMobile && props.singleOffer && (
           <ScrollerVertical>
             {props?.offer?.offer?.images.map((item, index) => (
               <OfferImage
           <OfferTitle singleOffer={props.singleOffer}>
             {offer?.offer?.name}
           </OfferTitle>
+          {isMobile && (
+            <ScrollerHorizontal>
+              {props?.offer?.offer?.images.map((item, index) => {
+                if (!item) return;
+                return (
+                  <OfferImage
+                    src={
+                      props.createOffer
+                        ? images[index]
+                        : getImageUrl(item, variants.offerCard, isMobile)
+                    }
+                    key={item}
+                    previewCard={props.previewCard}
+                    onClick={() =>
+                      !props.previewCard && setImagesCarouselModal(true)
+                    }
+                  />
+                );
+              })}
+            </ScrollerHorizontal>
+          )}
           <OfferLittleDetails
             singleOffer={props.singleOffer}
             previewCard={props.previewCard}

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

   ${(props) => props.hasScrollBar && !props.exchange && `height: 340px;`}
   /* overflow-y: auto; */
   overflow-y: hidden;
+  padding-bottom: 50px;
   /* ::-webkit-scrollbar {
     width: 5px;
   }
   } */
 
   @media screen and (max-width: 600px) {
-    flex-direction: column-reverse;
+    flex-direction: column;
     margin-top: 15px;
     min-height: 300px;
     ${(props) =>
   @media screen and (max-width: 600px) {
     padding: 0 8px;
     font-size: 18px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 240px;
   }
 `;
 export const OfferLittleDetails = styled(Box)`
   padding: ${(props) => (props.singleOffer ? 0 : "0 60px")};
   margin-top: 10px;
   padding-right: 18px;
-  overflow-y: auto;
+  overflow-y: ${props => !props.previewCard && `auto`};
   ${(props) =>
     !props.singleOffer &&
     `
   `}
   @media (max-width: 600px) {
     padding: 0 8px;
-    position: absolute;
-    top: 270px;
+    /* position: absolute; */
+    /* top: 270px; */
     justify-content: start;
-    height: 300px;
-    ${(props) => props.previewCard && `height: 100px;`};
+    /* height: 300px; */
+    ${(props) => props.previewCard && `height: 100px;`}
     width: 97%;
   }
 `;

src/components/Cards/MiniChatCard/MiniChatCard.js

 import history from "../../../store/utils/history";
 import { replaceInRoute } from "../../../util/helpers/routeHelpers";
 import { CHAT_MESSAGE_PAGE } from "../../../constants/pages";
+import BlockedProfile from "../ProfileCard/BlockedProfile/BlockedProfile";
 
 const MiniChatCard = (props) => {
   const { t } = useTranslation();
       })
     );
   };
+  console.log(props);
   return (
     <MiniChatCardContainer selected={props.selected} onClick={changeChat}>
       <ProfileImage
           isMobile
         )}
       />
-      <ProfileDetails>
+      <ProfileDetails isBlocked={props.chat.interlocutorData?._blocked}>
+        {props.chat.interlocutorData?._blocked && (
+          <BlockedProfile redText chatCard shortText aboveTitle hideIcon />
+        )}
         <ProfileName selected={props.selected}>
           {props?.chat?.interlocutorData?.name}
         </ProfileName>

src/components/Cards/MiniChatCard/MiniChatCard.styled.js

   border-radius: 4px;
   display: flex;
   flex-direction: row;
-  height: 108px;
+  min-height: 108px;
   margin-bottom: 18px;
   padding: 18px;
   cursor: pointer;
   font-weight: 600;
   font-family: ${selectedTheme.fonts.textFont};
   color: ${props => props.selected ? selectedTheme.colors.primaryYellow : selectedTheme.colors.primaryPurple};
+  max-height: 38px;
+  height: 38px;
 `;
 export const ProfileProduct = styled(Typography)`
   margin-top: 9px;

src/components/Cards/ProfileCard/BigProfileCard/BigProfileCard.js

 import { ADMIN_SINGLE_USER_PAGE } from "../../../../constants/pages";
 import DeleteCategory from "../../../Modals/DeleteCategory/DeleteCategory";
 import UserLabeledCard from "../../LabeledCard/User/UserLabeledCard";
+import { USERS_BLOCK_TYPE, USERS_DELETE_TYPE, USERS_UNBLOCK_TYPE } from "../../../../constants/adminTypeConstants";
 
 const BigProfileCard = (props) => {
   const { t } = useTranslation();
   const removeUser = () => {
     setDeleteOrEditModal({
       show: true,
-      type: "deleteUser",
+      type: USERS_DELETE_TYPE,
     });
   };
   // console.log(props.profile);
   const blockUser = () => {
     setDeleteOrEditModal({
       show: true,
-      type: "blockUser",
+      type: USERS_BLOCK_TYPE,
     });
   };
   const unblockUser = () => {
     setDeleteOrEditModal({
       show: true,
-      type: "unblockUser",
+      type: USERS_UNBLOCK_TYPE,
     });
   };
   const goToUser = () => {

src/components/Cards/ProfileCard/BlockedProfile/BlockedProfile.js

+import React from "react";
+import PropTypes from "prop-types";
+import {
+  BlockedContainer,
+  BlockedIcon,
+  BlockedIconContainer,
+  BlockedProfileText,
+  BlockedProfileTextContainer,
+} from "./BlockedProfile.styled";
+import { useTranslation } from "react-i18next";
+
+const BlockedProfile = (props) => {
+  const { t } = useTranslation();
+  return (
+    <BlockedContainer
+      aboveTitle={props.aboveTitle}
+      isAdmin={props.isAdmin}
+      chatCard={props.chatCard}
+    >
+      <BlockedProfileTextContainer
+        aboveTitle={props.aboveTitle}
+        chatCard={props.chatCard}
+      >
+        <BlockedProfileText redText={props.redText}>
+          {props.chatCard
+            ? t("messages.chatCardBlocked")
+            : props.shortText
+            ? t("profile.blockedProfileShort")
+            : t("profile.blockedProfile")}
+        </BlockedProfileText>
+      </BlockedProfileTextContainer>
+      {!props.hideIcon && (
+        <BlockedIconContainer
+          aboveTitle={props.aboveTitle}
+          chatCard={props.chatCard}
+        >
+          <BlockedIcon />
+        </BlockedIconContainer>
+      )}
+    </BlockedContainer>
+  );
+};
+
+BlockedProfile.propTypes = {
+  aboveTitle: PropTypes.bool,
+  hideIcon: PropTypes.bool,
+  isAdmin: PropTypes.bool,
+  redText: PropTypes.bool,
+  shortText: PropTypes.bool,
+  chatCard: PropTypes.bool,
+};
+
+export default BlockedProfile;

src/components/Cards/ProfileCard/BlockedProfile/BlockedProfile.styled.js

+import { Box, Typography } from "@mui/material";
+import styled from "styled-components";
+import { ReactComponent as Block } from "../../../../assets/images/svg/block.svg";
+import selectedTheme from "../../../../themes";
+
+export const BlockedProfileTextContainer = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  height: ${(props) => !props.aboveTitle && `40px`};
+  justify-content: center;
+`;
+export const BlockedProfileText = styled(Typography)`
+  font-style: italic;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${(props) =>
+    props.redText ? selectedTheme.colors.blockedColor : "white"};
+`;
+export const BlockedContainer = styled(Box)`
+  display: flex;
+  flex-direction: ${(props) =>
+    props.aboveTitle && !props.chatCard ? "row-reverse" : "row"};
+  margin-bottom: ${(props) =>
+    props.isAdmin ? "4px" : props.chatCard ? "0px" : "18px"};
+  gap: 9px;
+`;
+export const BlockedIconContainer = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  height: ${(props) => !props.aboveTitle && `40px`};
+  justify-content: center;
+`;
+export const BlockedIcon = styled(Block)`
+  /* position: relative;
+  top: 3px;
+  left: 2px; */
+  width: 18px;
+  height: 18px;
+  @media (max-width: 600px) {
+    top: 0;
+    left: -2px;
+  }
+  & path {
+    stroke: white;
+  }
+`;

src/components/Cards/ProfileCard/ProfileCard.js

   ProfileInfoAndContactContainer,
   UnblockButton,
   UnblockIcon,
-  BlockedProfileText,
-  BlockedIcon,
-  BlockedProfileTextContainer,
-  BlockedIconContainer,
-  BlockedContainer,
 } from "./ProfileCard.styled";
 import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
 import { useRouteMatch } from "react-router-dom";
 import UserLabeledCard from "../LabeledCard/User/UserLabeledCard";
 import history from "../../../store/utils/history";
 import { HOME_PAGE } from "../../../constants/pages";
+import useIsMobile from "../../../hooks/useIsMobile";
+import BlockedProfile from "./BlockedProfile/BlockedProfile";
 
 const ProfileCard = (props) => {
   const [editProfileModal, setEditProfileModal] = useState(false);
   const isLoading = useSelector(selectIsLoadingByActionType(PROFILE_SCOPE));
   const routeMatch = useRouteMatch();
   const dispatch = useDispatch();
+  const { isMobile } = useIsMobile();
   const profileFromRedux = useSelector(selectProfile);
   const userId = useSelector(selectUserId);
   const idProfile = useMemo(() => {
             <ProfileCardWrapper
               variant="outlined"
               isMyProfile={isMyProfile}
-              blocked={profile?._blocked}
+              blocked={!props.isAdmin && profile?._blocked}
             >
               <ButtonsContainer>
-                {profile?._blocked && (
-                  <BlockedContainer>
-                    <BlockedProfileTextContainer>
-                      <BlockedProfileText>
-                        {t("profile.blockedProfile")}
-                      </BlockedProfileText>
-                    </BlockedProfileTextContainer>
-                    <BlockedIconContainer>
-                      <BlockedIcon />
-                    </BlockedIconContainer>
-                  </BlockedContainer>
-                )}
+                {profile?._blocked && !isMobile && <BlockedProfile />}
                 {props.isAdmin && (
                   <>
                     {profile?._blocked ? (
                 )}
               </ButtonsContainer>
               <ProfileInfoContainer>
-                <ProfileInfoAndContactContainer>
+                <ProfileInfoAndContactContainer isAdmin={props.isAdmin}>
+                  {profile?._blocked && !props.isAdmin && isMobile && (
+                    <BlockedProfile aboveTitle isAdmin={props.isAdmin} />
+                  )}
+
                   {/* Profile Main Info  */}
                   <ProfileMainInfo
+                    isAdmin={props.isAdmin}
                     profile={profile}
                     isMyProfile={isMyProfile}
-                    isBlocked={profile?._blocked}
+                    isBlocked={!props.isAdmin && profile?._blocked}
                   />
                   {/* Profile Contact */}
                   <ProfileContact
                     profile={profile}
-                    isMyProfile={profile?._blocked || isMyProfile}
+                    isAdmin={props.isAdmin}
+                    isMyProfile={
+                      (!props.isAdmin && profile?._blocked) || isMyProfile
+                    }
                   />
                 </ProfileInfoAndContactContainer>
                 {/* Profile Stats */}
       )}
       {deleteOrEditModal.show && (
         <DeleteCategory
+          customId={profile?._id}
           setOpenedDeleteModal={closeModalHandler}
           type={deleteOrEditModal.type}
           customLabeledCard={<UserLabeledCard user={profile} />}

src/components/Cards/ProfileCard/ProfileCard.styled.js

     stroke: ${selectedTheme.colors.iconYellowColor};
   }
 `;
-export const BlockedProfileTextContainer = styled(Box)`
-  display: flex;
-  flex-direction: column;
-  height: 40px;
-  justify-content: center;
-`;
-export const BlockedProfileText = styled(Typography)`
-  font-style: italic;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
-  font-family: ${selectedTheme.fonts.textFont};
-  color: white;
-`;
-export const BlockedContainer = styled(Box)`
-  display: flex;
-  flex-direction: row;
-  gap: 9px;
-`;
-export const BlockedIconContainer = styled(Box)`
-  display: flex;
-  flex-direction: column;
-  height: 40px;
-  justify-content: center;
-`;
-export const BlockedIcon = styled(Block)`
-  /* position: relative;
-  top: 3px;
-  left: 2px; */
-  width: 18px;
-  height: 18px;
-  @media (max-width: 600px) {
-    top: 0;
-    left: -2px;
-  }
-  & path {
-    stroke: white;
-  }
-`;
+
 
 export const BlockButton = styled(Box)`
   width: 40px;
   flex-direction: column;
   @media (max-width: 600px) {
     padding-bottom: 18px;
-    flex-direction: row;
+    flex-direction: ${props => props.isAdmin ? "row" : "column"};
   }
 `;
 

src/components/Cards/ProfileCard/ProfileContact/ProfileContact.styled.js

 
 export const ProfileContactContainer = styled(Grid)`
   padding-top: ${(props) => (props.isAdmin ? `20px` : `2rem`)};
-  padding-bottom: ${(props) => (props.isAdmin ? "0" : "2rem")};
+  padding-bottom: 2rem;
   @media (max-width: 600px) {
-    padding-bottom: 1rem;
-    padding-top: 88px;
+    ${props => props.isAdmin && `overflow: hidden;`}
+    padding-top: ${props => props.isAdmin && "88px"};
+    padding-bottom: ${props => props.isAdmin ? "1rem" : "0"};
     gap: 5px;
     width: calc(100vw - 216px);
   }

src/components/Cards/ProfileCard/ProfileMainInfo/ProfileMainInfo.js

   replaceInRoute,
 } from "../../../../util/helpers/routeHelpers";
 import { ADMIN_SINGLE_USER_PAGE } from "../../../../constants/pages";
+import BlockedProfile from "../BlockedProfile/BlockedProfile";
 
 const ProfileMainInfo = (props) => {
   const { t } = useTranslation();
       );
     }
   };
-  if (props.profile?.blocked) console.log(props.profile);
+  console.log(props);
   return (
-    <ProfileMainInfoContainer>
+    <ProfileMainInfoContainer isAdmin={props.isAdmin}>
       <AvatarImageContainer>
         <AvatarImage
           isAdmin={props.isAdmin}
         />
       </AvatarImageContainer>
       <ProfileMainInfoGrid>
-        {props.bigProfileCard && (props.profile?._deleted ? (
-          <BlockedProfileText>{t("profile.deletedProfile")}</BlockedProfileText>
-        ) : props.profile?._blocked ? (
-          <BlockedProfileText>{t("profile.blockedProfile")}</BlockedProfileText>
-        ) : (
-          <></>
-        ))}
+        {props.bigProfileCard &&
+          (props.profile?._deleted ? (
+            <BlockedProfileText>
+              {t("profile.deletedProfile")}
+            </BlockedProfileText>
+          ) : props.profile?._blocked ? (
+            <BlockedProfileText>
+              {t("profile.blockedProfile")}
+            </BlockedProfileText>
+          ) : (
+            <></>
+          ))}
+        {props.profile?._blocked && props.isAdmin && (
+          <BlockedProfile hideIcon redText aboveTitle isAdmin />
+        )}
         <ProfileName
           isAdmin={props.isAdmin}
           isMyProfile={props.isMyProfile}
         </ProfileName>
         <ProfilePIBContainer>
           <PocketIcon />
-          <ProfilePIB isMyProfile={props?.isBlocked || props.isMyProfile} variant="subtitle2">
+          <ProfilePIB
+            isMyProfile={props?.isBlocked || props.isMyProfile}
+            variant="subtitle2"
+          >
             {t("profile.PIB")} {props.profile?.company?.PIB}
           </ProfilePIB>
         </ProfilePIBContainer>

src/components/Cards/ProfileCard/ProfileMainInfo/ProfileMainInfo.styled.js

   align-items: start;
   flex-direction: row;
   @media (max-width: 600px) {
-    flex-direction: column-reverse;
+    flex-direction: ${(props) => (props.isAdmin ? `column-reverse` : `row`)};
     gap: 18px;
     max-width: 108px;
   }

src/components/Cards/UserReviewsCard/UserReviewsCard.js

         handleRemove={handleRemove}
         hasGivenReview={props.hasGivenReview}
         rightReviews={props.rightReviews}
+        isAdmin={props.isAdmin}
       />
       {removeModalOpened && (
         <DeleteReview
   showRemoveIcon: PropTypes.bool,
   hasGivenReview: PropTypes.bool,
   rightReviews: PropTypes.bool,
+  isAdmin: PropTypes.bool,
 };
 UserReviewsCard.defaultProps = {
   isProfileReviews: false,

src/components/Cards/UserReviewsCard/UserReviewsSingleCard/UserReviewsSingleCard.js

 
   return (
     <ReviewContainer>
-      {!props.rightReviews && (
+      {props.isAdmin && !props.rightReviews && (
         <GivenReviewsHeader
           hasGivenReview={props.hasGivenReview}
           userWhoReceived={props.review?.userWhoReceived}
   hasGivenReview: PropTypes.bool,
   userWhoReceived: PropTypes.any,
   rightReviews: PropTypes.bool,
+  isAdmin: PropTypes.bool,
 };
 
 export default UserReviewsSingleCard;

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

 import history from "../../../../store/utils/history";
 import { replaceInRoute } from "../../../../util/helpers/routeHelpers";
 import { PROFILE_PAGE } from "../../../../constants/pages";
+import { selectAmIBlocked } from "../../../../store/selectors/profileSelectors";
+import { useSelector } from "react-redux";
 
 const DirectChatContentHeader = (props) => {
   const [showPhonePopover, setShowPhonePopover] = useState(false);
   const [phonePopoverAnchorEl, setPhonePopoverAnchorEl] = useState(null);
   const { isMobile } = useIsMobile();
+  const mineProfileBlocked = useSelector(selectAmIBlocked);
 
   const togglePhonePopover = (event) => {
     if (props.interlucator?.telephone) {
     }
   };
   const routeToUser = () => {
-    history.push(
-      replaceInRoute(PROFILE_PAGE, {
-        idProfile: props?.interlucator?.userId,
-      })
-    );
+    if (!props?.interlucator?._blocked)
+      history.push(
+        replaceInRoute(PROFILE_PAGE, {
+          idProfile: props?.interlucator?.userId,
+        })
+      );
   };
   return (
     <DirectChatContentHeaderContainer>
       </DirectChatContentHeaderFlexContainer>
       <DirectChatContentHeaderFlexContainer>
         <PhoneIconContainer
-          disabled={!props.interlucator?.telephone}
+          disabled={
+            mineProfileBlocked ||
+            props?.interlucator?._blocked ||
+            !props.interlucator?.telephone
+          }
           onClick={togglePhonePopover}
         >
           <PhoneIcon />

src/components/DirectChat/DirectChatHeader/DirectChatHeader.js

       <OfferCard
         offer={props.offer}
         aboveChat
-        disabledReviews={isDisabledReviews}
+        disabledReviews={props.interlocutor?._blocked || isDisabledReviews}
         makeReview={makeReview}
         dontShowViews
-        disabledCheckButton={props?.offer?._deleted}
+        disabledCheckButton={props.interlocutor?._blocked || props?.offer?._deleted}
       />
     </DirectChatHeaderContainer>
   );

src/components/DirectChat/DirectChatNewMessage/DirectChatNewMessage.js

 import { validateExchange } from "../../../store/actions/exchange/exchangeActions";
 import NotAllowedChat from "./NotAllowedChat/NotAllowedChat";
 import { convertLocalDateToUTCDate } from "../../../util/helpers/dateHelpers";
+import { selectAmIBlocked } from "../../../store/selectors/profileSelectors";
 
 const DirectChatNewMessage = (props) => {
   const [typedValue, setTypedValue] = useState("");
   const [isFocused, setIsFocused] = useState(false);
   const exchange = useSelector(selectExchange);
   const dispatch = useDispatch();
+  const mineProfileBlocked = useSelector(selectAmIBlocked);
   const { t } = useTranslation();
   const location = useLocation();
   const history = useHistory();
       })
     );
   };
+  console.log("newm", props);
+  if (mineProfileBlocked) {
+    return <NotAllowedChat mineProfileBlocked />;
+  }
   if (props?.chat?.offer?.offer?._deleted) {
     return <NotAllowedChat />;
   }
+  if (props?.chat?.interlocutor?._blocked) {
+    return <NotAllowedChat blocked />;
+  }
   return (
     <>
       <DirectChatNewMessageContainer>

src/components/DirectChat/DirectChatNewMessage/NotAllowedChat/NotAllowedChat.js

 } from "./NotAllowedChat.styled";
 import { useTranslation } from "react-i18next";
 
-const NotAllowedChat = () => {
+const NotAllowedChat = (props) => {
   const { t } = useTranslation();
   return (
     <NotAllowedChatContainer>
-      <NotAllowedChatText>{t("messages.notAllowedChat")}</NotAllowedChatText>
+      <NotAllowedChatText>
+        {props.mineProfileBlocked
+          ? t("profile.mineProfileBlocked")
+          : props.blocked
+          ? t("profile.blockedProfile")
+          : t("messages.notAllowedChat")}
+      </NotAllowedChatText>
     </NotAllowedChatContainer>
   );
 };
 
 NotAllowedChat.propTypes = {
   children: PropTypes.node,
+  blocked: PropTypes.bool,
+  mineProfileBlocked: PropTypes.bool,
 };
 
 export default NotAllowedChat;

src/components/ItemDetails/SkeletonItemDetails/SkeletonItemDetails.styled.js

   display: flex;
   flex-direction: column;
   margin-left: 20px;
+  overflow: hidden;
   width: 100%;
 
   @media (max-width: 600px) {

src/components/Modals/DeleteCategory/DeleteCategory.js

 import { useDispatch } from "react-redux";
 import { fetchAdminMethod } from "../../../store/actions/admin/adminActions";
 import { DELETE_TYPE } from "../../../constants/adminMethodConstants";
+import { dynamicRouteMatches } from "../../../util/helpers/routeHelpers";
+import { ADMIN_SINGLE_USER_PAGE } from "../../../constants/pages";
+import { fetchProfile } from "../../../store/actions/profile/profileActions";
 
 const DeleteCategory = (props) => {
   const dispatch = useDispatch();
   }, [props, t]);
 
   const handleApiResponseSuccess = () => {
+    if (dynamicRouteMatches(ADMIN_SINGLE_USER_PAGE)) {
+      dispatch(fetchProfile(props.customId))
+    }
     handleCancel();
   };
 

src/components/Popovers/HeaderPopover/HeaderPopover.styled.js

     font-weight: 700;
     color: ${selectedTheme.colors.primaryPurple};
     cursor: pointer;
+    max-width: 170px;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
   & p {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
     overflow: hidden;
     max-height: 32px;
     font-size: 0.81rem;
 export const NameOfProduct = styled(Typography)`
   font-size: 12px;
   font-weight: 700;
+  max-width: 100px;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-family: ${selectedTheme.fonts.textFont};
   letter-spacing: 0.02em;
   color: ${selectedTheme.colors.primaryDarkText};

src/components/UserReviews/UserReviews.js

                   showRemoveIcon={props.isAdmin}
                   review={review}
                   key={index}
+                  isAdmin={props.isAdmin}
                   hasGivenReview={sortRef.current?.hasGivenReview}
                   givingReview={props.givingReview}
                   rightReviews={props.rightReviews}

src/components/UserReviews/UserReviews.styled.js

-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { List, Box, Typography, Grid } from "@mui/material";
 import ThumbUpIcon from "@mui/icons-material/ThumbUp";
 import ThumbDownIcon from "@mui/icons-material/ThumbDown";
 
 export const ReviewsBox = styled(Box)`
   width: 100%;
-  min-width: 290px;
+  min-width: 350px;
   ${(props) =>
     props.profile &&
-    `
-  position: relative;
-  top: -15px;
-  `}
-  margin-top: ${(props) => (props.profile ? "60px" : "0")};
+    css`
+      height: calc(100vh - 100px);
+      position: relative;
+      top: -15px;
+    `}
+  /* margin-top: ${(props) => (props.profile ? "60px" : "0")}; */
   @media (max-width: 600px) {
     position: relative;
+    min-width: 290px;
     top: -45px;
     overflow: hidden;
     max-height: ${(props) =>
         ? "450px"
         : "350px"};
     padding: 0;
-    margin: 0 ${props => props.isAdmin ? "18px" : "0"};
+    margin: 0 ${(props) => (props.isAdmin ? "18px" : "0")};
     margin-top: 60px;
   }
 `;

src/constants/adminTypeConstants.js

 export const LOCATIONS_TYPE = "locations";
 export const REVIEW_TYPE = "reviews";
 export const USERS_BLOCK_TYPE = "blockUser";
+export const USERS_UNBLOCK_TYPE = "unblockUser";
 export const USERS_DELETE_TYPE = "deleteUser"

src/i18n/resources/rs.js

   messages: {
     headerTitle: "Moje Ćaskanje",
     cardProduct: "Proizvod: ",
+    chatCardBlocked: "(blokiran korisnik)",
     miniChatHeaderTitle: "Moje Poruke",
     send: "Pošalji",
     sendPlaceholder: "Poruka...",
     myOffers: "Moje objave",
     profileOffers: "Objave kompanije",
     blockedProfile: "Trenutno blokiran profil",
+    blockedProfileShort: "Blokiran profil",
+    mineProfileBlocked: "Vaš profil je trenutno blokiran.",
     deletedProfile: "Obrisan profil"
   },
   about: {

src/layouts/ChatGridLayout/ChatGridLayout.js

     <ChatGridLayoutContainer>
       {props.children}
       <GridContainer container maxHeight="xl" spacing={2}>
-        <GridLeftCard item xs={0} lg={3} xl={2.4} md={4}>
+        <GridLeftCard item xs={0} lg={3} xl={3} md={4}>
           {props.leftCard}
         </GridLeftCard>
-        <GridContent item xs={12} lg={9} xl={9.6} md={8}>
+        <GridContent item xs={12} lg={9} xl={9} md={8}>
           {props.content}
         </GridContent>
       </GridContainer>

src/layouts/ChatGridLayout/ChatGridLayout.styled.js

     }
 `;
 export const GridContainer = styled(Grid)`
-
+    max-width: none;
 `
 export const GridContent = styled(Grid)`
 `

src/layouts/ItemDetailsLayout/ItemDetailsLayout.js

       profile={props.profile}
     >
       {props.children}
-      <ContentRightCardContainer>
-        <Content lg={5} item>{props.content}</Content>
-        <RightCard lg={7} item singleOffer={props.singleOffer} profile={props.profile}>
+      <ContentRightCardContainer container spacing={2} >
+        <Content sm={12} md={7} lg={7} item>{props.content}</Content>
+        <RightCard sm={0} md={5} lg={5} item singleOffer={props.singleOffer} profile={props.profile}>
           {props.rightCard}
         </RightCard>
       </ContentRightCardContainer>

src/layouts/ItemDetailsLayout/ItemDetailsLayout.styled.js

-import { Container, Grid, Box } from "@mui/material";
+import { Container, Grid } from "@mui/material";
 import styled from "styled-components";
 
 export const ItemDetailsLayoutContainer = styled(Container)`
   margin: 0;
+  padding: 0;
+  padding-left: 20px;
+  padding-right: 54px;
   max-width: 100vw;
   position: relative;
   height: 100%;
+  @media (max-width: 600px) {
+    padding: 0;
+  }
 `;
 
-export const ContentRightCardContainer = styled(Box)`
-  display: flex;
-
-  @media screen and (max-width: 600px) {
-    flex-direction: column;
-  }
+export const ContentRightCardContainer = styled(Grid)`
+  margin: 0;
+  width: 100%;
 `;
 
 export const RightCard = styled(Grid)`
   margin-top: 0;
   margin-left: 0;
+  padding-right: 18px;
   padding-left: 0;
   ${(props) => props.profile && `min-width: 350px;`}
+  margin-bottom: 18px;
 
   @media screen and (min-width: 600px) {
     margin-top: 34px;
     /* margin-left: ${(props) => (props.profile ? "0" : "36px")}; */
     /* padding-left: ${(props) => (props.singleOffer ? "36px" : 0)}; */
     border-top-right-radius: 4px;
+    min-width: 0;
     ${(props) => props.singleOffer && `width: 100%`}
   }
 
   @media screen and (max-width: 1200px) {
     margin-left: 0;
   }
+  @media (max-width: 600px) {
+    width: 100%;
+
+  }
 `;
 export const Content = styled(Grid)`
   width: 100%;
+  @media (max-width: 600px) {
+    padding-right: 16px;
+  }
 `;

src/layouts/ProfileLayout/ProfileLayout.js

       profile={props.profile}
     >
       {props.children}
-      <ContentRightCardContainer>
-        <Content item>{props.content}</Content>
-        <RightCard item singleOffer={props.singleOffer} profile={props.profile}>
+      <ContentRightCardContainer container spacing={2}>
+        <Content sm={12} md={9} lg={9} item>{props.content}</Content>
+        <RightCard sm={0} md={3} lg={3} item singleOffer={props.singleOffer} profile={props.profile}>
           {props.rightCard}
         </RightCard>
       </ContentRightCardContainer>

src/layouts/ProfileLayout/ProfileLayout.styled.js

-import { Container, Grid, Box } from "@mui/material";
+import { Container, Grid } from "@mui/material";
 import styled from "styled-components";
 
 export const ProfileLayoutContainer = styled(Container)`
   }
 `;
 
-export const ContentRightCardContainer = styled(Box)`
-  display: flex;
-
-  @media screen and (max-width: 600px) {
-    flex-direction: column;
-  }
+export const ContentRightCardContainer = styled(Grid)`
+  margin: 0;
+  width: 100%;
 `;
 
 export const RightCard = styled(Grid)`
   padding-left: 0;
   ${(props) => props.profile && `min-width: 350px;`}
 
+  
   @media screen and (min-width: 600px) {
     margin-top: 34px;
     margin-left: ${(props) => (props.profile ? "0" : "36px")};
     padding-left: ${(props) => (props.singleOffer ? "36px" : 0)};
     border-top-right-radius: 4px;
+    min-width: 0;
     ${(props) => props.singleOffer && `width: 100%`}
   }
-
   @media screen and (max-width: 1200px) {
     margin-left: 0;
   }
+  @media (max-width: 600px) {
+    min-width: 0;
+  }
 `;
 export const Content = styled(Grid)`
   width: 100%;

src/pages/AdminHomePage/AdminUsersPage/AdminSingleUserPage/AdminSingleUserPage.styled.js

 import UserReviews from "../../../../components/UserReviews/UserReviews";
 
 export const AdminSingleUserPageContainer = styled(Box)`
+  margin: 0 20px;
   @media (max-width: 600px) {
+    margin: 0;
     margin-top: 90px;
+
   }
 `;
 export const AdminSingleUserPageProfile = styled(Profile)`
   margin-bottom: 5px;
 `;
 export const AdminSingleUserPageReviews = styled(UserReviews)`
-  padding: 0 50px;
+  padding: 0;
+  padding-right: 33px;
   @media (max-width: 600px) {
     padding: 0;
-    width: calc(100% - 36px);
+    width: 100%;
     & > div {
       margin-top: 0;
       height: 500px;

src/pages/ItemDetailsPage/ItemDetailsPage.styled.js

 export const ItemDetailsPageContainer = styled(Container)`
   padding: 0;
   margin: 0;
-  margin-top: 80px;
+  margin-top: 72px;
   height: 100%;
   width: 100%;
   max-width: none;

src/request/apiEndpoints.js

     getAllProfilesAsAdmin: "admin/users",
     deleteProfileAsAdmin: "admin/users/{userId}",
     blockProfileAsAdmin: "admin/users/{userId}/block",
+    unblockProfileAsAdmin: "admin/users/{userId}/unblock",
   },
   applications: {
     application: "/applications/{applicationUid}",

src/request/profileRequest.js

       userId: payload.userId,
     })
   );
+export const attemptUnblockProfileAsAdmin = (payload) =>
+  patchRequest(
+    replaceInUrl(apiEndpoints.users.unblockProfileAsAdmin, {
+      userId: payload.userId,
+    })
+  );

src/store/saga/adminSaga.js

   SUBCATEGORIES_TYPE,
   USERS_BLOCK_TYPE,
   USERS_DELETE_TYPE,
+  USERS_UNBLOCK_TYPE,
 } from "../../constants/adminTypeConstants";
 import {
   attemptAddNewCategory,
   attemptDeleteLocation,
   attemptEditLocation,
 } from "../../request/locationsRequest";
-import { attemptBlockProfileAsAdmin, attemptDeleteProfileAsAdmin } from "../../request/profileRequest";
+import { attemptBlockProfileAsAdmin, attemptDeleteProfileAsAdmin, attemptUnblockProfileAsAdmin } from "../../request/profileRequest";
 // import { attemptAddNewCategory } from "../../request/categoriesRequest";
 import { ADMIN_FETCH } from "../actions/admin/adminActionConstants";
 import {
     yield call(console.log, e);
   }
 }
+function* unblockUser(payload) {
+  try {
+    yield call(attemptUnblockProfileAsAdmin, { userId: payload.id });
+    yield put(fetchAllProfilesAsAdmin());
+  } catch (e) {
+    yield call(console.log, e);
+  }
+}
 
 function* fetchAdminMethod({ payload }) {
   try {
       yield call(deleteUser, { id: payload.id });
     } else if (payload.type === USERS_BLOCK_TYPE) {
       yield call(blockUser, { id: payload.id });
+    } else if (payload.type === USERS_UNBLOCK_TYPE) {
+      yield call(unblockUser, {id: payload.id})
     }
     if (payload.handleApiResponseSuccess)
       yield call(payload.handleApiResponseSuccess);

src/store/selectors/profileSelectors.js

   profileSelector,
   state => state.allProfiles?.total
 )
+export const selectAmIBlocked = createSelector(
+  profileSelector,
+  state => state?.mineProfile?._blocked
+)