From 03a5a14e42412278f3f257315b153c88bb281478 Mon Sep 17 00:00:00 2001
From: ani-kalpachka <ani_kalpacka888@gmail.com>
Date: Mon, 22 Jul 2024 19:50:05 +0300
Subject: [PATCH] Add scroll to top button

---
 src/components/client/faq/FaqPage.tsx            |  2 --
 src/components/client/layout/Layout.tsx          |  2 ++
 .../client/{faq => layout}/ScrollToTop.tsx       | 16 +++++++++++++---
 3 files changed, 15 insertions(+), 5 deletions(-)
 rename src/components/client/{faq => layout}/ScrollToTop.tsx (69%)

diff --git a/src/components/client/faq/FaqPage.tsx b/src/components/client/faq/FaqPage.tsx
index ff60fe513..790efd9b8 100644
--- a/src/components/client/faq/FaqPage.tsx
+++ b/src/components/client/faq/FaqPage.tsx
@@ -6,7 +6,6 @@ import React, { useMemo, useState } from 'react'
 import Layout from 'components/client/layout/Layout'
 
 import ContactUs from './ContactUs'
-import ScrollToTop from './ScrollToTop'
 import VerticalTabs from './VerticalTabs'
 import ExpandableListItem from './ExpandableListItem'
 import {
@@ -81,7 +80,6 @@ export default function FaqPage({ section }: Props) {
         </Stack>
       </TabContext>
       <ContactUs />
-      <ScrollToTop />
     </Layout>
   )
 }
diff --git a/src/components/client/layout/Layout.tsx b/src/components/client/layout/Layout.tsx
index cd5683da3..3beae5dbc 100644
--- a/src/components/client/layout/Layout.tsx
+++ b/src/components/client/layout/Layout.tsx
@@ -11,6 +11,7 @@ import DetailsModal from 'components/admin/modal/DetailsModal'
 
 import AppNavBar from './AppNavBar'
 import MobileNav from './nav/MobileNav/MobileNav'
+import ScrollToTop from './ScrollToTop'
 
 const createPageTitle = (suffix: string, title?: string) => {
   if (title) {
@@ -135,6 +136,7 @@ export default function Layout({
         <DetailsModal />
       </Container>
       {!hideFooter && <Footer />}
+      <ScrollToTop />
     </Container>
   )
 }
diff --git a/src/components/client/faq/ScrollToTop.tsx b/src/components/client/layout/ScrollToTop.tsx
similarity index 69%
rename from src/components/client/faq/ScrollToTop.tsx
rename to src/components/client/layout/ScrollToTop.tsx
index 4c9d5ad0f..f1da36615 100644
--- a/src/components/client/faq/ScrollToTop.tsx
+++ b/src/components/client/layout/ScrollToTop.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+
 import { ArrowCircleUp } from '@mui/icons-material'
 import { Box } from '@mui/material'
 
@@ -8,7 +9,7 @@ const ScrollToTop = () => {
   const [isVisible, setIsVisible] = useState(false)
 
   const toggleVisibility = () => {
-    if (window.pageYOffset > 300) {
+    if (window.pageYOffset > 700) {
       setIsVisible(true)
     } else {
       setIsVisible(false)
@@ -31,10 +32,19 @@ const ScrollToTop = () => {
     <div>
       {isVisible && (
         <Box
-          sx={{ position: 'fixed', cursor: 'pointer', right: '6rem', bottom: '0.6rem' }}
+          sx={{
+            position: 'fixed',
+            cursor: 'pointer',
+            right: theme.spacing(3),
+            bottom: theme.spacing(2),
+          }}
           onClick={scrollToTop}>
           <ArrowCircleUp
-            sx={{ width: '65px', height: '65px', color: theme.palette.primary.main }}
+            sx={{
+              width: theme.spacing(8),
+              height: theme.spacing(8),
+              color: theme.palette.primary.main,
+            }}
           />
         </Box>
       )}