From 11d59fdfc3c8beb2949c59ade00fa0dd31d7a118 Mon Sep 17 00:00:00 2001
From: leonardo <lmedeiros045@gmail.com>
Date: Mon, 20 May 2024 14:31:48 -0300
Subject: [PATCH 1/7] Criado botao

---
 src/App.tsx                            |  2 ++
 src/components/BackToTop/BackToTop.tsx | 35 ++++++++++++++++++++++++++
 src/components/BackToTop/index.ts      |  3 +++
 3 files changed, 40 insertions(+)
 create mode 100644 src/components/BackToTop/BackToTop.tsx
 create mode 100644 src/components/BackToTop/index.ts

diff --git a/src/App.tsx b/src/App.tsx
index 478da36d..f0dd1a25 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { Routes } from './routes/Routes';
 import { SessionProvider } from './contexts';
 import { Toaster } from './components/ui/toaster';
+import { BackToTop } from '@/components/BackToTop';
 
 const App = () => {
   return (
@@ -11,6 +12,7 @@ const App = () => {
       <Toaster />
       <BrowserRouter>
         <SessionProvider>
+          <BackToTop/>
           <Routes />
         </SessionProvider>
       </BrowserRouter>
diff --git a/src/components/BackToTop/BackToTop.tsx b/src/components/BackToTop/BackToTop.tsx
new file mode 100644
index 00000000..5cb3054c
--- /dev/null
+++ b/src/components/BackToTop/BackToTop.tsx
@@ -0,0 +1,35 @@
+import { useState } from "react"
+
+const BackToTop =() => {
+
+    const [isVisible, setVisibility] = useState(true)
+
+    const scrollToTop = () => {
+        window.scrollTo(0,0)
+
+        console.log("click!")
+    }
+
+    const toggleVisibility = () => {
+        if (window.scrollY >= window.innerHeight) {
+            setVisibility(true)
+        } else {
+            setVisibility(false)
+        }
+
+        console.log("scrooled")
+    }
+
+
+return (isVisible && (
+    <button 
+    className=" absolute bg-red-800/60 z-[100] right-10 bottom-10 w-12 h-12 rounded-full shadow-slate-500 font-bold shadow-md text-white select-none" 
+    onClick={scrollToTop} 
+    onScroll={toggleVisibility}
+    
+    
+    >^</button>
+));
+}
+
+export { BackToTop };
\ No newline at end of file
diff --git a/src/components/BackToTop/index.ts b/src/components/BackToTop/index.ts
new file mode 100644
index 00000000..2e570724
--- /dev/null
+++ b/src/components/BackToTop/index.ts
@@ -0,0 +1,3 @@
+import { BackToTop } from "./BackToTop";
+
+export { BackToTop };

From 458788d28171bd56d1a44e7fff99fdad373eeee4 Mon Sep 17 00:00:00 2001
From: leonardo <lmedeiros045@gmail.com>
Date: Mon, 20 May 2024 15:11:17 -0300
Subject: [PATCH 2/7] Adicionado funcoes para o botao. COMENTADO
 OVERFLOW-X:HIDDEN no global.css

---
 src/components/BackToTop/BackToTop.tsx | 21 ++++++++-------------
 src/global.css                         |  2 +-
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/components/BackToTop/BackToTop.tsx b/src/components/BackToTop/BackToTop.tsx
index 5cb3054c..8c73990d 100644
--- a/src/components/BackToTop/BackToTop.tsx
+++ b/src/components/BackToTop/BackToTop.tsx
@@ -2,32 +2,27 @@ import { useState } from "react"
 
 const BackToTop =() => {
 
-    const [isVisible, setVisibility] = useState(true)
+    const [isVisible, setVisibility] = useState(false)
 
     const scrollToTop = () => {
-        window.scrollTo(0,0)
+        window.scrollTo({top:0, behavior:"smooth"})
 
-        console.log("click!")
+        console.log(window.scrollY)
     }
 
-    const toggleVisibility = () => {
-        if (window.scrollY >= window.innerHeight) {
+    window.addEventListener("scroll", () => {
+        if ( window.innerHeight / 2 < window.scrollY) {
             setVisibility(true)
         } else {
             setVisibility(false)
         }
-
-        console.log("scrooled")
-    }
+    })
 
 
 return (isVisible && (
     <button 
-    className=" absolute bg-red-800/60 z-[100] right-10 bottom-10 w-12 h-12 rounded-full shadow-slate-500 font-bold shadow-md text-white select-none" 
-    onClick={scrollToTop} 
-    onScroll={toggleVisibility}
-    
-    
+    className=" fixed ease-in-out duration-300 hover:bg-red-800/100 bg-red-800/40 z-[100] right-10 bottom-10 w-12 h-12 rounded-full shadow-slate-500 font-bold shadow-md text-white select-none" 
+    onClick={scrollToTop}
     >^</button>
 ));
 }
diff --git a/src/global.css b/src/global.css
index 80c42b80..5046f9d0 100644
--- a/src/global.css
+++ b/src/global.css
@@ -88,6 +88,6 @@
 
   #root {
     max-width: 100vw;
-    overflow-x: hidden;
+    /*overflow-x: hidden;*/
   }
 }

From d81fb7ee442af698e234b50e5a09d1ba5d027477 Mon Sep 17 00:00:00 2001
From: leonardo <lmedeiros045@gmail.com>
Date: Mon, 20 May 2024 15:20:04 -0300
Subject: [PATCH 3/7] removendo necessidade de remover overflow-x:hidden no
 global.css

---
 src/components/BackToTop/BackToTop.tsx | 1 +
 src/global.css                         | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/BackToTop/BackToTop.tsx b/src/components/BackToTop/BackToTop.tsx
index 8c73990d..aff261f1 100644
--- a/src/components/BackToTop/BackToTop.tsx
+++ b/src/components/BackToTop/BackToTop.tsx
@@ -17,6 +17,7 @@ const BackToTop =() => {
             setVisibility(false)
         }
     })
