Finished feature 630 and fixed design bugs

src/components/Cards/ChatCard/SkeletonChatCard/SkeletonChatCard.js

@@ -0,0 +1,31 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  SkeletonChatCardCircle,
+  SkeletonChatCardColumnContainer,
+  SkeletonChatCardContainer,
+  SkeletonChatCardImage,
+  SkeletonChatCardLineOne,
+  SkeletonChatCardLineSecond,
+  SkeletonChatCardLineThird,
+} from "./SkeletonChatCard.styled";
+
+const SkeletonChatCard = () => {
+  return (
+    <SkeletonChatCardContainer>
+      <SkeletonChatCardImage />
+      <SkeletonChatCardColumnContainer>
+        <SkeletonChatCardLineOne />
+        <SkeletonChatCardLineSecond />
+        <SkeletonChatCardLineThird />
+      </SkeletonChatCardColumnContainer>
+      <SkeletonChatCardCircle />
+    </SkeletonChatCardContainer>
+  );
+};
+
+SkeletonChatCard.propTypes = {
+  children: PropTypes.node,
+};
+
+export default SkeletonChatCard;

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

@@ -0,0 +1,50 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../../themes";
+import {
+  BackgroundTransition,
+  ItemsTransition,
+} from "../../../Styles/globalStyleComponents";
+
+export const SkeletonChatCardContainer = styled(BackgroundTransition)`
+  height: 108px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  gap: 18px;
+  padding: 18px;
+  border: 1px solid ${selectedTheme.colors.borderNormal};
+  border-radius: 4px;
+`;
+export const SkeletonChatCardImage = styled(ItemsTransition)`
+  width: 72px;
+  height: 72px;
+  border-radius: 100%;
+`;
+export const SkeletonChatCardColumnContainer = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+export const SkeletonChatCardLineOne = styled(ItemsTransition)`
+  width: 90px;
+  height: 20px;
+`;
+export const SkeletonChatCardLineSecond = styled(ItemsTransition)`
+  width: 72px;
+  height: 14px;
+  margin-top: 16px;
+`;
+export const SkeletonChatCardLineThird = styled(ItemsTransition)`
+  width: 85px;
+  height: 14px;
+`;
+export const SkeletonChatCardCircle = styled(ItemsTransition)`
+  width: 32px;
+  height: 32px;
+  border-radius: 100%;
+  position: absolute;
+  top: 18px;
+  right: 18px;
+`;

src/components/Cards/FilterCard/Skeleton/SkeletonChooserHeader/SkeletonChooserHeader.styled.js

@@ -1,6 +1,6 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
-import { ItemsTransition } from "../../../OfferCard/SkeletonOfferCard/SkeletonOfferCard.styled";
+import { ItemsTransition } from "../../../../Styles/globalStyleComponents";
 
 export const SkeletonChooserContainer = styled(Box)`
   display: flex;

src/components/Cards/FilterCard/Skeleton/SkeletonChooserTitle/SkeletonChooserTitle.styled.js

@@ -1,6 +1,5 @@
 import styled from "styled-components";
-import { BackgroundTransition } from "../../../../MarketPlace/Header/SkeletonHeader/SkeletonHeader.styled";
-import { ItemsTransition } from "../../../OfferCard/SkeletonOfferCard/SkeletonOfferCard.styled";
+import { BackgroundTransition, ItemsTransition } from "../../../../Styles/globalStyleComponents";
 
 export const SkeletonChooserTitleContainer = styled(ItemsTransition)`
   margin-top: ${(props) => (props.center ? "44px" : "18px")};

src/components/Cards/FilterCard/Skeleton/SkeletonFilterCard.styled.js

@@ -1,7 +1,6 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
-import { BackgroundTransition } from "../../../MarketPlace/Header/SkeletonHeader/SkeletonHeader.styled";
-import { ItemsTransition } from "../../OfferCard/SkeletonOfferCard/SkeletonOfferCard.styled";
+import { BackgroundTransition, ItemsTransition } from "../../../Styles/globalStyleComponents";
 
 export const SkeletonFilterCardContainer = styled(BackgroundTransition)`
   display: ${props => props.skeleton ? "block" : "none"};

src/components/Cards/FilterCard/Skeleton/SkeletonSection/SkeletonSectionOption/SkeletonSectionOption.styled.js

@@ -1,6 +1,6 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
-import { ItemsTransition } from "../../../../OfferCard/SkeletonOfferCard/SkeletonOfferCard.styled";
+import { ItemsTransition } from "../../../../../Styles/globalStyleComponents";
 
 export const SkeletonSectionOptionContainer = styled(Box)`
   display: flex;

src/components/Cards/OfferCard/OfferCard.js

@@ -51,14 +51,24 @@ const OfferCard = (props) => {
       history.push(`/proizvodi/${itemId}`);
     }
   };
