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);
+ }
+}