From 673bef770d39ae1f13cccbc24f6bbceb41244813 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Fri, 11 Oct 2024 12:36:50 +0300 Subject: [PATCH 01/26] Working Dashboard page --- .../Navigation/DesktopNavigation/index.js | 23 ++++--------------- .../src/components/Page/Base.js | 18 ++------------- .../src/lib/data/common/index.js | 18 +++++++++++++++ .../src/payload/globals/site/NavigationTab.js | 1 + 4 files changed, 26 insertions(+), 34 deletions(-) diff --git a/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js index b331ac243..076c80c55 100644 --- a/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js @@ -17,13 +17,7 @@ const useStyles = makeStyles(() => ({ section: {}, })); -function DesktopNavigation({ - logoProps, - menuProps, - desktopLogoProps, - socialLinks, - ...props -}) { +function DesktopNavigation({ logo, menus, socialLinks, ...props }) { const classes = useStyles(props); return ( @@ -36,7 +30,7 @@ function DesktopNavigation({ component={Link} className={classes.logoButton} > - + - + @@ -57,16 +51,9 @@ function DesktopNavigation({ } DesktopNavigation.propTypes = { - logoProps: PropTypes.shape({}), - menuProps: PropTypes.arrayOf(PropTypes.shape({})), + logo: PropTypes.shape({}), + menus: PropTypes.arrayOf(PropTypes.shape({})), socialLinks: PropTypes.arrayOf(PropTypes.shape({})), - desktopLogoProps: PropTypes.shape({ - alt: PropTypes.string, - href: PropTypes.string, - src: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string]), - width: PropTypes.number, - height: PropTypes.number, - }), }; export default DesktopNavigation; diff --git a/apps/climatemappedafrica/src/components/Page/Base.js b/apps/climatemappedafrica/src/components/Page/Base.js index 45cf7010e..d297d804b 100644 --- a/apps/climatemappedafrica/src/components/Page/Base.js +++ b/apps/climatemappedafrica/src/components/Page/Base.js @@ -6,29 +6,15 @@ import React from "react"; import Footer from "@/climatemappedafrica/components/Footer"; import Navigation from "@/climatemappedafrica/components/Navigation"; -import { navigationArgs } from "@/climatemappedafrica/config"; -import getNavigationMenu from "@/climatemappedafrica/functions/menus/getNavigationMenu"; /** * Base page that can be used to build all other pages. */ -function BasePage({ children, menus, variant, footer: footerProps, ...props }) { +function BasePage({ children, menus, variant, footer: footerProps }) { const seo = {}; - const navigation = getNavigationMenu(menus?.primaryMenu || []); - const { menuProps, socialLinks } = navigation; - const { desktopLogoProps, mobileLogoProps, drawerLogoProps } = navigationArgs; const theme = useTheme(); const isDesktop = useMediaQuery(theme.breakpoints.up("lg")); - const navigationProps = { - ...props, - ...menus, - menuProps, - socialLinks, - desktopLogoProps, - mobileLogoProps, - drawerLogoProps, - }; const pageSeo = {}; pageSeo.title = seo?.title || undefined; @@ -51,7 +37,7 @@ function BasePage({ children, menus, variant, footer: footerProps, ...props }) { return ( <> - + connect.includes(link.platform)); + + return { + logo: imageFromMedia(title, primaryLogo.url), + menus, + socialLinks, + }; +} + export async function getPageProps(api, context) { // For now, ClimatemappedAfrica only supports single paths i.e. /, /about, etc., // so params.slug[0] is good enough @@ -53,9 +69,11 @@ export async function getPageProps(api, context) { const siteSettings = await api.findGlobal("settings-site"); const footer = getFooter(siteSettings); + const menus = getMenus(siteSettings); return { blocks, footer, + menus, }; } diff --git a/apps/climatemappedafrica/src/payload/globals/site/NavigationTab.js b/apps/climatemappedafrica/src/payload/globals/site/NavigationTab.js index 02da38263..2567601da 100644 --- a/apps/climatemappedafrica/src/payload/globals/site/NavigationTab.js +++ b/apps/climatemappedafrica/src/payload/globals/site/NavigationTab.js @@ -38,6 +38,7 @@ const NavigationTab = { { name: "connect", type: "select", + hasMany: true, options: socialMediaOptions, }, ], From de2c831c6e3146e6b63b2cfba7ad5af5a26f358c Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Fri, 11 Oct 2024 14:21:28 +0300 Subject: [PATCH 02/26] STay in touch button --- .../src/components/Menu/index.js | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/apps/climatemappedafrica/src/components/Menu/index.js b/apps/climatemappedafrica/src/components/Menu/index.js index 003842c48..be6e9825e 100644 --- a/apps/climatemappedafrica/src/components/Menu/index.js +++ b/apps/climatemappedafrica/src/components/Menu/index.js @@ -1,10 +1,10 @@ +import { StayInTouch } from "@commons-ui/next"; import { Grid, Button, Typography } from "@mui/material"; import makeStyles from "@mui/styles/makeStyles"; import PropTypes from "prop-types"; import React from "react"; import Link from "@/climatemappedafrica/components/Link"; -import SocialMediaIcons from "@/climatemappedafrica/components/SocialMediaIcons"; const useStyles = makeStyles(({ typography, breakpoints, palette }) => ({ root: { @@ -137,7 +137,23 @@ function Menu({ links, children, socialLinks, ...props }) { ))} {children} - + ); } From e4ce4934e8bbcedf47906697d153cd328570fec2 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Fri, 11 Oct 2024 14:44:13 +0300 Subject: [PATCH 03/26] Add page variant --- .../climatemappedafrica/src/lib/data/common/index.js | 1 + .../src/payload/collections/Pages.js | 12 ++++++++++++ 2 files changed, 13 insertions(+) diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js index 534fb481b..419b561b7 100644 --- a/apps/climatemappedafrica/src/lib/data/common/index.js +++ b/apps/climatemappedafrica/src/lib/data/common/index.js @@ -75,5 +75,6 @@ export async function getPageProps(api, context) { blocks, footer, menus, + variant: page?.variant, }; } diff --git a/apps/climatemappedafrica/src/payload/collections/Pages.js b/apps/climatemappedafrica/src/payload/collections/Pages.js index 9aadce21e..6d3751048 100644 --- a/apps/climatemappedafrica/src/payload/collections/Pages.js +++ b/apps/climatemappedafrica/src/payload/collections/Pages.js @@ -33,6 +33,18 @@ const Pages = { initCollapsed: true, }, }, + { + name: "variant", + type: "select", + options: [ + { label: "Default", value: "default" }, + { label: "Explore", value: "explore" }, + ], + defaultValue: "default", + admin: { + position: "sidebar", + }, + }, ], versions: { drafts: true, From a620bd0009f71b89c89733e01606aa1dd415b32f Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Fri, 11 Oct 2024 15:05:14 +0300 Subject: [PATCH 04/26] Remove explore page --- .../src/components/DropdownSearch/index.js | 13 +- .../Navigation/ExploreNavigation/index.js | 22 +- .../src/pages/explore/[[...slug]].js | 246 ------------------ 3 files changed, 12 insertions(+), 269 deletions(-) delete mode 100644 apps/climatemappedafrica/src/pages/explore/[[...slug]].js diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/index.js b/apps/climatemappedafrica/src/components/DropdownSearch/index.js index 24b03aa1a..77fbb3ee8 100644 --- a/apps/climatemappedafrica/src/components/DropdownSearch/index.js +++ b/apps/climatemappedafrica/src/components/DropdownSearch/index.js @@ -6,7 +6,6 @@ import { ListItem, } from "@mui/material"; import makeStyles from "@mui/styles/makeStyles"; -import Image from "next/image"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; import React, { useEffect, useState } from "react"; @@ -66,7 +65,7 @@ function DropdownSearch({ label = "Search for a location", locations, onClick, - icon: iconProp = SearchIcon, + icon: IconProp = SearchIcon, placeholder, variant, ...props @@ -112,8 +111,6 @@ function DropdownSearch({ } }; - const icon = - !suggestions?.length || variant === "explore" ? iconProp : SearchIcon; const searchIconButton = ( - search + {variant === "explore" ? ( + + ) : ( + + )} ); @@ -171,7 +172,7 @@ DropdownSearch.propTypes = { label: PropTypes.string, href: PropTypes.string, onClick: PropTypes.func, - icon: PropTypes.string, + icon: PropTypes.elementType, locations: PropTypes.arrayOf(PropTypes.shape({})), variant: PropTypes.string, placeholder: PropTypes.string, diff --git a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js index 82420055c..4cd95c3f3 100644 --- a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js @@ -1,6 +1,5 @@ import LogoButton from "@commons-ui/core/LogoButton"; -import { Grid, Typography, useMediaQuery } from "@mui/material"; -import { useTheme } from "@mui/material/styles"; +import { Grid, Typography } from "@mui/material"; import makeStyles from "@mui/styles/makeStyles"; import { useTour } from "@reactour/tour"; import PropTypes from "prop-types"; @@ -59,19 +58,8 @@ const useStyles = makeStyles(({ palette, typography }) => ({ }, })); -function ExploreNavigation({ - logoProps, - menuProps, - onOpenHelp, - socialLinks, - desktopLogoProps, - mobileLogoProps, - ...props -}) { - const classes = useStyles(props); - const theme = useTheme(); - const isDesktop = useMediaQuery(theme.breakpoints.up("lg")); - const logoArgs = isDesktop ? desktopLogoProps : mobileLogoProps; +function ExploreNavigation({ logo, variant }) { + const classes = useStyles({}); const { setIsOpen } = useTour(); const openTooltip = () => { @@ -87,7 +75,7 @@ function ExploreNavigation({ component={Link} className={classes.logoButton} > - + - - - - - ); -} - -Explore.propTypes = { - blocks: PropTypes.shape({ - panel: PropTypes.shape({}), - tutorial: PropTypes.shape({ - items: PropTypes.arrayOf(PropTypes.shape({})), - }), - }), -}; - -export async function getStaticPaths() { - const { locations } = await fetchProfile(); - const paths = locations.map(({ code: locationCode }) => ({ - params: { slug: [locationCode] }, - })); - - // only first location to save on build time - const [firstLocation] = paths; - - return { - paths: [firstLocation], - fallback: "blocking", - }; -} - -export async function getStaticProps({ params }) { - const props = {}; - const revalidate = true; - - // TODO: This info was being fetched from the Wordpress CMS, and is necessary for the ExplorePage to render correctly. - const blocks = { - texts: [], - tutorial: { - items: [ - { - title: "SELECT LOCATION", - description: - "Select the County or Municipality you want to explore, by clicking on the search field and the dropdown menu.

Once you have made your selection, explore the visualisations, change location or pin to compare it to a second location.", - selector: "#location-search", - image: - "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-1.png", - imageProps: { - src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-1.png", - width: 694, - height: 572, - type: "png", - blurDataURL: - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMElEQVR4nGOoqW09f/7Shw8fzp07x8AuoC4qqdXf311YWMTAL6YVE5ve2tpcV18PAHqlETRE6fa/AAAAAElFTkSuQmCC", - placeholder: "blur", - }, - }, - { - description: - "Explore the map to confirm or change your selection. You can also pin your location if you want to compare two places.

Once a location is confirmed, click on the “Rich Data” button (on the left hand-side) to display the data visualisations.", - title: "EXPLORE THE MAP", - selector: "#none", - image: - "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-2.png", - imageProps: { - src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-2.png", - width: 751, - height: 589, - type: "png", - blurDataURL: - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMElEQVR4nGP49u3rxEnTDxw4sn//fobCggJeYVU+YaWCvByGzMxMPmElWwfPgvw8AH1vD9GRbZHGAAAAAElFTkSuQmCC", - placeholder: "blur", - }, - }, - { - title: "BROWSE THE CHARTS", - description: - "Continue to open the Rich Data dashboard, using the button on the left.

Browse the charts by scrolling the data dashboard. You can share and download the data using the buttons on the side of each chart.", - selector: "#rich-data", - image: - "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-3a.png", - imageProps: { - src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-3a.png", - width: 670, - height: 439, - type: "png", - blurDataURL: - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMklEQVR4nAEnANj/ANbW1s3NyVtbWrKyswDOztFdY38JCxe5ubcA3t7ffIKf4uPq////vgcX8ZIA2dgAAAAASUVORK5CYII=", - placeholder: "blur", - }, - }, - { - title: "PIN AND COMPARE", - description: - "There are two ways to pin and compare a second location:

1) From the data dashboard: look for the “pin” icon and select a second location from the dropdown menu.

2) From the map: pin your selected location by clicking on the ”pin” icon, then select a second location, which will appear in a different colour.", - selector: "#pin", - image: - "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-4.png", - imageProps: { - src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-4.png", - width: 675, - height: 491, - type: "png", - blurDataURL: - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMklEQVR4nAEnANj/APj491lWYA8QI+zs6wC/wMHXzMmLi5uztLYAu7u7w8XF39/eu7u7x7oYwYnBuWcAAAAASUVORK5CYII=", - placeholder: "blur", - }, - }, - ], - lazyblock: { - slug: "lazyblock/tutorial", - }, - align: "", - anchor: "", - blockId: "Z1npKaH", - blockUniqueClass: "lazyblock-tutorial-Z1npKaH", - ghostkitSpacings: "", - ghostkitSR: "", - }, - panel: { - panelItems: [ - { - value: "rich-data", - icon: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2021/11/Group-4505.svg", - iconProps: { - src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2021/11/Group-4505.svg", - width: 44, - height: 44, - type: "svg", - blurDataURL: - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGElEQVR4nGNgQAP/T///f/o/jHMWiQMHACIVCyeABSwfAAAAAElFTkSuQmCC", - placeholder: "blur", - }, - }, - { - value: "pin", - icon: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/01/Path-210-1-1.svg", - pin: true, - iconProps: { - src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/01/Path-210-1-1.svg", - width: 44, - height: 44, - type: "svg", - blurDataURL: - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAH0lEQVR4nGNgQAP/L/z/f/r//4P/wZzT//+fBbOQAQBvnQ3r6iVM4QAAAABJRU5ErkJggg==", - placeholder: "blur", - }, - }, - ], - scrollToTopLabel: "Back To Top", - dataNotAvailable: "— DATA NOT AVAILABLE", - lazyblock: { - slug: "lazyblock/panel", - }, - align: "", - anchor: "", - blockId: "20amuc", - blockUniqueClass: "lazyblock-panel-20amuc", - ghostkitSpacings: "", - ghostkitSR: "", - }, - }; - const { locations, preferredChildren, mapType, choropleth } = - await fetchProfile(); - const [originalCode] = params?.slug || [""]; - const code = originalCode.trim().toLowerCase(); - - // /explore -> /explore/dj - if (!code) { - return { - redirect: { - destination: `/explore/af`, - permanent: true, - }, - }; - } - - // Allow for case-insensitive code or human-readable location names - // appended to code e.g.: - // KE => ke, 47/nairobi => 47, 47-vs-11/nairobi-vs-isiolo => 47-vs-11 - if (code !== originalCode || params?.slug?.length > 1) { - return { - redirect: { - destination: `/explore/${code}`, - permanent: true, - }, - }; - } - - const locationCodes = locations.map(({ code: locationCode }) => locationCode); - const geoCodes = code - .split("-vs-") - .map((c) => c.trim()) - .filter((c) => c); - if (!geoCodes.every((gC) => locationCodes.includes(gC))) { - return { - notFound: true, - }; - } - - const [primaryCode, secondaryCode] = geoCodes; - const primaryProfile = await fetchProfileGeography(primaryCode); - const profile = [primaryProfile]; - if (secondaryCode) { - const secondaryProfile = await fetchProfileGeography(secondaryCode); - profile.push(secondaryProfile); - } - - return { - props: { - ...props, - blocks, - choropleth, - locations, - mapType, - profile, - variant: "explore", - preferredChildren, - }, - revalidate, - }; -} From 94fac7fe189a93cc5fef1c925841ea6baf3d093a Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Fri, 11 Oct 2024 15:43:11 +0300 Subject: [PATCH 05/26] Mobile logog --- .../components/Navigation/MobileNavigation/index.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js index 45892583e..77643597a 100644 --- a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js @@ -140,14 +140,7 @@ const useStyles = makeStyles(({ breakpoints, typography, palette }) => ({ }, })); -function MobileNavigation({ - logoProps, - menuProps, - mobileLogoProps, - drawerLogoProps, - socialLinks, - ...props -}) { +function MobileNavigation({ logo, ...props }) { const classes = useStyles(props); return ( @@ -160,7 +153,7 @@ function MobileNavigation({ component={Link} className={classes.logoButton} > - + From df60c2436101963ccb3c160cc55b7658fc4ba335 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Fri, 11 Oct 2024 17:10:59 +0300 Subject: [PATCH 06/26] Mobile Nav --- .../src/assets/icons/search-open.svg | 1 + .../src/assets/menu_close.svg | 1 + .../src/assets/menu_open.svg | 1 + .../src/components/Menu/index.js | 9 +- .../Navigation/MobileNavigation/index.js | 138 +++++++++++++++++- 5 files changed, 144 insertions(+), 6 deletions(-) create mode 100644 apps/climatemappedafrica/src/assets/icons/search-open.svg create mode 100644 apps/climatemappedafrica/src/assets/menu_close.svg create mode 100644 apps/climatemappedafrica/src/assets/menu_open.svg diff --git a/apps/climatemappedafrica/src/assets/icons/search-open.svg b/apps/climatemappedafrica/src/assets/icons/search-open.svg new file mode 100644 index 000000000..d2f039c1a --- /dev/null +++ b/apps/climatemappedafrica/src/assets/icons/search-open.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/climatemappedafrica/src/assets/menu_close.svg b/apps/climatemappedafrica/src/assets/menu_close.svg new file mode 100644 index 000000000..779b651b3 --- /dev/null +++ b/apps/climatemappedafrica/src/assets/menu_close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/climatemappedafrica/src/assets/menu_open.svg b/apps/climatemappedafrica/src/assets/menu_open.svg new file mode 100644 index 000000000..103535fbb --- /dev/null +++ b/apps/climatemappedafrica/src/assets/menu_open.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/climatemappedafrica/src/components/Menu/index.js b/apps/climatemappedafrica/src/components/Menu/index.js index be6e9825e..c17431fe3 100644 --- a/apps/climatemappedafrica/src/components/Menu/index.js +++ b/apps/climatemappedafrica/src/components/Menu/index.js @@ -57,6 +57,7 @@ const useStyles = makeStyles(({ typography, breakpoints, palette }) => ({ [breakpoints.up("lg")]: { fontSize: typography.pxToRem(16), }, + textTransform: "uppercase", }, menu: { margin: 0, @@ -125,10 +126,14 @@ function Menu({ links, children, socialLinks, ...props }) { root: index !== 0 ? classes.menuLinks : classes.links, text: classes.text, }} - sx={{ + sx={(theme) => ({ borderRadius: 20, border: index !== 0 ? 0 : "3px solid", - }} + color: { + xs: theme.palette.text.secondary, + lg: theme.palette.primary.main, + }, + })} > {item.label} diff --git a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js index 77643597a..58adcdb7d 100644 --- a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js @@ -1,17 +1,31 @@ import LogoButton from "@commons-ui/core/LogoButton"; -import { Grid } from "@mui/material"; +import { + Grid, + Slide, + Dialog, + DialogActions, + IconButton, + DialogContent, +} from "@mui/material"; import makeStyles from "@mui/styles/makeStyles"; import Image from "next/image"; +import { useRouter } from "next/router"; import PropTypes from "prop-types"; -import React from "react"; +import React, { useState } from "react"; +import SearchIcon from "@/climatemappedafrica/assets/icons/search-open.svg"; +import MenuCloseIcon from "@/climatemappedafrica/assets/menu_close.svg"; +import MenuOpenIcon from "@/climatemappedafrica/assets/menu_open.svg"; +import DropdownSearch from "@/climatemappedafrica/components/DropdownSearch"; import Link from "@/climatemappedafrica/components/Link"; +import Menu from "@/climatemappedafrica/components/Menu"; import Section from "@/climatemappedafrica/components/Section"; const useStyles = makeStyles(({ breakpoints, typography, palette }) => ({ root: {}, logoButton: { padding: 0, + width: typography.pxToRem(254), }, section: {}, dialog: { @@ -140,14 +154,34 @@ const useStyles = makeStyles(({ breakpoints, typography, palette }) => ({ }, })); -function MobileNavigation({ logo, ...props }) { +const Transition = React.forwardRef(function Transition(props, ref) { + return ; +}); + +function MobileNavigation({ logo, menus, socialLinks, ...props }) { const classes = useStyles(props); + const [open, setOpen] = useState(false); + const router = useRouter(); + + const handleClickOpen = (e) => { + e?.preventDefault(); + setOpen(true); + }; + const handleClose = (e) => { + e?.preventDefault(); + setOpen(false); + }; + + const handleClickSearch = (code) => { + setOpen(false); + router.push(`explore/${code}`); + }; return (
- + + + + + + + + +
+ + + + + + + + + + + + +
+ + +
+ + + +
+ +
@@ -163,6 +276,14 @@ function MobileNavigation({ logo, ...props }) { } MobileNavigation.propTypes = { + drawerLogoProps: PropTypes.shape({ + alt: PropTypes.string, + href: PropTypes.string, + src: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string]), + width: PropTypes.number, + height: PropTypes.number, + }), + href: PropTypes.string, logoProps: PropTypes.shape({}), menuProps: PropTypes.arrayOf(PropTypes.shape({})), mobileLogoProps: PropTypes.shape({ @@ -175,4 +296,13 @@ MobileNavigation.propTypes = { socialLinks: PropTypes.arrayOf(PropTypes.shape({})), }; +MobileNavigation.defaultProps = { + drawerLogoProps: undefined, + href: "/explore", + logoProps: undefined, + menuProps: undefined, + mobileLogoProps: undefined, + socialLinks: undefined, +}; + export default MobileNavigation; From 3931460968e8a74e11ed3e4da4433e6abc6141f0 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Fri, 11 Oct 2024 17:17:26 +0300 Subject: [PATCH 07/26] clean proptypes Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../Navigation/MobileNavigation/index.js | 28 ++----------------- 1 file changed, 2 insertions(+), 26 deletions(-) diff --git a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js index 58adcdb7d..faec853ab 100644 --- a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js @@ -276,33 +276,9 @@ function MobileNavigation({ logo, menus, socialLinks, ...props }) { } MobileNavigation.propTypes = { - drawerLogoProps: PropTypes.shape({ - alt: PropTypes.string, - href: PropTypes.string, - src: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string]), - width: PropTypes.number, - height: PropTypes.number, - }), - href: PropTypes.string, - logoProps: PropTypes.shape({}), - menuProps: PropTypes.arrayOf(PropTypes.shape({})), - mobileLogoProps: PropTypes.shape({ - alt: PropTypes.string, - href: PropTypes.string, - src: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string]), - width: PropTypes.number, - height: PropTypes.number, - }), + logo: PropTypes.shape({}), + menus: PropTypes.arrayOf(PropTypes.shape({})), socialLinks: PropTypes.arrayOf(PropTypes.shape({})), }; -MobileNavigation.defaultProps = { - drawerLogoProps: undefined, - href: "/explore", - logoProps: undefined, - menuProps: undefined, - mobileLogoProps: undefined, - socialLinks: undefined, -}; - export default MobileNavigation; From c81889c7ac073c258859af6ebb70cd491ec2f7fe Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 14 Oct 2024 07:26:53 +0300 Subject: [PATCH 08/26] Fix mobile nav isues Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../src/components/Navigation/MobileNavigation/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js index faec853ab..6a166306a 100644 --- a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js @@ -174,7 +174,9 @@ function MobileNavigation({ logo, menus, socialLinks, ...props }) { const handleClickSearch = (code) => { setOpen(false); - router.push(`explore/${code}`); + if (code) { + router.push(`explore/${code}`); + } }; return ( @@ -227,7 +229,7 @@ function MobileNavigation({ logo, menus, socialLinks, ...props }) { component={Link} className={classes.logoButton} > - + From 1a324b021000a76e0580f79cf9abdb91ef1421d3 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 14 Oct 2024 10:37:03 +0300 Subject: [PATCH 09/26] Remove Stories Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../components/Navigation/index.stories.js | 19 ------------------- 1 file changed, 19 deletions(-) delete mode 100644 apps/climatemappedafrica/src/components/Navigation/index.stories.js diff --git a/apps/climatemappedafrica/src/components/Navigation/index.stories.js b/apps/climatemappedafrica/src/components/Navigation/index.stories.js deleted file mode 100644 index 18b1fa64e..000000000 --- a/apps/climatemappedafrica/src/components/Navigation/index.stories.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; - -import Navigation from "."; - -import { navigationArgs } from "@/climatemappedafrica/config"; - -export default { - title: "Sections/Navigation", - argTypes: {}, -}; - -function Template({ ...args }) { - return ; -} -export const Default = Template.bind({}); - -Default.args = { - ...navigationArgs, -}; From 7ef809966c71f53fef022996d05979f2136ca46e Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 14 Oct 2024 10:52:35 +0300 Subject: [PATCH 10/26] Align social links in mobile --- apps/climatemappedafrica/src/components/Menu/index.js | 1 + packages/commons-ui-core/src/StayInTouch/StayInTouch.js | 8 ++------ 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/apps/climatemappedafrica/src/components/Menu/index.js b/apps/climatemappedafrica/src/components/Menu/index.js index c17431fe3..31ec0c843 100644 --- a/apps/climatemappedafrica/src/components/Menu/index.js +++ b/apps/climatemappedafrica/src/components/Menu/index.js @@ -158,6 +158,7 @@ function Menu({ links, children, socialLinks, ...props }) { margin: "3.2px", }, }} + alignItems="flex-start" /> ); diff --git a/packages/commons-ui-core/src/StayInTouch/StayInTouch.js b/packages/commons-ui-core/src/StayInTouch/StayInTouch.js index 896a8446b..15cb376b0 100644 --- a/packages/commons-ui-core/src/StayInTouch/StayInTouch.js +++ b/packages/commons-ui-core/src/StayInTouch/StayInTouch.js @@ -15,6 +15,7 @@ const StayInTouch = React.forwardRef(function StayInTouch( sx, title, direction = { xs: "column", md: "row" }, + alignItems = { xs: "center" }, }, ref, ) { @@ -22,12 +23,7 @@ const StayInTouch = React.forwardRef(function StayInTouch( return null; } return ( - + Date: Mon, 14 Oct 2024 11:05:37 +0300 Subject: [PATCH 11/26] Fix search icon --- .../src/components/DropdownSearch/index.js | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/index.js b/apps/climatemappedafrica/src/components/DropdownSearch/index.js index 77fbb3ee8..575b36322 100644 --- a/apps/climatemappedafrica/src/components/DropdownSearch/index.js +++ b/apps/climatemappedafrica/src/components/DropdownSearch/index.js @@ -4,6 +4,7 @@ import { Typography, List, ListItem, + SvgIcon, } from "@mui/material"; import makeStyles from "@mui/styles/makeStyles"; import { useRouter } from "next/router"; @@ -119,9 +120,25 @@ function DropdownSearch({ className={classes.button} > {variant === "explore" ? ( - + ) : ( - + )} ); From 2213aaf756bf0e9f104f9c0fe71126da18c61ed8 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Tue, 15 Oct 2024 14:12:01 +0300 Subject: [PATCH 12/26] Add global HURUMap config --- apps/climatemappedafrica/payload.config.ts | 3 ++- .../src/payload/globals/HURUMap/index.js | 21 +++++++++++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 apps/climatemappedafrica/src/payload/globals/HURUMap/index.js diff --git a/apps/climatemappedafrica/payload.config.ts b/apps/climatemappedafrica/payload.config.ts index 9f7505efe..5a1532281 100644 --- a/apps/climatemappedafrica/payload.config.ts +++ b/apps/climatemappedafrica/payload.config.ts @@ -17,6 +17,7 @@ import Pages from "./src/payload/collections/Pages"; import Users from "./src/payload/collections/Users"; import Site from "./src/payload/globals/Site"; +import HURUMap from "./src/payload/globals/HURUMap"; const projectDir = process.cwd(); loadEnvConfig(projectDir); @@ -65,7 +66,7 @@ export default buildConfig({ // Settings Users, ] as CollectionConfig[], - globals: [Site] as GlobalConfig[], + globals: [HURUMap, Site] as GlobalConfig[], ...(locales?.length ? { localization: { diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js new file mode 100644 index 000000000..abf9a0286 --- /dev/null +++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js @@ -0,0 +1,21 @@ +const HURUMap = { + slug: "hurumap", + label: "HURUMap", + access: { + read: () => true, + }, + admin: { + group: "Settings", + }, + fields: [ + { + name: "page", + label: "Explore Page", + type: "relationship", + relationTo: ["pages"], + maxDepth: 1, + }, + ], +}; + +export default HURUMap; From d5d52f52631275a684328bece10d42022caadb92 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Tue, 15 Oct 2024 14:29:46 +0300 Subject: [PATCH 13/26] Remove page variant Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../climatemappedafrica/src/lib/data/common/index.js | 7 ++++++- .../src/payload/collections/Pages.js | 12 ------------ .../src/payload/globals/HURUMap/index.js | 3 ++- 3 files changed, 8 insertions(+), 14 deletions(-) diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js index 1d38716e0..bb584f1ac 100644 --- a/apps/climatemappedafrica/src/lib/data/common/index.js +++ b/apps/climatemappedafrica/src/lib/data/common/index.js @@ -65,6 +65,11 @@ export async function getPageProps(api, context) { return null; } + const hurumap = await api.findGlobal("settings-hurumap"); + const { + page: { value: explorePage }, + } = hurumap; + const blocks = await blockify(page.blocks, api, context); const siteSettings = await api.findGlobal("settings-site"); @@ -75,6 +80,6 @@ export async function getPageProps(api, context) { blocks, footer, menus, - variant: page?.variant, + variant: page.slug === explorePage.slug ? "explore" : "default", }; } diff --git a/apps/climatemappedafrica/src/payload/collections/Pages.js b/apps/climatemappedafrica/src/payload/collections/Pages.js index 932180932..666cfd805 100644 --- a/apps/climatemappedafrica/src/payload/collections/Pages.js +++ b/apps/climatemappedafrica/src/payload/collections/Pages.js @@ -35,18 +35,6 @@ const Pages = { initCollapsed: true, }, }, - { - name: "variant", - type: "select", - options: [ - { label: "Default", value: "default" }, - { label: "Explore", value: "explore" }, - ], - defaultValue: "default", - admin: { - position: "sidebar", - }, - }, ], versions: { drafts: true, diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js index abf9a0286..6a6592f31 100644 --- a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js +++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js @@ -1,5 +1,5 @@ const HURUMap = { - slug: "hurumap", + slug: "settings-hurumap", label: "HURUMap", access: { read: () => true, @@ -14,6 +14,7 @@ const HURUMap = { type: "relationship", relationTo: ["pages"], maxDepth: 1, + required: true, }, ], }; From 906278ce8f47e7de3e39a944d896c87b8e62432d Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Tue, 15 Oct 2024 15:03:18 +0300 Subject: [PATCH 14/26] Use SX where possible --- .../Navigation/DesktopNavigation/index.js | 23 ++------ .../Navigation/ExploreNavigation/index.js | 56 ++++++------------- .../Navigation/MobileNavigation/index.js | 47 ++++++++++++---- 3 files changed, 55 insertions(+), 71 deletions(-) diff --git a/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js index 076c80c55..5a43f9cf0 100644 --- a/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js @@ -1,6 +1,5 @@ import LogoButton from "@commons-ui/core/LogoButton"; import { Grid } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; import PropTypes from "prop-types"; import React from "react"; @@ -9,27 +8,13 @@ import Link from "@/climatemappedafrica/components/Link"; import Menu from "@/climatemappedafrica/components/Menu"; import Section from "@/climatemappedafrica/components/Section"; -const useStyles = makeStyles(() => ({ - root: {}, - logoButton: { - paddingLeft: 0, - }, - section: {}, -})); - -function DesktopNavigation({ logo, menus, socialLinks, ...props }) { - const classes = useStyles(props); - +function DesktopNavigation({ logo, menus, socialLinks }) { return ( -
-
+
+
- + diff --git a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js index 4cd95c3f3..e7049ca00 100644 --- a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js @@ -12,21 +12,6 @@ import Link from "@/climatemappedafrica/components/Link"; import Section from "@/climatemappedafrica/components/Section"; const useStyles = makeStyles(({ palette, typography }) => ({ - root: {}, - section: {}, - logoButton: { - padding: 0, - }, - help: { - color: "#666666", - textAlign: "center", - backgroundColor: "#EBEBEB", - borderRadius: typography.pxToRem(60), - marginLeft: typography.pxToRem(20), - width: typography.pxToRem(48), - height: typography.pxToRem(48), - cursor: "pointer", - }, searchLabel: { display: "none", }, @@ -59,22 +44,18 @@ const useStyles = makeStyles(({ palette, typography }) => ({ })); function ExploreNavigation({ logo, variant }) { - const classes = useStyles({}); + const classes = useStyles(); const { setIsOpen } = useTour(); const openTooltip = () => { setIsOpen(true); }; return ( -
-
+
+
- + @@ -103,7 +84,16 @@ function ExploreNavigation({ logo, variant }) { id="nav-help" onClick={openTooltip} variant="h3" - className={classes.help} + sx={(theme) => ({ + color: "#666666", + textAlign: "center", + backgroundColor: "#EBEBEB", + borderRadius: theme.typography.pxToRem(60), + marginLeft: theme.typography.pxToRem(20), + width: theme.typography.pxToRem(48), + height: theme.typography.pxToRem(48), + cursor: "pointer", + })} > ? @@ -116,22 +106,8 @@ function ExploreNavigation({ logo, variant }) { } ExploreNavigation.propTypes = { - logoProps: PropTypes.shape({}), - menuProps: PropTypes.arrayOf(PropTypes.shape({})), - onOpenHelp: PropTypes.func, - socialLinks: PropTypes.arrayOf(PropTypes.shape({})), - desktopLogoProps: PropTypes.shape({ - alt: PropTypes.string, - href: PropTypes.string, - src: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string]), - width: PropTypes.number, - height: PropTypes.number, - }), - mobileLogoProps: PropTypes.shape({ - alt: PropTypes.string, - href: PropTypes.string, - src: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string]), - }), + logo: PropTypes.shape({}), + variant: PropTypes.string, }; export default ExploreNavigation; diff --git a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js index 6a166306a..5891649a0 100644 --- a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js @@ -6,6 +6,7 @@ import { DialogActions, IconButton, DialogContent, + SvgIcon, } from "@mui/material"; import makeStyles from "@mui/styles/makeStyles"; import Image from "next/image"; @@ -22,12 +23,6 @@ import Menu from "@/climatemappedafrica/components/Menu"; import Section from "@/climatemappedafrica/components/Section"; const useStyles = makeStyles(({ breakpoints, typography, palette }) => ({ - root: {}, - logoButton: { - padding: 0, - width: typography.pxToRem(254), - }, - section: {}, dialog: { padding: 0, }, @@ -180,14 +175,17 @@ function MobileNavigation({ logo, menus, socialLinks, ...props }) { }; return ( -
-
+
+
({ + padding: 0, + width: theme.typography.pxToRem(254), + })} > @@ -198,9 +196,27 @@ function MobileNavigation({ logo, menus, socialLinks, ...props }) { edge="start" size="medium" onClick={handleClickOpen} - className={classes.menuButton} + sx={(theme) => ({ + color: theme.palette.grey.dark, + background: "#F0F0F0", + borderRadius: theme.typography.pxToRem(50), + height: theme.typography.pxToRem(34), + padding: 0, + width: theme.typography.pxToRem(34), + "&:hover": { + background: "#F0F0F0", + borderRadius: theme.typography.pxToRem(50), + }, + })} > - + - + From 53bdac181ee0cbe520ded50f7ceb41dc0bfa7e8c Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Wed, 16 Oct 2024 17:33:45 +0300 Subject: [PATCH 15/26] use custom NextImageButton --- .../Navigation/DesktopNavigation/index.js | 14 +++++---- .../Navigation/ExploreNavigation/index.js | 14 +++++---- .../Navigation/MobileNavigation/index.js | 31 ++++++++----------- .../src/components/NextImageButton/index.js | 23 ++++++++++++++ .../commons-ui-next/src/ImageButton/index.js | 4 +++ packages/commons-ui-next/src/index.js | 1 + 6 files changed, 57 insertions(+), 30 deletions(-) create mode 100644 apps/climatemappedafrica/src/components/NextImageButton/index.js create mode 100644 packages/commons-ui-next/src/ImageButton/index.js diff --git a/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js index 5a43f9cf0..478b0ea60 100644 --- a/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/DesktopNavigation/index.js @@ -1,11 +1,9 @@ -import LogoButton from "@commons-ui/core/LogoButton"; import { Grid } from "@mui/material"; import PropTypes from "prop-types"; import React from "react"; -import Image from "@/climatemappedafrica/components/Image"; -import Link from "@/climatemappedafrica/components/Link"; import Menu from "@/climatemappedafrica/components/Menu"; +import NextImageButton from "@/climatemappedafrica/components/NextImageButton"; import Section from "@/climatemappedafrica/components/Section"; function DesktopNavigation({ logo, menus, socialLinks }) { @@ -14,9 +12,13 @@ function DesktopNavigation({ logo, menus, socialLinks }) {
- - - + ({ @@ -55,9 +53,13 @@ function ExploreNavigation({ logo, variant }) {
- - - + ({ @@ -179,16 +177,13 @@ function MobileNavigation({ logo, menus, socialLinks, ...props }) {
- ({ - padding: 0, - width: theme.typography.pxToRem(254), - })} - > - - + {...logo} + width={180} + height={80} + priority + /> - - - + {...logo} + width={180} + height={80} + priority + /> + {alt} + + ); +} + +export default NextImageButton; diff --git a/packages/commons-ui-next/src/ImageButton/index.js b/packages/commons-ui-next/src/ImageButton/index.js new file mode 100644 index 000000000..9dccd494f --- /dev/null +++ b/packages/commons-ui-next/src/ImageButton/index.js @@ -0,0 +1,4 @@ +// This is a temporary solution for packages still using the old commons-ui-core package. +import { ImageButton } from "@commons-ui/core"; + +export default ImageButton; diff --git a/packages/commons-ui-next/src/index.js b/packages/commons-ui-next/src/index.js index c37bd3e41..ed7c26a81 100644 --- a/packages/commons-ui-next/src/index.js +++ b/packages/commons-ui-next/src/index.js @@ -5,3 +5,4 @@ export * from "./Link"; export { default as RichTypography } from "./RichTypography"; export { default as StayInTouch } from "./StayInTouch"; +export { default as ImageButton } from "./ImageButton"; From 43187f02d29fe3463e717aa0f4ff40bab9ea5517 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Wed, 16 Oct 2024 17:43:54 +0300 Subject: [PATCH 16/26] fix icon buttons Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../components/Navigation/MobileNavigation/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js index 610cf8969..bf3ac969e 100644 --- a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js @@ -206,10 +206,10 @@ function MobileNavigation({ logo, menus, socialLinks, ...props }) { > @@ -255,8 +255,8 @@ function MobileNavigation({ logo, menus, socialLinks, ...props }) { component={MenuCloseIcon} viewBox="0 0 48 48" sx={{ - width: 48, - height: 48, + width: 32, + height: 32, }} /> From 596161fe12096e0d58622c3f046e7adb2ce8d10b Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Wed, 16 Oct 2024 17:51:35 +0300 Subject: [PATCH 17/26] Use different drawer logo Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../components/Navigation/MobileNavigation/index.js | 4 ++-- apps/climatemappedafrica/src/lib/data/common/index.js | 2 ++ .../src/payload/globals/site/GeneralTab.js | 10 ++++++++++ 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js index bf3ac969e..d5aca1090 100644 --- a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js @@ -151,7 +151,7 @@ const Transition = React.forwardRef(function Transition(props, ref) { return ; }); -function MobileNavigation({ logo, menus, socialLinks, ...props }) { +function MobileNavigation({ drawerLogo, logo, menus, socialLinks, ...props }) { const classes = useStyles(props); const [open, setOpen] = useState(false); const router = useRouter(); @@ -237,7 +237,7 @@ function MobileNavigation({ logo, menus, socialLinks, ...props }) { connect.includes(link.platform)); return { logo: imageFromMedia(title, primaryLogo.url), + drawerLogo: imageFromMedia(title, drawerLogo.url), menus, socialLinks, }; diff --git a/apps/climatemappedafrica/src/payload/globals/site/GeneralTab.js b/apps/climatemappedafrica/src/payload/globals/site/GeneralTab.js index a1fa6fb64..68be603cd 100644 --- a/apps/climatemappedafrica/src/payload/globals/site/GeneralTab.js +++ b/apps/climatemappedafrica/src/payload/globals/site/GeneralTab.js @@ -35,6 +35,16 @@ const GeneralTab = { }, }, }), + image({ + overrides: { + name: "drawerLogo", + required: true, + localized: true, + admin: { + description: "Shown on mobile navigation drawer.", + }, + }, + }), image({ overrides: { name: "secondaryLogo", From 19a04355e52abffa6f2645b191bbbce7b982de83 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Wed, 16 Oct 2024 18:05:57 +0300 Subject: [PATCH 18/26] Remove unused component Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../Navigation/MobileNavigation/index.js | 1 + .../src/components/SocialMediaIcons/index.js | 88 ------------------- .../SocialMediaIcons/index.stories.js | 26 ------ 3 files changed, 1 insertion(+), 114 deletions(-) delete mode 100644 apps/climatemappedafrica/src/components/SocialMediaIcons/index.js delete mode 100644 apps/climatemappedafrica/src/components/SocialMediaIcons/index.stories.js diff --git a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js index d5aca1090..1628a8dc3 100644 --- a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js @@ -296,6 +296,7 @@ function MobileNavigation({ drawerLogo, logo, menus, socialLinks, ...props }) { } MobileNavigation.propTypes = { + drawerLogo: PropTypes.shape({}), logo: PropTypes.shape({}), menus: PropTypes.arrayOf(PropTypes.shape({})), socialLinks: PropTypes.arrayOf(PropTypes.shape({})), diff --git a/apps/climatemappedafrica/src/components/SocialMediaIcons/index.js b/apps/climatemappedafrica/src/components/SocialMediaIcons/index.js deleted file mode 100644 index 2b02c0b61..000000000 --- a/apps/climatemappedafrica/src/components/SocialMediaIcons/index.js +++ /dev/null @@ -1,88 +0,0 @@ -import { Grid, IconButton } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; -import Image from "next/image"; -import PropTypes from "prop-types"; -import React from "react"; - -import Link from "@/climatemappedafrica/components/Link"; - -const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({ - root: { - paddingTop: typography.pxToRem(32), - [breakpoints.up("lg")]: { - paddingTop: typography.pxToRem(4), - }, - }, - image: { - filter: - "invert(15%) sepia(98%) saturate(6602%) hue-rotate(192deg) brightness(97%) contrast(101%);", - [breakpoints.up("lg")]: { - filter: - "invert(0%) sepia(7%) saturate(27%) hue-rotate(270deg) brightness(102%) contrast(109%)", - }, - }, - button: { - background: palette.primary.light, - borderRadius: 50, - width: 48, - height: 48, - margin: typography.pxToRem(3.2), - "&:hover,&:focus": { - background: palette.primary.light, - borderRadius: 60, - }, - [breakpoints.up("lg")]: { - background: "#EBEBEB", - "&:hover,&:focus": { - background: "#EBEBEB", - borderRadius: 60, - }, - }, - }, -})); - -function SocialMediaIcons({ socialLinks, ...props }) { - const classes = useStyles(props); - const viewBoxValue = "0 0 48 48"; - - if (!socialLinks?.length) { - return null; - } - return ( - - {socialLinks.map(({ href, label, src }) => ( - - {label} - - ))} - - ); -} - -SocialMediaIcons.propTypes = { - socialLinks: PropTypes.arrayOf( - PropTypes.shape({ - url: PropTypes.string, - label: PropTypes.string, - src: PropTypes.string, - }), - ), -}; - -export default SocialMediaIcons; diff --git a/apps/climatemappedafrica/src/components/SocialMediaIcons/index.stories.js b/apps/climatemappedafrica/src/components/SocialMediaIcons/index.stories.js deleted file mode 100644 index ddb4348c2..000000000 --- a/apps/climatemappedafrica/src/components/SocialMediaIcons/index.stories.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react"; - -import SocialMediaIcons from "."; - -import { navigationArgs } from "@/climatemappedafrica/config"; - -export default { - title: "Components/SocialMediaIcons", - argTypes: { - socialLinks: { - control: { - type: "array", - }, - }, - }, -}; - -function Template({ ...args }) { - return ; -} - -export const Default = Template.bind({}); - -Default.args = { - socialLinks: navigationArgs.socialLinks, -}; From 8e355f36e6c6b6ecdd45b3fc15b8f231225445af Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Thu, 17 Oct 2024 15:06:13 +0300 Subject: [PATCH 19/26] Remove Base Page --- .../src/components/Page/Base.js | 64 ------------------- .../src/components/Page/index.js | 18 ------ .../src/pages/[[...slug]].js | 49 ++++++++++++-- 3 files changed, 43 insertions(+), 88 deletions(-) delete mode 100644 apps/climatemappedafrica/src/components/Page/Base.js delete mode 100644 apps/climatemappedafrica/src/components/Page/index.js diff --git a/apps/climatemappedafrica/src/components/Page/Base.js b/apps/climatemappedafrica/src/components/Page/Base.js deleted file mode 100644 index d297d804b..000000000 --- a/apps/climatemappedafrica/src/components/Page/Base.js +++ /dev/null @@ -1,64 +0,0 @@ -import { useMediaQuery } from "@mui/material"; -import { useTheme } from "@mui/material/styles"; -import { NextSeo } from "next-seo"; -import PropTypes from "prop-types"; -import React from "react"; - -import Footer from "@/climatemappedafrica/components/Footer"; -import Navigation from "@/climatemappedafrica/components/Navigation"; - -/** - * Base page that can be used to build all other pages. - */ -function BasePage({ children, menus, variant, footer: footerProps }) { - const seo = {}; - const theme = useTheme(); - - const isDesktop = useMediaQuery(theme.breakpoints.up("lg")); - - const pageSeo = {}; - pageSeo.title = seo?.title || undefined; - pageSeo.description = seo?.metaDesc || undefined; - pageSeo.canonical = seo?.canonical || undefined; - if (seo?.opengraphType || seo?.opengraphImage) { - pageSeo.openGraph = {}; - if (seo.opengraphImage) { - pageSeo.openGraph.images = [ - { - url: seo.opengraphImage, - alt: seo.title || undefined, - }, - ]; - } - if (seo.opengraphType) { - pageSeo.openGraph.type = seo.opengraphType; - } - } - - return ( - <> - - - {children} - {!(variant === "explore" && isDesktop) &&
} - - ); -} - -BasePage.propTypes = { - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, - ]), - menus: PropTypes.shape({ - footerMenu: PropTypes.arrayOf(PropTypes.shape({})), - primaryMenu: PropTypes.arrayOf(PropTypes.shape({})), - }), - variant: PropTypes.string, -}; - -export default BasePage; diff --git a/apps/climatemappedafrica/src/components/Page/index.js b/apps/climatemappedafrica/src/components/Page/index.js deleted file mode 100644 index 4d32d3f87..000000000 --- a/apps/climatemappedafrica/src/components/Page/index.js +++ /dev/null @@ -1,18 +0,0 @@ -import PropTypes from "prop-types"; -import React from "react"; - -import Base from "./Base"; - -/** - * Page component that adds error handling. - * TODO(kilemensi): Add error handling once we have error page designs - */ -function Page(props) { - return ; -} - -Page.propTypes = { - errorCode: PropTypes.number, -}; - -export default Page; diff --git a/apps/climatemappedafrica/src/pages/[[...slug]].js b/apps/climatemappedafrica/src/pages/[[...slug]].js index 566308264..893b43ad8 100644 --- a/apps/climatemappedafrica/src/pages/[[...slug]].js +++ b/apps/climatemappedafrica/src/pages/[[...slug]].js @@ -1,8 +1,12 @@ +import { useMediaQuery } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; +import { NextSeo } from "next-seo"; import React from "react"; import { SWRConfig } from "swr"; import AboutTeam from "@/climatemappedafrica/components/AboutTeam"; -import Page from "@/climatemappedafrica/components/Page"; +import Footer from "@/climatemappedafrica/components/Footer"; +import Navigation from "@/climatemappedafrica/components/Navigation"; import Summary from "@/climatemappedafrica/components/Summary"; import { getPageServerSideProps } from "@/climatemappedafrica/lib/data"; @@ -11,9 +15,35 @@ const componentsBySlugs = { team: AboutTeam, }; -function Index({ blocks, fallback, ...props }) { - if (!blocks?.length) { - return null; +function Index({ + blocks, + menus, + footer: footerProps, + seo = {}, + variant, + fallback, +}) { + const theme = useTheme(); + + const isDesktop = useMediaQuery(theme.breakpoints.up("lg")); + + const pageSeo = {}; + pageSeo.title = seo?.title || undefined; + pageSeo.description = seo?.metaDesc || undefined; + pageSeo.canonical = seo?.canonical || undefined; + if (seo?.opengraphType || seo?.opengraphImage) { + pageSeo.openGraph = {}; + if (seo.opengraphImage) { + pageSeo.openGraph.images = [ + { + url: seo.opengraphImage, + alt: seo.title || undefined, + }, + ]; + } + if (seo.opengraphType) { + pageSeo.openGraph.type = seo.opengraphType; + } } let PageConfig = React.Fragment; @@ -23,7 +53,13 @@ function Index({ blocks, fallback, ...props }) { pageConfigProps = { value: { fallback } }; } return ( - + <> + + {blocks.map((block) => { const Component = componentsBySlugs[block.slug]; @@ -33,7 +69,8 @@ function Index({ blocks, fallback, ...props }) { return ; })} - + {!(variant === "explore" && isDesktop) &&
} + ); } From 6a1a7488b96c15b253e3e7aedb8a28cce36a3400 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Thu, 17 Oct 2024 15:08:44 +0300 Subject: [PATCH 20/26] rename getMenus to getNavBar Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- apps/climatemappedafrica/src/lib/data/common/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js index 5255c6b41..d50c98804 100644 --- a/apps/climatemappedafrica/src/lib/data/common/index.js +++ b/apps/climatemappedafrica/src/lib/data/common/index.js @@ -33,7 +33,7 @@ function getFooter(siteSettings) { }; } -function getMenus(siteSettings) { +function getNavBar(siteSettings) { const { connect: { links = [] }, primaryNavigation: { menus = [], connect = [] }, @@ -76,7 +76,7 @@ export async function getPageProps(api, context) { const siteSettings = await api.findGlobal("settings-site"); const footer = getFooter(siteSettings); - const menus = getMenus(siteSettings); + const menus = getNavBar(siteSettings); return { blocks, From 80199d5392fec8ce39bcc6a183a87d3a815d6ec3 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Thu, 17 Oct 2024 15:35:10 +0300 Subject: [PATCH 21/26] Remove variant from page --- .../src/components/Footer/index.js | 168 ++++++++++-------- .../src/components/Navigation/index.js | 2 +- .../src/lib/data/common/index.js | 12 +- .../src/pages/[[...slug]].js | 19 +- 4 files changed, 102 insertions(+), 99 deletions(-) diff --git a/apps/climatemappedafrica/src/components/Footer/index.js b/apps/climatemappedafrica/src/components/Footer/index.js index eff78692f..7da3df444 100644 --- a/apps/climatemappedafrica/src/components/Footer/index.js +++ b/apps/climatemappedafrica/src/components/Footer/index.js @@ -1,7 +1,8 @@ import { QuickLinks, LogoButton, Copyright } from "@commons-ui/core"; import { Link, StayInTouch } from "@commons-ui/next"; import { RichText } from "@commons-ui/payload"; -import { Grid } from "@mui/material"; +import { Grid, useMediaQuery } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import React from "react"; import useStyles from "./useStyles"; @@ -9,93 +10,106 @@ import useStyles from "./useStyles"; import Section from "@/climatemappedafrica/components/Section"; function Footer(props) { - const { title, connect, description, logo: logoProps, links } = props; + const { + title, + connect, + description, + logo: logoProps, + links, + variant, + } = props; const classes = useStyles(props); + + const theme = useTheme(); + + const isDesktop = useMediaQuery(theme.breakpoints.up("lg")); return ( -
-
- - - {logoProps && ( - +
+ + + {logoProps && ( + + )} + + + {description && ( + + )} + - )} - - - {description && ( - + + - )} - - - - - - {links && ( - + + {links && ( + + )} + + + - )} - - - + - -
-
+
+
+ ) ); } diff --git a/apps/climatemappedafrica/src/components/Navigation/index.js b/apps/climatemappedafrica/src/components/Navigation/index.js index 866c319f1..78cd4a134 100644 --- a/apps/climatemappedafrica/src/components/Navigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/index.js @@ -45,7 +45,7 @@ function Navigation({ variant, ...props }) { > {variant?.toLowerCase() === "explore" ? ( diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js index d50c98804..ab0341049 100644 --- a/apps/climatemappedafrica/src/lib/data/common/index.js +++ b/apps/climatemappedafrica/src/lib/data/common/index.js @@ -4,7 +4,7 @@ export function imageFromMedia(alt, url) { return { alt, src: url }; } -function getFooter(siteSettings) { +function getFooter(siteSettings, variant) { const { connect, footerNavigation, @@ -30,10 +30,11 @@ function getFooter(siteSettings) { }, newsletter, title, + variant, }; } -function getNavBar(siteSettings) { +function getNavBar(siteSettings, variant) { const { connect: { links = [] }, primaryNavigation: { menus = [], connect = [] }, @@ -48,6 +49,7 @@ function getNavBar(siteSettings) { drawerLogo: imageFromMedia(title, drawerLogo.url), menus, socialLinks, + variant, }; } @@ -73,15 +75,15 @@ export async function getPageProps(api, context) { } = hurumap; const blocks = await blockify(page.blocks, api, context); + const variant = page.slug === explorePage.slug ? "explore" : "default"; const siteSettings = await api.findGlobal("settings-site"); - const footer = getFooter(siteSettings); - const menus = getNavBar(siteSettings); + const footer = getFooter(siteSettings, variant); + const menus = getNavBar(siteSettings, variant); return { blocks, footer, menus, - variant: page.slug === explorePage.slug ? "explore" : "default", }; } diff --git a/apps/climatemappedafrica/src/pages/[[...slug]].js b/apps/climatemappedafrica/src/pages/[[...slug]].js index 893b43ad8..43327abb1 100644 --- a/apps/climatemappedafrica/src/pages/[[...slug]].js +++ b/apps/climatemappedafrica/src/pages/[[...slug]].js @@ -1,5 +1,3 @@ -import { useMediaQuery } from "@mui/material"; -import { useTheme } from "@mui/material/styles"; import { NextSeo } from "next-seo"; import React from "react"; import { SWRConfig } from "swr"; @@ -15,18 +13,7 @@ const componentsBySlugs = { team: AboutTeam, }; -function Index({ - blocks, - menus, - footer: footerProps, - seo = {}, - variant, - fallback, -}) { - const theme = useTheme(); - - const isDesktop = useMediaQuery(theme.breakpoints.up("lg")); - +function Index({ blocks, menus, footer: footerProps, seo = {}, fallback }) { const pageSeo = {}; pageSeo.title = seo?.title || undefined; pageSeo.description = seo?.metaDesc || undefined; @@ -54,7 +41,7 @@ function Index({ } return ( <> - + ; })} - {!(variant === "explore" && isDesktop) &&
} +
); } From c483d4991812cea40a86d8d6be8f46fc905df9c1 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Fri, 18 Oct 2024 13:29:38 +0300 Subject: [PATCH 22/26] Update apps/climatemappedafrica/src/components/DropdownSearch/index.js Co-authored-by: Clemence Kyara --- .../src/components/DropdownSearch/index.js | 30 ++++++------------- 1 file changed, 9 insertions(+), 21 deletions(-) diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/index.js b/apps/climatemappedafrica/src/components/DropdownSearch/index.js index 575b36322..bccfa2356 100644 --- a/apps/climatemappedafrica/src/components/DropdownSearch/index.js +++ b/apps/climatemappedafrica/src/components/DropdownSearch/index.js @@ -119,27 +119,15 @@ function DropdownSearch({ size="small" className={classes.button} > - {variant === "explore" ? ( - - ) : ( - - )} + ); From 7d644f81711484f1dd2ed108120a996dd4aa13bf Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Fri, 18 Oct 2024 13:10:43 +0300 Subject: [PATCH 23/26] Fix footer display --- .../src/components/Footer/index.js | 172 +++++++++--------- 1 file changed, 90 insertions(+), 82 deletions(-) diff --git a/apps/climatemappedafrica/src/components/Footer/index.js b/apps/climatemappedafrica/src/components/Footer/index.js index 7da3df444..11e564b13 100644 --- a/apps/climatemappedafrica/src/components/Footer/index.js +++ b/apps/climatemappedafrica/src/components/Footer/index.js @@ -1,8 +1,7 @@ import { QuickLinks, LogoButton, Copyright } from "@commons-ui/core"; import { Link, StayInTouch } from "@commons-ui/next"; import { RichText } from "@commons-ui/payload"; -import { Grid, useMediaQuery } from "@mui/material"; -import { useTheme } from "@mui/material/styles"; +import { Box, Grid } from "@mui/material"; import React from "react"; import useStyles from "./useStyles"; @@ -20,96 +19,105 @@ function Footer(props) { } = props; const classes = useStyles(props); - const theme = useTheme(); - - const isDesktop = useMediaQuery(theme.breakpoints.up("lg")); return ( - !(variant === "explore" && isDesktop) && ( -
-
- - - {logoProps && ( - - )} - - - {description && ( - - )} - ({ + display: { + xs: "block", + lg: variant !== "explore" ? "block" : "none", + }, + background: theme.palette.grey.dark, + height: "auto", + padding: `${theme.typography.pxToRem(80)} 0`, + [theme.breakpoints.up("md")]: { + paddingTop: `${theme.typography.pxToRem(58)}`, + paddingBottom: `${theme.typography.pxToRem(82)}`, + }, + })} + > +
+ + + {logoProps && ( + - - - + + {description && ( + - - {links && ( - - )} - - - + )} + + + + + + {links && ( + - + )} + + + -
-
- ) + +
+ ); } From 48de42b59916071b8dfd6272db856f801534b54f Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Fri, 18 Oct 2024 13:25:41 +0300 Subject: [PATCH 24/26] Remove usestyles --- .../src/components/Footer/index.js | 44 ++++++++---- .../src/components/Footer/useStyles.js | 71 ------------------- 2 files changed, 29 insertions(+), 86 deletions(-) diff --git a/apps/climatemappedafrica/src/components/Footer/index.js b/apps/climatemappedafrica/src/components/Footer/index.js index 11e564b13..57e721b1f 100644 --- a/apps/climatemappedafrica/src/components/Footer/index.js +++ b/apps/climatemappedafrica/src/components/Footer/index.js @@ -1,4 +1,4 @@ -import { QuickLinks, LogoButton, Copyright } from "@commons-ui/core"; +import { QuickLinks, Copyright } from "@commons-ui/core"; import { Link, StayInTouch } from "@commons-ui/next"; import { RichText } from "@commons-ui/payload"; import { Box, Grid } from "@mui/material"; @@ -6,6 +6,7 @@ import React from "react"; import useStyles from "./useStyles"; +import NextImageButton from "@/climatemappedafrica/components/NextImageButton"; import Section from "@/climatemappedafrica/components/Section"; function Footer(props) { @@ -35,20 +36,22 @@ function Footer(props) { }, })} > -
+
{logoProps && ( - ({ + margin: "0 auto", + padding: 0, + [theme.breakpoints.up("lg")]: { + margin: 0, + }, + })} /> )} @@ -56,7 +59,15 @@ function Footer(props) { {description && ( ({ + color: theme.palette.text.secondary, + padding: `${theme.typography.pxToRem(32)} 0`, + fontSize: theme.typography.subtitle1.fontSize, + textAlign: "center", + [theme.breakpoints.up("lg")]: { + textAlign: "left", + }, + })} elements={description} typographyProps={{ LinkProps: { @@ -80,9 +91,12 @@ function Footer(props) { ({ + margin: "0 auto", + flexDirection: "row", + justifyContent: "center", + marginTop: theme.typography.pxToRem(44.19), + })} > {links && ( diff --git a/apps/climatemappedafrica/src/components/Footer/useStyles.js b/apps/climatemappedafrica/src/components/Footer/useStyles.js index 603fb2cc9..3eb03a86b 100644 --- a/apps/climatemappedafrica/src/components/Footer/useStyles.js +++ b/apps/climatemappedafrica/src/components/Footer/useStyles.js @@ -1,68 +1,6 @@ import makeStyles from "@mui/styles/makeStyles"; const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({ - root: { - background: palette.grey.dark, - height: "auto", - padding: `${typography.pxToRem(80)} 0`, - [breakpoints.up("md")]: { - paddingTop: `${typography.pxToRem(58)}`, - paddingBottom: `${typography.pxToRem(82)}`, - }, - }, - section: {}, - logoButton: { - margin: "0 auto", - padding: 0, - [breakpoints.up("lg")]: { - margin: 0, - }, - }, - allLinks: { - margin: "0 auto", - flexDirection: "row", - justifyContent: "center", - marginTop: typography.pxToRem(44.19), - }, - stayInTouch: { - display: "flex", - flexDirection: "column", - alignItems: "center", - letterspacing: typography.pxToRem(0.7), - [breakpoints.up("lg")]: { - alignItems: "flex-start", - }, - }, - stayInTouchIcon: { - height: "auto", - objectFit: "none", - display: "flex", - width: "auto", - }, - stayInTouchText: { - color: palette.text.secondary, - fontSize: typography.subtitle2.fontSize, - fontWeight: "bold", - padding: `${typography.pxToRem(10)} ${typography.pxToRem(8)}`, - [breakpoints.up("lg")]: { - padding: 0, - }, - }, - stayInTouchLink: { - padding: 0, - }, - stayInTouchLinks: { - justifyContent: "center", - marginLeft: typography.pxToRem(-14), // (48 - 20) / 2 - marginTop: typography.pxToRem(24), - "& > a": { - height: typography.pxToRem(48), - width: typography.pxToRem(48), - borderRight: "none", - display: "flex", - justifyContent: "center", - }, - }, quickLinkRoot: { textAlign: "center", padding: `${typography.pxToRem(32)} 0 `, @@ -93,15 +31,6 @@ const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({ fontSize: typography.subtitle2.fontSize, fontWeight: "bold", }, - description: { - color: palette.text.secondary, - padding: `${typography.pxToRem(32)} 0`, - fontSize: typography.subtitle1.fontSize, - textAlign: "center", - [breakpoints.up("lg")]: { - textAlign: "left", - }, - }, copyright: { margin: 0, display: "flex", From 79baf196e576b8883cbe8cba8ee0abdebe16e336 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Fri, 18 Oct 2024 13:30:20 +0300 Subject: [PATCH 25/26] Fix null SEO --- apps/climatemappedafrica/src/pages/[[...slug]].js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/climatemappedafrica/src/pages/[[...slug]].js b/apps/climatemappedafrica/src/pages/[[...slug]].js index 83c3f39d8..d5b79793e 100644 --- a/apps/climatemappedafrica/src/pages/[[...slug]].js +++ b/apps/climatemappedafrica/src/pages/[[...slug]].js @@ -17,16 +17,16 @@ const componentsBySlugs = { function Index({ blocks, menus, footer: footerProps, seo = {}, fallback }) { const pageSeo = {}; - pageSeo.title = seo?.title || undefined; - pageSeo.description = seo?.metaDesc || undefined; - pageSeo.canonical = seo?.canonical || undefined; + pageSeo.title = seo?.title || null; + pageSeo.description = seo?.metaDesc || null; + pageSeo.canonical = seo?.canonical || null; if (seo?.opengraphType || seo?.opengraphImage) { pageSeo.openGraph = {}; if (seo.opengraphImage) { pageSeo.openGraph.images = [ { url: seo.opengraphImage, - alt: seo.title || undefined, + alt: seo.title || null, }, ]; } From 97e03f73097fb62c309427c5e8446d1bf3c4ff7a Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Fri, 18 Oct 2024 13:34:46 +0300 Subject: [PATCH 26/26] Reduce duplicates --- .../src/components/DropdownSearch/index.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/index.js b/apps/climatemappedafrica/src/components/DropdownSearch/index.js index bccfa2356..dfb33c3f3 100644 --- a/apps/climatemappedafrica/src/components/DropdownSearch/index.js +++ b/apps/climatemappedafrica/src/components/DropdownSearch/index.js @@ -112,6 +112,15 @@ function DropdownSearch({ } }; + let iconComponent = SearchIcon; + let iconBorder; + if (variant === "explore") { + iconComponent = IconProp; + iconBorder = { + borderRadius: "50%", + border: "2px solid #fff", + }; + } const searchIconButton = (