Merge branch 'feature/1702' of https://git.dilig.net/selenaaasi/trampa-frontend

src/components/About/AboutComponent.js

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

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

@@ -3,6 +3,14 @@ import selectedTheme from "../../../themes";
 
 export const AboutHeaderContainer = styled(Box)`
   margin: 72px;
+
+  @media (max-width: 1200px) {
+    margin: 36px;
+  }
+
+  @media (max-width: 600px) {
+    margin: 52px 36px 36px 36px;
+  }
 `;
 export const AboutHeaderTitle = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -11,6 +19,11 @@ export const AboutHeaderTitle = styled(Typography)`
   font-size: 72px;
   line-height: 98px;
   color: ${selectedTheme.colors.primaryPurple};
+
+  @media (max-width: 600px) {
+    font-size: 36px;
+    line-height: 49px;
+  }
 `;
 export const AboutHeaderParagraph = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -19,9 +32,17 @@ export const AboutHeaderParagraph = styled(Typography)`
   font-size: 16px;
   line-height: 22px;
   color: ${selectedTheme.colors.primaryGrayText};
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+  }
 `;
 export const AboutHeaderLine = styled(Box)`
-    border-top: 1px solid ${selectedTheme.colors.iconYellowColor};
-    width: 90px;
-    margin-bottom: 26px;
+  border-top: 1px solid ${selectedTheme.colors.iconYellowColor};
+  width: 90px;
+  margin-bottom: 26px;
+
+  @media (max-width: 600px) {
+    width: 54px;
+  }
 `;

src/components/About/AboutSection/AboutSection.js

@@ -6,16 +6,23 @@ import {
   AboutSectionText,
   AboutSectionTextContainer,
   AboutSectionTitle,
+  CheckButton,
 } from "./AboutSection.styled";
 
 const AboutSection = (props) => {
+  console.log(props);
   return (
     <AboutSectionContainer reverse={props.reverse}>
       <AboutSectionTextContainer>
-        <AboutSectionTitle>{props.title}</AboutSectionTitle>
-        <AboutSectionText>{props.text}</AboutSectionText>
+        <AboutSectionTitle reverse={props.reverse}>
+          {props.title}
+        </AboutSectionTitle>
+        <AboutSectionText reverse={props.reverse}>
+          {props.text}
+        </AboutSectionText>
       </AboutSectionTextContainer>
-      <AboutSectionImage src={props.image} />
+      {props.reverse && <CheckButton />}
+      <AboutSectionImage src={props.image} reverse={props.reverse} />
     </AboutSectionContainer>
   );
 };

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

@@ -1,6 +1,7 @@
 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../themes";
+import CheckOffersButton from "../CheckOffersButton/CheckOffersButton";
 
 export const AboutSectionContainer = styled(Box)`
   ${(props) =>
@@ -13,6 +14,32 @@ export const AboutSectionContainer = styled(Box)`
   flex-direction: ${(props) => (props.reverse ? "row-reverse" : "row")};
   gap: 144px;
   margin-bottom: 72px;
+
+  @media (max-width: 1069px) {
+    flex-direction: column;
+  }
+
+  @media (max-width: 1200px) {
+    ${(props) =>
+      props.reverse
+        ? `
+    margin-right: 36px
+  `
+        : `margin-left: 36px`};
+  }
+
+  @media (max-width: 1319px) {
+    gap: 54px;
+  }
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom: 36px;
+    gap: 27px;
+    ${(props) => props.reverse && `text-align: right;`}
+  }
 `;
 export const AboutSectionTitle = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -22,6 +49,14 @@ export const AboutSectionTitle = styled(Typography)`
   line-height: 33px;
   color: ${selectedTheme.colors.primaryPurple};
   margin-bottom: 18px;
+
+  @media (max-width: 1069px) {
+    ${(props) => props.reverse && `margin-left: 36px;`}
+  }
+
+  @media (max-width: 600px) {
+    font-size: 18px;
+  }
 `;
 export const AboutSectionText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -30,6 +65,19 @@ export const AboutSectionText = styled(Typography)`
   font-size: 16px;
   line-height: 22px;
   color: ${selectedTheme.colors.primaryGrayText};
+
+  @media (max-width: 1069px) {
+    ${(props) => props.reverse && `margin-left: 36px;`}
+  }
+
+  @media (max-width: 1160px) {
+    ${(props) => props.reverse && `padding-bottom: 20px;`}
+  }
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+    ${(props) => props.reverse && `padding-bottom: 0;`}
+  }
 `;
 export const AboutSectionImage = styled.img`
   display: flex;
