Merge branch 'feature/1537' of http://git.dilig.net/selenaaasi/trampa-frontend

src/components/Cards/UserReviewsCard/UserReviewsCard.js

         props?.review?.userWhoGaveReview?.image,
       userWhoReceived:
         props?.review?.reviewAdditionalData?.userWhoReceived?.company?.name,
+      _deleted: props?.review?._deleted,
     };
   }, [props.review]);
   const handleRemove = () => {

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

 const RemoveButton = (props) => {
   return (
     <RemoveButtonContainer
+      isRemoved={props.isRemoved}
       onClick={props.onClick}
       hasGivenReview={props.hasGivenReview}
     >
-      <RemoveIcon />
+      <RemoveIcon isRemoved={props.isRemoved} />
     </RemoveButtonContainer>
   );
 };
   children: PropTypes.node,
   onClick: PropTypes.func,
   hasGivenReview: PropTypes.bool,
+  isRemoved: PropTypes.bool,
 };
 
 export default RemoveButton;

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

 // import { Box } from "@mui/material";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { ReactComponent as Remove } from "../../../../../assets/images/svg/trash.svg";
 import selectedTheme from "../../../../../themes";
 import { IconButton } from "../../../../Buttons/IconButton/IconButton";
   position: absolute;
   top: ${(props) => (props.hasGivenReview ? "79px" : "16px")};
   right: 16px;
-  background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
+  background-color: ${props => props.isRemoved ? "transparent" : selectedTheme.colors.primaryIconBackgroundColor};
   border-radius: 100%;
   width: 32px;
   height: 32px;
+  ${props => props.isRemoved && css`
+    & button:hover {
+      background-color: transparent;
+      cursor: auto;
+    }
+  `}
   & button {
     width: 32px;
     height: 32px;
   }
 `;
-export const RemoveIcon = styled(Remove)``;
+export const RemoveIcon = styled(Remove)`
+  & path {
+    stroke: ${props => props.isRemoved && selectedTheme.colors.blockedColor};
+  }
+`;

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

 import selectedTheme from "../../../../../themes";
 
 export const ReviewDetailsContainer = styled(Grid)`
-  padding-bottom: 1rem;
+  padding-bottom: 21px;
 `;
 export const ReviewDetailsText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};

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

   margin-top: 18px;
   align-items: center;
   justify-content: start;
-  margin-bottom: 15px;
+  margin-bottom: 21px;
 `;
 export const ThumbContainer = styled(Grid)`
   max-width: 20px;

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

   const handleRemove = () => {
     props.handleRemove();
   };
+  console.log(props.review);
   return (
-    <ReviewContainer>
+    <ReviewContainer
+      lastReview={props.lastReview}
+      className={props.className}
+      hasGivenReview={props.hasGivenReview}
+    >
       {props.isAdmin && !props.rightReviews && props.hasGivenReview && (
         <GivenReviewsHeader
           hasGivenReview={props.hasGivenReview}
           review={props.review}
           onClick={handleRemove}
           hasGivenReview={props.hasGivenReview}
+          isRemoved={props.review?._deleted}
         />
       )}
       <ReviewOffer
   userWhoReceived: PropTypes.any,
   rightReviews: PropTypes.bool,
   isAdmin: PropTypes.bool,
+  className: PropTypes.string,
+  lastReview: PropTypes.bool,
+};
+UserReviewsSingleCard.defaultProps = {
+  lastReview: false,
+  isAdmin: false,
+  rightReviews: false,
+  hasGivenReview: false,
+  showRemoveIcon: false,
 };
 
 export default UserReviewsSingleCard;

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

 import { Box } from "@mui/material";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import selectedTheme from "../../../../themes";
 
 export const ReviewContainer = styled(Box)`
   padding-right: 12px;
   position: relative;
   @media (max-width: 600px) {
-    height: 258px;
-  }
-  &::after {
-    content: "";
-    display: block;
-    border-bottom: 1px solid ${selectedTheme.colors.primaryIconBackgroundColor};
-    width: calc(100% + 24.4px);
-    height: 1px;
-    position: relative;
-    left: -18px;
-    margin-top: 18px;
+    height: ${props => props.hasGivenReview ? "323px" : "258px"};
   }
