From ac15184ac40df324778b63246c745bdfa910a4a7 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Fri, 20 Jan 2023 11:57:08 -0300
Subject: [PATCH] feat(scroll): Adicionado o scroll na tela

---
 src/components/ScrollPage/ScrollPage.tsx      |  32 ++++++++++++++++++
 .../SearchBox/searchBox.module.scss           |   4 ++-
 src/components/Whatsapp/assets/image/seta.png | Bin 0 -> 3436 bytes
 src/index.tsx                                 |   2 ++
 src/sectors/ContactWhat/ContactWhat.tsx       |  13 +++++++
 src/sectors/Footer/TopFooter/TopFooter.tsx    |   1 -
 src/styles/main.scss                          |   1 +
 src/styles/partials/scroll.scss               |  21 ++++++++++++
 8 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ScrollPage/ScrollPage.tsx
 create mode 100644 src/components/Whatsapp/assets/image/seta.png
 create mode 100644 src/sectors/ContactWhat/ContactWhat.tsx
 create mode 100644 src/styles/partials/scroll.scss

diff --git a/src/components/ScrollPage/ScrollPage.tsx b/src/components/ScrollPage/ScrollPage.tsx
new file mode 100644
index 0000000..77d394a
--- /dev/null
+++ b/src/components/ScrollPage/ScrollPage.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import setaImg from "../Whatsapp/assets/image/seta.png";
+
+function topFunction() {
+  document.body.scrollTop = 0; // For Safari
+  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+}
+
+const ScrollPage = () => {
+  let mybutton = document.getElementById("myBtn") as HTMLElement;
+  function scrollFunction() {
+    if (
+      document.body.scrollTop > 80 ||
+      document.documentElement.scrollTop > 80
+    ) {
+      mybutton.style.display = "block";
+    } else {
+      mybutton.style.display = "none";
+    }
+  }
+
+  window.onscroll = function () {
+    scrollFunction();
+  };
+  return (
+    <button onClick={() => topFunction()} id="myBtn" title="Ir para topo">
+      <img src={setaImg} alt="seta" />
+    </button>
+  );
+};
+
+export { ScrollPage };
diff --git a/src/components/SearchBox/searchBox.module.scss b/src/components/SearchBox/searchBox.module.scss
index 1669f12..aff345b 100644
--- a/src/components/SearchBox/searchBox.module.scss
+++ b/src/components/SearchBox/searchBox.module.scss
@@ -10,7 +10,7 @@
   gap: 10px;
   width: 264px;
   height: 32px;
-
+  font-size: 28px;
   background: #ffffff;
 
   border: 2px solid #f2f2f2;
@@ -45,6 +45,8 @@
     &::placeholder {
       font-size: 28px;
     }
+    right: 54px;
+    top: 10px;
   }
   @media screen and (max-width: 1024px) {
     right: 30px;
diff --git a/src/components/Whatsapp/assets/image/seta.png b/src/components/Whatsapp/assets/image/seta.png
new file mode 100644
index 0000000000000000000000000000000000000000..a6ac7ea879e6f3a11e32152f71b2a7730ecbf171
GIT binary patch
literal 3436
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
O0000<MNUMnLSTYxsAshR

literal 0
HcmV?d00001

diff --git a/src/index.tsx b/src/index.tsx
index 239a017..0e13047 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -9,12 +9,14 @@ import { RoutesUrl } from "./components/Router/Router";
 import { Header } from "./sectors/Header/Header";
 import { Footer } from "./sectors/Footer/Footer";
 import { Newsletter } from "./components/Newsletter/Newsletter";
+import { ContactWhat } from "./sectors/ContactWhat/ContactWhat";
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>
     <BrowserRouter>
+      <ContactWhat></ContactWhat>
       <Header></Header>
       <RoutesUrl></RoutesUrl>
 
diff --git a/src/sectors/ContactWhat/ContactWhat.tsx b/src/sectors/ContactWhat/ContactWhat.tsx
new file mode 100644
index 0000000..98a38fb
--- /dev/null
+++ b/src/sectors/ContactWhat/ContactWhat.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Whatsapp } from "../../components/Whatsapp/Whatsapp";
+import { ScrollPage } from "../../components/ScrollPage/ScrollPage";
+const ContactWhat = () => {
+  return (
+    <div className="scroll-wrapper">
+      <Whatsapp></Whatsapp>
+      <ScrollPage></ScrollPage>
+    </div>
+  );
+};
+
+export { ContactWhat };
diff --git a/src/sectors/Footer/TopFooter/TopFooter.tsx b/src/sectors/Footer/TopFooter/TopFooter.tsx
index 0c67c45..27f81c5 100644
--- a/src/sectors/Footer/TopFooter/TopFooter.tsx
+++ b/src/sectors/Footer/TopFooter/TopFooter.tsx
@@ -17,7 +17,6 @@ const TopFooter = () => {
 
         <div className="top_footer_socials">
           <Socials></Socials>
-          <Whatsapp></Whatsapp>
         </div>
       </div>
       <div className="top_footerMob_wrapper">
diff --git a/src/styles/main.scss b/src/styles/main.scss
index ad6a2e7..cd6f90b 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -12,3 +12,4 @@
 @import "partials/accordionBody.scss";
 @import "partials/footer.scss";
 @import "partials/bottom_footer.scss";
+@import "partials/scroll.scss";
diff --git a/src/styles/partials/scroll.scss b/src/styles/partials/scroll.scss
new file mode 100644
index 0000000..0f121e4
--- /dev/null
+++ b/src/styles/partials/scroll.scss
@@ -0,0 +1,21 @@
+.scroll-wrapper {
+  display: flex; /* Hidden by default */
+  position: fixed; /* Fixed/sticky position */
+  bottom: 20px; /* Place the button at the bottom of the page */
+  right: 30px; /* Place the button 30px from the right */
+  z-index: 99; /* Make sure it does not overlap */
+  flex-direction: column;
+  gap: 5px;
+}
+#myBtn {
+  border: none; /* Remove borders */
+  outline: none; /* Remove outline */
+  cursor: pointer; /* Add a mouse pointer on hover */
+
+  background-color: transparent;
+  @media screen and (min-width: 2500px) {
+    img {
+      width: 66px;
+    }
+  }
+}