Partly finished

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

@@ -17,6 +17,7 @@ import {
   SkeletonOfferCardContainer,
   SkeletonRowGroup,
   SkeletonTitle,
+  SkeletonTitleAboveImage,
   SpreadLine,
 } from "./SkeletonOfferCard.styled";
 
@@ -50,6 +51,7 @@ const SkeletonOfferCard = (props) => {
         <SkeletonExchangeLine />
       </SkeletonExchangeButton>
       <SkeletonMessageButton />
+      <SkeletonTitleAboveImage />
     </SkeletonOfferCardContainer>
   );
 };

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

@@ -13,7 +13,7 @@ export const SkeletonItemAnimation = keyframes`
   100% {
     background-color: ${selectedTheme.colors.filterSkeletonItems};
   }
-`
+`;
 
 export const ItemsTransition = styled(Box)`
   animation: ${SkeletonItemAnimation} 1.6s infinite;
@@ -54,6 +54,10 @@ export const LeftPart = styled(Box)`
   flex: 1;
   flex-direction: row;
   margin-right: 40px;
+  @media (max-width: 600px) {
+    position: absolute;
+    bottom: 18px;
+  }
 `;
 export const SpreadLine = styled(Box)`
   height: 108px;
@@ -61,6 +65,9 @@ export const SpreadLine = styled(Box)`
   margin-bottom: auto;
   opacity: 0.12;
   border: 1px solid black;
+  @media (max-width: 600px) {
+    display: none;
+  }
 `;
 export const RightPart = styled(Box)`
   display: flex;
@@ -69,10 +76,17 @@ export const RightPart = styled(Box)`
   gap: 4px;
   margin-left: 36px;
   padding-top: 20px;
+  @media (max-width: 600px) {
+    display: none;
+  }
 `;
 export const SkeletonImage = styled(ItemsTransition)`
   width: 144px;
   height: 144px;
+  @media (max-width: 600px) {
+    width: 108px;
+    height: 108px;
+  }
 `;
 export const SkeletonColumnContainer = styled(Box)`
   display: flex;
@@ -80,10 +94,16 @@ export const SkeletonColumnContainer = styled(Box)`
   justify-content: space-between;
   flex: 1;
   flex-direction: column;
+  @media (max-width: 600px) {
+    max-height: 107px;
+  }
 `;
 export const SkeletonTitle = styled(ItemsTransition)`
   width: 90px;
   height: 27px;
+  @media (max-width: 600px) {
+    display: none;
+  }
 `;
 export const SkeletonGroup = styled(Box)`
   display: flex;
@@ -102,6 +122,20 @@ export const SkeletonRowGroup = styled(Box)`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  @media (max-width: 600px) {
+    flex-direction: column;
+    gap: 4px;
+    & div {
+      display: none;
+    }
+    & div:nth-child(1) {
+      display: block;
+      width: 85px;
+    }
+    & div:nth-child(2) {
+      display: block;
+    }
+  }
 `;
 export const SkeletonDetail = styled(ItemsTransition)`
   width: 72px;
@@ -123,8 +157,13 @@ export const SkeletonMessageButton = styled(ItemsTransition)`
   height: 40px;
   border-radius: 100%;
   background-color: ${selectedTheme.colors.filterSkeletonItems};
+  position: absolute;
   top: 18px;
   right: 18px;
+  @media (max-width: 600px) {
+    width: 32px;
+    height: 32px;
+  }
 `;
 export const SkeletonExchangeButton = styled(ItemsTransition)`
   width: 180px;
@@ -134,6 +173,9 @@ export const SkeletonExchangeButton = styled(ItemsTransition)`
   right: 18px;
   position: absolute;
   padding-top: 17px;
+  @media (max-width: 600px) {
+    display: none;
+  }
 `;
 export const SkeletonExchangeLine = styled(BackgroundTransition)`
   width: 108px;
@@ -141,3 +183,14 @@ export const SkeletonExchangeLine = styled(BackgroundTransition)`
   background-color: ${selectedTheme.colors.filterSkeletonBackground};
   margin: auto;
 `;
+export const SkeletonTitleAboveImage = styled(ItemsTransition)`
+  display: none;
+  @media (max-width: 600px) {
+    display: block;
+    width: 90px;
+    height: 20px;
+    position: absolute;
+    top: 18px;
+    left: 18px;
+  }
+`;

src/components/Header/SearchInput/SearchInput.styled.js

@@ -51,9 +51,6 @@ export const SearchInputContainer = styled(TextField)`
   }
 `;
 export const EndIcon = styled(Icon)`
-    @media (max-width: 600px) {
-        display: none;
-    }
 `;
 export const SearchIcon = styled(Search)`
   position: relative;