Whaticket Print Screen now disappears in smaller screens

luaporto · Oct 15, 2021 · 7dd6a2a · 7dd6a2a
1 parent 2805752
commit 7dd6a2a
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 77 deletions.
diff --git a/src/App.js b/src/App.js
@@ -122,86 +122,89 @@ function App() {
       <CssBaseline />
 
       <ThemeProvider theme={theme}>
-        <TopBar
-          ContainedButton={ContainedButton}
-          ButtonTypography={ButtonTypography}
-        />
-        <Container
-          sx={{
-            backgroundColor: "#ffffff",
-            zIndex: "100",
-          }}
-        >
-          <Page
+        <div style={{ overflow: "hidden" }}>
+          <TopBar
             ContainedButton={ContainedButton}
             ButtonTypography={ButtonTypography}
-            SubtitleTypography={SubtitleTypography}
-            TextTypography={TextTypography}
-            CardSubtitleTypography={CardSubtitleTypography}
-            CardBox={CardBox}
           />
-        </Container>
-
-        <FooterBottomWave>
-          <FooterTopWave />
-          <Stack
-            direction="row"
-            justifyContent="space-around"
-            alignItems="center"
+          <Container
             sx={{
-              color: "#fff",
-              paddingTop: "40px",
+              backgroundColor: "#ffffff",
+              zIndex: "100",
             }}
           >
-            <Stack direction="row">
-              <img style={{ width: 75, height: 75 }} src={whiteIcon} alt="" />
-
-              <Typography
-                sx={{
-                  zIndex: 2000,
-
-                  fontSize: "36px",
-                  fontFamily: "Mada",
-                  fontWeight: "400",
-                  marginTop: "15px",
-                }}
-              >
-                Wha
-              </Typography>
-              <Typography
-                sx={{
-                  fontSize: "36px",
-                  fontFamily: "Mada",
-                  fontWeight: "700",
-                  marginTop: "15px",
-                }}
-              >
-                ticket
-              </Typography>
-            </Stack>
-            <TextTypography
+            <Page
+              ContainedButton={ContainedButton}
+              ButtonTypography={ButtonTypography}
+              SubtitleTypography={SubtitleTypography}
+              TextTypography={TextTypography}
+              CardSubtitleTypography={CardSubtitleTypography}
+              CardBox={CardBox}
+            />
+          </Container>
+
+          <FooterBottomWave>
+            <FooterTopWave />
+            <Stack
+              direction="row"
+              justifyContent="space-around"
+              alignItems="center"
               sx={{
-                marginTop: "auto",
-                fontSize: "15px",
-                color: "#e0e0e0",
+                color: "#fff",
+                paddingTop: "40px",
               }}
             >
-              Feito com ♥ por Whaticket
-            </TextTypography>
-
-            <Stack direction="row" spacing={2}>
-              <IconButton disabled sx={{ color: "#fff" }}>
-                <Facebook />
-              </IconButton>
-              <IconButton disabled sx={{ color: "#fff" }}>
-                <Instagram />
-              </IconButton>
-              <IconButton disabled sx={{ color: "#fff" }}>
-                <LinkedIn />
-              </IconButton>
+              <Stack direction="row">
+                <img style={{ width: 75, height: 75 }} src={whiteIcon} alt="" />
+
+                <Typography
+                  sx={{
+                    zIndex: 2000,
+
+                    fontSize: "36px",
+                    fontFamily: "Mada",
+                    fontWeight: "400",
+                    marginTop: "15px",
+                  }}
+                >
+                  Wha
+                </Typography>
+                <Typography
+                  sx={{
+                    fontSize: "36px",
+                    fontFamily: "Mada",
+                    fontWeight: "700",
+                    marginTop: "15px",
+                  }}
+                >
+                  ticket
+                </Typography>
+              </Stack>
+              <TextTypography
+                sx={{
+                  marginTop: "100px",
+                  fontSize: "15px",
+                  color: "#e0e0e0",
+                  position: "absolute",
+                }}
+              >
+                Feito com ♥ por Whaticket
+              </TextTypography>
+
+              <Stack direction="row" spacing={2}>
+                <IconButton disabled sx={{ color: "#fff" }}>
+                  <Facebook />
+                </IconButton>
+                <IconButton disabled sx={{ color: "#fff" }}>
+                  <Instagram />
+                </IconButton>
+                <IconButton disabled sx={{ color: "#fff" }}>
+                  <LinkedIn />
+                </IconButton>
+              </Stack>
             </Stack>
-          </Stack>
-        </FooterBottomWave>
+          </FooterBottomWave>
+        </div>
       </ThemeProvider>
     </>
   );