@@ -37,9 +85,25 @@ export const AboutSectionImage = styled.img`
   width: 648px;
   height: 345px;
   object-fit: cover;
+
+  @media (max-width: 1069px) {
+    width: 100%;
+    ${(props) => props.reverse && `padding-bottom: 36px`}
+  }
+
+  @media (max-width: 600px) {
+    width: 100%;
+    ${(props) =>
+      !props.reverse ? `padding-left: 36px` : `padding-right: 36px`}
+  }
 `;
 export const AboutSectionTextContainer = styled(Box)`
   display: flex;
   flex: 1;
   flex-direction: column;
+
+  @media (max-width: 600px) {
+    margin: 0 36px;
+  }
 `;
+export const CheckButton = styled(CheckOffersButton)``;

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

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

src/components/Footer/AboutFooter.styled.js

@@ -9,6 +9,11 @@ export const AboutFooterContainer = styled(Box)`
   display: flex;
   flex-direction: column;
   padding: 0 72px;
+
+  @media (max-width: 600px) {
+    height: 91px;
+    padding: 0 36px;
+  }
 `;
 export const AboutFooterText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -20,6 +25,11 @@ export const AboutFooterText = styled(Typography)`
   text-align: center;
   position: relative;
   top: 61px;
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+    top: 30px;
+  }
 `;
 export const ButtonContainer = styled(Link)`
   width: fit-content;
@@ -34,6 +44,10 @@ export const ButtonContainer = styled(Link)`
   text-align: right;
   position: relative;
   top: 29px;
+
+  @media (max-width: 600px) {
+    top: -38px;
+  }
 `;
 export const LinkText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -42,6 +56,10 @@ export const LinkText = styled(Typography)`
   color: ${selectedTheme.colors.primaryGrayText};
   position: relative;
   top: 8px;
+
+  @media (max-width: 600px) {
+    display: none;
+  }
 `;
 
 export const Arrow = styled(ArrowButton)`

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

@@ -15,7 +15,7 @@ export const AboutHeaderContainer = styled(Box)`
 export const LinkRoute = styled(Link)`
   text-decoration: none;
   font-family: ${selectedTheme.fonts.textFont};
-  font-weight: ${props => props.selected ? "600" : "400"};
+  font-weight: ${(props) => (props.selected ? "600" : "400")};
   font-size: 16px;
   line-height: 22px;
   letter-spacing: 0.02em;
@@ -23,4 +23,8 @@ export const LinkRoute = styled(Link)`
   &:hover {
     border-bottom: 1px solid ${selectedTheme.colors.iconYellowColor};
   }
+
+  @media (max-width: 600px) {
+    display: none;
+  }
 `;

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

@@ -17,6 +17,14 @@ export const PlanContainer = styled(Box)`
   ${(props) => !props.highlighted && `margin-top: 36px;`}
   ${(props) =>
     props.highlighted && `box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.12);`}
+
+  @media (max-width: 600px) {
+    min-width: 303px;
+    width: 100%;
+    height: fit-content;
+    padding: 36px 18px;
+    margin-top: 0;
+  }
 `;
 export const PlanTitle = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -43,6 +51,10 @@ export const PlanTitleDescription = styled(Typography)`
   margin-top: 7px;
   color: ${(props) =>
     props.highlighted ? "white" : selectedTheme.colors.primaryGrayText};
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+  }
 `;
 export const PlanPriceContainer = styled(Box)`
   width: 100%;
@@ -61,6 +73,10 @@ export const PlanPrice = styled(Typography)`
   flex: 1;
   color: ${(props) =>
     props.highlighted ? "white" : selectedTheme.colors.primaryPurple};
+
+  @media (max-width: 600px) {
+    font-size: 18px;
+  }
 `;
 export const PlanPriceMonthly = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -74,6 +90,10 @@ export const PlanPriceMonthly = styled(Typography)`
     props.highlighted
       ? selectedTheme.colors.iconProfileColor
       : selectedTheme.colors.primaryGrayText};
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+  }
 `;
 export const PlanDetail = styled(Box)`
   display: flex;
@@ -90,6 +110,10 @@ export const PlanDetailTitle = styled(Typography)`
     props.highlighted
       ? selectedTheme.colors.primaryYellow
       : selectedTheme.colors.primaryPurple};
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+  }
 `;
 export const PlanDetailDescription = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -99,6 +123,11 @@ export const PlanDetailDescription = styled(Typography)`
   line-height: 22px;
   color: ${(props) =>
     props.highlighted ? "white" : selectedTheme.colors.primaryGrayText};
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+    font-weight: 400;
+  }
 `;
 export const Line = styled(Box)`
   width: 100%;
@@ -131,4 +160,11 @@ export const PlanIcon = styled(Box)`
           : selectedTheme.colors.primaryPurple};
     }
   }
