Finished feature 1702

src/components/About/AboutComponent.js

@@ -5,12 +5,12 @@ import AboutSection from "./AboutSection/AboutSection";
 import { useTranslation } from "react-i18next";
 import SectionImage1 from "../../assets/images/about/about-1.png";
 import SectionImage2 from "../../assets/images/about/about-2.png";
-import CheckOffersButton from "./CheckOffersButton/CheckOffersButton";
+// import CheckOffersButton from "./CheckOffersButton/CheckOffersButton";
 import { AboutComponentContainer } from "./AboutComponent.styled";
-import useIsMobile from "../../hooks/useIsMobile";
+// import useIsMobile from "../../hooks/useIsMobile";
 
 const AboutComponent = forwardRef((props, ref) => {
-  const { isMobile } = useIsMobile();
+  // const { isMobile } = useIsMobile();
   const { t } = useTranslation();
   return (
     <AboutComponentContainer ref={ref}>
@@ -26,7 +26,7 @@ const AboutComponent = forwardRef((props, ref) => {
         image={SectionImage2}
         reverse
       />
-      {!isMobile && <CheckOffersButton />}
+      {/* <CheckOffersButton /> */}
     </AboutComponentContainer>
   );
 });

src/components/About/AboutHeader/AboutHeader.styled.js

@@ -4,6 +4,10 @@ import selectedTheme from "../../../themes";
 export const AboutHeaderContainer = styled(Box)`
   margin: 72px;
 
+  @media (max-width: 1430px) {
+    margin: 45px;
+  }
+
   @media (max-width: 1200px) {
     margin: 36px;
   }

src/components/About/AboutSection/AboutSection.styled.js

@@ -14,9 +14,20 @@ export const AboutSectionContainer = styled(Box)`
   flex-direction: ${(props) => (props.reverse ? "row-reverse" : "row")};
   gap: 144px;
   margin-bottom: 72px;
+  ${(props) => props.reverse && `text-align: right;`}
+
+  @media (max-width: 1430px) {
+    ${(props) =>
+      props.reverse
+        ? `
+    margin-right: 45px
+  `
+        : `margin-left: 45px`};
+  }
 
   @media (max-width: 1069px) {
     flex-direction: column;
+    margin-bottom: 41px;
   }
 
   @media (max-width: 1200px) {
@@ -29,7 +40,7 @@ export const AboutSectionContainer = styled(Box)`
   }
 
   @media (max-width: 1319px) {
-    gap: 54px;
+    gap: 40px;
   }
 
   @media (max-width: 600px) {
@@ -66,12 +77,12 @@ export const AboutSectionText = styled(Typography)`
   line-height: 22px;
   color: ${selectedTheme.colors.primaryGrayText};
 
-  @media (max-width: 1069px) {
-    ${(props) => props.reverse && `margin-left: 36px;`}
+  @media (min-width: 1069px) and (max-width: 1230px) {
+    ${(props) => props.reverse && `padding-bottom: 50px;`}
   }
 
-  @media (max-width: 1160px) {
-    ${(props) => props.reverse && `padding-bottom: 20px;`}
+  @media (max-width: 1069px) {
+    ${(props) => props.reverse && `margin-left: 36px;`}
   }
 
   @media (max-width: 600px) {
@@ -87,8 +98,8 @@ export const AboutSectionImage = styled.img`
   object-fit: cover;
 
   @media (max-width: 1069px) {
-    width: 100%;
-    ${(props) => props.reverse && `padding-bottom: 36px`}
+    width: 80%;
+    ${(props) => !props.reverse && `align-self: end;`}
   }
 
   @media (max-width: 600px) {

src/components/About/CheckOffersButton/CheckOffersButton.styled.js

@@ -23,12 +23,23 @@ export const CheckOffersButtonContainer = styled(PrimaryButton)`
     background-color: ${selectedTheme.colors.primaryPurple} !important;
   }
 
-  @media (max-width: 1160px) {
-    bottom: -16px;
+  @media (max-width: 1430px) {
+    right: 22px;
+  }
+
+  @media (max-width: 1230px) {
+    bottom: 0;
   }
 
   @media (max-width: 1200px) {
-    right: 16px;
+    bottom: 0;
+    right: 18px;
+  }
+
+  @media (max-width: 1069px) {
+    position: relative;
+    right: 0;
+    align-self: flex-end;
   }
 
   @media (max-width: 600px) {

src/components/Footer/AboutFooter.styled.js

@@ -26,6 +26,10 @@ export const AboutFooterText = styled(Typography)`
   position: relative;
   top: 61px;
 
+  @media (max-width: 1194px) {
+    text-align: left;
+  }
+
   @media (max-width: 600px) {
     font-size: 14px;
     top: 30px;
@@ -57,11 +61,11 @@ export const LinkText = styled(Typography)`
   position: relative;
   top: 8px;
 
-  @media (max-width: 600px) {
+  @media (max-width: 700px) {
     display: none;
   }
 `;
 
 export const Arrow = styled(ArrowButton)`
-  transform: rotate(-90deg);
+  transform: rotate(-45deg);
 `;

src/components/Header/AboutHeader/AboutHeader.styled.js

@@ -11,6 +11,10 @@ export const AboutHeaderContainer = styled(Box)`
   flex-direction: row;
   justify-content: center;
   gap: 36px;
+
+  @media (min-width: 900px) and (max-width: 1200px) {
+    margin-right: -250px;
+  }
 `;
 export const LinkRoute = styled(Link)`
   text-decoration: none;

src/components/Header/Header.js

@@ -4,6 +4,7 @@ import {
   HeaderContainer,
   LogoContainer,
   MarketplaceLinkRoute,
+  MarketplaceLinkRouteContainer,
   ToolsButtonsContainer,
   ToolsContainer,
 } from "./Header.styled";
@@ -40,6 +41,8 @@ import LoginButton from "./LoginButton/LoginButton";
 import RegisterButton from "./RegisterButton/RegisterButton";
 import useIsMobile from "../../hooks/useIsMobile";
 import { toggleCreateOfferModal } from "../../store/actions/modal/modalActions";
+import { ReactComponent as Marketplace } from "../../assets/images/svg/package.svg";
+import { useTranslation } from "react-i18next";
 
 const Header = () => {
   const theme = useTheme();
@@ -54,6 +57,7 @@ const Header = () => {
   const [shouldShow, setShouldShow] = useState(true);
   const routeMatch = useRouteMatch();
   const { isMobile } = useIsMobile();
+  const { t } = useTranslation();
 
   // Dont show header on auth routes(login, register, etc.) and admin routes
   useEffect(() => {
@@ -174,9 +178,12 @@ const Header = () => {
                 ) : (
                   <React.Fragment>
                     {routeMatches(ABOUT_PAGE) ? (
-                      <>
-                        <MarketplaceLinkRoute>Marketplace</MarketplaceLinkRoute>
-                      </>
+                      <MarketplaceLinkRouteContainer>
+                        <MarketplaceLinkRoute onClick={() => handleLogoClick()}>
+                          {t("admin.navigation.marketplace")}
+                        </MarketplaceLinkRoute>
+                        <Marketplace />
+                      </MarketplaceLinkRouteContainer>
                     ) : (
                       <>
                         <LoginButton />

src/components/Header/Header.styled.js

@@ -98,12 +98,23 @@ export const AuthButtonsDrawerContainer = styled(Box)`
 `;
 export const HeaderContainer = styled(Box)``;
 
+export const MarketplaceLinkRouteContainer = styled(Box)`
+  display: flex;
+
+  @media (max-width: 1200px) {
+    position: relative;
+    right: -200px;
+  }
+`;
+
 export const MarketplaceLinkRoute = styled(Link)`
   text-decoration: none;
   font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
   line-height: 22px;
+  margin-right: 10px;
   letter-spacing: 0.02em;
+  margin-left: 70px;
   border-bottom: 1px dashed ${selectedTheme.colors.primaryPurple};
   &:hover {
     border-bottom: 1px solid ${selectedTheme.colors.iconYellowColor};

src/components/Prices/Plan/Plan.styled.js

@@ -18,9 +18,21 @@ export const PlanContainer = styled(Box)`
   ${(props) =>
     props.highlighted && `box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.12);`}
 
+  @media (min-width: 1194px) and (max-width: 1430px) {
+    width: 346px;
+    height: 100%;
+    min-width: 346px;
+  }
+
   @media (max-width: 600px) {
-    min-width: 303px;
-    width: 100%;
+    width: 267px;
+    height: fit-content;
+    padding: 36px 18px;
+    margin-top: 0;
+  }
+
+  @media (max-width: 428px) {
+    min-width: 100%;
     height: fit-content;
     padding: 36px 18px;
     margin-top: 0;
@@ -39,6 +51,10 @@ export const PlanTitle = styled(Typography)`
     props.highlighted
       ? selectedTheme.colors.primaryYellow
       : selectedTheme.colors.primaryPurple};
+
+  @media (min-width: 1194px) and (max-width: 1430px) {
+    margin-top: 42px;
+  }
 `;
 export const PlanTitleDescription = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -74,6 +90,10 @@ export const PlanPrice = styled(Typography)`
   color: ${(props) =>
     props.highlighted ? "white" : selectedTheme.colors.primaryPurple};
 
+  @media (max-width: 1430px) {
+    font-size: 22px;
+  }
+
   @media (max-width: 600px) {
     font-size: 18px;
   }
@@ -111,8 +131,19 @@ export const PlanDetailTitle = styled(Typography)`
       ? selectedTheme.colors.primaryYellow
       : selectedTheme.colors.primaryPurple};
 
+  @media (max-width: 1430px) {
+    max-width: 34px;
+    max-height: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
   @media (max-width: 600px) {
     font-size: 14px;
+    max-width: 30px;
+    max-height: 20px;
+    white-space: nowrap;
+    overflow: hidden;
   }
 `;
 export const PlanDetailDescription = styled(Typography)`
@@ -161,6 +192,10 @@ export const PlanIcon = styled(Box)`
     }
   }
 
+  @media (min-width: 1194px) and (max-width: 1430px) {
+    left: calc(50% - 12px);
+  }
+
   @media (max-width: 600px) {
     svg {
       width: 18px;

src/components/Prices/PricesComponent.styled.js

@@ -9,6 +9,10 @@ export const PricesComponentContainer = styled(Box)`
   padding: 72px;
   background: white;
 
+  @media (max-width: 1430px) {
+    padding: 51px;
+  }
+
   @media (max-width: 600px) {
     padding: 36px;
   }
@@ -22,6 +26,15 @@ export const PlansContainer = styled(Box)`
   margin-top: 46px;
   margin-bottom: 36px;
 
+  @media (max-width: 1430px) {
+    gap: 27px;
+  }
+
+  @media (max-width: 1193px) {
+    flex-direction: column;
+    align-items: center;
+  }
+
   @media (max-width: 600px) {
     flex-direction: column;
     gap: 27px;

src/components/PrivacyPolicy/PrivacyPolicyComponent.styled.js

@@ -4,6 +4,10 @@ import styled from "styled-components";
 export const PrivacyPolicyContainer = styled(Box)`
   margin: 72px;
 
+  @media (max-width: 834px) {
+    margin: 45px;
+  }
+
   @media (max-width: 600px) {
     margin: 36px 36px 69px 36px;
   }