From 90c17436fcedc59a0a09fa1ab9fc4f966734310c Mon Sep 17 00:00:00 2001 From: Kevin Koech Date: Mon, 11 Nov 2024 15:11:09 +0300 Subject: [PATCH 1/5] Fixes Climatemapped Africa styling issues --- .../src/components/AboutTeam/AboutTeam.js | 29 ++--- .../DropdownSearch/DownloadSearch.js | 3 +- .../src/components/Footer/index.js | 8 +- .../src/components/Footer/useStyles.js | 4 +- .../src/components/Hero/Hero.js | 75 +++++-------- .../src/components/Hero/Hero.snap.js | 102 +++++++----------- .../src/components/Hero/Map.js | 48 +++++++-- .../src/components/HowItWorks/index.js | 3 + .../src/components/Menu/index.js | 26 +++-- .../Navigation/DesktopNavigation/index.js | 6 +- 10 files changed, 150 insertions(+), 154 deletions(-) diff --git a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js index f5167ad09..a33d2d1c6 100644 --- a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js +++ b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js @@ -1,6 +1,5 @@ -import { Box, Grid, Typography, useMediaQuery } from "@mui/material"; +import { Box, Typography, useMediaQuery } from "@mui/material"; import { useTheme } from "@mui/material/styles"; -import { chunk, uniqueId } from "lodash"; import PropTypes from "prop-types"; import React, { useRef } from "react"; @@ -16,10 +15,12 @@ import useStyles from "./useStyles"; const responsive = { desktop: { - items: 1, + items: 4, + partialVisibilityGutter: 30, }, tablet: { - items: 1, + items: 2, + partialVisibilityGutter: 30, }, }; @@ -33,8 +34,6 @@ function AboutTeam({ title, members: membersProp, ...props }) { if (!membersProp?.length) { return null; } - const chunkSize = isMdUp ? 4 : 2; - const members = chunk(membersProp, chunkSize); const scrollToTeam = () => { if (ref.current && !isMdUp) { ref.current.scrollIntoView({ behavior: "smooth" }); @@ -69,18 +68,12 @@ function AboutTeam({ title, members: membersProp, ...props }) { responsive={responsive} classes={{ dotList: classes.dotList }} > - {members.map((membersChunks) => ( - - {membersChunks.map((member) => ( - - - - ))} - + {membersProp.map((member) => ( + ))} diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js b/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js index b1f4b04ff..5fd43ea1e 100644 --- a/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js +++ b/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js @@ -22,6 +22,7 @@ function DropdownSearch({ icon: IconProp = SearchIcon, placeholder, variant, + sx, ...props }) { const router = useRouter(); @@ -96,7 +97,7 @@ function DropdownSearch({ ); return ( - + {label && ( ({ copyrightText: { color: palette.text.secondary, order: 5, - padding: `0 ${typography.pxToRem(5)}`, + padding: `0 ${typography.pxToRem(5)} 0 0`, [breakpoints.up("lg")]: { - padding: `0 ${typography.pxToRem(10)}`, + padding: `0 ${typography.pxToRem(10)} 0 0`, }, }, })); diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.js b/apps/climatemappedafrica/src/components/Hero/Hero.js index 91239fb64..919d2216c 100644 --- a/apps/climatemappedafrica/src/components/Hero/Hero.js +++ b/apps/climatemappedafrica/src/components/Hero/Hero.js @@ -2,9 +2,7 @@ import { RichTypography } from "@commons-ui/legacy"; import { Box, Grid, useMediaQuery } from "@mui/material"; import dynamic from "next/dynamic"; import PropTypes from "prop-types"; -import React, { useState } from "react"; - -import Legend from "./Legend"; +import React from "react"; import heroBg from "@/climatemappedafrica/assets/images/bg-map-white.jpg"; import DropdownSearch from "@/climatemappedafrica/components/DropdownSearch"; @@ -26,11 +24,9 @@ function Hero({ level, explorePageSlug, averageTemperature, - legend, ...props }) { const isUpLg = useMediaQuery((theme) => theme.breakpoints.up("lg")); - const [hoverGeo, setHoverGeo] = useState(null); const continentLevelZoom = isUpLg ? 3 : 2.1; // We have to reduce the zoom level for continent so that all countries(Including islands) are visible within the designs const countryLevelZoom = isUpLg ? 6 : 5.25; const zoom = level === "continent" ? continentLevelZoom : countryLevelZoom; @@ -58,7 +54,14 @@ function Hero({ }} > - + {title} - - - {comment} - + + + + {comment} + + {/* Since map is dynamic-ally loaded, no need for implementation="css" */} @@ -112,34 +114,11 @@ function Hero({ tileLayer={{ url: "https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png", }} - onLayerMouseOver={setHoverGeo} featuredLocations={featuredLocations} explorePageSlug={explorePageSlug} {...props} /> ) : null} - - - - {hoverGeo} - - diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js index a0e855047..e8ba6f322 100644 --- a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js +++ b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js @@ -23,7 +23,7 @@ exports[` renders unchanged 1`] = ` class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root" >
renders unchanged 1`] = `
-
-
-
+ Search for a location +

-
-
-
-
-
-
-
+
+
+
diff --git a/apps/climatemappedafrica/src/components/Hero/Map.js b/apps/climatemappedafrica/src/components/Hero/Map.js index c89c1c8a4..6c84558de 100644 --- a/apps/climatemappedafrica/src/components/Hero/Map.js +++ b/apps/climatemappedafrica/src/components/Hero/Map.js @@ -1,9 +1,11 @@ +import { RichTypography } from "@commons-ui/legacy"; import { Box, useTheme } from "@mui/material"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; -import React from "react"; +import React, { useState } from "react"; import { MapContainer, GeoJSON } from "react-leaflet"; +import Legend from "./Legend"; import "leaflet/dist/leaflet.css"; function Map({ @@ -19,14 +21,16 @@ function Map({ weight: 1, dashArray: "2", }, - onLayerMouseOver, featuredLocations, explorePageSlug, choropleth, + legend, + averageTemperature, }) { const router = useRouter(); const regionCodes = featuredLocations?.map(({ code }) => code); + const [hoverGeo, setHoverGeo] = useState(null); const theme = useTheme(); const onEachFeature = (feature, layer) => { const choroplethColor = choropleth?.find?.( @@ -41,7 +45,7 @@ function Map({ if (regionCodes.includes(feature.properties.code?.toLowerCase())) { layer.setStyle(geoJSONStyles); layer.on("mouseover", () => { - onLayerMouseOver(feature.properties.name.toLowerCase()); + setHoverGeo(feature.properties.name.toLowerCase()); if (explorePageSlug) { layer.setStyle({ fillColor: choroplethColor?.fillColor, @@ -50,7 +54,7 @@ function Map({ } }); layer.on("mouseout", () => { - onLayerMouseOver(null); + setHoverGeo(null); layer.setStyle({ ...choroplethColor, fillOpacity: 1, weight: 1 }); }); layer.on("click", () => { @@ -64,12 +68,16 @@ function Map({ }; return ( - + + + + + {hoverGeo} + + ); } @@ -115,11 +149,11 @@ Map.propTypes = { styles: PropTypes.shape({}), boundary: PropTypes.shape({}), geoJSONStyles: PropTypes.shape({}), - onLayerMouseOver: PropTypes.func, featuredLocations: PropTypes.arrayOf( PropTypes.shape({ code: PropTypes.string }), ), explorePageSlug: PropTypes.string, + averageTemperature: PropTypes.string, }; export default Map; diff --git a/apps/climatemappedafrica/src/components/HowItWorks/index.js b/apps/climatemappedafrica/src/components/HowItWorks/index.js index 9b3dd3d90..c1294744e 100644 --- a/apps/climatemappedafrica/src/components/HowItWorks/index.js +++ b/apps/climatemappedafrica/src/components/HowItWorks/index.js @@ -108,6 +108,9 @@ function HowItWorks({ xs: "120%", md: "auto", }, + img: { + objectFit: "cover", + }, }, "& .video-js .vjs-big-play-button": { display: "none", diff --git a/apps/climatemappedafrica/src/components/Menu/index.js b/apps/climatemappedafrica/src/components/Menu/index.js index 31ec0c843..9817be406 100644 --- a/apps/climatemappedafrica/src/components/Menu/index.js +++ b/apps/climatemappedafrica/src/components/Menu/index.js @@ -59,12 +59,6 @@ const useStyles = makeStyles(({ typography, breakpoints, palette }) => ({ }, textTransform: "uppercase", }, - menu: { - margin: 0, - [breakpoints.up("lg")]: { - margin: `0 ${typography.pxToRem(12.8)}`, - }, - }, text: { "&::after": { content: '""', @@ -115,7 +109,25 @@ function Menu({ links, children, socialLinks, ...props }) { return ( {links.map((item, index) => ( - + ({ + margin: { + xs: 0, + lg: `0 ${typography.pxToRem(12.8)}`, + }, + "&:last-child": { + margin: { + xs: 0, + lg: 0, + }, + "& > a": { + paddingRight: 0, + }, + }, + })} + >