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

src/components/MarketPlace/Offers/OffersNotFound.js

@@ -3,6 +3,7 @@ import { ReactComponent as LogoBroken } from "../../../assets/images/svg/logo-br
 import {
   Button,
   OffersNotFoundContainer,
+  OffersNotFoundLogo,
   OffersNotFoundDescription,
   OffersNotFoundHeading,
 } from "./OffersNotFound.styled";
@@ -30,7 +31,9 @@ const OffersNotFound = () => {
 
   return (
     <OffersNotFoundContainer>
-      <LogoBroken />
+      <OffersNotFoundLogo>
+        <LogoBroken />
+      </OffersNotFoundLogo>
       <OffersNotFoundHeading>
         {t("offersNotFound.notFound")}
       </OffersNotFoundHeading>
@@ -39,8 +42,6 @@ const OffersNotFound = () => {
       </OffersNotFoundDescription>
       <Button
         variant="contained"
-        width="190px"
-        height="49px"
         buttoncolor={selectedTheme.colors.primaryYellow}
         textcolor="black"
         onClick={showAllOffersHandler}

src/components/MarketPlace/Offers/OffersNotFound.styled.js

@@ -13,11 +13,24 @@ export const OffersNotFoundContainer = styled(Box)`
   text-align: center;
 `;
 
+export const OffersNotFoundLogo = styled(Box)`
+  @media (max-width: 600px) {
+    svg {
+      width: 100px;
+      height: 100px;
+    }
+  }
+`;
+
 export const OffersNotFoundHeading = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   font-size: 72px;
   font-weight: 700;
   color: ${selectedTheme.colors.primaryPurple};
+
+  @media (max-width: 600px) {
+    font-size: 36px;
+  }
 `;
 
 export const OffersNotFoundDescription = styled(Typography)`
@@ -26,10 +39,21 @@ export const OffersNotFoundDescription = styled(Typography)`
   color: #818181;
   margin: 9px 0 46px 0;
   text-align: center;
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+  }
 `;
 
 export const Button = styled(PrimaryButton)`
+  width: 190px;
+  height: 49px;
   font-weight: 600;
   letter-spacing: 1.5px;
   min-width: max-content;
+
+  @media (max-width: 600px) {
+    width: 180px;
+    height: 44px;
+  }
 `;