+  ${(props) =>
+    !props.lastReview &&
+    css`
+      &::after {
+        content: "";
+        display: block;
+        border-bottom: 1px solid
+          ${selectedTheme.colors.primaryIconBackgroundColor};
+        width: calc(100% + 24.4px);
+        height: 1px;
+        position: relative;
+        left: -18px;
+        margin-top: 18px;
+      }
+    `}
 `;

src/components/Modals/DeleteReview/DeleteButton/DeleteButton.styled.js

 import { PrimaryButton } from "../../../Buttons/PrimaryButton/PrimaryButton";
 
 export const DeleteButtonContainer = styled(Box)`
-  position: absolute;
-  bottom: 36px;
-  left: 18px;
   background-color: white !important;
   border: 0 !important;
   padding: 0 !important;
+  @media (max-width: 600px) {
+    position: absolute;
+    bottom: 36px;
+    left: 18px;
+  }
 `;
 export const ButtonContainer = styled(PrimaryButton)`
   height: 44px;
-  width: calc(100vw - 36px);
+  width: 335px;
+  margin: 18px auto;
   background-color: white !important;
   & > button {
     background-color: ${(props) => props.buttoncolor} !important;
   }
+  @media (max-width: 600px) {
+    width: calc(100vw - 36px);
+  }
 `;

src/components/Modals/DeleteReview/DeleteReview.js

 import {
   DeleteReviewContainer,
   DeleteReviewTitle,
+  ReviewCard,
   XIcon,
 } from "./DeleteReview.styled";
 import BackdropComponent from "../../MUI/BackdropComponent";
-import UserReviewsSingleCard from "../../Cards/UserReviewsCard/UserReviewsSingleCard/UserReviewsSingleCard";
 import { useTranslation } from "react-i18next";
 import DeleteButton from "./DeleteButton/DeleteButton";
 import { useDispatch } from "react-redux";
       />
       <DeleteReviewContainer>
         <DeleteReviewTitle>{t("admin.review.title")}</DeleteReviewTitle>
-        <UserReviewsSingleCard
-          showRemoveIcon
+        <ReviewCard
           deleteModal
+          lastReview
           review={props.review}
         />
         <XIcon onClick={closeModalHandler} />

src/components/Modals/DeleteReview/DeleteReview.styled.js

 import styled from "styled-components";
 import selectedTheme from "../../../themes";
 import { ReactComponent as X } from "../../../assets/images/svg/plus.svg";
+import UserReviewsSingleCard from "../../Cards/UserReviewsCard/UserReviewsSingleCard/UserReviewsSingleCard";
 
 export const DeleteReviewContainer = styled(Box)`
   position: fixed;
-  width: 100vw;
-  height: 100vh;
-  top: 0;
-  left: 0;
+  top: 50%;
+left: 50%;
+transform: translate(-50%, -50%);
+  width: 623px;
+  min-height: 492px;
   background-color: white;
   z-index: 150;
-  padding: 28px;
+  padding: 37px;
   & > div {
     margin: 0 auto;
     background-color: ${selectedTheme.colors.skeletonItemColor};
   }
   @media (max-width: 600px) {
     padding: 36px 28px;
+    width: 100vw;
+    min-height: 0;
+    height: 100vh;
   }
 `;
 export const DeleteReviewTitle = styled(Typography)`
     right: 18px;
   }
 `;
+export const ReviewCard = styled(UserReviewsSingleCard)`
+  width: 335px;
+`;

src/components/Modals/EditCategory/EditCategory.js

     } else closeModalHandler();
   };
   const handleSubmit = (values) => {
+    console.log(props);
     dispatch(
       fetchAdminMethod({
         type: props.type,

src/components/UserReviews/UserReviews.styled.js

   ${(props) =>
     props.profile &&
     css`
-      height: calc(100vh - 100px);
+      height: calc(100vh - 138px);
       position: relative;
       top: -15px;
     `}
   border: 1px solid ${selectedTheme.colors.borderNormal};
   overflow-y: auto;
   overflow-x: hidden;
-  max-height: ${(props) => (props.isProfileReviews ? "70vh" : "39vh")};
+  max-height: ${(props) => (props.isProfileReviews ? "80vh" : "39vh")};
+
+  @media (max-width: 600px) {
+    height: 450px;
+  }
 
   /* overflow-y: auto; */
   &::-webkit-scrollbar {

src/pages/AdminHomePage/AdminSubcategoriesPage/AdminSubcategoriesPage.js

         type: SUBCATEGORIES_TYPE,
         method: ADD_TYPE,
         showSecondButton: true,
+        category,
+        categoryId: category?._id
       })
     );
   };