-  const messageUser = () => {
+  const messageUser = (event) => {
+    event.stopPropagation();
     props.messageUser(props.offer);
   };
-  const makeReview = () => {
+  const makeReview = (event) => {
+    event.stopPropagation();
     if (!props.disabledReviews) {
       props.makeReview(props.offer);
     }
   };
+  const openEditOfferModal = (event) => {
+    event.stopPropagation();
+    setEditOfferModal(true);
+  };
+  const openRemoveModal = (event) => {
+    event.stopPropagation();
+    setDeleteOfferModal(true);
+  };
 
   const closeModalHandler = () => {
     setDeleteOfferModal(false);
@@ -169,13 +179,13 @@ const OfferCard = (props) => {
             <>
               <RemoveIconContainer
                 vertical={props.vertical}
-                onClick={() => setDeleteOfferModal(true)}
+                onClick={openRemoveModal}
               >
                 <RemoveIcon />
               </RemoveIconContainer>
               <EditIconContainer
                 vertical={props.vertical}
-                onClick={() => setEditOfferModal(true)}
+                onClick={openEditOfferModal}
               >
                 <EditIcon />
               </EditIconContainer>

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

@@ -32,7 +32,7 @@ const SkeletonOfferCard = (props) => {
             <SkeletonAuthor />
             <SkeletonLocation />
           </SkeletonGroup>
-          <SkeletonRowGroup>
+          <SkeletonRowGroup aboveChat={props.aboveChat}>
             <SkeletonDetail />
             <SkeletonDetail />
             <SkeletonDetail />
@@ -59,6 +59,7 @@ const SkeletonOfferCard = (props) => {
 SkeletonOfferCard.propTypes = {
   children: PropTypes.node,
   skeleton: PropTypes.bool,
+  aboveChat: PropTypes.bool,
 };
 
 export default SkeletonOfferCard;

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

@@ -1,23 +1,10 @@
 import { Box } from "@mui/material";
-import styled, { keyframes } from "styled-components";
+import styled from "styled-components";
 import selectedTheme from "../../../../themes";
-import { BackgroundTransition } from "../../../MarketPlace/Header/SkeletonHeader/SkeletonHeader.styled";
-
-export const SkeletonItemAnimation = keyframes`
-  0% {
-    background-color: ${selectedTheme.colors.filterSkeletonItems};
-  }
-  50% {
-    background-color: ${selectedTheme.colors.filterSkeletonItemsSecond};
-  }
-  100% {
-    background-color: ${selectedTheme.colors.filterSkeletonItems};
-  }
-`;
-
-export const ItemsTransition = styled(Box)`
-  animation: ${SkeletonItemAnimation} 1.6s infinite;
-`;
+import {
+  BackgroundTransition,
+  ItemsTransition,
+} from "../../../Styles/globalStyleComponents";
 
 export const SkeletonOfferCardContainer = styled(BackgroundTransition)`
   display: flex;
@@ -131,9 +118,10 @@ export const SkeletonRowGroup = styled(Box)`
     & div:nth-child(1) {
       display: block;
       width: 85px;
+      ${(props) => props.aboveChat && `margin-bottom: 18px;`}
     }
     & div:nth-child(2) {
-      display: block;
+      display: ${(props) => (props.aboveChat ? "none" : "block")};
     }
   }
 `;

src/components/ChatColumn/ChatColumn.js

@@ -23,6 +23,9 @@ import {
 } from "../../store/actions/chat/chatActions";
 import useSorting from "../../hooks/useOffers/useSorting";
 import { addMesageListener, removeMessageListener } from "../../socket/socket";
+import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
+import { CHAT_SCOPE } from "../../store/actions/chat/chatActionConstants";
+import SkeletonChatColumn from "./SkeletonChatColumn/SkeletonChatColumn";
 
 export const DownArrow = (props) => {
   <IconStyled {...props}>
@@ -36,7 +39,7 @@ export const ChatColumn = () => {
   const { t } = useTranslation();
   const [sortOption, setSortOption] = useState(sortEnum.INITIAL);
   const chats = useSelector(selectLatestChats);
-
+  const isLoadingChats = useSelector(selectIsLoadingByActionType(CHAT_SCOPE));
   useEffect(() => {
     dispatch(fetchChats());
   }, []);
@@ -72,41 +75,49 @@ export const ChatColumn = () => {
   };
 
   return (
-    <ChatColumnContainer>
-      <HeaderBack />
-      <TitleSortContainer>
-        <Grid
-          container
-          direction="row"
-          justifyContent="start"
-          alignItems="center"
-        >
-          <MailOutlineIcon color="action" sx={{ mr: 0.9 }} />
-          <HeaderTitle>{t("header.myMessages")}</HeaderTitle>
-        </Grid>
-        <HeaderSelect
-          value={sortOption?.value ? sortOption.value : sortEnum.INITIAL.value}
-          IconComponent={DownArrow}
-          onChange={handleChangeSelect}
-        >
-          {Object.keys(sortEnum).map((property) => {
-            return (
-              <SelectOption
-                value={sortEnum[property].value}
-                key={sortEnum[property].value}
-              >
-                {sortEnum[property].mainText}
-              </SelectOption>
-            );
-          })}
-        </HeaderSelect>
-      </TitleSortContainer>
-      <ListContainer>
-        {chats.map((item, index) => (
-          <ChatCard key={index} chat={item} />
-        ))}
-      </ListContainer>
-    </ChatColumnContainer>
+    <>
+      {isLoadingChats || isLoadingChats === undefined ? (
+        <SkeletonChatColumn />
+      ) : (
+        <ChatColumnContainer>
+          <HeaderBack />
+          <TitleSortContainer>
+            <Grid
+              container
+              direction="row"
+              justifyContent="start"
+              alignItems="center"
+            >
+              <MailOutlineIcon color="action" sx={{ mr: 0.9 }} />
+              <HeaderTitle>{t("header.myMessages")}</HeaderTitle>
+            </Grid>
+            <HeaderSelect
+              value={
+                sortOption?.value ? sortOption.value : sortEnum.INITIAL.value
+              }
+              IconComponent={DownArrow}
+              onChange={handleChangeSelect}
+            >
+              {Object.keys(sortEnum).map((property) => {
+                return (
+                  <SelectOption
+                    value={sortEnum[property].value}
+                    key={sortEnum[property].value}
+                  >
+                    {sortEnum[property].mainText}
+                  </SelectOption>
+                );
+              })}
+            </HeaderSelect>
+          </TitleSortContainer>
+          <ListContainer>
+            {chats.map((item, index) => (
+              <ChatCard key={index} chat={item} />
+            ))}
+          </ListContainer>
+        </ChatColumnContainer>
+      )}
+    </>
   );
 };
 

src/components/ChatColumn/SkeletonChatColumn/SkeletonChatColumn.js

@@ -0,0 +1,30 @@
+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";
+
+const numberOfSkeletonChatCards = 7;
+
+const SkeletonChatColumn = () => {
+  const arrayForMapping = Array.apply(
+    null,
+    Array(numberOfSkeletonChatCards)
+  ).map(() => {});
+  return (
+    <>
+      <SkeletonChatColumnHeader />
+      <SkeletonChatCardsContainer>
+        {arrayForMapping.map((item, index) => (
+          <SkeletonChatCard key={index} />
+        ))}
+      </SkeletonChatCardsContainer>
+    </>
+  );
+};
+
+SkeletonChatColumn.propTypes = {
+  children: PropTypes.node,
+};
+
+export default SkeletonChatColumn;

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

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

src/components/ChatColumn/SkeletonChatColumn/SkeletonChatColumnHeader/SkeletonChatColumnHeader.js

@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  SkeletonChatColumnHeaderContainer,
+  SkeletonChatColumnHeaderLine,
+  SkeletonChatColumnRow,
+  SkeletonChatColumnRowLineOne,
+  SkeletonChatColumnRowLineSecond,
+} from "./SkeletonChatColumnHeader.styled";
+
+const SkeletonChatColumnHeader = () => {
+  return (
+    <SkeletonChatColumnHeaderContainer>
+      <SkeletonChatColumnHeaderLine />
+      <SkeletonChatColumnRow>
+        <SkeletonChatColumnRowLineOne />
+        <SkeletonChatColumnRowLineSecond />
+      </SkeletonChatColumnRow>
+    </SkeletonChatColumnHeaderContainer>
+  );
+};
+
+SkeletonChatColumnHeader.propTypes = {
+  children: PropTypes.node,
+};
+
+export default SkeletonChatColumnHeader;

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

@@ -0,0 +1,28 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import { BackgroundTransition } from "../../../Styles/globalStyleComponents";
+
+export const SkeletonChatColumnHeaderContainer = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: 41px;
+`
+export const SkeletonChatColumnHeaderLine = styled(BackgroundTransition)`
+    width: 209px;
+    height: 18px;
+`
+export const SkeletonChatColumnRow = styled(Box)`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+`
+export const SkeletonChatColumnRowLineOne = styled(BackgroundTransition)`
+    width: 72px;
+    height: 18px;
+    position: relative;
+    top: 5.5px;
+`
+export const SkeletonChatColumnRowLineSecond = styled(BackgroundTransition)`
+    width: 137px;
+    height: 29px;
+`

src/components/DirectChat/DirectChatContent/DirectChatContent.js

@@ -34,14 +34,6 @@ const DirectChatContent = (props) => {
   const handleRefresh = () => {
     props.refreshChat();
   };
-  // useEffect(() => {
-  //   // const offsetBottom =
-  //   //   messagesRef.current?.offsetTop + messagesRef.current?.offsetHeight;
-  //   messagesRef.current?.scrollTo({
-  //     top: messagesRef.current.scrollHeight,
-  //     behaviour: "smooth",
-  //   });
-  // }, [messages, messagesRef]);
   return (
     <>
       {isLoadingChatContent || isLoadingChatContent === undefined ? (

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

@@ -26,11 +26,13 @@ const DirectChatContentHeader = (props) => {
   const { isMobile } = useIsMobile();
 
   const togglePhonePopover = (event) => {
-    setShowPhonePopover((prevState) => !prevState);
-    setPhonePopoverAnchorEl((prevState) => {
-      if (prevState) return null;
-      return event.target;
-    });
+    if (props.interlucator?.telephone) {
+      setShowPhonePopover((prevState) => !prevState);
+      setPhonePopoverAnchorEl((prevState) => {
+        if (prevState) return null;
+        return event.target;
+      });
+    }
   };
   const routeToUser = () => {
     history.push(
@@ -63,7 +65,10 @@ const DirectChatContentHeader = (props) => {
         </ProfileDetails>
       </DirectChatContentHeaderFlexContainer>
       <DirectChatContentHeaderFlexContainer>
-        <PhoneIconContainer onClick={togglePhonePopover}>
+        <PhoneIconContainer
+          disabled={!props.interlucator?.telephone}
+          onClick={togglePhonePopover}
+        >
           <PhoneIcon />
         </PhoneIconContainer>
       </DirectChatContentHeaderFlexContainer>

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

@@ -1,87 +1,93 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../themes";
-import {ReactComponent as Location} from "../../../../assets/images/svg/location.svg"
-import {ReactComponent as Phone} from "../../../../assets/images/svg/phone.svg"
+import { ReactComponent as Location } from "../../../../assets/images/svg/location.svg";
+import { ReactComponent as Phone } from "../../../../assets/images/svg/phone.svg";
 import { IconButton } from "../../../Buttons/IconButton/IconButton";
 
-
 export const DirectChatContentHeaderContainer = styled(Box)`
-    height: 90px;
-    background-color: ${selectedTheme.colors.chatHeaderColor};
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    padding: 17px;
-    padding-left: 35px;
-    justify-content: space-between;
-`
+  height: 90px;
+  background-color: ${selectedTheme.colors.chatHeaderColor};
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  padding: 17px;
+  padding-left: 35px;
+  justify-content: space-between;
+`;
 export const DirectChatContentHeaderFlexContainer = styled(Box)`
-    display: flex;
-    flex-direction: row;
-`
+  display: flex;
+  flex-direction: row;
+`;
 export const ProfileImage = styled.img`
-    width: 54px;
-    height: 54px;
-    border-radius: 100%;
-    overflow: hidden;
-    cursor: pointer;
-`
+  width: 54px;
+  height: 54px;
+  border-radius: 100%;
+  overflow: hidden;
+  cursor: pointer;
+`;
 export const ProfileDetails = styled(Box)`
-    display: flex;
-    flex-direction: column;
-    margin-left: 18px;
-`
+  display: flex;
+  flex-direction: column;
+  margin-left: 18px;
+`;
 export const ProfileName = styled(Box)`
-    font-weight: 600;
-    font-family: ${selectedTheme.fonts.textFont};
-    font-size: 16px;
-    color: ${selectedTheme.colors.primaryPurple};
-    cursor: pointer;
-`
+  font-weight: 600;
+  font-family: ${selectedTheme.fonts.textFont};
+  font-size: 16px;
+  color: ${selectedTheme.colors.primaryPurple};
+  cursor: pointer;
+`;
 export const ProfileLocation = styled(Box)`
-    display: flex;
-    flex-direction: row;
-`
+  display: flex;
+  flex-direction: row;
+`;
 export const ProfileLocationText = styled(Box)`
-    color: ${selectedTheme.colors.primaryDarkText};
-    font-size: 12px;
-    font-family: ${selectedTheme.fonts.textFont};
-    margin-left: 5.5px;
-
-`
+  color: ${selectedTheme.colors.primaryDarkText};
+  font-size: 12px;
+  font-family: ${selectedTheme.fonts.textFont};
+  margin-left: 5.5px;
+`;
 export const ProfileLocationIcon = styled(Location)`
-    width: 12px;
-    height: 12px;
-    position: relative;
-    top: 2px;
-`
+  width: 12px;
+  height: 12px;
+  position: relative;
+  top: 2px;
+`;
 export const PhoneIcon = styled(Phone)`
-    position: relative;
-    top: 2.5px;
-    left: 1.5px;
-    @media (max-width: 600px) {
-        width: 14px;
-        height: 14px;
-        top: -2px;
-        left: -2px;
-    }
-`
+  position: relative;
+  top: 2.5px;
+  left: 1.5px;
+  @media (max-width: 600px) {
+    width: 14px;
+    height: 14px;
+    top: -2px;
+    left: -2px;
+  }
+`;
 export const PhoneIconContainer = styled(IconButton)`
-    background-color: white;
-    width: 40px;
-    height: 40px;
-    border-radius: 100%;
-    transition: .2s all;
-    &:hover button:hover {
-        background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
-    }
-    &:hover {
-        background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
-        cursor: pointer;
-    }
-    @media (max-width: 600px) {
-        width: 32px;
-        height: 32px;
-    }
-`
+  background-color: ${(props) =>
+    props.disabled ? selectedTheme.colors.primaryIconBackgroundColor : "white"};
+  width: 40px;
+  height: 40px;
+  border-radius: 100%;
+  transition: 0.2s all;
+  ${(props) =>
+    props.disabled &&
+    `
+        & svg path {
+            stroke: ${selectedTheme.colors.iconStrokeDisabledColor};
+        }
+    `}
+  &:hover button:hover {
+    background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
+  }
+  &:hover {
+    background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
+    cursor: pointer;
+  }
+  @media (max-width: 600px) {
+    width: 32px;
+    height: 32px;
+  }
+`;

src/components/DirectChat/DirectChatContent/SkeletonDirectChatContent/SkeletonDirectChatContent.styled.js

@@ -1,34 +1,9 @@
-import styled, { keyframes } from "styled-components";
+import styled from "styled-components";
 import { Box } from "@mui/system";
-import selectedTheme from "../../../../themes";
-
-const skeletonAnimation = keyframes`
-    0% {
-        background-color: ${selectedTheme.colors.filterSkeletonItems};
-    }
-
-    50% {
-        background-color: ${selectedTheme.colors.filterSkeletonItemsSecond};
-    }
-
-    100% {
-        background-color: ${selectedTheme.colors.filterSkeletonItems}
-    }
-`;
-
-const skeletonBackgroundAnimation = keyframes`
-    0% {
-        background-color: ${selectedTheme.colors.filterSkeletonBackground};
-    }
-
-    50% {
-        background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
-    }
-
-    100% {
-        background-color: ${selectedTheme.colors.filterSkeletonBackground}
-    }
-`;
+import {
+  BackgroundTransition,
+  ItemsTransition,
+} from "../../../Styles/globalStyleComponents";
 
 export const SkeletonChatContentContainer = styled(Box)`
   display: flex;
@@ -36,60 +11,74 @@ export const SkeletonChatContentContainer = styled(Box)`
   margin-top: 19px;
 `;
 
-export const SkeletonChatContentHeader = styled(Box)`
+export const SkeletonChatContentHeader = styled(BackgroundTransition)`
   display: flex;
   padding: 17px 35px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   justify-content: space-between;
   align-items: center;
-  animation: ${skeletonBackgroundAnimation} 2s infinite;
+  position: relative;
 `;
 
 export const SkeletonChatContentHeaderFirstColumn = styled(Box)`
   display: flex;
 `;
 
-export const SkeletonChatContentHeaderFirstColumnImage = styled(Box)`
+export const SkeletonChatContentHeaderFirstColumnImage = styled(
+  ItemsTransition
+)`
   width: 54px;
   height: 54px;
   border-radius: 100%;
-  background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  animation: ${skeletonAnimation} 2s infinite;
+  @media (max-width: 600px) {
+    width: 72px;
+    height: 72px;
+  }
 `;
 
 export const SkeletonChatContentHeaderFirstColumnInfo = styled(Box)`
   display: flex;
   flex-direction: column;
   margin-left: 18px;
+  @media (max-width: 600px) {
+    justify-content: space-between;
+  }
 `;
 
-export const SkeletonChatContentHeaderFirstColumnFirstLine = styled(Box)`
+export const SkeletonChatContentHeaderFirstColumnFirstLine = styled(
+  ItemsTransition
+)`
   width: 124px;
   height: 18px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   margin-bottom: 15px;
-  animation: ${skeletonAnimation} 2s infinite;
 `;
 
-export const SkeletonChatContentHeaderFirstColumnSecondLine = styled(Box)`
+export const SkeletonChatContentHeaderFirstColumnSecondLine = styled(
+  ItemsTransition
+)`
   width: 72px;
   height: 14px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  animation: ${skeletonAnimation} 2s infinite;
+  @media (max-width: 600px) {
+    width: 141px;
+  }
 `;
 
-export const SkeletonChatContentHeaderSecondColumnImageSmall = styled(Box)`
+export const SkeletonChatContentHeaderSecondColumnImageSmall = styled(
+  ItemsTransition
+)`
   width: 40px;
   height: 40px;
   border-radius: 100%;
-  background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  animation: ${skeletonAnimation} 2s infinite;
+  @media (max-width: 600px) {
+    width: 32px;
+    height: 32px;
+    position: absolute;
+    top: 17px;
+    right: 17px;
+  }
 `;
 
-export const SkeletonChatContentMain = styled(Box)`
-  padding: 27px 36px 18px 36px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  animation: ${skeletonAnimation} 2s infinite;
+export const SkeletonChatContentMain = styled(ItemsTransition)`
+  padding: 27px 18px 18px 18px;
 `;
 
 export const SkeletonChatContentMainRow = styled(Box)`
@@ -99,174 +88,180 @@ export const SkeletonChatContentMainRow = styled(Box)`
   &:nth-child(even) {
     float: right;
   }
+  @media (max-width: 600px) {
+    &:nth-child(5) {
+      display: none;
+    }
+  }
 `;
 
-export const SkeletonChatContentMainImage = styled(Box)`
+export const SkeletonChatContentMainImage = styled(BackgroundTransition)`
   width: 54px;
   height: 54px;
   border-radius: 100%;
-  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
-  animation: ${skeletonBackgroundAnimation} 2s infinite;
+  @media (max-width: 600px) {
+    display: none;
+  }
 `;
 
-export const SkeletonChatContentMainLeftRowInfo = styled(Box)`
+export const SkeletonChatContentMainLeftRowInfo = styled(BackgroundTransition)`
   display: flex;
   flex-direction: column;
-  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   padding: 9px;
-  align-items: flex-end;
+  align-items: flex-start;
   margin-left: 18px;
   margin-bottom: 18px;
   border-radius: 0px 9px 9px 9px;
-  animation: ${skeletonBackgroundAnimation} 2s infinite;
+  @media (max-width: 600px) {
+    &:nth-child(1) {
+      display: none;
+    }
+    margin-left: 0px;
+  }
 `;
 
-export const SkeletonChatContentMainFirstRowInfoFirstLine = styled(Box)`
+export const SkeletonChatContentMainFirstRowInfoFirstLine = styled(
+  ItemsTransition
+)`
   width: 715px;
   height: 18px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackground};
   margin-bottom: 15px;
-  animation: ${skeletonAnimation} 2s infinite;
 
   @media (max-width: 1200px) {
     width: 480px;
   }
 
   @media (max-width: 600px) {
-    width: 200px;
+    width: calc(100vw - 86px);
   }
 `;
 
-export const SkeletonChatContentMainFirstRowInfoSecondLine = styled(Box)`
+export const SkeletonChatContentMainFirstRowInfoSecondLine = styled(
+  ItemsTransition
+)`
   width: 72px;
   height: 14px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  animation: ${skeletonAnimation} 2s infinite;
 `;
 
-export const SkeletonChatContentMainRightRowInfo = styled(Box)`
+export const SkeletonChatContentMainRightRowInfo = styled(BackgroundTransition)`
   display: flex;
   flex-direction: column;
-  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
-  animation: ${skeletonBackgroundAnimation} 2s infinite;
   padding: 9px;
-  align-items: flex-start;
+  align-items: flex-end;
   margin-right: 18px;
   margin-bottom: 18px;
   border-radius: 9px 0px 9px 9px;
+  @media (max-width: 600px) {
+    margin-right: 0px;
+  }
 `;
 
-export const SkeletonChatContentSecondRowFirstLine = styled(Box)`
+export const SkeletonChatContentSecondRowFirstLine = styled(ItemsTransition)`
   width: 354px;
   height: 18px;
   margin-bottom: 15px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  animation: ${skeletonAnimation} 2s infinite;
 
   @media (max-width: 600px) {
-    width: 180px;
+    width: 232px;
   }
 `;
 
-export const SkeletonChatContentSecondRowSecondLine = styled(Box)`
+export const SkeletonChatContentSecondRowSecondLine = styled(ItemsTransition)`
   width: 72px;
   height: 14px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  animation: ${skeletonAnimation} 2s infinite;
 `;
 
-export const SkeletonChatContentThirdRowFirstLine = styled(Box)`
+export const SkeletonChatContentThirdRowFirstLine = styled(ItemsTransition)`
   width: 394px;
   height: 18px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  animation: ${skeletonAnimation} 2s infinite;
   margin-bottom: 15px;
 
   @media (max-width: 600px) {
-    width: 170px;
+    width: 208px;
   }
 `;
 
-export const SkeletonChatContentThirdRowSecondLine = styled(Box)`
+export const SkeletonChatContentThirdRowSecondLine = styled(ItemsTransition)`
   width: 93px;
   height: 14px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  animation: ${skeletonAnimation} 2s infinite;
+  @media (max-width: 600px) {
+    width: 72px;
+  }
 `;
 
-export const SkeletonChatContentFourthRowFirstLine = styled(Box)`
+export const SkeletonChatContentFourthRowFirstLine = styled(ItemsTransition)`
   width: 101px;
   height: 18px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  animation: ${skeletonAnimation} 2s infinite;
   margin-bottom: 15px;
+  @media (max-width: 600px) {
+    width: 110px;
+  }
 `;
 
-export const SkeletonChatContentFourthRowSecondLine = styled(Box)`
+export const SkeletonChatContentFourthRowSecondLine = styled(ItemsTransition)`
   width: 72px;
   height: 14px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  animation: ${skeletonAnimation} 2s infinite;
 `;
 
-export const SkeletonChatContentFifthRowFirstLine = styled(Box)`
+export const SkeletonChatContentFifthRowFirstLine = styled(ItemsTransition)`
   width: 131px;
   height: 18px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  animation: ${skeletonAnimation} 2s infinite;
   margin-bottom: 15px;
 `;
 
-export const SkeletonChatContentFifthRowSecondLine = styled(Box)`
+export const SkeletonChatContentFifthRowSecondLine = styled(ItemsTransition)`
   width: 87px;
   height: 14px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  animation: ${skeletonAnimation} 2s infinite;
 `;
 
-export const SkeletonChatContentHorizontalLine = styled(Box)`
+export const SkeletonChatContentHorizontalLine = styled(BackgroundTransition)`
   width: 100%;
   height: 1px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
-  animation: ${skeletonBackgroundAnimation} 2s infinite;
   margin: 9px 0 18px 0;
+  @media (max-width: 600px) {
+    margin-top: 90px;
+  }
 `;
 
-export const SkeletonChatContentVerticalLine = styled(Box)`
+export const SkeletonChatContentVerticalLine = styled(BackgroundTransition)`
   width: 5px;
   height: 180px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
-  animation: ${skeletonBackgroundAnimation} 2s infinite;
   position: absolute;
   top: 490px;
   right: 35px;
+  @media (max-width: 600px) {
+    display: none;
+  }
 `;
 
 export const SkeletonChatContentFooter = styled(Box)`
   display: flex;
 `;
 
-export const SkeletonChatContentFooterFirstColumn = styled(Box)`
+export const SkeletonChatContentFooterFirstColumn = styled(
+  BackgroundTransition
+)`
   flex: 1;
   padding: 17px 16px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
-  animation: ${skeletonBackgroundAnimation} 2s infinite;
   margin-right: 36px;
 `;
 
-export const SkeletonChatContentFooterColumnInside = styled(Box)`
+export const SkeletonChatContentFooterColumnInside = styled(ItemsTransition)`
   width: 108px;
   height: 14px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  animation: ${skeletonAnimation} 2s infinite;
 
   @media (max-width: 600px) {
-    width: 80px;
+    width: 71px;
   }
 `;
 
-export const SkeletonChatContentFooterSecondColumn = styled(Box)`
+export const SkeletonChatContentFooterSecondColumn = styled(
+  BackgroundTransition
+)`
   padding: 17px 36px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
-  animation: ${skeletonBackgroundAnimation} 2s infinite;
+  @media (max-width: 600px) {
+    padding-right: 0;
+    padding-left: 21px;
+    width: 113px;
+  }
 `;

src/components/DirectChat/SkeletonDirectChat/SkeletonDirectChat.js

@@ -1,55 +1,16 @@
 import React from "react";
+import SkeletonOfferCard from "../../Cards/OfferCard/SkeletonOfferCard/SkeletonOfferCard";
 import {
-  SkeletonDirectChatContainer,
-  SkeletonDirectChatFirstColumn,
-  SkeletonDirectChatFirstLine,
-  SkeletonDirectChatFourthLine,
-  SkeletonDirectChatFourthLineContainer,
-  SkeletonDirectChatHeading,
-  SkeletonDirectChatImage,
-  SkeletonDirectChatRoundImage,
-  SkeletonDirectChatSecondColumn,
-  SkeletonDirectChatSecondColumnFirstLine,
-  SkeletonDirectChatSecondColumnSecondLine,
-  SkeletonDirectChatSecondLine,
-  SkeletonDirectChatThirdColumn,
-  SkeletonDirectChatThirdColumnSecondLine,
-  SkeletonDirectChatThirdColumnSecondLineInside,
-  SkeletonDirectChatThirdLine,
-  SkeletonDirectChatVerticalLine,
+  SkeletonDirectChatHeadingFirst,
+  SkeletonDirectChatHeadingSecond,
 } from "./SkeletonDirectChat.styled";
 
 const SkeletonDirectChat = () => {
   return (
     <>
-      <SkeletonDirectChatHeading />
-      <SkeletonDirectChatContainer>
-        <SkeletonDirectChatImage />
-        <SkeletonDirectChatFirstColumn>
-          <SkeletonDirectChatFirstLine />
-          <SkeletonDirectChatSecondLine />
-          <SkeletonDirectChatThirdLine />
-          <SkeletonDirectChatFourthLineContainer>
-            <SkeletonDirectChatFourthLine />
-            <SkeletonDirectChatFourthLine />
-            <SkeletonDirectChatFourthLine />
-          </SkeletonDirectChatFourthLineContainer>
-        </SkeletonDirectChatFirstColumn>
-        <SkeletonDirectChatVerticalLine />
-        <SkeletonDirectChatSecondColumn>
-          <SkeletonDirectChatSecondColumnFirstLine />
-          <SkeletonDirectChatSecondColumnSecondLine />
-          <SkeletonDirectChatSecondColumnSecondLine />
-          <SkeletonDirectChatSecondColumnSecondLine />
-          <SkeletonDirectChatSecondColumnSecondLine />
-        </SkeletonDirectChatSecondColumn>
-        <SkeletonDirectChatThirdColumn>
-          <SkeletonDirectChatRoundImage />
-          <SkeletonDirectChatThirdColumnSecondLine>
-            <SkeletonDirectChatThirdColumnSecondLineInside />
-          </SkeletonDirectChatThirdColumnSecondLine>
-        </SkeletonDirectChatThirdColumn>
-      </SkeletonDirectChatContainer>
+      <SkeletonDirectChatHeadingFirst />
+      <SkeletonDirectChatHeadingSecond />
+      <SkeletonOfferCard aboveChat />
     </>
   );
 };

src/components/DirectChat/SkeletonDirectChat/SkeletonDirectChat.styled.js

@@ -1,40 +1,17 @@
-import styled, { keyframes } from "styled-components";
+import styled from "styled-components";
 import { Box } from "@mui/system";
 import selectedTheme from "../../../themes";
+import { BackgroundTransition } from "../../Styles/globalStyleComponents";
 
-const skeletonAnimation = keyframes`
-    0% {
-        background-color: ${selectedTheme.colors.filterSkeletonItems};
-    }
-
-    50% {
-        background-color: ${selectedTheme.colors.filterSkeletonItemsSecond};
-    }
-
-    100% {
-        background-color: ${selectedTheme.colors.filterSkeletonItems}
-    }
-`;
-
-const skeletonBackgroundAnimation = keyframes`
-    0% {
-        background-color: ${selectedTheme.colors.filterSkeletonBackground};
-    }
-
-    50% {
-        background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
-    }
-
-    100% {
-        background-color: ${selectedTheme.colors.filterSkeletonBackground}
-    }
+export const SkeletonDirectChatHeadingFirst = styled(BackgroundTransition)`
+  width: 209px;
+  height: 18px;
+  margin-bottom: 46px;
 `;
 
-export const SkeletonDirectChatHeading = styled(Box)`
+export const SkeletonDirectChatHeadingSecond = styled(BackgroundTransition)`
   width: 90px;
   height: 18px;
-  background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  animation: ${skeletonAnimation} 2s infinite;
   margin-bottom: 18px;
 `;
 
@@ -44,14 +21,12 @@ export const SkeletonDirectChatContainer = styled(Box)`
   border: 1px solid ${selectedTheme.colors.filterSkeletonBackgroundSecond};
   padding: 18px;
   justify-content: space-between;
-  animation: ${skeletonAnimation} 2s infinite;
 `;
 
 export const SkeletonDirectChatImage = styled(Box)`
   width: 144px;
   height: 144px;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
-  animation: ${skeletonBackgroundAnimation} 2s infinite;
 
   @media (max-width: 600px) {
     width: 108px;
@@ -75,7 +50,6 @@ export const SkeletonDirectChatFirstLine = styled(Box)`
   width: 90px;
   height: 27px;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
-  animation: ${skeletonBackgroundAnimation} 2s infinite;
   margin-bottom: 28px;
 `;
 
@@ -83,7 +57,6 @@ export const SkeletonDirectChatSecondLine = styled(Box)`
   width: 117px;
   height: 18px;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
-  animation: ${skeletonBackgroundAnimation} 2s infinite;
   margin-bottom: 4px;
 `;
 
@@ -91,7 +64,6 @@ export const SkeletonDirectChatThirdLine = styled(Box)`
   width: 90px;
   height: 18px;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
-  animation: ${skeletonBackgroundAnimation} 2s infinite;
   margin-bottom: 35px;
 `;
 
@@ -103,7 +75,6 @@ export const SkeletonDirectChatFourthLine = styled(Box)`
   width: 72px;
   height: 14px;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
-  animation: ${skeletonBackgroundAnimation} 2s infinite;
   margin-right: 27px;
 
   @media (max-width: 600px) {
@@ -138,7 +109,6 @@ export const SkeletonDirectChatSecondColumnFirstLine = styled(Box)`
   width: 72px;
   height: 14px;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
-  animation: ${skeletonBackgroundAnimation} 2s infinite;
   margin-top: 18px;
   margin-bottom: 4px;
 `;
@@ -147,7 +117,6 @@ export const SkeletonDirectChatSecondColumnSecondLine = styled(Box)`
   width: 221px;
   height: 18px;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
-  animation: ${skeletonBackgroundAnimation} 2s infinite;
   margin-bottom: 4px;
 `;
 
@@ -164,14 +133,12 @@ export const SkeletonDirectChatRoundImage = styled(Box)`
   height: 40px;
   border-radius: 100%;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
-  animation: ${skeletonBackgroundAnimation} 2s infinite;
 `;
 
 export const SkeletonDirectChatThirdColumnSecondLine = styled(Box)`
   width: 180px;
   height: 48px;
   background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
-  animation: ${skeletonBackgroundAnimation} 2s infinite;
   padding: 17px 36px;
 `;
 
@@ -179,5 +146,4 @@ export const SkeletonDirectChatThirdColumnSecondLineInside = styled(Box)`
   width: 108px;
   height: 14px;
   background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  animation: ${skeletonAnimation} 2s infinite;
 `;

src/components/MarketPlace/Header/Header.js

@@ -11,6 +11,7 @@ import {
   HeaderOptions,
   HeaderSelect,
   HeaderText,
+  HeaderWrapperContainer,
   IconStyled,
   PageTitleContainer,
   SelectOption,
@@ -61,97 +62,101 @@ const Header = (props) => {
 
   return (
     <>
-      <SkeletonHeader skeleton={props.skeleton} />
-      <HeaderContainer skeleton={props.skeleton}>
-        {/* Setting appropriate header title if page is market place or my offers */}
-        <Tooltip title={headerString}>
-          <>
-            {!props.myOffers ? (
-              <>
-                <CategoryHeaderIcon />
-                <HeaderLocation initial={showAltString}>
-                  {headerString}
-                </HeaderLocation>
-                {showAltString && (
-                  <HeaderAltLocation>{t("header.newOffers")}</HeaderAltLocation>
-                )}
-              </>
-            ) : (
-              <ButtonContainer onClick={goBack}>
-                <ArrowButton side={"left"}></ArrowButton>
-                <HeaderText>{t("profile.backToHome")}</HeaderText>
-              </ButtonContainer>
-            )}
-          </>
-        </Tooltip>
-        {/* ^^^^^^ */}
+      <SkeletonHeader skeleton={props.skeleton} myOffers={props.myOffers}/>
+      <HeaderWrapperContainer skeleton={props.skeleton}>
+        <HeaderContainer>
+          {/* Setting appropriate header title if page is market place or my offers */}
+          <Tooltip title={headerString}>
+            <>
+              {!props.myOffers ? (
+                <>
+                  <CategoryHeaderIcon />
+                  <HeaderLocation initial={showAltString}>
+                    {headerString}
+                  </HeaderLocation>
+                  {showAltString && (
+                    <HeaderAltLocation>
+                      {t("header.newOffers")}
+                    </HeaderAltLocation>
+                  )}
+                </>
+              ) : (
+                <ButtonContainer onClick={goBack}>
+                  <ArrowButton side={"left"}></ArrowButton>
+                  <HeaderText>{t("profile.backToHome")}</HeaderText>
+                </ButtonContainer>
+              )}
+            </>
+          </Tooltip>
+          {/* ^^^^^^ */}
 
-        <HeaderOptions>
-          <HeaderButtons>
-            {/* Setting display of offer cards to full width */}
-            <HeaderButton
-              iconColor={
-                props.isGrid
-                  ? selectedTheme.colors.iconStrokeColor
-                  : selectedTheme.colors.primaryPurple
-              }
-              onClick={() => props.setIsGrid(false)}
-            >
-              <GridLine />
-            </HeaderButton>
-            {/* ^^^^^^ */}
+          <HeaderOptions>
+            <HeaderButtons>
+              {/* Setting display of offer cards to full width */}
+              <HeaderButton
+                iconColor={
+                  props.isGrid
+                    ? selectedTheme.colors.iconStrokeColor
+                    : selectedTheme.colors.primaryPurple
+                }
+                onClick={() => props.setIsGrid(false)}
+              >
+                <GridLine />
+              </HeaderButton>
+              {/* ^^^^^^ */}
 
-            {/* Setting display of offer cards to half width (Grid) */}
-            <HeaderButton
-              iconColor={
-                props.isGrid
-                  ? selectedTheme.colors.primaryPurple
-                  : selectedTheme.colors.iconStrokeColor
+              {/* Setting display of offer cards to half width (Grid) */}
+              <HeaderButton
+                iconColor={
+                  props.isGrid
+                    ? selectedTheme.colors.primaryPurple
+                    : selectedTheme.colors.iconStrokeColor
+                }
+                onClick={() => props.setIsGrid(true)}
+              >
+                <GridSquare />
+              </HeaderButton>
+              {/* ^^^^^^ */}
+            </HeaderButtons>
+
+            {/* Select option to choose sorting */}
+            <HeaderSelect
+              value={
+                sorting.selectedSortOption?.value
+                  ? sorting.selectedSortOption
+                  : "default"
               }
-              onClick={() => props.setIsGrid(true)}
+              IconComponent={DownArrow}
+              onChange={handleChangeSelect}
+              myOffers={props.myOffers}
             >
-              <GridSquare />
-            </HeaderButton>
+              <SelectOption style={{ display: "none" }} value="default">
+                {t("reviews.sortBy")}
+              </SelectOption>
+              {Object.keys(sortEnum).map((property) => {
+                if (sortEnum[property].value === 0) return;
+                return (
+                  <SelectOption
+                    value={sortEnum[property]}
+                    key={sortEnum[property].value}
+                  >
+                    {sortEnum[property].mainText}
+                  </SelectOption>
+                );
+              })}
+            </HeaderSelect>
             {/* ^^^^^^ */}
-          </HeaderButtons>
-
-          {/* Select option to choose sorting */}
-          <HeaderSelect
-            value={
-              sorting.selectedSortOption?.value
-                ? sorting.selectedSortOption
-                : "default"
-            }
-            IconComponent={DownArrow}
-            onChange={handleChangeSelect}
-            myOffers={props.myOffers}
-          >
-            <SelectOption style={{ display: "none" }} value="default">
-              {t("reviews.sortBy")}
-            </SelectOption>
-            {Object.keys(sortEnum).map((property) => {
-              if (sortEnum[property].value === 0) return;
-              return (
-                <SelectOption
-                  value={sortEnum[property]}
-                  key={sortEnum[property].value}
-                >
-                  {sortEnum[property].mainText}
-                </SelectOption>
-              );
-            })}
-          </HeaderSelect>
-          {/* ^^^^^^ */}
-        </HeaderOptions>
-      </HeaderContainer>
-      {isMobile && (
-        <PageTitleContainer>
-          <SwapsIcon />
-          <SwapsTitle>
-            {props.myOffers ? t("header.myOffers") : t("offer.offers")}
-          </SwapsTitle>
-        </PageTitleContainer>
-      )}
+          </HeaderOptions>
+        </HeaderContainer>
+        {isMobile && (
+          <PageTitleContainer>
+            <SwapsIcon />
+            <SwapsTitle>
+              {props.myOffers ? t("header.myOffers") : t("offer.offers")}
+            </SwapsTitle>
+          </PageTitleContainer>
+        )}
+      </HeaderWrapperContainer>
     </>
   );
 };

src/components/MarketPlace/Header/Header.styled.js

@@ -7,9 +7,13 @@ import Select from "../../Select/Select";
 import { ReactComponent as Swaps } from "../../../assets/images/svg/swaps.svg";
 import { ReactComponent as CategoryHeader } from "../../../assets/images/svg/category-header.svg";
 
+export const HeaderWrapperContainer = styled(Box)`
+  display: ${(props) => (props.skeleton ? "none" : "block")};
+`;
+
 export const HeaderContainer = styled(Box)`
   margin-top: 20px;
-  display: ${(props) => (props.skeleton ? "none" : "flex")};
+  display: flex;
   justify-content: space-between;
   align-items: center;
 `;
@@ -66,7 +70,7 @@ export const HeaderSelect = styled(Select)`
     height: 30px;
     font-size: 14px;
     top: 60px;
-    left: ${props => props.myOffers ? "-7px" : "0"};
+    left: ${(props) => (props.myOffers ? "-7px" : "0")};
   }
 `;
 export const SelectItem = styled(MenuItem)`

src/components/MarketPlace/Header/SkeletonHeader/SkeletonHeader.js

@@ -1,24 +1,47 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { CircleGroup, SkeletonHeaderCircle, SkeletonHeaderContainer, SkeletonHeaderLine, SkeletonHeaderRightLine, SkeletonRowGroup } from './SkeletonHeader.styled'
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  CircleGroup,
+  SkeletonHeaderCircle,
+  SkeletonHeaderContainer,
+  SkeletonHeaderLine,
+  SkeletonHeaderRightLine,
+  SkeletonLowerPartContainer,
+  SkeletonLowerPartLineOne,
+  SkeletonLowerPartLineSecond,
+  SkeletonMyOffersHeaderContainer,
+  SkeletonMyOffersHeaderLine,
+  SkeletonRowGroup,
+  SkeletonUpperPartContainer,
+} from "./SkeletonHeader.styled";
 
 const SkeletonHeader = (props) => {
   return (
     <SkeletonHeaderContainer skeleton={props.skeleton}>
+      <SkeletonUpperPartContainer>
         <SkeletonHeaderLine />
         <SkeletonRowGroup>
-            <CircleGroup>
-                <SkeletonHeaderCircle />
-                <SkeletonHeaderCircle />
-            </CircleGroup>
-            <SkeletonHeaderRightLine />
+          <CircleGroup>
+            <SkeletonHeaderCircle />
+            <SkeletonHeaderCircle />
+          </CircleGroup>
+          <SkeletonHeaderRightLine />
         </SkeletonRowGroup>
+      </SkeletonUpperPartContainer>
+      <SkeletonLowerPartContainer>
+        <SkeletonLowerPartLineOne />
+        <SkeletonLowerPartLineSecond />
+      </SkeletonLowerPartContainer>
+      <SkeletonMyOffersHeaderContainer myOffers={props.myOffers}>
+        <SkeletonMyOffersHeaderLine />
+      </SkeletonMyOffersHeaderContainer>
     </SkeletonHeaderContainer>
-  )
-}
+  );
+};
 
 SkeletonHeader.propTypes = {
-    skeleton: PropTypes.bool,
-}
+  skeleton: PropTypes.bool,
+  myOffers: PropTypes.bool,
+};
 
-export default SkeletonHeader
+export default SkeletonHeader;

src/components/MarketPlace/Header/SkeletonHeader/SkeletonHeader.styled.js

@@ -1,33 +1,29 @@
 import { Box } from "@mui/material";
-import styled, { keyframes } from "styled-components";
+import styled from "styled-components";
 import selectedTheme from "../../../../themes";
-
-const SkeletonBackgroundAnimation = keyframes`
-  0% {
-    background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  }
-  50% {
-    background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
-  }
-  100% {
-    background-color: ${selectedTheme.colors.filterSkeletonBackground};
-  }
-`
-
-export const BackgroundTransition = styled(Box)`
-  animation: ${SkeletonBackgroundAnimation} 1.6s infinite;
-`;
+import {
+  BackgroundTransition,
+  ItemsTransition,
+} from "../../../Styles/globalStyleComponents";
 
 export const SkeletonHeaderContainer = styled(Box)`
   display: ${(props) => (props.skeleton ? "flex" : "none")};
-  flex-direction: row;
+  flex-direction: column;
   justify-content: space-between;
   margin-top: 36px;
 `;
+export const SkeletonUpperPartContainer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
 export const SkeletonHeaderLine = styled(BackgroundTransition)`
   background-color: ${selectedTheme.colors.filterSkeletonBackground};
   width: 234px;
   height: 18px;
+  @media (max-width: 600px) {
+    width: 209px;
+  }
 `;
 export const SkeletonRowGroup = styled(Box)`
   display: flex;
@@ -44,15 +40,57 @@ export const CircleGroup = styled(Box)`
   position: relative;
   top: -3px;
   margin-right: 46px;
+  @media (max-width: 600px) {
+    margin-right: 0;
+  }
 `;
 export const SkeletonHeaderCircle = styled(BackgroundTransition)`
   width: 40px;
   height: 40px;
   background-color: ${selectedTheme.colors.filterSkeletonBackground};
   border-radius: 100%;
+  @media (max-width: 600px) {
+    &:nth-child(1) {
+      display: none;
+    }
+  }
 `;
 export const SkeletonHeaderRightLine = styled(BackgroundTransition)`
   width: 209px;
   height: 34px;
   background-color: ${selectedTheme.colors.filterSkeletonBackground};
+  @media (max-width: 600px) {
+    display: none;
+  }
+`;
+export const SkeletonLowerPartContainer = styled(Box)`
+  display: none;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 32px;
+  @media (max-width: 600px) {
+    display: flex;
+  }
+`;
+export const SkeletonLowerPartLineOne = styled(BackgroundTransition)`
+  width: 72px;
+  height: 18px;
+`;
+export const SkeletonLowerPartLineSecond = styled(BackgroundTransition)`
+  width: 137px;
+  height: 29px;
+`;
+export const SkeletonMyOffersHeaderContainer = styled(BackgroundTransition)`
+  display: none;
+  padding: 16px 12px;
+  width: 100%;
+  height: 46px;
+  margin-top: 10px;
+  @media (max-width: 600px) {
+    display: ${(props) => (props.myOffers ? "block" : "none")};
+  }
+`;
+export const SkeletonMyOffersHeaderLine = styled(ItemsTransition)`
+  width: 108px;
+  height: 14px;
 `;

src/components/Styles/globalStyleComponents.js

@@ -0,0 +1,36 @@
+import { Box } from "@mui/material";
+import styled, { keyframes } from "styled-components";
+import selectedTheme from "../../themes";
+
+const SkeletonBackgroundAnimation = keyframes`
+  0% {
+    background-color: ${selectedTheme.colors.filterSkeletonBackground};
+  }
+  50% {
+    background-color: ${selectedTheme.colors.filterSkeletonBackgroundSecond};
+  }
+  100% {
+    background-color: ${selectedTheme.colors.filterSkeletonBackground};
+  }
+`;
+export const SkeletonItemAnimation = keyframes`
+  0% {
+    background-color: ${selectedTheme.colors.filterSkeletonItems};
+  }
+  50% {
+    background-color: ${selectedTheme.colors.filterSkeletonItemsSecond};
+  }
+  100% {
+    background-color: ${selectedTheme.colors.filterSkeletonItems};
+  }
+`;
+
+export const BackgroundTransition = styled(Box)`
+  border-radius: 4px;
+  animation: ${SkeletonBackgroundAnimation} 1.6s infinite;
+`;
+
+export const ItemsTransition = styled(Box)`
+  border-radius: 4px;
+  animation: ${SkeletonItemAnimation} 1.6s infinite;
+`;

src/components/TextFields/AutoSuggestTextField/AutoSuggestTextField.styled.js

@@ -60,7 +60,7 @@ export const AutoSuggestTextFieldContainer = styled(Box)`
   @media (max-width: 600px) {
     & .react-autosuggest__container {
       & input {
-        font-size: 13px;
+        /* font-size: 13px; */
       }
     }
   }

src/hooks/useOffers/useOffers.js

@@ -53,6 +53,7 @@ const useOffers = () => {
   useEffect(() => {
     if (!queryStringHook.historyStateCleared) {
       clearFiltersAndApply();
+      dispatch(setHeaderString(makeHeaderStringHelper({})));
       history.location.state = {};
     }
   }, [history.location]);
@@ -147,7 +148,7 @@ const useOffers = () => {
     filters.clear();
     paging.changePage(1);
     setFiltersCleared(true);
-  }
+  };
 
   const clear = () => {
     filters.clear();

src/i18n/resources/rs.js

@@ -100,6 +100,7 @@ export default {
     welcome: "Dobro došli na trampu, želimo vam uspešno trampovanje!",
     imageError: "Slika je obavezna!",
     serverError: "Greška sa serverom!",
+    labelLocationValid: "Unesite ispravnu lokaciju!",
     phoneNumberNoOfCharacters:
       "Broj telefona mora imati izmedju 6 i 15 karaktera!",
     locationError: "Odaberite ispravnu lokaciju!",

src/initialValues/registerInitialValues/thirdPartInitialValues.js

@@ -1,5 +1,5 @@
-export default {
-  phoneNumber: "",
-  location: "",
-  website: "",
-};
+export default (informations) => ({
+  phoneNumber: informations?.phoneNumber || "",
+  location: informations?.location || "",
+  website: informations?.website || "",
+});

src/pages/RegisterPages/Register/ThirdPart/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,29 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { ErrorMessage as ErrorMessageContainer } from "../../FirstPart/FirstPartOfRegistration.styled";
+
+const ErrorMessage = (props) => {
+  const formik = props.formik;
+  return (
+    <>
+      {formik.errors?.location ? (
+        <ErrorMessageContainer>{formik.errors.location}</ErrorMessageContainer>
+      ) : formik.errors?.phoneNumber ? (
+        <ErrorMessageContainer>
+          {formik.errors.phoneNumber}
+        </ErrorMessageContainer>
+      ) : formik.errors?.website ? (
+        <ErrorMessageContainer>{formik.errors.website}</ErrorMessageContainer>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+ErrorMessage.propTypes = {
+  children: PropTypes.node,
+  formik: PropTypes.any,
+};
+
+export default ErrorMessage;

src/pages/RegisterPages/Register/ThirdPart/ThirdPartOfRegistration.js

@@ -5,31 +5,26 @@ import {
   RegisterDescription,
 } from "./ThirdPartOfRegistration.styled";
 import { useFormik } from "formik";
-import * as Yup from "yup";
 import { useTranslation } from "react-i18next";
 import { TextField } from "../../../../components/TextFields/TextField/TextField";
 import { PrimaryButton } from "../../../../components/Buttons/PrimaryButton/PrimaryButton";
 import selectedTheme from "../../../../themes";
 import AutoSuggestTextField from "../../../../components/TextFields/AutoSuggestTextField/AutoSuggestTextField";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { selectLocations } from "../../../../store/selectors/locationsSelectors";
-import { ErrorMessage } from "../FirstPart/FirstPartOfRegistration.styled";
+import { fetchLocations } from "../../../../store/actions/locations/locationsActions";
+import thirdPartInitialValues from "../../../../initialValues/registerInitialValues/thirdPartInitialValues";
+import ErrorMessage from "./ErrorMessage/ErrorMessage";
+import thirdPartValidation from "../../../../validations/registerValidations/thirdPartValidation";
 
 const ThirdPartOfRegistration = (props) => {
   const { t } = useTranslation();
   const locations = useSelector(selectLocations);
+  const dispatch = useDispatch();
 
   useEffect(() => {
-    if (props.informations?.phoneNumber) {
-      formik.setFieldValue("phoneNumber", props.informations?.phoneNumber);
-    }
-    if (props.informations?.location) {
-      formik.setFieldValue("location", props.informations?.location);
-    }
-    if (props.informations?.website) {
-      formik.setFieldValue("website", props.informations?.website);
-    }
-  }, [props.informations]);
+    dispatch(fetchLocations());
+  }, []);
 
   const handleSubmit = () => {
     if (
@@ -45,19 +40,8 @@ const ThirdPartOfRegistration = (props) => {
   };
 
   const formik = useFormik({
-    initialValues: {
-      phoneNumber: "",
-      location: "",
-      website: "",
-    },
-    validationSchema: Yup.object().shape({
-      phoneNumber: Yup.number(),
-      location: Yup.string().oneOf(
-        locations.map((item) => item.city),
-        "Greska!!!"
-      ),
-      website: Yup.string(),
-    }),
+    initialValues: thirdPartInitialValues(props.informations),
+    validationSchema: thirdPartValidation(locations),
     onSubmit: handleSubmit,
     validateOnBlur: true,
     enableReinitialize: true,
@@ -80,20 +64,17 @@ const ThirdPartOfRegistration = (props) => {
         helperText={formik.touched.phoneNumber && formik.errors.phoneNumber}
         autoFocus
         fullWidth
+        onInput={(e) => {
+          e.target.value =
+            e.target.value[0] === "0" && e.target.value.length > 1
+              ? "0" +
+                String(
+                  Math.max(0, parseInt(e.target.value)).toString().slice(0, 14)
+                )
+              : Math.max(0, parseInt(e.target.value)).toString().slice(0, 14);
+        }}
       />
 
-      {/* <TextField
-        name="location"
-        placeholder={t("common.labelLocation")}
-        margin="normal"
-        type="text"
-        value={formik.values.location}
-        onChange={formik.handleChange}
-        error={formik.touched.location && Boolean(formik.errors.location)}
-        helperText={formik.touched.location && formik.errors.location}
-        fullWidth
-      /> */}
-
       <AutoSuggestTextField
         placeholder={t("common.labelLocation")}
         data={locations.map((item) => ({ name: item.city }))}
@@ -115,7 +96,7 @@ const ThirdPartOfRegistration = (props) => {
         fullWidth
       />
 
-      <ErrorMessage>{formik.errors.phoneNumber}</ErrorMessage>
+      <ErrorMessage formik={formik} />
 
       <PrimaryButton
         type="submit"

src/util/helpers/queryHelpers.js

@@ -187,7 +187,7 @@ export const getQueryObjectHelper = (queryString) => {
 export const makeHeaderStringHelper = (filters) => {
   let headerStringLocal = ALL_CATEGORIES;
   // Adding category to header string
-  if (filters.category.selectedCategory?.name) {
+  if (filters?.category?.selectedCategory?.name) {
     headerStringLocal = filters.category.selectedCategory?.name;
     // Adding subcategories to header string
     if (filters.subcategory.selectedSubcategory?.name) {
@@ -196,8 +196,8 @@ export const makeHeaderStringHelper = (filters) => {
   }
   // Adding locations to header string
   if (
-    filters.locations.selectedLocations &&
-    filters.locations.selectedLocations?.length > 0
+    filters?.locations?.selectedLocations &&
+    filters?.locations?.selectedLocations?.length > 0
   ) {
     headerStringLocal += SPREAD;
 

src/validations/registerValidations/thirdPartValidation.js

@@ -1,10 +1,17 @@
+import i18next from "i18next";
 import * as Yup from "yup";
 import i18n from "../../i18n";
 
-export default Yup.object().shape({
-  phoneNumber: Yup.number().required(i18n.t("login.usernameRequired")),
-  location: Yup.string().required(i18n.t("login.passwordRequired")),
-  website: Yup.string().matches(
-    /^((ftp|http|https):\/\/)?(www.)?(?!.*(ftp|http|https|www.))[a-zA-Z0-9_-]+(\.[a-zA-Z]+)+((\/)[\w#]+)*(\/\w+\?[a-zA-Z0-9_]+=\w+(&[a-zA-Z0-9_]+=\w+)*)?$/gm
-  ),
-});
+export default (locations) =>
+  Yup.object().shape({
+    phoneNumber: Yup.string()
+      .min(6, i18n.t("register.phoneNumberNoOfCharacters"))
+      .max(14, i18n.t("register.phoneNumberNoOfCharacters")),
+    location: Yup.string().oneOf(
+      locations.map((l) => l.city),
+      i18next.t("register.labelLocationValid")
+    ),
+    website: Yup.string().matches(
+      /^((ftp|http|https):\/\/)?(www.)?(?!.*(ftp|http|https|www.))[a-zA-Z0-9_-]+(\.[a-zA-Z]+)+((\/)[\w#]+)*(\/\w+\?[a-zA-Z0-9_]+=\w+(&[a-zA-Z0-9_]+=\w+)*)?$/gm
+    ),
+  });