Finished first part

src/components/Admin/Sidebar/Sidebar.js

@@ -13,6 +13,7 @@ import {
   SidebarNavigationMeniItemIcon,
   SidebarProfileRole,
   SidebarNavigationMeniLogout,
+  LogoutIcon,
 } from "./Sidebar.styled";
 import { ReactComponent as LogoHorizontal } from "../../../assets/images/svg/logo-horizontal.svg";
 import { useHistory } from "react-router-dom";
@@ -21,7 +22,6 @@ import { selectMineProfile } from "../../../store/selectors/profileSelectors";
 import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter";
 import useIsMobile from "../../../hooks/useIsMobile";
 import { ADMIN_NAVIGATION } from "../../../constants/adminNavigation";
-import { ReactComponent as Logout } from "../../../assets/images/svg/log-out.svg";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import { logoutAdmin } from "../../../store/actions/login/loginActions";
@@ -80,10 +80,10 @@ const Sidebar = () => {
               );
             })}
           </SidebarNavigationMeniItemUl>
-          <SidebarNavigationMeniLogout onClick={logoutHandler}>
-            <Logout /> {t("admin.navigation.logout")}
-          </SidebarNavigationMeniLogout>
         </SidebarNavigation>
+        <SidebarNavigationMeniLogout onClick={logoutHandler}>
+          <LogoutIcon /> {t("admin.navigation.logout")}
+        </SidebarNavigationMeniLogout>
       </SidebarContent>
     </SidebarContainer>
   );

src/components/Admin/Sidebar/Sidebar.styled.js

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { Box, Typography } from "@mui/material";
+import { ReactComponent as Logout } from "../../../assets/images/svg/log-out.svg";
 import selectedTheme from "../../../themes";
 
 export const SidebarContainer = styled(Box)`
@@ -8,12 +9,19 @@ export const SidebarContainer = styled(Box)`
   bottom: 0;
   left: 0;
   width: 20%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 5vh;
   min-width: 281px;
   overflow-y: auto;
   height: 100vh;
   @media (max-width: 1536px) {
     width: 25%;
   }
+  @media (max-width: 1100px) {
+    min-width: 0;
+  }
   @media (max-width: 900px) {
     display: none;
   }
@@ -21,20 +29,23 @@ export const SidebarContainer = styled(Box)`
 
 export const SidebarHeader = styled(Box)`
   background-color: #f5edff;
-  padding-top: 36px;
+  padding-top: 3.3vh;
   padding-left: 36px;
-  padding-bottom: 36px;
+  padding-bottom: 3.3vh;
 `;
 
 export const SidebarContent = styled(Box)`
-  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: space-between;
 `;
 
 export const SidebarProfileImageContainer = styled(Box)`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 36px 0 120px 0;
+  padding: 0;
 `;
 
 export const SidebarProfileImage = styled.img`
@@ -61,25 +72,29 @@ export const SidebarNavigation = styled(Box)`
   margin-left: 18px;
   display: flex;
   flex-direction: column;
+  /* flex: 1; */
 `;
 
 export const SidebarNavigationMeni = styled(Typography)`
   font-family: "DM Sans";
   font-size: 24px;
   font-weight: 700;
-  margin-bottom: 56px;
+  margin-bottom: 4vh;
   margin-left: 18px;
 `;
 
 export const SidebarNavigationMeniItemUl = styled.ul``;
 export const SidebarNavigationMeniItem = styled.li`
-  padding-top: 19px;
-  padding-bottom: 19px;
+  padding-top: 1.7vh;
+  padding-bottom: 1.7vh;
   padding-left: 18px;
   font-family: "DM Sans";
   font-size: 16px;
   font-weight: 400;
   display: flex;
+  border-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
   align-items: center;
   color: ${selectedTheme.colors.primaryPurple};
   cursor: pointer;
@@ -105,6 +120,8 @@ export const SidebarNavigationMeniItem = styled.li`
 
 export const SidebarNavigationMeniItemIcon = styled(Box)`
   margin-right: 9px;
+  position: relative;
+  top: 2px;
 
   ${(props) =>
     props.active &&
@@ -118,10 +135,15 @@ export const SidebarNavigationMeniItemIcon = styled(Box)`
 export const SidebarNavigationMeniLogout = styled(Box)`
   font-family: "DM Sans";
   font-size: 16px;
-  padding-top: 19px;
-  padding-bottom: 19px;
+  padding-top: 1.7vh;
+  padding-bottom: 1.7vh;
   padding-left: 18px;
-  margin-top: 100px;
+  margin-bottom: 18px;
+  margin-top: 8vh;
+  margin-left: 18px;
+  border-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
   color: ${selectedTheme.colors.primaryPurple};
   cursor: pointer;
 
@@ -130,3 +152,7 @@ export const SidebarNavigationMeniLogout = styled(Box)`
     font-weight: 700;
   }
 `;
+export const LogoutIcon = styled(Logout)`
+  position: relative;
+  top: 3px;
+`;

src/components/Cards/CategoryCard/CategoryCard.js

@@ -18,6 +18,7 @@ import EditCategory from "../../Modals/EditCategory/EditCategory";
 import history from "../../../store/utils/history";
 import { replaceInRoute } from "../../../util/helpers/routeHelpers";
 import { ADMIN_SUBCATEGORIES_PAGE } from "../../../constants/pages";
+import { useMemo } from "react";
 
 const CategoryCard = (props) => {
   const { t } = useTranslation();
@@ -32,6 +33,9 @@ const CategoryCard = (props) => {
       );
     }
   };
+  const isDisabledDelete = useMemo(() => {
+    return props?.category?.name === "Ostalo" || props?.category?.city === "Ostalo"
+  }, [props.category])
   return (
     <>
       <CategoryCardContainer className={props.className}>
@@ -58,8 +62,8 @@ const CategoryCard = (props) => {
           </CategoryCardDetailsContainer>
         </CategoryCardLeftContainer>
         <CategoryCardRightContainer>
-          <CategoryRemoveButton onClick={() => setOpenedDeleteModal(true)} />
-          <CategoryEditButton onClick={() => setOpenedEditModal(true)} />
+          <CategoryRemoveButton disabled={isDisabledDelete} onClick={() => setOpenedDeleteModal(true)} />
+          <CategoryEditButton disabled={isDisabledDelete} onClick={() => setOpenedEditModal(true)} />
           {!props.hideCheckButton && (
             <CategoryCheckButton onClick={navigateToCategory} />
           )}

src/components/Cards/CategoryCard/CategoryEditButton/CategoryEditButton.js

@@ -7,8 +7,8 @@ import {
 
 const CategoryEditButton = (props) => {
   return (
-    <CategoryEditButtonContainer onClick={props.onClick}>
-      <EditIcon />
+    <CategoryEditButtonContainer disabled={props.disabled} onClick={props.onClick}>
+      <EditIcon disabled={props.disabled} />
     </CategoryEditButtonContainer>
   );
 };
@@ -16,6 +16,7 @@ const CategoryEditButton = (props) => {
 CategoryEditButton.propTypes = {
   category: PropTypes.any,
   onClick: PropTypes.func,
+  disabled: PropTypes.bool,
 };
 
 export default CategoryEditButton;

src/components/Cards/CategoryCard/CategoryEditButton/CategoryEditButton.styled.js

@@ -35,5 +35,9 @@ export const CategoryEditButtonContainer = styled(IconButton)`
   }
 `;
 export const EditIcon = styled(Edit)`