+
+  @media (max-width: 600px) {
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
 `;

src/components/Prices/PricesComponent.styled.js

@@ -8,6 +8,10 @@ import selectedTheme from "../../themes";
 export const PricesComponentContainer = styled(Box)`
   padding: 72px;
   background: white;
+
+  @media (max-width: 600px) {
+    padding: 36px;
+  }
 `;
 export const PlansContainer = styled(Box)`
   display: flex;
@@ -17,10 +21,16 @@ export const PlansContainer = styled(Box)`
   gap: 50px;
   margin-top: 46px;
   margin-bottom: 36px;
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    gap: 27px;
+  }
 `;
 export const TruckIcon = styled(Truck)``;
 export const CartIcon = styled(Cart)``;
 export const SendIcon = styled(Send)``;
+
 export const PricesAltText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   font-style: normal;

src/components/Prices/PricesHeader/PricesHeader.styled.js

@@ -12,11 +12,20 @@ export const PricesHeaderTitle = styled(Typography)`
   color: ${selectedTheme.colors.primaryPurple};
   display: flex;
   flex: 1;
+
+  @media (max-width: 600px) {
+    font-size: 36px;
+    line-height: 49px;
+  }
 `;
 export const PricesHeaderLine = styled(Box)`
-    border-top: 1px solid ${selectedTheme.colors.iconYellowColor};
-    width: 90px;
-    margin-bottom: 26px;
+  border-top: 1px solid ${selectedTheme.colors.iconYellowColor};
+  width: 90px;
+  margin-bottom: 26px;
+
+  @media (max-width: 600px) {
+    width: 54px;
+  }
 `;
 export const PricesHeaderContainer = styled(Box)`
   display: flex;

src/components/PrivacyPolicy/PrivacyPolicyComponent.styled.js

@@ -2,5 +2,9 @@ import { Box } from "@mui/material";
 import styled from "styled-components";
 
 export const PrivacyPolicyContainer = styled(Box)`
-    margin: 72px;
-`
+  margin: 72px;
+
+  @media (max-width: 600px) {
+    margin: 36px 36px 69px 36px;
+  }
+`;

src/components/PrivacyPolicy/PrivacyPolicyHeader/PrivacyPolicyHeader.styled.js

@@ -11,6 +11,11 @@ export const PrivacyPolicyHeaderTitle = styled(Typography)`
   font-size: 72px;
   line-height: 98px;
   color: ${selectedTheme.colors.primaryPurple};
+
+  @media (max-width: 600px) {
+    font-size: 36px;
+    line-height: 49px;
+  }
 `;
 export const PrivacyPolicyHeaderParagraph = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -19,9 +24,17 @@ export const PrivacyPolicyHeaderParagraph = styled(Typography)`
   font-size: 16px;
   line-height: 22px;
   color: ${selectedTheme.colors.primaryGrayText};
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+  }
 `;
 export const PrivacyPolicyHeaderLine = styled(Box)`
-    border-top: 1px solid ${selectedTheme.colors.iconYellowColor};
-    width: 90px;
-    margin-bottom: 26px;
+  border-top: 1px solid ${selectedTheme.colors.iconYellowColor};
+  width: 90px;
+  margin-bottom: 26px;
+
+  @media (max-width: 600px) {
+    width: 54px;
+  }
 `;

src/components/PrivacyPolicy/PrivacyPolicySection/PrivacyPolicySection.styled.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import selectedTheme from "../../../themes";
 
 export const PrivacyPolicySectionContainer = styled(Box)`
-    margin-top: 25px;
+  margin-top: 25px;
 `;
 export const PrivacyPolicySectionTitle = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -13,6 +13,10 @@ export const PrivacyPolicySectionTitle = styled(Typography)`
   line-height: 33px;
   color: ${selectedTheme.colors.primaryPurple};
   margin-bottom: 18px;
+
+  @media (max-width: 600px) {
+    font-size: 18px;
+  }
 `;
 export const PrivacyPolicySectionText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -21,4 +25,8 @@ export const PrivacyPolicySectionText = styled(Typography)`
   font-size: 16px;
   line-height: 22px;
   color: ${selectedTheme.colors.primaryGrayText};
+
+  @media (max-width: 600px) {
+    font-size: 14px;
+  }
 `;