diff --git a/src/Components/PlansText.js b/src/Components/PlansText.js
@@ -33,7 +33,7 @@ const PlansText = ({ TextTypography }) => {
             marginLeft: "auto",
             marginRight: "auto",
             paddingTop: "35px",
-            paddingBottom: "35px",
+            paddingBottom: "50px",
           }}
         >
           Crie um plano personalizado de acordo com a sua necessidade. Todos os

diff --git a/src/Components/Prices.js b/src/Components/Prices.js
@@ -59,9 +59,16 @@ const Prices = ({ TextTypography, ContainedButton, ButtonTypography }) => {
         sx={{
           zIndex: "20",
           filter: "drop-shadow(11px 14px 17px rgba(37, 56, 92, 0.29))",
+          paddingBottom: "30px",
         }}
       >
-        <Card sx={{ maxWidth: 345, borderRadius: "20px 20px 20px 20px" }}>
+        <Card
+          sx={{
+            maxWidth: 345,
+            height: "auto",
+            borderRadius: "20px 20px 20px 20px",
+          }}
+        >
           <Box
             sx={{
               display: "flex",
@@ -151,7 +158,8 @@ const Prices = ({ TextTypography, ContainedButton, ButtonTypography }) => {
         xs={12}
         sx={{
           zIndex: "20",
-          filter: "drop-shadow(11px 14px 17px rgba(37, 56, 92, 0.29))",
+          filter: "drop-shadow(11px 14px 17px rgba(37, 56, 92, 0.34))",
+          marginTop: "-30px",
         }}
       >
         <Card
@@ -199,7 +207,7 @@ const Prices = ({ TextTypography, ContainedButton, ButtonTypography }) => {
               sx={{
                 color: "#f1edf3",
                 position: "absolute",
-                marginLeft: "150px",
+                marginLeft: "290px",
                 width: "50px",
                 height: "50px",
               }}
@@ -213,7 +221,13 @@ const Prices = ({ TextTypography, ContainedButton, ButtonTypography }) => {
                 alignItems: "baseline",
               }}
             >
-              <PriceTypography sx={{ color: "#00ACC1" }}>
+              <PriceTypography
+                sx={{
+                  color: "#00ACC1",
+                  paddingTop: "20px",
+                  paddingBottom: "20px",
+                }}
+              >
                 R$ 209,70
               </PriceTypography>
               <PriceTimeTypography sx={{ color: "#00ACC1" }}>
@@ -259,7 +273,11 @@ const Prices = ({ TextTypography, ContainedButton, ButtonTypography }) => {
             </PriceListStack>
 
             <ContainedButton
-              sx={{ marginTop: "25px", textAlign: "center" }}
+              sx={{
+                marginTop: "30px",
+                marginBottom: "30px",
+                textAlign: "center",
+              }}
               variant="contained"
               href="https://app.whaticket.com/signup"
               color="warning"

diff --git a/src/Components/TopBar.js b/src/Components/TopBar.js
@@ -1,3 +1,4 @@
+import React from "react";
 import { Box, Button, Stack, Typography } from "@mui/material";
 
 import icon from "../assets/icon.png";

diff --git a/src/Components/WhaticketPrintScreen.js b/src/Components/WhaticketPrintScreen.js
@@ -1,11 +1,12 @@
+import { useMediaQuery } from "@mui/material";
 import Box from "@mui/material/Box";
 import React from "react";
 
 import whaticketPrint from "../assets/whaticketPrint.png";
 
 const WhaticketPrintScreen = () => {
   return (
-    <Box sx={{ paddingBottom: "100px" }}>
+    <Box sx={{ paddingBottom: "100px", display: { xs: "none", xl: "block" } }}>
       <img src={whaticketPrint} alt=""></img>
     </Box>
   );