Profile code cleanup

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

@@ -1,21 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {
-  BlockIcon,
-  BlockIconContainer,
-  BlockLabelIcon,
-  ButtonsContainer,
-  CheckButton,
-  EditButton,
-  EditIcon,
   ProfileCardContainer,
   ProfileCardWrapper,
   ProfileInfoContainer,
-  RemoveIcon,
-  RemoveIconContainer,
-  UnblockIcon,
-  UnblockIconContainer,
-  UnblockLabelIcon,
+  CheckButton,
 } from "./BigProfileCard.styled";
 import ProfileMainInfo from "../ProfileMainInfo/ProfileMainInfo";
 import ProfileContact from "../ProfileContact/ProfileContact";
@@ -24,63 +13,10 @@ import { useTranslation } from "react-i18next";
 import history from "../../../../store/utils/history";
 import { replaceInRoute } from "../../../../util/helpers/routeHelpers";
 import { ADMIN_SINGLE_USER_PAGE } from "../../../../constants/pages";
-import UserLabeledCard from "../../LabeledCard/User/UserLabeledCard";
-import {
-  USERS_BLOCK_TYPE,
-  USERS_DELETE_TYPE,
-  USERS_UNBLOCK_TYPE,
-} from "../../../../constants/adminTypeConstants";
-import { useDispatch } from "react-redux";
-import {
-  toggleDeleteCategoryModal,
-  toggleEditProfileModal,
-} from "../../../../store/actions/modal/modalActions";
+import ProfileControl from "../ProfileControl/ProfileControl";
 
 const BigProfileCard = (props) => {
   const { t } = useTranslation();
-  const dispatch = useDispatch();
-  const removeUser = () => {
-    dispatch(
-      toggleDeleteCategoryModal({
-        customId: props.profile._id,
-        type: USERS_DELETE_TYPE,
-        customLabeledCard: <UserLabeledCard user={props.profile} />,
-        customLabeledCardHeight: "90px",
-      })
-    );
-  };
-  const blockUser = () => {
-    dispatch(
-      toggleDeleteCategoryModal({
-        customId: props.profile._id,
-        type: USERS_BLOCK_TYPE,
-        customLabeledCard: <UserLabeledCard user={props.profile} />,
-        customLabeledCardHeight: "90px",
-        customLabeledCardIcon: <BlockLabelIcon />,
-      })
-    );
-  };
-  const unblockUser = () => {
-    dispatch(
-      toggleDeleteCategoryModal({
-        customId: props.profile._id,
-        type: USERS_UNBLOCK_TYPE,
-        customLabeledCard: <UserLabeledCard user={props.profile} />,
-        customLabeledCardHeight: "90px",
-        customLabeledCardIcon: <UnblockLabelIcon />,
-      })
-    );
-  };
-  const editUser = () => {
-    dispatch(
-      toggleEditProfileModal({
-        profile: props.profile,
-        reFetchProfile: () => {},
-        isAdmin: true,
-        userId: props.profile._id,
-      })
-    );
-  };
   const goToUser = () => {
     history.push(
       replaceInRoute(ADMIN_SINGLE_USER_PAGE, {
@@ -91,23 +27,9 @@ const BigProfileCard = (props) => {
   return (
     <ProfileCardContainer halfwidth={props.halfwidth}>
       <ProfileCardWrapper variant="outlined">
-        <ButtonsContainer>
-          <EditButton onClick={editUser}>
-            <EditIcon />
-          </EditButton>
-          <RemoveIconContainer onClick={removeUser}>
-            <RemoveIcon />
-          </RemoveIconContainer>
-          {props.profile?._blocked ? (
-            <UnblockIconContainer onClick={unblockUser}>
-              <UnblockIcon />
-            </UnblockIconContainer>
-          ) : (
-            <BlockIconContainer onClick={blockUser}>
-              <BlockIcon />
-            </BlockIconContainer>
-          )}
-        </ButtonsContainer>
+        {/* Profile Control (edit, remove, block, unblock)  */}
+        <ProfileControl profile={props.profile} isAdmin bigProfileCard />
+
         <ProfileInfoContainer>
           {/* Profile Main Info  */}
           <ProfileMainInfo profile={props.profile} bigProfileCard isAdmin />
@@ -132,6 +54,7 @@ const BigProfileCard = (props) => {
 BigProfileCard.propTypes = {
   profile: PropTypes.any,
   halfwidth: PropTypes.bool,
+  isAdmin: PropTypes.bool,
 };
 
 export default BigProfileCard;

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

@@ -1,17 +1,7 @@
 import styled from "styled-components";
-import { Card, Typography, Grid, Box } from "@mui/material";
+import { Card, Grid, Box } from "@mui/material";
 import selectedTheme from "../../../../themes";
-import { ReactComponent as Edit } from "../../../../assets/images/svg/edit.svg";
-// import { ReactComponent as Pocket } from "../../../assets/images/svg/pocket.svg";
-// import { ReactComponent as Globe } from "../../../assets/images/svg/globe.svg";
-import { ReactComponent as Mail } from "../../../../assets/images/svg/mail.svg";
-import { ReactComponent as Remove } from "../../../../assets/images/svg/trash.svg";
-import { ReactComponent as Block } from "../../../../assets/images/svg/block.svg";
-import { ReactComponent as Unblock } from "../../../../assets/images/svg/unblock.svg";
-import { ReactComponent as UnblockGold } from "../../../../assets/images/svg/unblock-gold.svg";
-import { IconButton } from "../../../Buttons/IconButton/IconButton";
 import { PrimaryButton } from "../../../Buttons/PrimaryButton/PrimaryButton";
-// import { ReactComponent as Location } from "../../../assets/images/svg/location.svg";
 
 export const ProfileCardContainer = styled(Box)`
   width: ${(props) => (props.halfwidth ? `49%` : `100%`)};
@@ -48,91 +38,6 @@ export const ProfileCardWrapper = styled(Card)`
   position: relative;
 `;
 
-export const ProfileCardHeader = styled(Grid)`
-  display: flex;
-  justify-content: start;
-  align-items: center;
-  margin-bottom: 11px;
-`;
-
-export const EditIcon = styled(Edit)`
-  width: 18px;
-  height: 18px;
-  & path {
-    stroke: ${selectedTheme.colors.primaryPurple};
-  }
-`;
-
-export const ButtonsContainer = styled(Box)`
-  position: absolute;
-  top: 18px;
-  right: 18px;
-  display: flex;
-  flex-direction: row;
-  gap: 18px;
-  @media (max-width: 600px) {
-    gap: 12px;
-  }
-`;
-
-export const MessageButton = styled(IconButton)`
-  width: 40px;
-  height: 40px;
-  background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
-  border-radius: 100%;
-  padding-top: 2px;
-  text-align: center;
-  @media (max-width: 600px) {
-    width: 32px;
-    height: 32px;
-    top: 16px;
-    right: 16px;
-    padding: 0;
-    ${(props) =>
-      props.vertical &&
-      `
-      display: none;
-    `}
-    & button svg {
-      width: 16px;
-      height: 16px;
-      position: relative;
-      top: -2px;
-      left: -2px;
-    }
-  }
-`;
-export const EditButton = styled(MessageButton)``;
-
-export const RemoveIconContainer = styled(MessageButton)`
-  display: block;
-`;
-export const RemoveIcon = styled(Remove)``;
-export const BlockIconContainer = styled(MessageButton)`
-  display: block;
-`;
-export const BlockIcon = styled(Block)``;
-export const UnblockIconContainer = styled(MessageButton)`
-  display: block;
-`;
-export const UnblockIcon = styled(Unblock)``;
-export const BlockLabelIcon = styled(Block)`
-  width: 18px;
-  height: 18px;
-  position: relative;
-  top: 10px;
-  left: 11px;
-  & path {
-    stroke: ${selectedTheme.colors.iconYellowColor};
-  }
-`;
-export const UnblockLabelIcon = styled(UnblockGold)`
-  width: 18px;
-  height: 18px;
-  position: relative;
-  top: 10px;
-  left: 11px;
-`;
 export const CheckButton = styled(PrimaryButton)`
   width: 180px;
   height: 48px;
@@ -149,32 +54,6 @@ export const CheckButton = styled(PrimaryButton)`
   }
 `;
 
-export const HeaderTitle = styled(Typography)`
-  font-size: 16px;
-  font-family: ${selectedTheme.fonts.textFont};
-  color: ${selectedTheme.colors.primaryText};
-  position: relative;
-  @media (max-width: 600px) {
-    font-size: 12px;
-  }
-`;
-export const MessageIcon = styled(Mail)`
-  width: 19.5px;
-  height: 19.5px;
-  position: relative;
-  left: 1px;
-  top: 3px;
-  & path {
-    stroke: ${selectedTheme.colors.primaryYellow};
-  }
-  @media (max-width: 600px) {
-    width: 16px;
-    height: 16px;
-    left: -1px;
-    top: 1px;
-  }
-`;
-
 export const ProfileInfoContainer = styled(Grid)`
   display: flex;
   flex-direction: column;

src/components/Cards/ProfileCard/ProfileCard.js

@@ -1,22 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {
-  EditButton,
   ProfileCardWrapper,
   ProfileCardContainer,
   ProfileCardHeader,
   HeaderTitle,
-  EditIcon,
   ProfileInfoContainer,
-  RemoveButton,
-  RemoveIcon,
-  BlockButton,
-  BlockIcon,
-  ButtonsContainer,
-  BlockLabelIcon,
   ProfileInfoAndContactContainer,
-  UnblockButton,
-  UnblockIcon,
   BlockedProfileContainer,
 } from "./ProfileCard.styled";
 import PersonOutlineIcon from "@mui/icons-material/PersonOutline";
@@ -36,21 +26,11 @@ import { PROFILE_SCOPE } from "../../../store/actions/profile/profileActionConst
 import SkeletonProfileCard from "./SkeletonProfileCard/SkeletonProfileCard";
 import { useMemo } from "react";
 import companyData from "../../../notFoundData/companyData";
-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";
-import {
-  toggleDeleteCategoryModal,
-  toggleEditProfileModal,
-} from "../../../store/actions/modal/modalActions";
-import {
-  USERS_BLOCK_TYPE,
-  USERS_DELETE_TYPE,
-  USERS_UNBLOCK_TYPE,
-} from "../../../constants/adminTypeConstants";
-import { Tooltip } from "@mui/material";
+import ProfileControl from "./ProfileControl/ProfileControl";
 
 const ProfileCard = (props) => {
   const isLoading = useSelector(selectIsLoadingByActionType(PROFILE_SCOPE));
@@ -105,48 +85,6 @@ const ProfileCard = (props) => {
         100
     );
   }
-  const removeUser = () => {
-    dispatch(
-      toggleDeleteCategoryModal({
-        customId: profile?._id,
-        type: USERS_DELETE_TYPE,
-        customLabeledCard: <UserLabeledCard user={profile} />,
-        customLabeledCardHeight: "90px",
-      })
-    );
-  };
-  const blockUser = () => {
-    dispatch(
-      toggleDeleteCategoryModal({
-        customId: profile?._id,
-        type: USERS_BLOCK_TYPE,
-        customLabeledCard: <UserLabeledCard user={profile} />,
-        customLabeledCardHeight: "90px",
-        customLabeledCardIcon: <BlockLabelIcon />,
-      })
-    );
-  };
-  const unblockUser = () => {
-    dispatch(
-      toggleDeleteCategoryModal({
-        customId: profile?._id,
-        type: USERS_UNBLOCK_TYPE,
-        customLabeledCard: <UserLabeledCard user={profile} />,
-        customLabeledCardHeight: "90px",
-      })
-    );
-  };
-  const handleEditProfile = () => {
-    if (!profile?._blocked) {
-      dispatch(
-        toggleEditProfileModal({
-          profile: profile,
-          isAdmin: props.isAdmin,
-          reFetchProfile: reFetchProfile,
-        })
-      );
-    }
-  };
 
   return (
     <>
@@ -174,42 +112,14 @@ const ProfileCard = (props) => {
                   <BlockedProfile hideIcon redText aboveTitle isAdmin />
                 </BlockedProfileContainer>
               )}
-              <ButtonsContainer>
-                {profile?._blocked && !isMobile && <BlockedProfile />}
-                {props.isAdmin && (
-                  <>
-                    {profile?._blocked ? (
-                      <Tooltip title={t("admin.unblockUser.tooltip")}>
-                        <UnblockButton onClick={unblockUser}>
-                          <UnblockIcon />
-                        </UnblockButton>
-                      </Tooltip>
-                    ) : (
-                      <Tooltip title={t("admin.blockUser.tooltip")}>
-                        <BlockButton onClick={blockUser}>
-                          <BlockIcon />
-                        </BlockButton>
-                      </Tooltip>
-                    )}
-                    <Tooltip title={t("admin.deleteUser.tooltip")}>
-                      <RemoveButton onClick={removeUser}>
-                        <RemoveIcon />
-                      </RemoveButton>
-                    </Tooltip>
-                  </>
-                )}
-                {(isMyProfile || props.isAdmin) && (
-                  <Tooltip title={t("editProfile.tooltip")}>
-                    <EditButton
-                      onClick={handleEditProfile}
-                      isAdmin={props.isAdmin}
-                      disabled={!props.isAdmin && profile?._blocked}
-                    >
-                      <EditIcon />
-                    </EditButton>
-                  </Tooltip>
-                )}
-              </ButtonsContainer>
+              {/* Profile Control (edit, remove, block, unblock) */}
+              <ProfileControl
+                profile={profile}
+                isMobile={isMobile}
+                isAdmin={props.isAdmin}
+                isMyProfile={isMyProfile}
+                reFetchProfile={reFetchProfile}
+              />
               <ProfileInfoContainer>
                 <ProfileInfoAndContactContainer
                   isAdmin={props.isAdmin}

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

@@ -1,11 +1,6 @@
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { Card, Typography, Grid, Box } from "@mui/material";
 import selectedTheme from "../../../themes";
-import { ReactComponent as Edit } from "../../../assets/images/svg/edit.svg";
-import { ReactComponent as Block } from "../../../assets/images/svg/block.svg";
-import { ReactComponent as Unblock } from "../../../assets/images/svg/unblock.svg";
-import { ReactComponent as Remove } from "../../../assets/images/svg/trash.svg";
-import { ReactComponent as Mail } from "../../../assets/images/svg/mail.svg";
 
 export const ProfileCardContainer = styled(Box)`
   width: 100%;
@@ -21,152 +16,6 @@ export const ProfileCardContainer = styled(Box)`
     padding: 0 ${(props) => (props.isAdmin ? "18px" : "0")};
   }
 `;
-export const EditIcon = styled(Edit)`
-  position: relative;
-  top: 3px;
-  left: 2px;
-  width: 18px;
-  height: 18px;
-  @media (max-width: 600px) {
-    top: 0;
-    left: -2px;
-  }
-  & path {
-    stroke: ${selectedTheme.colors.primaryPurple};
-  }
-`;
-export const EditButton = styled(Box)`
-  width: 40px;
-  height: 40px;
-  font-weight: 900;
-  background: ${(props) =>
-    props.disabled ? "white" : selectedTheme.colors.primaryIconBackgroundColor};
-  border-radius: 360px;
-  padding: 0.45rem 0.45rem 0.27rem 0.57rem;
-  cursor: ${(props) => !props.disabled && `pointer`};
-  ${(props) =>
-    props.disabled &&
-    css`
-      & path {
-        stroke: ${selectedTheme.colors.iconStrokePurpleDisabledColor};
-      }
-    `}
-  @media (max-width: 600px) {
-    width: 32px;
-    height: 32px;
-  }
-`;
-export const RemoveIcon = styled(Remove)`
-  position: relative;
-  top: 3px;
-  left: 2px;
-  width: 18px;
-  height: 18px;
-  @media (max-width: 600px) {
-    top: 0;
-    left: -2px;
-  }
-  & path {
-    stroke: ${selectedTheme.colors.primaryPurple};
-  }
-`;
-export const RemoveButton = styled(Box)`
-  width: 40px;
-  height: 40px;
-  font-weight: 900;
-  background: ${selectedTheme.colors.primaryIconBackgroundColor};
-  border-radius: 360px;
-  padding: 0.45rem 0.45rem 0.27rem 0.57rem;
-  cursor: pointer;
-  @media (max-width: 600px) {
-    width: 32px;
-    height: 32px;
-  }
-`;
-
-export const BlockLabelIcon = styled(Block)`
-  width: 18px;
-  height: 18px;
-  position: relative;
-  top: 10px;
-  left: 11px;
-  & path {
-    stroke: ${selectedTheme.colors.iconYellowColor};
-  }
-`;
-
-export const BlockButton = styled(Box)`
-  width: 40px;
-  height: 40px;
-  font-weight: 900;
-  background: ${selectedTheme.colors.primaryIconBackgroundColor};
-  border-radius: 360px;
-  padding: 0.45rem 0.45rem 0.27rem 0.57rem;
-  cursor: pointer;
-  @media (max-width: 600px) {
-    width: 32px;
-    height: 32px;
-  }
-`;
-export const BlockIcon = styled(Block)`
-  position: relative;
-  top: 3px;
-  left: 2px;
-  width: 18px;
-  height: 18px;
-  @media (max-width: 600px) {
-    top: 0;
-    left: -2px;
-  }
-  & path {
-    stroke: ${selectedTheme.colors.primaryPurple};
-  }
-`;
-export const UnblockButton = styled(Box)`
-  width: 40px;
-  height: 40px;
-  font-weight: 900;
-  background: ${selectedTheme.colors.primaryIconBackgroundColor};
-  border-radius: 360px;
-  padding: 0.45rem 0.45rem 0.27rem 0.57rem;
-  cursor: pointer;
-  @media (max-width: 600px) {
-    width: 32px;
-    height: 32px;
-  }
-`;
-export const UnblockIcon = styled(Unblock)`
-  position: relative;
-  top: 3px;
-  left: 2px;
-  width: 18px;
-  height: 18px;
-  @media (max-width: 600px) {
-    top: 0;
-    left: -2px;
-  }
-`;
-export const MessageButton = styled(EditButton)`
-  background: ${selectedTheme.colors.primaryPurple};
-  width: 40px;
-  height: 40px;
-  @media (max-width: 600px) {
-    width: 32px;
-    height: 32px;
-  }
-`;
-export const ButtonsContainer = styled(Box)`
-  position: absolute;
-  top: 18px;
-  right: 18px;
-  gap: 16px;
-  display: flex;
-  justify-content: flex-end;
-  flex-direction: row;
-  @media (max-width: 600px) {
-    gap: 12px;
-  }
-`;
 
 export const ProfileCardWrapper = styled(Card)`
   border: 1px solid ${selectedTheme.colors.borderNormal};
@@ -183,121 +32,6 @@ export const ProfileCardWrapper = styled(Card)`
   border-radius: 0 0 4px 4px;
 `;
 
-// export const ProfileName = styled(Typography)`
-//   color: ${(props) =>
-//     props.isMyProfile
-//       ? selectedTheme.colors.primaryYellow
-//       : selectedTheme.colors.primaryPurple};
-//   font-weight: 700;
-//   font-size: 24px;
-//   font-family: ${selectedTheme.fonts.textFont};
-//   margin-bottom: 5px;
-//   @media (max-width: 600px) {
-//     font-size: 18px;
-//   }
-// `;
-
-// export const ProfilePIB = styled(Typography)`
-//   color: ${(props) =>
-//     props.isMyProfile ? "white" : selectedTheme.colors.primaryDarkText};
-//   margin-top: 0.18rem;
-//   font-family: ${selectedTheme.fonts.textFont};
-//   font-size: 16px;
-//   padding-top: 1px;
-//   @media (max-width: 600px) {
-//     font-size: 14px;
-//   }
-// `;
-// export const ProfilePIBContainer = styled(Grid)`
-//   display: flex;
-//   justify-content: center;
-//   align-items: center;
-//   position: relative;
-//   left: 5px;
-// `;
-
-// export const ProfileMainInfo = styled(Grid)`
-//   display: flex;
-//   justify-content: start;
-//   align-items: start;
-// `;
-
-// export const AvatarImageContainer = styled(Grid)`
-//   display: flex;
-//   justify-content: start;
-//   align-items: center;
-// `;
-
-// export const ProfileMainInfoGrid = styled(Grid)`
-//   display: flex;
-//   flex-direction: column;
-//   align-items: start;
-//   margin-left: 16px;
-// `;
-
-// export const ProfileContact = styled(Grid)`
-//   padding-top: 2rem;
-//   padding-bottom: 2rem;
-//   @media (max-width: 600px) {
-//     padding-bottom: 1rem;
-//   }
-// `;
-
-// export const ContactItem = styled(Typography)`
-//   margin-right: 2rem;
-//   margin-left: 0.4rem;
-//   color: ${(props) =>
-//     props.isMyProfile ? "white" : selectedTheme.colors.primaryDarkText};
-//   display: unset;
-//   font-family: ${selectedTheme.fonts.textFont};
-//   letter-spacing: 0.02em;
-//   font-size: 16px;
-//   position: relative;
-//   bottom: 1px;
-//   @media (max-width: 600px) {
-//     font-size: 14px;
-//     bottom: 4px;
-//   }
-// `;
-
-// export const StatsItem = styled(Typography)`
-//   margin-right: 2rem;
-//   display: unset;
-//   margin-left: 1rem;
-//   font-family: ${selectedTheme.fonts.textFont};
-//   font-size: 16px;
-//   margin-bottom: 2px;
-//   @media (max-width: 600px) {
-//     font-size: 12px;
-//   }
-// `;
-
-// export const ProfileStats = styled(Grid)`
-//   display: flex;
-//   justify-content: start;
-//   align-items: center;
-//   background: ${selectedTheme.colors.primaryDarkTextSecond};
-//   width: calc(100% + 2rem);
-//   padding-top: 1.3rem;
-//   padding-bottom: 1.3rem;
-//   margin-bottom: -1rem;
-//   margin-left: -1rem;
-//   border-radius: 0 0 4px 4px;
-// `;
-// export const AvatarImage = styled.img`
-//   min-height: 144px;
-//   min-width: 144px;
-//   width: 144px;
-//   height: 144px;
-//   border-radius: 100%;
-//   @media (max-width: 600px) {
-//     min-height: 90px;
-//     min-width: 90px;
-//     width: 90px;
-//     height: 90px;
-//   }
-// `;
-
 export const ProfileCardHeader = styled(Grid)`
   display: flex;
   justify-content: start;
@@ -314,22 +48,6 @@ export const HeaderTitle = styled(Typography)`
     font-size: 12px;
   }
 `;
-export const MessageIcon = styled(Mail)`
-  width: 19.5px;
-  height: 19.5px;
-  position: relative;
-  left: 1px;
-  top: 3px;
-  & path {
-    stroke: ${selectedTheme.colors.primaryYellow};
-  }
-  @media (max-width: 600px) {
-    width: 16px;
-    height: 16px;
-    left: -1px;
-    top: 1px;
-  }
-`;
 
 export const ProfileInfoContainer = styled(Grid)`
   display: flex;
@@ -351,12 +69,6 @@ export const ProfileInfoAndContactContainer = styled(Box)`
   }
 `;
 
-// export const ProfileStatsGrid = styled(Grid)`
-//   display: flex;
-//   flex-direction: column;
-//   justify-content: center;
-//   align-items: start;
-// `;
 export const BlockedProfileContainer = styled(Box)`
   @media (max-width: 600px) {
     position: absolute;

src/components/Cards/ProfileCard/ProfileControl/ProfileControl.js

@@ -0,0 +1,104 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  ButtonsContainer,
+  BlockLabelIcon,
+  UnblockLabelIcon,
+} from "./ProfileControl.styled";
+import UserLabeledCard from "../../LabeledCard/User/UserLabeledCard";
+import BlockedProfile from "../BlockedProfile/BlockedProfile";
+import {
+  toggleDeleteCategoryModal,
+  toggleEditProfileModal,
+} from "../../../../store/actions/modal/modalActions";
+import { useDispatch } from "react-redux";
+import {
+  USERS_BLOCK_TYPE,
+  USERS_DELETE_TYPE,
+  USERS_UNBLOCK_TYPE,
+} from "../../../../constants/adminTypeConstants";
+import ProfileControlButton from "./ProfileControlButton/ProfileControlButton";
+
+const ProfileControl = (props) => {
+  const dispatch = useDispatch();
+  const removeUser = () => {
+    dispatch(
+      toggleDeleteCategoryModal({
+        customId: props.profile?._id,
+        type: USERS_DELETE_TYPE,
+        customLabeledCard: <UserLabeledCard user={props.profile} />,
+        customLabeledCardHeight: "90px",
+      })
+    );
+  };
+  const blockUser = () => {
+    dispatch(
+      toggleDeleteCategoryModal({
+        customId: props.profile?._id,
+        type: USERS_BLOCK_TYPE,
+        customLabeledCard: <UserLabeledCard user={props.profile} />,
+        customLabeledCardHeight: "90px",
+        customLabeledCardIcon: <BlockLabelIcon />,
+      })
+    );
+  };
+  const unblockUser = () => {
+    dispatch(
+      toggleDeleteCategoryModal({
+        customId: props.profile?._id,
+        type: USERS_UNBLOCK_TYPE,
+        customLabeledCard: <UserLabeledCard user={props.profile} />,
+        customLabeledCardHeight: "90px",
+        customLabeledCardIcon: <UnblockLabelIcon />,
+      })
+    );
+  };
+  const handleEditProfile = () => {
+    if (!props.profile?._blocked) {
+      dispatch(
+        toggleEditProfileModal({
+          userId: props.profile._id,
+          profile: props.profile,
+          isAdmin: props.isAdmin,
+          reFetchProfile: props.bigProfileCard
+            ? () => {}
+            : props.reFetchProfile,
+        })
+      );
+    }
+  };
+  return (
+    <ButtonsContainer>
+      {props.profile?._blocked && !props.isMobile && <BlockedProfile />}
+      {props.isAdmin && (
+        <>
+          {props.profile?._blocked ? (
+            <ProfileControlButton title="unblockUser" onClick={unblockUser} />
+          ) : (
+            <ProfileControlButton title="blockUser" onClick={blockUser} />
+          )}
+          <ProfileControlButton title="deleteUser" onClick={removeUser} />
+        </>
+      )}
+      {(props.isMyProfile || props.isAdmin) && (
+        <ProfileControlButton
+          title="editProfile"
+          onClick={handleEditProfile}
+          isAdmin={props.isAdmin}
+          disabled={!props.isAdmin && props.profile?._blocked}
+        />
+      )}
+    </ButtonsContainer>
+  );
+};
+
+ProfileControl.propTypes = {
+  profile: PropTypes.any,
+  isAdmin: PropTypes.bool,
+  isMyProfile: PropTypes.bool,
+  isMobile: PropTypes.bool,
+  reFetchProfile: PropTypes.func,
+  bigProfileCard: PropTypes.bool,
+};
+
+export default ProfileControl;

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

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import { Box } from "@mui/material";
+import { ReactComponent as Block } from "../../../../assets/images/svg/block.svg";
+import { ReactComponent as UnblockGold } from "../../../../assets/images/svg/unblock-gold.svg";
+import selectedTheme from "../../../../themes";
+
+export const ButtonsContainer = styled(Box)`
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  gap: 16px;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: row;
+  @media (max-width: 600px) {
+    gap: 12px;
+  }
+`;
+
+export const BlockLabelIcon = styled(Block)`
+  width: 18px;
+  height: 18px;
+  position: relative;
+  top: 10px;
+  left: 11px;
+  & path {
+    stroke: ${selectedTheme.colors.iconYellowColor};
+  }
+`;
+
+export const UnblockLabelIcon = styled(UnblockGold)`
+  width: 18px;
+  height: 18px;
+  position: relative;
+  top: 10px;
+  left: 11px;
+`;

src/components/Cards/ProfileCard/ProfileControl/ProfileControlButton/ProfileControlButton.js

@@ -0,0 +1,51 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  BlockIcon,
+  ButtonContainer,
+  EditIcon,
+  RemoveIcon,
+  UnblockIcon,
+} from "./ProfileControlButton.styled";
+import { Tooltip } from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+const ProfileControlButton = (props) => {
+  const { t } = useTranslation();
+  return (
+    <Tooltip
+      title={
+        props.title !== "editProfile"
+          ? t(`admin.${props.title}.tooltip`)
+          : t(`${props.title}.tooltip`)
+      }
+    >
+      <ButtonContainer
+        onClick={props.onClick}
+        isAdmin={props.isAdmin}
+        disabled={props.disabled}
+      >
+        {props.title === "unblockUser" ? (
+          <UnblockIcon />
+        ) : props.title === "blockUser" ? (
+          <BlockIcon />
+        ) : props.title === "deleteUser" ? (
+          <RemoveIcon />
+        ) : props.title === "editProfile" ? (
+          <EditIcon />
+        ) : (
+          <></>
+        )}
+      </ButtonContainer>
+    </Tooltip>
+  );
+};
+
+ProfileControlButton.propTypes = {
+  title: PropTypes.string,
+  onClick: PropTypes.func,
+  isAdmin: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+export default ProfileControlButton;

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

@@ -0,0 +1,83 @@
+import styled, { css } from "styled-components";
+import { Box } from "@mui/material";
+import selectedTheme from "../../../../../themes";
+import { ReactComponent as Edit } from "../../../../../assets/images/svg/edit.svg";
+import { ReactComponent as Block } from "../../../../../assets/images/svg/block.svg";
+import { ReactComponent as Unblock } from "../../../../../assets/images/svg/unblock.svg";
+import { ReactComponent as Remove } from "../../../../../assets/images/svg/trash.svg";
+
+export const ButtonContainer = styled(Box)`
+  width: 40px;
+  height: 40px;
+  font-weight: 900;
+  background: ${(props) =>
+    props.disabled ? "white" : selectedTheme.colors.primaryIconBackgroundColor};
+  border-radius: 360px;
+  padding: 0.45rem 0.45rem 0.27rem 0.57rem;
+  cursor: ${(props) => !props.disabled && `pointer`};
+  ${(props) =>
+    props.disabled &&
+    css`
+      & path {
+        stroke: ${selectedTheme.colors.iconStrokePurpleDisabledColor};
+      }
+    `}
+  @media (max-width: 600px) {
+    width: 32px;
+    height: 32px;
+  }
+`;
+
+export const UnblockIcon = styled(Unblock)`
+  position: relative;
+  top: 3px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  @media (max-width: 600px) {
+    top: 0;
+    left: -2px;
+  }
+`;
+export const BlockIcon = styled(Block)`
+  position: relative;
+  top: 3px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  @media (max-width: 600px) {
+    top: 0;
+    left: -2px;
+  }
+  & path {
+    stroke: ${selectedTheme.colors.primaryPurple};
+  }
+`;
+export const RemoveIcon = styled(Remove)`
+  position: relative;
+  top: 3px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  @media (max-width: 600px) {
+    top: 0;
+    left: -2px;
+  }
+  & path {
+    stroke: ${selectedTheme.colors.primaryPurple};
+  }
+`;
+export const EditIcon = styled(Edit)`
+  position: relative;
+  top: 3px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  @media (max-width: 600px) {
+    top: 0;
+    left: -2px;
+  }
+  & path {
+    stroke: ${selectedTheme.colors.primaryPurple};
+  }
+`;

src/components/Paging/Paging.styled.js

@@ -11,8 +11,8 @@ export const PagingContainer = styled(Box)`
   flex: 1;
   justify-content: center;
   flex-direction: row;
-  /* margin-top: 5px;
-  margin-bottom: 10px; */
+  margin-top: 5px;
+  margin-bottom: 10px;
   position: absolute;
   bottom: 10px;
   padding-left: 0;

src/components/ProfileMini/ProfileMini.js

@@ -10,7 +10,6 @@ import { useSelector } from "react-redux";
 import { selectOffer } from "../../store/selectors/offersSelectors";
 import { selectUserId } from "../../store/selectors/loginSelectors";
 import { ReactComponent as ProfileIcon } from "../../assets/images/svg/user-gray.svg";
-// import ItemDetailsHeaderCard from "../ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard";
 import { useTranslation } from "react-i18next";
 import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
 import SkeletonProfileMini from "./SkeletonProfileMini/SkeletonProfileMini";