Merge pull request #945 from CodeForAfrica/ft/climatemapped-navigation

ClimateMapped Navigation

apps/climatemappedafrica/payload.config.ts

@@ -16,6 +16,7 @@ import Members from "./src/payload/collections/Members";
 import Pages from "./src/payload/collections/Pages";
 import Users from "./src/payload/collections/Users";
 
+import HURUMap from "./src/payload/globals/HURUMap";
 import Site from "./src/payload/globals/site";
 
 const projectDir = process.cwd();
@@ -65,7 +66,7 @@ export default buildConfig({
     // Settings
     Users,
   ] as CollectionConfig[],
-  globals: [Site] as GlobalConfig[],
+  globals: [HURUMap, Site] as GlobalConfig[],
   ...(locales?.length
     ? {
         localization: {

apps/climatemappedafrica/src/components/DropdownSearch/index.js

@@ -4,9 +4,9 @@ import {
   Typography,
   List,
   ListItem,
+  SvgIcon,
 } 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 +66,7 @@ function DropdownSearch({
   label = "Search for a location",
   locations,
   onClick,
-  icon: iconProp = SearchIcon,
+  icon: IconProp = SearchIcon,
   placeholder,
   variant,
   ...props
@@ -112,16 +112,31 @@ function DropdownSearch({
     }
   };
 
-  const icon =
-    !suggestions?.length || variant === "explore" ? iconProp : SearchIcon;
+  let iconComponent = SearchIcon;
+  let iconBorder;
+  if (variant === "explore") {
+    iconComponent = IconProp;
+    iconBorder = {
+      borderRadius: "50%",
+      border: "2px solid #fff",
+    };
+  }
   const searchIconButton = (
     <IconButton
       color="primary"
       onClick={handleClickSearch}
       size="small"
       className={classes.button}
     >
-      <Image src={icon} width={48} height={48} alt="search" />
+      <SvgIcon
+        component={iconComponent}
+        viewBox="0 0 48 48"
+        sx={{
+          width: 48,
+          height: 48,
+          ...iconBorder,
+        }}
+      />
     </IconButton>
   );
 
@@ -171,7 +186,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,

apps/climatemappedafrica/src/components/Footer/index.js

@@ -1,40 +1,73 @@
-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 { Grid } from "@mui/material";
+import { Box, Grid } from "@mui/material";
 import React from "react";
 
 import useStyles from "./useStyles";
 
+import NextImageButton from "@/climatemappedafrica/components/NextImageButton";
 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);
+
   return (
-    <div className={classes.root}>
-      <Section
-        classes={{
-          root: classes.section,
-        }}
-      >
+    <Box
+      sx={(theme) => ({
+        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)}`,
+        },
+      })}
+    >
+      <Section>
         <Grid container direction="row" justifyContent="space-between">
           <Grid item xs={12} container>
             {logoProps && (
-              <LogoButton
+              <NextImageButton
                 {...logoProps}
-                component="a"
-                classes={{
-                  root: classes.logoButton,
-                }}
+                width={220}
+                height={120}
+                priority
+                sx={(theme) => ({
+                  margin: "0 auto",
+                  padding: 0,
+                  [theme.breakpoints.up("lg")]: {
+                    margin: 0,
+                  },
+                })}
               />
             )}
           </Grid>
           <Grid item xs={12} lg={6}>
             {description && (
               <RichText
                 variant="body1"
-                className={classes.description}
+                sx={(theme) => ({
+                  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: {
@@ -58,9 +91,12 @@ function Footer(props) {
           <Grid item xs={12} lg={4}>
             <Grid
               container
-              classes={{
-                root: classes.allLinks,
-              }}
+              sx={(theme) => ({
+                margin: "0 auto",
+                flexDirection: "row",
+                justifyContent: "center",
+                marginTop: theme.typography.pxToRem(44.19),
+              })}
             >
               <Grid item xs={12} lg={6}>
                 {links && (
@@ -95,7 +131,7 @@ function Footer(props) {
           </Grid>
         </Grid>
       </Section>
-    </div>
+    </Box>
   );
 }
 

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",

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: {
@@ -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,
+              },
+            })}
           >
             <Typography variant="body1" className={classes.label}>
               {item.label}
@@ -137,7 +142,24 @@ function Menu({ links, children, socialLinks, ...props }) {
         </Grid>
       ))}
       {children}
-      <SocialMediaIcons socialLinks={socialLinks} />
+      <StayInTouch
+        links={socialLinks}
+        LinkProps={{
+          component: Link,
+          sx: {
+            color: "text.primary",
+            backgroundColor: "#EBEBEB",
+            borderRadius: 50,
+            width: 42,
+            height: 42,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            margin: "3.2px",
+          },
+        }}
+        alignItems="flex-start"
+      />
     </Grid>
   );
 }