-    
+    & path {
+    ${(props) =>
+      props.disabled &&
+      `stroke: ${selectedTheme.colors.iconStrokePurpleDisabledColor};`}
+  }
 `

src/components/Cards/CategoryCard/CategoryRemoveButton/CategoryRemoveButton.js

@@ -7,8 +7,8 @@ import {
 
 const CategoryRemoveButton = (props) => {
   return (
-    <CategoryRemoveButtonContainer onClick={props.onClick}>
-      <RemoveIcon />
+    <CategoryRemoveButtonContainer disabled={props.disabled} onClick={props.onClick}>
+      <RemoveIcon disabled={props.disabled} />
     </CategoryRemoveButtonContainer>
   );
 };
@@ -16,6 +16,7 @@ const CategoryRemoveButton = (props) => {
 CategoryRemoveButton.propTypes = {
   category: PropTypes.any,
   onClick: PropTypes.func,
+  disabled: PropTypes.bool,
 };
 
 export default CategoryRemoveButton;

src/components/Cards/CategoryCard/CategoryRemoveButton/CategoryRemoveButton.styled.js

@@ -34,5 +34,9 @@ export const CategoryRemoveButtonContainer = styled(IconButton)`
   }
 `;
 export const RemoveIcon = styled(Remove)`
-    
-`
+  & path {
+    ${(props) =>
+      props.disabled &&
+      `stroke: ${selectedTheme.colors.iconStrokePurpleDisabledColor};`}
+  }
+`;

src/components/Cards/ChatCard/ChatCard.js

@@ -6,6 +6,7 @@ import {
   UserImage,
   UserImgWrapper,
   UserName,
+  ProfileNameContainer,
 } from "./ChatCard.styled";
 import MobileOfferDetails from "./MobileOfferDetails/MobileOfferDetails";
 import useIsMobile from "../../../hooks/useIsMobile";
@@ -36,10 +37,20 @@ const ChatCard = (props) => {
         />
       </UserImgWrapper>
       <ChatInfo isBlocked={props.chat.interlocutorData?._blocked}>
-        {props.chat.interlocutorData?._blocked && (
-          <BlockedProfile redText chatCard shortText aboveTitle hideIcon />
-        )}
-        <UserName>{chat?.interlocutorData?.name}</UserName>
+        <ProfileNameContainer>
+          <UserName>{chat?.interlocutorData?.name}</UserName>
+          {(props.chat.interlocutorData?._blocked ||
+            props.chat.interlocutorData?._deleted) && (
+            <BlockedProfile
+              redText
+              chatCard
+              shortText
+              aboveTitle
+              hideIcon
+              deleted={props.chat.interlocutorData?._deleted}
+            />
+          )}
+        </ProfileNameContainer>
         <MobileOfferDetails chat={chat} />
       </ChatInfo>
     </ChatCardContainer>

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

@@ -42,6 +42,10 @@ export const UserImage = styled.img`
     height: 72px;
   }
 `;
+export const ProfileNameContainer = styled(Box)`
+  max-height: 64px;
+  min-height: 48px;
+`
 export const UserImgWrapper = styled(Box)`
   overflow: hidden;
   border-radius: 50%;
@@ -59,10 +63,10 @@ export const ChatInfo = styled(Box)`
   flex-direction: column;
   justify-content: space-between;
   position: relative;
-  top: ${props => props.isBlocked && `-12px`};
 `;
 export const UserName = styled(Typography)`
-  margin-bottom: 12px;
+  /* margin-bottom: 12px; */
+  max-height: 48px;
   font-family: ${selectedTheme.fonts.textFont};
   color: ${selectedTheme.colors.primaryPurple};
   font-weight: 700;

src/components/Cards/CreateOfferCard/CreateOffer.js

@@ -29,6 +29,11 @@ import { useMemo } from "react";
 import { useHistory } from "react-router-dom";
 import { PROFILE_PAGE } from "../../../constants/pages";
 import { replaceInRoute } from "../../../util/helpers/routeHelpers";
+import { selectIsLoadingByActionType } from "../../../store/selectors/loadingSelectors";
+import {
+  OFFER_ADD_SCOPE,
+  OFFER_EDIT_SCOPE,
+} from "../../../store/actions/offers/offersActionConstants";
 // import { routeMatches } from "../../../util/helpers/routeHelpers";
 
 const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
@@ -39,6 +44,9 @@ const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
   const [currentStep, setCurrentStep] = useState(1);
   const { t } = useTranslation();
   const userId = useSelector(selectUserId);
+  const isLoading = useSelector(
+    selectIsLoadingByActionType(editOffer ? OFFER_EDIT_SCOPE : OFFER_ADD_SCOPE)
+  );
 
   const handleApiResponseSuccess = () => {
     // if (routeMatches(BASE_PAGE) || routeMatches(HOME_PAGE))
@@ -53,6 +61,7 @@ const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
         idProfile: userId,
       })
     );
+    closeCreateOfferModal(false);
   };
 
   // Go to next step and save typed values
@@ -100,7 +109,6 @@ const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
     } else {
       dispatch(addOffer({ offerData, handleApiResponseSuccess }));
     }
-    closeCreateOfferModal(false);
   };
 
   const goStepBack = (stepNumber) => {
@@ -164,6 +172,7 @@ const CreateOffer = ({ closeCreateOfferModal, editOffer, offer }) => {
             <ThirdPartCreateOffer
               handleSubmitOffer={handleSubmitOffer}
               informations={informations}
+              isLoading={isLoading}
             />
           )}
         </CreateOfferContainer>

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

