make scroll top button global

airqo-platform · Jan 22, 2024 · f744b9f · f744b9f
1 parent 275ec02
commit f744b9f
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 86 deletions.
diff --git a/website/frontend/App.js b/website/frontend/App.js
@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { I18nextProvider } from 'react-i18next';
@@ -36,10 +36,31 @@ import store from './store';
 import PartnerDetailPage from './src/pages/Partners';
 import Error404 from 'src/pages/ErrorPages/Error404';
 import { ExploreApp } from './src/pages/ExploreData';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 
 store.dispatch(loadAirQloudSummaryData());
 
 const App = () => {
+  const [showScroll, setShowScroll] = useState(false);
+
+  const checkScrollTop = () => {
+    const shouldShowScroll = window.scrollY >= 400;
+    if (showScroll !== shouldShowScroll) {
+      setShowScroll(shouldShowScroll);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', checkScrollTop);
+    return () => window.removeEventListener('scroll', checkScrollTop);
+  }, [showScroll]);
+
+  const ScrollTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+  };
   return (
     <Provider store={store}>
       <I18nextProvider i18n={i18n}>
@@ -80,6 +101,19 @@ const App = () => {
           </Suspense>
         </Router>
       </I18nextProvider>
+      {/* scroll top button */}
+      {showScroll && (
+        <div className="scroll-top" onClick={ScrollTop}>
+          <ArrowUpwardIcon
+            className="scroll-top-icon"
+            sx={{
+              width: '40px',
+              height: '40px',
+              color: '#FFF'
+            }}
+          />
+        </div>
+      )}
     </Provider>
   );
 };

diff --git a/website/frontend/src/pages/CleanAir/CleanAirAbout.js b/website/frontend/src/pages/CleanAir/CleanAirAbout.js
@@ -8,14 +8,11 @@ import Section5 from 'assets/img/cleanAir/goals.JPG';
 import Placeholder from 'assets/img/cleanAir/placeholder.png';
 import Placeholder2 from 'assets/img/cleanAir/placeholder2.png';
 import Placeholder3 from 'assets/img/cleanAir/placeholder3.png';
-import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import SEO from 'utilities/seo';
 
 const CleanAirAbout = () => {
   useInitScrollTop();
 
-  const [showScroll, setShowScroll] = useState(false);
-
   const goals = [
     {
       title: 'Enhancing Regional Capacity',
@@ -37,25 +34,6 @@ const CleanAirAbout = () => {
     }
   ];
 
-  const checkScrollTop = () => {
-    const shouldShowScroll = window.scrollY >= 400;
-    if (showScroll !== shouldShowScroll) {
-      setShowScroll(shouldShowScroll);
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener('scroll', checkScrollTop);
-    return () => window.removeEventListener('scroll', checkScrollTop);
-  }, [showScroll]);
-
-  const ScrollTop = () => {
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth'
-    });
-  };
-
   return (
     <div className="page-wrapper about-page">
       <SEO
@@ -213,20 +191,6 @@ const CleanAirAbout = () => {
         />
       </div>
 
-      {/* scroll top button */}
-      {showScroll && (
-        <div className="scroll-top" onClick={ScrollTop}>
-          <ArrowUpwardIcon
-            className="scroll-top-icon"
-            sx={{
-              width: '40px',
-              height: '40px',
-              color: '#FFF'
-            }}
-          />
-        </div>
-      )}
-
       {/* section 6 */}
       <div className="page-section">
         <MainHighlight />

diff --git a/website/frontend/src/pages/CleanAir/CleanAirPartners.js b/website/frontend/src/pages/CleanAir/CleanAirPartners.js
@@ -378,11 +378,18 @@ const CleanAirPartners = () => {
         )}
       </div>
 
-      <div className='individual-section'>
+      <div className="individual-section">
         <SingleSection
           removeTopMargin={true}
-          content="
-        Individuals actively involved in air quality work in Africa are welcome to join the CLEAN-Air Africa Network."
+          content={
+            <p
+              style={{
+                padding: '10px 0'
+              }}>
+              Individuals actively involved in air quality work in Africa are welcome to join the
+              CLEAN-Air Africa Network.
+            </p>
+          }
           btnText={'Register your interest'}
           link="https://docs.google.com/forms/d/e/1FAIpQLScIPz7VrhfO2ifMI0dPWIQRiGQ9y30LoKUCT-DDyorS7sAKUA/viewform"
           bgColor="#F2F1F6"

diff --git a/website/frontend/src/pages/Page.js b/website/frontend/src/pages/Page.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import NotificationBanner from 'src/components/NotificationBanner';
 import LanguageSwitcher from 'src/components/LanguageSwitcher';
 import Footer from 'src/components/Footer';
@@ -7,17 +7,19 @@ import NewsletterSection from 'src/components/NewsletterSection/NewsletterSectio
 import GetInvolvedModal from 'src/components/GetInvolvedModal';
 import MiniHighlights from '../components/MiniHighlights';
 
-const Page = ({ children }) => (
-  <div className="Page">
-    {/* <NotificationBanner /> */}
-    <LanguageSwitcher />
-    <TopBar />
-    <div className="page-wrapper">{children}</div>
-    <MiniHighlights />
-    <NewsletterSection />
-    <Footer />
-    <GetInvolvedModal />
-  </div>
-);
+const Page = ({ children }) => {
+  return (
+    <div className="Page">
+      {/* <NotificationBanner /> */}
+      <LanguageSwitcher />
+      <TopBar />
+      <div className="page-wrapper">{children}</div>
+      <MiniHighlights />
+      <NewsletterSection />
+      <Footer />
+      <GetInvolvedModal />
+    </div>
+  );
+};
 
 export default Page;
diff --git a/website/frontend/styles/CleanAirPage.scss b/website/frontend/styles/CleanAirPage.scss
@@ -1135,39 +1135,6 @@
     }
   }
 
-  .scroll-top {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    background-color: #145dff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    z-index: 1000;
-    transition: all 0.3s ease-in-out;
-    animation: scroll-top-icon 2s ease-in-out infinite;
-
-    &:hover {
-      background-color: #0e4dff;
-    }
-  }
-
-  @keyframes scroll-top-icon {
-    0% {
-      transform: translateY(0);
-    }
-    50% {
-      transform: translateY(-10px);
-    }
-    100% {
-      transform: translateY(0);
-    }
-  }
-
   /****************************************************/
   /*************** Responsivness **********************/
   /****************************************************/

diff --git a/website/frontend/styles/index.scss b/website/frontend/styles/index.scss
@@ -143,3 +143,36 @@ a:hover {
 img {
   pointer-events: none;
 }
+
+.scroll-top {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #145dff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  z-index: 1000;
+  transition: all 0.3s ease-in-out;
+  animation: scroll-top-icon 2s ease-in-out infinite;
+
+  &:hover {
+    background-color: #0e4dff;
+  }
+}
+
+@keyframes scroll-top-icon {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}