diff --git a/website/frontend/App.js b/website/frontend/App.js index 4ef3563b58..38800dec06 100644 --- 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 ( @@ -80,6 +101,19 @@ const App = () => { + {/* scroll top button */} + {showScroll && ( +
+ +
+ )}
); }; diff --git a/website/frontend/src/pages/CleanAir/CleanAirAbout.js b/website/frontend/src/pages/CleanAir/CleanAirAbout.js index e1f99bad4b..ca05385656 100644 --- 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 (
{ />
- {/* scroll top button */} - {showScroll && ( -
- -
- )} - {/* section 6 */}
diff --git a/website/frontend/src/pages/CleanAir/CleanAirPartners.js b/website/frontend/src/pages/CleanAir/CleanAirPartners.js index 93f1efb006..50929353bc 100644 --- a/website/frontend/src/pages/CleanAir/CleanAirPartners.js +++ b/website/frontend/src/pages/CleanAir/CleanAirPartners.js @@ -378,11 +378,18 @@ const CleanAirPartners = () => { )}
-
+
+ Individuals actively involved in air quality work in Africa are welcome to join the + CLEAN-Air Africa Network. +

+ } 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 index c1802f61fc..84f2bd1919 100644 --- 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 }) => ( -
- {/* */} - - -
{children}
- - -
- -
-); +const Page = ({ children }) => { + return ( +
+ {/* */} + + +
{children}
+ + +
+ ); +}; export default Page; diff --git a/website/frontend/styles/CleanAirPage.scss b/website/frontend/styles/CleanAirPage.scss index e5d20980aa..cf147df49f 100644 --- 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 index 2620e869e5..3644adf935 100644 --- 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); + } +}