@@ -52,6 +52,7 @@ export const ModalCreateOfferContainer = styled(Box)`
     top: 0;
     left: 0;
     padding: 0 30px;
+    ${props => props.currentstep === 3 && `padding: 0;`}
   }
 `;
 
@@ -95,17 +96,21 @@ export const CreateOfferContainer = styled(Container)`
   width: ${(props) => (props.currentstep === 3 ? "739px" : "380px")};
   flex-direction: column;
   align-items: center;
+  ${(props) => props.currentstep === 3 && `padding-bottom: 20px;`}
+
 
   @media (max-width: 810px) {
     ${(props) =>
       props.currentstep === 3 &&
       `
         width: 600px;
+        
     `}
   }
 
   @media screen and (max-width: 600px) {
     width: 95%;
+    ${props => props.currentstep === 3 && `padding: 0 8px;`}
   }
 `;
 export const CreateOfferTitle = styled(Typography)`
@@ -147,7 +152,7 @@ export const CreateOfferFormContainer = styled(Box)`
   ${(props) =>
     props.currentStep === 3 &&
     css`
-      width: 120%;
+      width: 100%;
       border-radius: 4px;
       height: 420px;
       border: 1px solid ${selectedTheme.colors.borderNormal};

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

@@ -53,6 +53,7 @@ const ThirdPartCreateOffer = (props) => {
         height="48px"
         buttoncolor={selectedTheme.colors.primaryPurple}
         textcolor="white"
+        isLoading={props.isLoading}
         onClick={handleSubmit}
       >
         {t("offer.publish")}
@@ -65,6 +66,7 @@ ThirdPartCreateOffer.propTypes = {
   children: PropTypes.any,
   handleSubmitOffer: PropTypes.func,
   informations: PropTypes.object,
+  isLoading: PropTypes.bool,
 };
 
 export default ThirdPartCreateOffer;

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

@@ -6,11 +6,14 @@ import ItemDetailsCard from "../../ItemDetailsCard/ItemDetailsCard";
 export const CreateOfferFormContainer = styled(Box)`
   padding-top: 20px;
   margin-top: 20px;
+  padding-bottom: 20px;
   width: 380px;
 `;
 export const PreviewCard = styled(ItemDetailsCard)`
   width: auto;
   border: 0;
+  margin: 0;
+  padding-bottom: 0;
 `;
 export const PublishButton = styled(PrimaryAnimatedButton)`
   width: 332px;

src/components/Cards/ItemDetailsCard/ItemDetailsCard.js

@@ -104,10 +104,12 @@ const ItemDetailsCard = (props) => {
               icon={<QuantityIcon />}
               value={offer?.offer?.condition}
             />
-            <Information
-              icon={<EyeIcon />}
-              value={offer?.offer?.views?.count}
-            />
+            {!props.hideViews && (
+              <Information
+                icon={<EyeIcon />}
+                value={offer?.offer?.views?.count}
+              />
+            )}
           </Info>
           <PostDate previewCard={props.previewCard}>{date}</PostDate>
         </OfferInfo>

src/components/Cards/MiniChatCard/MiniChatCard.js

@@ -5,6 +5,7 @@ import {
   ProfileDetails,
   ProfileImage,
   ProfileName,
+  ProfileNameContainer,
   ProfileProduct,
   ProfileProductName,
 } from "./MiniChatCard.styled";
@@ -37,12 +38,22 @@ const MiniChatCard = (props) => {
         )}
       />
       <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>
+        <ProfileNameContainer>
+          <ProfileName selected={props.selected}>
+            {props?.chat?.interlocutorData?.name}
+          </ProfileName>
+          {(props.chat.interlocutorData?._blocked ||
+            props.chat.interlocutorData?._deleted) && (
+            <BlockedProfile
+              redText
+              chatCard
+              shortText
+              aboveTitle
+              hideIcon
+              deleted={props.chat.interlocutorData?._deleted}
+            />
+          )}
+        </ProfileNameContainer>
         <ProfileProduct selected={props.selected}>
           {t("messages.cardProduct")}
         </ProfileProduct>

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

@@ -15,6 +15,8 @@ export const MiniChatCardContainer = styled(Box)`
 export const ProfileImage = styled.img`
   width: 72px;
   height: 72px;
+  min-width: 72px;
+  min-height: 72px;
   border-radius: 100%;
   overflow: hidden;
 `;
@@ -24,13 +26,16 @@ export const ProfileDetails = styled(Box)`
   margin-left: 18px;
   padding-top: 7px;
 `;
+export const ProfileNameContainer = styled(Box)`
+  max-height: 54px;
+  min-height: 38px;
+`
 export const ProfileName = styled(Typography)`
   font-size: 16px;
   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;
@@ -46,5 +51,10 @@ export const ProfileProductName = styled(Typography)`
   color: ${props => props.selected ? "white" : selectedTheme.colors.primaryDarkTextThird};
   font-family: ${selectedTheme.fonts.textFont};
   line-height: 14px;
+  max-height: 14px;
+  max-width: 160px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   margin-left: 1px;
 `;

src/components/Cards/OfferCard/OfferCard.js

@@ -31,6 +31,7 @@ import {
   CalendarIcon,
   PinIconContainer,
   PinOutlinedIcon,
+  ButtonsContainer,
 } from "./OfferCard.styled";
 import DeleteOffer from "./DeleteOffer/DeleteOffer";
 import { ReactComponent as Message } from "../../../assets/images/svg/mail.svg";
@@ -148,7 +149,7 @@ const OfferCard = (props) => {
             >
               {props?.offer?.name}
             </OfferTitle>
-            <OfferAuthor>
+            <OfferAuthor vertical={props.vertical}>
               <OfferAuthorName vertical={props.vertical}>
                 {props?.offer?.user?.company?.name}
               </OfferAuthorName>
@@ -195,48 +196,51 @@ const OfferCard = (props) => {
           ) : (
             <></>
           )}
-
-          {props.isMyOffer ? (
-            <>
-              <RemoveIconContainer
+          <ButtonsContainer vertical={props.vertical}>
+            {props.isMyOffer ? (
+              <>
+                <RemoveIconContainer
+                  vertical={props.vertical}
+                  onClick={openRemoveModal}
+                >
+                  <RemoveIcon />
+                </RemoveIconContainer>
+                <EditIconContainer
+                  vertical={props.vertical}
+                  onClick={openEditOfferModal}
+                >
+                  <EditIcon />
+                </EditIconContainer>
+              </>
+            ) : props.aboveChat ? (
+              <LikeIconContainer
+                disabled={props.disabledReviews}
+                onClick={makeReview}
+              >
+                <LikeIcon disabled={props.disabledReviews} />
+              </LikeIconContainer>
+            ) : (
+              <MessageIcon
+                showMessageIcon={showMessageIcon}
                 vertical={props.vertical}
-                onClick={openRemoveModal}
+                onClick={messageUser}
               >
-                <RemoveIcon />
-              </RemoveIconContainer>
-              <EditIconContainer
+                <Message />
+              </MessageIcon>
+            )}
+            {props.isAdmin && !props.pinned && (
+              <PinIconContainer
+                showMessageIcon
+                onClick={pinOffer}
                 vertical={props.vertical}
-                onClick={openEditOfferModal}
               >
-                <EditIcon />
-              </EditIconContainer>
-            </>
-          ) : props.aboveChat ? (
-            <LikeIconContainer
-              disabled={props.disabledReviews}
-              onClick={makeReview}
-            >
-              <LikeIcon disabled={props.disabledReviews} />
-            </LikeIconContainer>
-          ) : (
-            <MessageIcon
-              showMessageIcon={showMessageIcon}
-              vertical={props.vertical}
-              onClick={messageUser}
-            >
-              <Message />
-            </MessageIcon>
-          )}
-          {props.isAdmin && !props.pinned && (
-            <PinIconContainer
-              showMessageIcon
-              onClick={pinOffer}
-              vertical={props.vertical}
-            >
-              <PinOutlinedIcon />
-            </PinIconContainer>
-          )}
-          {props?.offer?.pinned && <PinIcon vertical={props.vertical} isMyOffer={props.isMyOffer} />}
+                <PinOutlinedIcon />
+              </PinIconContainer>
+            )}
+            {props?.offer?.pinned && (
+              <PinIcon vertical={props.vertical} isMyOffer={props.isMyOffer} />
+            )}
+          </ButtonsContainer>
         </OfferFlexContainer>
       </OfferCardContainer>
       {deleteOfferModal && (

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

@@ -1,5 +1,5 @@
 import { Box, Container, Typography } from "@mui/material";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import selectedTheme from "../../../themes";
 import { IconButton } from "../../Buttons/IconButton/IconButton";
 import { Icon } from "../../Icon/Icon";
@@ -130,6 +130,7 @@ export const OfferAuthor = styled(Box)`
   display: flex;
   flex: 1;
   flex-direction: column;
+  ${(props) => props.vertical && `height: 36px; flex: initial;`}
 `;
 export const OfferAuthorName = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -258,9 +259,6 @@ export const MessageIcon = styled(IconButton)`
   ${(props) => !props.showMessageIcon && "display: none;"}
   width: 40px;
   height: 40px;
-  position: absolute;
-  top: 10px;
-  right: 10px;
   background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
   border-radius: 100%;
   padding-top: 2px;
@@ -268,8 +266,6 @@ export const MessageIcon = styled(IconButton)`
   @media (max-width: 600px) {
     width: 30px;
     height: 30px;
-    top: 16px;
-    right: 16px;
     padding: 0;
     ${(props) =>
       props.vertical &&
@@ -332,36 +328,24 @@ export const EyeIcon = styled(Eye)`
 `;
 export const RemoveIconContainer = styled(MessageIcon)`
   display: block;
-  top: 18px;
-  right: 18px;
 
   @media screen and (max-width: 600px) {
     display: block;
     ${(props) =>
       props.vertical &&
       `
-      position: absolute;
-      top: initial;
-      bottom: 18px;
-      left: 59px;
     `}
   }
 `;
 export const RemoveIcon = styled(Remove)``;
 export const EditIconContainer = styled(MessageIcon)`
   display: block;
-  top: 18px;
-  right: 76px;
 
   @media screen and (max-width: 600px) {
-    position: absolute;
     display: block;
     ${(props) =>
       props.vertical &&
       `
-      top: initial;
-      bottom: 18px;
-      left: 18px;
     `}
   }
 `;
@@ -379,17 +363,11 @@ export const LikeIconContainer = styled(MessageIcon)`
   `}
 `;
 export const PinIconContainer = styled(MessageIcon)`
-  right: 134px;
-  top: 18px;
   @media (max-width: 600px) {
     ${(props) =>
       props.vertical &&
       `
       display: block;
-      top: initial;
-      right: initial;
-      bottom: 18px;
-      left: 100px;
       & button svg {
         width: 19px;
         height: 19px;
@@ -455,3 +433,23 @@ export const CalendarIcon = styled(Calendar)`
     stroke-width: 1;
   }
 `;
+export const ButtonsContainer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  gap: 18px;
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  @media (max-width: 600px) {
+    gap: 9px !important;
+    ${(props) =>
+      props.vertical &&
+      css`
+        flex-direction: row-reverse;
+        top: initial;
+        right: initial;
+        bottom: 18px;
+        left: 18px;
+      `}
+  }
+`;

src/components/Cards/OfferCard/SkeletonOfferCard/SkeletonOfferCard.js

@@ -28,15 +28,18 @@ const SkeletonOfferCard = (props) => {
   const { isMobile } = useIsMobile();
   return (
     <SkeletonOfferCardsContainer>
-      <SkeletonOfferCardContainer skeleton={props.skeleton}>
-        <SkeletonTitleAboveImage />
-        <LeftPart>
-          <SkeletonImage />
+      <SkeletonOfferCardContainer
+        vertical={props.vertical}
+        skeleton={props.skeleton}
+      >
+        <SkeletonTitleAboveImage vertical={props.vertical} />
+        <LeftPart vertical={props.vertical}>
+          <SkeletonImage vertical={props.vertical} />
           <SkeletonColumnContainer>
             <SkeletonTitle />
             <SkeletonGroup>
-              <SkeletonAuthor />
-              <SkeletonLocation />
+              <SkeletonAuthor vertical={props.vertical} />
+              <SkeletonLocation vertical={props.vertical} />
             </SkeletonGroup>
             <SkeletonRowGroup aboveChat={props.aboveChat}>
               <SkeletonDetail />
@@ -57,42 +60,9 @@ const SkeletonOfferCard = (props) => {
         <SkeletonExchangeButton>
           <SkeletonExchangeLine />
         </SkeletonExchangeButton>
-        <SkeletonMessageButton />
-        {isMobile && <SkeletonMessageButtonSecond />}
+        <SkeletonMessageButton vertical={props.vertical} />
+        {isMobile && <SkeletonMessageButtonSecond vertical={props.vertical} />}
       </SkeletonOfferCardContainer>
-      {/* {isMobile && (
-        <SkeletonOfferCardContainer skeleton={props.skeleton}>
-          <LeftPart>
-            <SkeletonImage />
-            <SkeletonColumnContainer>
-              <SkeletonTitle />
-              <SkeletonGroup>
-                <SkeletonAuthor />
-                <SkeletonLocation />
-              </SkeletonGroup>
-              <SkeletonRowGroup aboveChat={props.aboveChat}>
-                <SkeletonDetail />
-                <SkeletonDetail />
-                <SkeletonDetail />
-              </SkeletonRowGroup>
-            </SkeletonColumnContainer>
-          </LeftPart>
-          <SpreadLine />
-          <RightPart>
-            <SkeletonDescription />
-            <SkeletonDescriptionLine />
-            <SkeletonDescriptionLine />
-            <SkeletonDescriptionLine />
-            <SkeletonDescriptionLine />
-          </RightPart>
-          <SkeletonExchangeButton>
-            <SkeletonExchangeLine />
-          </SkeletonExchangeButton>
-          <SkeletonMessageButton />
-          {isMobile && <SkeletonMessageButtonSecond />}
-          <SkeletonTitleAboveImage />
-        </SkeletonOfferCardContainer>
-      )} */}
     </SkeletonOfferCardsContainer>
   );
 };
@@ -100,6 +70,7 @@ const SkeletonOfferCard = (props) => {
 SkeletonOfferCard.propTypes = {
   children: PropTypes.node,
   skeleton: PropTypes.bool,
+  vertical: PropTypes.bool,
   aboveChat: PropTypes.bool,
 };
 

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

@@ -35,9 +35,10 @@ export const SkeletonOfferCardContainer = styled(BackgroundTransition)`
     ${(props) =>
       props.vertical &&
       `
-      height: 330px;
+      height: 373px;
       width: 180px;
       margin: 0 18px;
+      margin-left: 0;
     `}
   }
   /* @media (max-width: 600px) {
@@ -53,6 +54,7 @@ export const LeftPart = styled(Box)`
   margin-right: 40px;
   @media (max-width: 600px) {
     gap: 18px;
+    ${(props) => props.vertical && `gap: 9px; flex-direction: column;`}
   }
   /* @media (max-width: 600px) {
     flex-direction: column;
@@ -86,6 +88,8 @@ export const SkeletonImage = styled(ItemsTransition)`
     margin-top: 54px;
     width: 108px;
     height: 108px;
+    ${(props) =>
+      props.vertical && `margin-top: 18px; width: 144px; height: 144px;`}
   }
 `;
 export const SkeletonColumnContainer = styled(Box)`
@@ -118,6 +122,7 @@ export const SkeletonAuthor = styled(ItemsTransition)`
   height: 18px;
   @media (max-width: 600px) {
     visibility: hidden;
+    ${props => props.vertical && `display: none;`}
   }
 `;
 export const SkeletonLocation = styled(ItemsTransition)`
@@ -127,13 +132,16 @@ export const SkeletonLocation = styled(ItemsTransition)`
   @media (max-width: 600px) {
     width: 117px;
     margin-top: 26px;
+    ${props => props.vertical && `margin-top: 0;`}
   }
 `;
 export const SkeletonRowGroup = styled(Box)`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  & div:nth-child(4) {display: none;}
+  & div:nth-child(4) {
+    display: none;
+  }
   @media (max-width: 600px) {
     flex-direction: column;
     gap: 4px;
@@ -153,7 +161,6 @@ export const SkeletonRowGroup = styled(Box)`
     & div:nth-child(4) {
       display: block;
       margin-top: 0;
-      
     }
   }
 `;
@@ -176,7 +183,7 @@ export const SkeletonDescriptionLine = styled(ItemsTransition)`
   height: 18px;
   background-color: ${selectedTheme.colors.filterSkeletonItems};
   @media (max-width: 1400px) {
-    ${props => props.removeOnSmallerScreens && `display: none;`}
+    ${(props) => props.removeOnSmallerScreens && `display: none;`}
   }
 `;
 export const SkeletonMessageButton = styled(ItemsTransition)`
@@ -190,6 +197,12 @@ export const SkeletonMessageButton = styled(ItemsTransition)`
   @media (max-width: 600px) {
     width: 32px;
     height: 32px;
+    ${props => props.vertical && `
+      top: initial;
+      right: initial;
+      bottom: 18px;
+      left: 18px;
+    `}
   }
 `;
 export const SkeletonMessageButtonSecond = styled(ItemsTransition)`
@@ -205,6 +218,12 @@ export const SkeletonMessageButtonSecond = styled(ItemsTransition)`
     height: 32px;
     /* top: 323px; */
     /* left: 59px; */
+    ${props => props.vertical && `
+      top: initial;
+      right: initial;
+      bottom: 18px;
+      left: 59px;
+    `}
   }
 `;
 export const SkeletonExchangeButton = styled(ItemsTransition)`
@@ -234,5 +253,6 @@ export const SkeletonTitleAboveImage = styled(ItemsTransition)`
     position: absolute;
     top: 18px;
     left: 18px;
+    ${(props) => props.vertical && `display: none;`}
   }
 `;

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

@@ -23,7 +23,9 @@ const BlockedProfile = (props) => {
       >
         <BlockedProfileText redText={props.redText}>
           {props.chatCard
-            ? t("messages.chatCardBlocked")
+            ? props.deleted
+              ? t("messages.chatCardDeleted")
+              : t("messages.chatCardBlocked")
             : props.shortText
             ? t("profile.blockedProfileShort")
             : t("profile.blockedProfile")}
@@ -48,6 +50,7 @@ BlockedProfile.propTypes = {
   redText: PropTypes.bool,
   shortText: PropTypes.bool,
   chatCard: PropTypes.bool,
+  deleted: PropTypes.bool,
 };
 
 export default BlockedProfile;

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

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { Grid, Typography } from "@mui/material";
 import { ReactComponent as Location } from "../../../../assets/images/svg/location.svg";
 import { ReactComponent as Mail } from "../../../../assets/images/svg/mail.svg";
@@ -7,11 +7,21 @@ import selectedTheme from "../../../../themes";
 
 export const ProfileContactContainer = styled(Grid)`
   padding-top: ${(props) => (props.isAdmin ? `20px` : `2rem`)};
-  padding-bottom: 2rem;
+  padding-bottom: ${(props) => (props.isAdmin ? "0" : "2rem")};
+  @media (max-width: 1300px) {
+    ${(props) =>
+      props.isAdmin &&
+      css`
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: start;
+        padding-bottom: 0;
+      `}
+  }
   @media (max-width: 600px) {
-    ${props => props.isAdmin && `overflow: hidden;`}
-    padding-top: ${props => props.isAdmin && "88px"};
-    padding-bottom: ${props => props.isAdmin ? "1rem" : "0"};
+    ${(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

@@ -9,7 +9,7 @@ import {
   ProfilePIBContainer,
   PocketIcon,
   ProfilePIB,
-  BlockedProfileText,
+  // BlockedProfileText,
 } from "./ProfileMainInfo.styled";
 import { useTranslation } from "react-i18next";
 import { getImageUrl, variants } from "../../../../util/helpers/imageUrlGetter";
@@ -49,18 +49,6 @@ const ProfileMainInfo = (props) => {
         />
       </AvatarImageContainer>
       <ProfileMainInfoGrid>
-        {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 />
         )}

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

@@ -35,6 +35,9 @@ export const SkeletonProfileCardContainer = styled(Box)`
     margin-left: 0;
     margin-right: 36px;
   }
+  @media (max-width: 600px) {
+    margin-right: 0 !important;
+  }
 `;
 export const SkeletonProfileCardHeader = styled(SkeletonItemBackgroundColor)`
   width: 148px;

src/components/Cards/UserReviewsCard/UserReviewsCard.js

@@ -55,7 +55,6 @@ const UserReviewsCard = (props) => {
         props?.review?.reviewAdditionalData?.userWhoReceived?.company?.name,
     };
   }, [props.review]);
-  console.log(review);
   return (
     <>
       <UserReviewsSingleCard

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

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import {
   GivenReviewsHeaderContainer,
   CompanyName,
+  CompanyLabel,
 } from "./GivenReviewsHeader.styled";
 import { useTranslation } from "react-i18next";
 
@@ -11,7 +12,7 @@ const GivenReviewsHeader = (props) => {
   console.log(props);
   return (
     <GivenReviewsHeaderContainer hasGivenReview={props.hasGivenReview}>
-      {t("reviews.givenHeaderTitle")}&nbsp;
+      <CompanyLabel>{t("reviews.givenHeaderTitle")}&nbsp;</CompanyLabel>
       <CompanyName>{props.userWhoReceived}</CompanyName>
     </GivenReviewsHeaderContainer>
   );

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

@@ -3,7 +3,7 @@ import { Box, Typography } from "@mui/material";
 import selectedTheme from "../../../../../themes";
 
 export const GivenReviewsHeaderContainer = styled(Box)`
-  display: ${(props) => (props.hasGivenReview ? "none" : "flex")};
+  display: ${(props) => (!props.hasGivenReview ? "none" : "flex")};
   width: 100%;
   background-color: #f5edff;
   padding-top: 11px;
@@ -12,9 +12,19 @@ export const GivenReviewsHeaderContainer = styled(Box)`
   margin-bottom: 18px;
   font-family: ${selectedTheme.fonts.textFont};
   border-radius: 4px;
+  @media (max-width: 600px) {
+    font-size: 12px;
+  }
 `;
+export const CompanyLabel = styled(Box)`
+  position: relative;
+  top: 3px;
+`
 
 export const CompanyName = styled(Typography)`
   color: ${selectedTheme.colors.primaryPurple};
   font-weight: 600;
+  @media (max-width: 600px) {
+    font-size: 14px;
+  }
 `;

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

@@ -6,7 +6,7 @@ import { IconButton } from "../../../../Buttons/IconButton/IconButton";
 
 export const RemoveButtonContainer = styled(IconButton)`
   position: absolute;
-  top: ${(props) => (!props.hasGivenReview ? "79px" : "16px")};
+  top: ${(props) => (props.hasGivenReview ? "79px" : "16px")};
   right: 16px;
   background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
   border-radius: 100%;

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

@@ -12,10 +12,9 @@ const UserReviewsSingleCard = (props) => {
   const handleRemove = () => {
     props.handleRemove();
   };
-
   return (
     <ReviewContainer>
-      {props.isAdmin && !props.rightReviews && (
+      {props.isAdmin && !props.rightReviews && props.hasGivenReview && (
         <GivenReviewsHeader
           hasGivenReview={props.hasGivenReview}
           userWhoReceived={props.review?.userWhoReceived}

src/components/ChatColumn/ChatColumn.styled.js

@@ -85,4 +85,5 @@ export const ChatPagingText = styled(Typography)`
   font-weight: 700;
   font-size: 16px;
   line-height: 21px;
+  white-space: nowrap;
 `;

src/components/ChatColumn/SkeletonChatColumn/SkeletonChatColumn.js

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import SkeletonChatColumnHeader from "./SkeletonChatColumnHeader/SkeletonChatColumnHeader";
 import SkeletonChatCard from "../../Cards/ChatCard/SkeletonChatCard/SkeletonChatCard";
-import { SkeletonChatCardsContainer } from "./SkeletonChatColumn.styled";
+import { SkeletonChatCardsContainer, SkeletonChatColumnContainer } from "./SkeletonChatColumn.styled";
 
 const numberOfSkeletonChatCards = 7;
 
@@ -12,14 +12,14 @@ const SkeletonChatColumn = () => {
     Array(numberOfSkeletonChatCards)
   ).map(() => {});
   return (
-    <>
+    <SkeletonChatColumnContainer>
       <SkeletonChatColumnHeader />
       <SkeletonChatCardsContainer>
         {arrayForMapping.map((item, index) => (
           <SkeletonChatCard key={index} />
         ))}
       </SkeletonChatCardsContainer>
-    </>
+    </SkeletonChatColumnContainer>
   );
 };
 

src/components/ChatColumn/SkeletonChatColumn/SkeletonChatColumn.styled.js

@@ -1,6 +1,9 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
 
+export const SkeletonChatColumnContainer = styled(Box)`
+    margin: 0 18px;
+`
 export const SkeletonChatCardsContainer = styled(Box)`
     display: flex;
     flex-direction: column;

src/components/DirectChat/DirectChat.js

@@ -61,7 +61,7 @@ const DirectChat = () => {
         name: offer?.companyData?.company?.name,
         location: offer?.companyData?.company?.contacts?.location,
         userId: offer?.offer?.userId,
-        telephone: offer?.companyData?.company?.contacts?.telephone
+        telephone: offer?.companyData?.company?.contacts?.telephone,
       };
     }
     return {

src/components/DirectChat/DirectChatContent/DirectChatContent.js

@@ -29,6 +29,7 @@ const DirectChatContent = (props) => {
       top: messagesRef.current.scrollHeight,
       behaviour: "smooth",
     });
+    window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
   }, [props?.chat?.chat?.messages, messagesRef, isLoadingChatContent]);
 
   const handleRefresh = () => {

src/components/DirectChat/DirectChatNewMessage/DirectChatNewMessage.js

@@ -91,6 +91,9 @@ const DirectChatNewMessage = (props) => {
   if (mineProfileBlocked) {
     return <NotAllowedChat mineProfileBlocked />;
   }
+  if (props?.chat?.interlocutor?._deleted) {
+    return <NotAllowedChat deleted />;
+  }
   if (props?.chat?.offer?.offer?._deleted) {
     return <NotAllowedChat />;
   }

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

@@ -15,6 +15,8 @@ const NotAllowedChat = (props) => {
           ? t("profile.mineProfileBlocked")
           : props.blocked
           ? t("profile.blockedProfile")
+          : props.deleted
+          ? t("messages.notAllowedChatDeleted")
           : t("messages.notAllowedChat")}
       </NotAllowedChatText>
     </NotAllowedChatContainer>
@@ -25,6 +27,7 @@ NotAllowedChat.propTypes = {
   children: PropTypes.node,
   blocked: PropTypes.bool,
   mineProfileBlocked: PropTypes.bool,
+  deleted: PropTypes.bool,
 };
 
 export default NotAllowedChat;

src/components/DirectChat/MiniChatColumn/MiniChatColumn.styled.js

@@ -35,5 +35,6 @@ export const ChatPagingText = styled(Typography)`
   font-style: normal;
   font-weight: 700;
   font-size: 16px;
+  white-space: nowrap;
   line-height: 21px;
 `;

src/components/Header/Drawer/Drawer.styled.js

@@ -68,7 +68,7 @@ export const FooterButtons = styled(Box)`
   flex-direction: row;
   width: calc(100vw - 72px);
   justify-content: space-between;
-  border-top: 3px solid ${hexToRGB(selectedTheme.colors.borderNormal, 0.12)};
+  /* border-top: 3px solid ${hexToRGB(selectedTheme.colors.borderNormal, 0.12)}; */
 `;
 
 export const HeaderTitle = styled(Typography)`

src/components/Header/Header.styled.js

@@ -43,7 +43,7 @@ export const ToolsButtonsContainer = styled(Box)`
     min-width: ${(props) => (props.shrink ? "0" : "400px")};
   }
   @media (max-width: 900px) {
-    flex: 0.2;
+    flex: 0.3;
     min-width: 0px;
     width: 60px;
     justify-content: right;

src/components/Header/OpenDrawerButton/OpenDrawerButton.styled.js

@@ -2,5 +2,5 @@ import { Box } from "@mui/material";
 import styled from "styled-components";
 
 export const ToggleDrawerButton = styled(Box)`
-  max-width: 40px;
+  max-width: 60px;
 `;

src/components/Profile/ProfileOffers/ProfileOffers.js

@@ -4,6 +4,7 @@ import {
   OffersContainer,
   OffersScroller,
   ProfileOffersContainer,
+  SkeletonContainer,
 } from "./ProfileOffers.styled";
 import { useState } from "react";
 import { useEffect } from "react";
@@ -84,7 +85,11 @@ const ProfileOffers = (props) => {
       )}
 
       {isLoadingMineOffers || isLoadingMineOffers === undefined ? (
-        <SkeletonOfferCard />
+        <SkeletonContainer>
+          <SkeletonOfferCard vertical />
+          <SkeletonOfferCard vertical />
+          <SkeletonOfferCard vertical />
+        </SkeletonContainer>
       ) : (
         <OffersContainer>
           {!isMobile ? (

src/components/Profile/ProfileOffers/ProfileOffers.styled.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import HorizontalScroller from "../../Scroller/HorizontalScroller";
 
 export const ProfileOffersContainer = styled(Box)`
-  width: 100%;
+  width: ${props => !props.isAdmin && "100%"};
   box-sizing: border-box;
   padding: 0 50px;
   margin-top: 34px;
@@ -13,7 +13,6 @@ export const ProfileOffersContainer = styled(Box)`
   }
   @media (max-width: 600px) {
     padding: 0;
-    width: calc(100vw - 36px);
     margin: 34px ${props => props.isAdmin ? "18px" : "0"};
     margin-bottom: ${props => !props.isAdmin && '0'}
   }
@@ -31,3 +30,9 @@ export const OffersScroller = styled(HorizontalScroller)`
     gap: 18px;
   }
 `;
+export const SkeletonContainer = styled(Box)`
+  display: flex;
+  width: calc(100vw - 36px);
+  max-width: calc(100vw - 36px);
+  overflow: hidden;
+`

src/components/UserReviews/UserReviews.js

@@ -99,7 +99,7 @@ const UserReviews = (props) => {
   }, [props.profileReviews, offer, props.isProfileReviews, reviews, isGiven]);
 
   const handleChangeSorting = (newSortOption) => {
-    console.log(newSortOption);
+    console.log("newSortOption",newSortOption);
     listRef.current.scrollTo({ top: 0, behaviour: "smooth" });
     if (props.isAdmin) {
       if (newSortOption.value === 1) {
@@ -153,7 +153,7 @@ const UserReviews = (props) => {
                   review={review}
                   key={index}
                   isAdmin={props.isAdmin}
-                  hasGivenReview={sortRef.current?.hasGivenReview}
+                  hasGivenReview={isGiven}
                   givingReview={props.givingReview}
                   rightReviews={props.rightReviews}
                 />

src/components/UserReviews/UserReviews.styled.js

@@ -30,6 +30,7 @@ export const ReviewsBox = styled(Box)`
         ? "450px"
         : "350px"};
     padding: 0;
+    width: 100%;
     margin: 0 ${(props) => (props.isAdmin ? "18px" : "0")};
     margin-top: 60px;
   }

src/i18n/resources/rs.js

@@ -234,12 +234,14 @@ export default {
     headerTitle: "Moje Ćaskanje",
     cardProduct: "Proizvod: ",
     chatCardBlocked: "(blokiran korisnik)",
+    chatCardDeleted: "(izbrisan korisnik)",
     miniChatHeaderTitle: "Moje Poruke",
     send: "Pošalji",
     sendPlaceholder: "Poruka...",
     seeChats: "Pogledaj ćaskanje",
     noMessagesToast: "Nemate ni jednu poruku!",
     notAllowedChat: "Trampa za ovaj proizvod je završena.",
+    notAllowedChatDeleted: "Profil sa kojim se dopisujete je izbrisan.",
     goBack: "Nazad na sve poruke",
     noMessages: "Poruke nisu pronađene.",
     noMessagesSecond: "Nažalost, nemate ni jednu poruku.",

src/layouts/AdminLayout/AdminLayout.js

@@ -8,10 +8,10 @@ const AdminLayout = (props) => {
     <AdminLayoutContainer className={props.className}>
       {props.children}
       <Grid container maxHeight="xl">
-        <LeftCard item xs={0} sm={0} md={3} lg={4} xl={3}>
+        <LeftCard item xs={0} sm={0} md={3} lg={3} xl={3}>
           {props.leftCard}
         </LeftCard>
-        <Content item xs={12} sm={12} md={9} lg={8} xl={9}>
+        <Content item xs={12} sm={12} md={9} lg={9} xl={9}>
           {props.content}
         </Content>
       </Grid>

src/layouts/AdminLayout/AdminLayout.styled.js

@@ -1,7 +1,7 @@
-import { Container, Grid } from "@mui/material";
+import { Box, Grid } from "@mui/material";
 import styled from "styled-components";
 
-export const AdminLayoutContainer = styled(Container)`
+export const AdminLayoutContainer = styled(Box)`
     padding-left: 0;
     padding-right: 0;
     margin: 0;

src/layouts/ProfileLayout/ProfileLayout.styled.js

@@ -15,7 +15,7 @@ export const ProfileLayoutContainer = styled(Container)`
     padding-right: 36px;
   }
   @media (max-width: 600px) {
-    padding-left: 18px;
+    padding-left: 0;
     padding-right: 18px;
   }
 `;

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

@@ -8,7 +8,6 @@ export const AdminSingleUserPageContainer = styled(Box)`
   @media (max-width: 600px) {
     margin: 0;
     margin-top: 90px;
-
   }
 `;
 export const AdminSingleUserPageProfile = styled(Profile)`
@@ -16,9 +15,14 @@ export const AdminSingleUserPageProfile = styled(Profile)`
 `;
 export const AdminSingleUserPageReviews = styled(UserReviews)`
   padding: 0;
-  padding-right: 33px;
+  padding: 0 50px;
+  padding-top: 30px;
+  @media (max-width: 1200px) {
+    padding-right: 33px;
+    padding-left: 0;
+  }
   @media (max-width: 600px) {
-    padding: 0;
+    /* padding: 0; */
     width: 100%;
     & > div {
       margin-top: 0;

src/store/saga/chatSaga.js

@@ -34,16 +34,25 @@ import { selectExchange } from "../selectors/exchangeSelector";
 import { selectUserId } from "../selectors/loginSelectors";
 import { sendMessage as SendMessageSocket } from "../../socket/socket";
 import { KEY_PAGE, KEY_SIZE } from "../../constants/queryStringConstants";
+import { setQueryStringRedux } from "../actions/queryString/queryStringActions";
+import { selectQueryString } from "../selectors/queryStringSelectors";
 
 function* fetchChats({ payload }) {
   try {
     const userId = yield select(selectUserId);
-    const queryObject = new URLSearchParams();
-    queryObject.set(KEY_SIZE, "6");
-    queryObject.set(KEY_PAGE, payload.currentPage);
+    let queryString;
+    if (payload?.currentPage) {
+      const queryObject = new URLSearchParams();
+      queryObject.set(KEY_SIZE, "6");
+      queryObject.set(KEY_PAGE, payload.currentPage);
+      queryString = queryObject.toString();
+      yield put(setQueryStringRedux(queryString));
+    } else {
+      queryString = yield select(selectQueryString);
+    }
     const data = yield call(attemptFetchChats, {
       userId,
-      queryString: queryObject.toString(),
+      queryString: queryString,
     });
     yield call(console.dir, data);
     yield put(setChats([...data.data]));
@@ -116,7 +125,8 @@ function* startNewChat(payload) {
       offerId: payload.payload.offerId,
       userId,
     });
-    const data = yield call(attemptFetchChats, userId);
+    const queryString = yield select(selectQueryString);
+    const data = yield call(attemptFetchChats, { userId, queryString });
     yield put(setChats([...data.data]));
     const newChatId = newChatData.data.chatId;
     yield put(startNewChatSuccess());

src/store/saga/profileSaga.js

@@ -83,23 +83,20 @@ function* fetchAllProfilesAsAdmin({ payload }) {
     if (payload?.currentPage) {
       const queryObject = new URLSearchParams();
       queryObject.set(KEY_SIZE, "10");
-    if (payload?.searchValue && payload?.searchValue?.length !== 0)
-      queryObject.set(KEY_NAME, payload.searchValue);
-    if (payload?.sortOption?.value === sortUsersEnum.OLD.value)
-      queryObject.set(KEY_SORT_DATE, "false");
-    if (payload?.sortOption?.value === sortUsersEnum.NEW.value)
-      queryObject.set(KEY_SORT_DATE, "true");
+      if (payload?.searchValue && payload?.searchValue?.length !== 0)
+        queryObject.set(KEY_NAME, payload.searchValue);
+      if (payload?.sortOption?.value === sortUsersEnum.OLD.value)
+        queryObject.set(KEY_SORT_DATE, "false");
+      if (payload?.sortOption?.value === sortUsersEnum.NEW.value)
+        queryObject.set(KEY_SORT_DATE, "true");
       queryObject.set(KEY_PAGE, payload.currentPage);
       queryString = queryObject.toString();
-      yield put(setQueryStringRedux(queryString))
+      yield put(setQueryStringRedux(queryString));
     } else {
       queryString = yield select(selectQueryString);
     }
 
-    const data = yield call(
-      attemptFetchAllProfilesAsAdmin,
-      queryString
-    );
+    const data = yield call(attemptFetchAllProfilesAsAdmin, queryString);
     if (data) yield put(setAllProfiles(data.data));
     yield put(fetchAllProfilesAsAdminSuccess());
   } catch (e) {