+    //document.getElementById('root').addEventListener('scroll', (e) => console.log(e.target.scrollTop))
 
 
 return (isVisible && (
diff --git a/src/global.css b/src/global.css
index 5046f9d0..80c42b80 100644
--- a/src/global.css
+++ b/src/global.css
@@ -88,6 +88,6 @@
 
   #root {
     max-width: 100vw;
-    /*overflow-x: hidden;*/
+    overflow-x: hidden;
   }
 }

From 509703ce22aa028af2761fc2e10c521a2a13f9e9 Mon Sep 17 00:00:00 2001
From: leonardo <lmedeiros045@gmail.com>
Date: Mon, 20 May 2024 15:29:17 -0300
Subject: [PATCH 4/7] resolvendo funcoes

---
 src/components/BackToTop/BackToTop.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/BackToTop/BackToTop.tsx b/src/components/BackToTop/BackToTop.tsx
index aff261f1..0b86eab8 100644
--- a/src/components/BackToTop/BackToTop.tsx
+++ b/src/components/BackToTop/BackToTop.tsx
@@ -2,22 +2,26 @@ import { useState } from "react"
 
 const BackToTop =() => {
 
-    const [isVisible, setVisibility] = useState(false)
+    const [isVisible, setVisibility] = useState(!false)
 
     const scrollToTop = () => {
-        window.scrollTo({top:0, behavior:"smooth"})
+        let root = document.getElementById('root')
+        if (!root) {return}
 
-        console.log(window.scrollY)
+        root.scrollTo({top:0, behavior:"smooth"})
+        
     }
 
-    window.addEventListener("scroll", () => {
-        if ( window.innerHeight / 2 < window.scrollY) {
+    document.getElementById("root")?.addEventListener('scroll', (e) => {
+        let CurrentScrollHeight = e.target.scrollTop
+        let WindowHeight = window.innerHeight
+
+        if ( CurrentScrollHeight > WindowHeight / 2) {
             setVisibility(true)
         } else {
             setVisibility(false)
         }
     })
-    //document.getElementById('root').addEventListener('scroll', (e) => console.log(e.target.scrollTop))
 
 
 return (isVisible && (

From ba31363b6056a116c42e951c47d003b359af1024 Mon Sep 17 00:00:00 2001
From: Leonardo <57924586+Lmedeiros-leiman@users.noreply.github.com>
Date: Mon, 20 May 2024 17:30:26 -0300
Subject: [PATCH 5/7] Finalizando.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

durante meus testes esqueci de inverter o estado inicial do botão.
---
 src/components/BackToTop/BackToTop.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/BackToTop/BackToTop.tsx b/src/components/BackToTop/BackToTop.tsx
index 0b86eab8..283831db 100644
--- a/src/components/BackToTop/BackToTop.tsx
+++ b/src/components/BackToTop/BackToTop.tsx
@@ -2,7 +2,7 @@ import { useState } from "react"
 
 const BackToTop =() => {
 
-    const [isVisible, setVisibility] = useState(!false)
+    const [isVisible, setVisibility] = useState(false)
 
     const scrollToTop = () => {
         let root = document.getElementById('root')
@@ -32,4 +32,4 @@ return (isVisible && (
 ));
 }
 
-export { BackToTop };
\ No newline at end of file
+export { BackToTop };

From ba6a7c0b537cec8cc7d0f8e6106a922f57f283cb Mon Sep 17 00:00:00 2001
From: leonardo <lmedeiros045@gmail.com>
Date: Mon, 20 May 2024 23:13:55 -0300
Subject: [PATCH 6/7] aplicado o design recomendado pela barbiebrega

---
 src/components/BackToTop/BackToTop.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/BackToTop/BackToTop.tsx b/src/components/BackToTop/BackToTop.tsx
index 283831db..c27eca46 100644
--- a/src/components/BackToTop/BackToTop.tsx
+++ b/src/components/BackToTop/BackToTop.tsx
@@ -1,4 +1,6 @@
 import { useState } from "react"
+import { ArrowUp } from "lucide-react"
+
 
 const BackToTop =() => {
 
@@ -13,6 +15,7 @@ const BackToTop =() => {
     }
 
     document.getElementById("root")?.addEventListener('scroll', (e) => {
+        if (e.target === null) {return}
         let CurrentScrollHeight = e.target.scrollTop
         let WindowHeight = window.innerHeight
 
@@ -26,9 +29,12 @@ const BackToTop =() => {
 
 return (isVisible && (
     <button 
-    className=" fixed ease-in-out duration-300 hover:bg-red-800/100 bg-red-800/40 z-[100] right-10 bottom-10 w-12 h-12 rounded-full shadow-slate-500 font-bold shadow-md text-white select-none" 
+    className=" fixed ease-in-out hidden sm:flex justify-center items-center duration-300 
+    bg-red-600/75 focus:bg-red-700 hover:bg-red-700 z-[100] shadow-slate-600/75
+    right-6 bottom-6 rounded-full shadow-md
+    w-12 h-12 "
     onClick={scrollToTop}
-    >^</button>
+    ><ArrowUp color="white" /></button>
 ));
 }
 

From 814f86f08d99cd0b3a717da6194c89465d5fe716 Mon Sep 17 00:00:00 2001
From: Leonardo <57924586+Lmedeiros-leiman@users.noreply.github.com>
Date: Thu, 23 May 2024 21:31:46 -0300
Subject: [PATCH 7/7] Removido erro de tipagem.

---
 src/components/BackToTop/BackToTop.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/BackToTop/BackToTop.tsx b/src/components/BackToTop/BackToTop.tsx
index c27eca46..bc64c207 100644
--- a/src/components/BackToTop/BackToTop.tsx
+++ b/src/components/BackToTop/BackToTop.tsx
@@ -16,7 +16,7 @@ const BackToTop =() => {
 
     document.getElementById("root")?.addEventListener('scroll', (e) => {
         if (e.target === null) {return}
-        let CurrentScrollHeight = e.target.scrollTop
+        let CurrentScrollHeight = (e.target as HTMLElement).scrollTop 
         let WindowHeight = window.innerHeight
 
         if ( CurrentScrollHeight > WindowHeight / 2) {