From 1871fffbc6bfa79d00e04235a70003d62f9a9030 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 25 Nov 2024 15:17:03 +0300 Subject: [PATCH 01/27] Remove useStyles from navigation --- .../DropdownSearch/DownloadSearch.js | 2 +- .../DropdownSearch/DropdownSearch.snap.js | 2 +- .../src/components/Hero/Hero.snap.js | 2 +- .../Navigation/ExploreNavigation/index.js | 61 +++++++------------ 4 files changed, 24 insertions(+), 43 deletions(-) diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js b/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js index 8b8c45e3e..126af1dbe 100644 --- a/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js +++ b/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js @@ -73,7 +73,7 @@ function DropdownSearch({ iconComponent = IconProp; iconBorder = { borderRadius: "50%", - border: "2px solid #fff", + border: "none", }; } const searchIconButton = ( diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js index 55850b6f2..9fedd527e 100644 --- a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js +++ b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js @@ -29,7 +29,7 @@ exports[` renders unchanged 1`] = ` > diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js index dab00515a..81ba8d0dc 100644 --- a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js +++ b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js @@ -84,7 +84,7 @@ exports[` renders unchanged 1`] = ` > diff --git a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js index a01ed8ae1..e1db1cf3d 100644 --- a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js @@ -1,5 +1,4 @@ import { Grid, Button } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; import { useTour } from "@reactour/tour"; import PropTypes from "prop-types"; import React from "react"; @@ -8,38 +7,6 @@ import SearchIcon from "@/climatemappedafrica/assets/icons/search-explore.svg"; import DropdownSearch from "@/climatemappedafrica/components/DropdownSearch"; import NextImageButton from "@/climatemappedafrica/components/NextImageButton"; -const useStyles = makeStyles(({ palette, typography }) => ({ - searchLabel: { - display: "none", - }, - searchInput: { - borderRadius: 0, - padding: `0 ${typography.pxToRem(10)}`, - color: "#959696", - textTransform: "initial", - "&::placeholder": { - opacity: 1, - }, - }, - searchInputRoot: { - borderRadius: 0, - backgroundColor: palette.background.paper, - borderColor: palette.background.default, - }, - selectMenu: { - borderRadius: 0, - border: 0, - background: palette.background.paper, - marginTop: typography.pxToRem(2), - }, - searchMenuItem: { - "&:hover": { - color: palette.text.secondary, - background: palette.primary.main, - }, - }, -})); - function ExploreNavigation({ explorePagePath, locations, @@ -48,7 +15,6 @@ function ExploreNavigation({ tutorialEnabled, variant, }) { - const classes = useStyles(); const { setIsOpen } = useTour(); const openTooltip = () => { @@ -81,12 +47,27 @@ function ExploreNavigation({ placeholder="Search for a Location" variant={variant} locations={locations} - classes={{ - inputRoot: classes.searchInputRoot, - input: classes.searchInput, - label: classes.searchLabel, - selectMenu: classes.selectMenu, - menuItem: classes.searchMenuItem, + TypographyProps={{ + display: "none", + }} + InputBaseProps={{ + sx: ({ typography }) => ({ + borderRadius: 0, + padding: `0 ${typography.pxToRem(10)}`, + color: "#959696", + textTransform: "initial", + "&::placeholder": { + opacity: 1, + }, + }), + }} + IconButtonProps={{ + sx: ({ palette, typography }) => ({ + borderRadius: "50%", + border: 0, + background: palette.background.paper, + marginTop: typography.pxToRem(2), + }), }} /> {tutorialEnabled && ( From ca7f89bd9409cf715eb4d09af68f4b94788adee6 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 25 Nov 2024 15:22:52 +0300 Subject: [PATCH 02/27] Remove useStyles from explore page --- .../src/components/ExplorePage/index.js | 49 +++++++++++++++++-- .../src/components/ExplorePage/useStyles.js | 46 ----------------- 2 files changed, 44 insertions(+), 51 deletions(-) delete mode 100644 apps/climatemappedafrica/src/components/ExplorePage/useStyles.js diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js index e6f5d658e..3449e5482 100644 --- a/apps/climatemappedafrica/src/components/ExplorePage/index.js +++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js @@ -1,13 +1,12 @@ import { Location } from "@hurumap/core"; import { Map } from "@hurumap/next"; -import { useTheme } from "@mui/material"; +import { Box, useTheme } from "@mui/material"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; import React, { useEffect, useState } from "react"; import useExplore from "./useExplore"; import useProfileGeography from "./useProfileGeography"; -import useStyles from "./useStyles"; import Panel from "@/climatemappedafrica/components/HURUmap/Panel"; @@ -45,7 +44,6 @@ function ExplorePage({ rootGeographyHasData, } = rootGeography; const theme = useTheme(); - const classes = useStyles(props); // NOTE: This setState and the corresponding useEffect are "hacks" since at // this point, useReducer hasn't been called yet so we can't use // dispatch directly but we need handleClickTag for initializer. @@ -160,7 +158,48 @@ function ExplorePage({ } return ( <> -
+ ({ + display: { + xs: "none", + lg: "flex", + }, + height: "calc(100vh - 88px)", + position: "fixed", + left: 0, + right: 0, + "& .tooltipPop": { + background: palette.background.default, + boxShadow: "0px 3px 6px #00000029", + height: typography.pxToRem(36), + width: typography.pxToRem(88), + "& .level": { + background: palette.primary.main, + borderRadius: typography.pxToRem(4), + color: palette.text.secondary, + display: "flex", + fontSize: typography.pxToRem(7), + fontWeight: "bold", + height: typography.pxToRem(17), + justifyContent: "center", + lineHeight: 10 / 7, + margin: "0 auto", + marginTop: typography.pxToRem(-15), + paddingTop: typography.pxToRem(2), + textTransform: "uppercase", + width: typography.pxToRem(62), + }, + "& .name": { + textAlign: "center", + fontSize: typography.pxToRem(9), + fontWeight: "bold", + lineHeight: 13 / 9, + marginTop: typography.pxToRem(5), + textTransform: "capitalize", + }, + }, + })} + > -
+ ({ - root: { - display: "none", - [breakpoints.up("lg")]: { - display: "flex", - height: "calc(100vh - 88px)", - position: "fixed", - left: 0, - right: 0, - "& .tooltipPop": { - background: palette.background.default, - boxShadow: "0px 3px 6px #00000029", - height: typography.pxToRem(36), - width: typography.pxToRem(88), - "& .level": { - background: palette.primary.main, - borderRadius: typography.pxToRem(4), - color: palette.text.secondary, - display: "flex", - fontSize: typography.pxToRem(7), - fontWeight: "bold", - height: typography.pxToRem(17), - justifyContent: "center", - lineHeight: 10 / 7, - margin: "0 auto", - marginTop: typography.pxToRem(-15), - paddingTop: typography.pxToRem(2), - textTransform: "uppercase", - width: typography.pxToRem(62), - }, - "& .name": { - textAlign: "center", - fontSize: typography.pxToRem(9), - fontWeight: "bold", - lineHeight: 13 / 9, - marginTop: typography.pxToRem(5), - textTransform: "capitalize", - }, - }, - }, - }, -})); - -export default useStyles; From 92112f61e83b777076caf6f2ca06b79486d03707 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 25 Nov 2024 15:36:41 +0300 Subject: [PATCH 03/27] Remove useStyles from categoryHeader --- .../HURUmap/CategoryHeader/index.js | 36 ++++++++++++------- .../HURUmap/CategoryHeader/useStyles.js | 27 -------------- 2 files changed, 24 insertions(+), 39 deletions(-) delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/useStyles.js diff --git a/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js b/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js index a354b90d0..2d0b014f7 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js @@ -1,31 +1,43 @@ import { RichTypography } from "@commons-ui/legacy"; -import { Typography } from "@mui/material"; +import { Box, Typography } from "@mui/material"; import PropTypes from "prop-types"; import React from "react"; -import useStyles from "./useStyles"; - import Image from "@/climatemappedafrica/components/Image"; function CategoryHeader({ title, description, icon, ...props }) { - const classes = useStyles(); - if (!title) { return null; } return ( -
- +
+ ({ + fontSize: typography.pxToRem(28), + display: "flex", + alignItems: "center", + scrollMarginTop: typography.pxToRem(110), + paddingTop: typography.pxToRem(40), + paddingBottom: typography.pxToRem(20), + })} + > {icon && ( -
+ ({ + position: "relative", + height: typography.pxToRem(32), + width: typography.pxToRem(32), + marginRight: typography.pxToRem(10), + })} + > -
+ )} {title} - - {description} - + {description}
); } diff --git a/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/useStyles.js deleted file mode 100644 index af084f80a..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/useStyles.js +++ /dev/null @@ -1,27 +0,0 @@ -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ typography }) => ({ - root: {}, - title: { - fontSize: typography.pxToRem(28), - display: "flex", - alignItems: "center", - scrollMarginTop: typography.pxToRem(110), - paddingTop: typography.pxToRem(40), - paddingBottom: typography.pxToRem(20), - }, - description: { - paddingBottom: typography.pxToRem(20), - "& p": { - margin: 0, - }, - }, - icon: { - position: "relative", - height: typography.pxToRem(32), - width: typography.pxToRem(32), - marginRight: typography.pxToRem(10), - }, -})); - -export default useStyles; From 3a4eec52512437d5777a849799098409b66d5b16 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 25 Nov 2024 15:41:28 +0300 Subject: [PATCH 04/27] Fix categoryHeader description --- .../src/components/HURUmap/CategoryHeader/index.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js b/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js index 2d0b014f7..738ae39ea 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js @@ -1,4 +1,3 @@ -import { RichTypography } from "@commons-ui/legacy"; import { Box, Typography } from "@mui/material"; import PropTypes from "prop-types"; import React from "react"; @@ -37,7 +36,17 @@ function CategoryHeader({ title, description, icon, ...props }) { )} {title} - {description} + ({ + paddingBottom: typography.pxToRem(20), + "& p": { + margin: 0, + }, + })} + > + {description} +
); } From 8303f36fb16c93e2accf411736068ff41def22cb Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 25 Nov 2024 15:50:56 +0300 Subject: [PATCH 05/27] Remove useStyles from Filters --- .../src/components/HURUmap/Chart/Filters.js | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/apps/climatemappedafrica/src/components/HURUmap/Chart/Filters.js b/apps/climatemappedafrica/src/components/HURUmap/Chart/Filters.js index 17827fdfa..68551c9f4 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Chart/Filters.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Chart/Filters.js @@ -1,5 +1,4 @@ -import { ButtonBase } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; +import { Box, ButtonBase } from "@mui/material"; import PropTypes from "prop-types"; import React, { useEffect, useState, useCallback } from "react"; @@ -7,21 +6,13 @@ import { idify } from "./utils"; import ChartFilter from "@/climatemappedafrica/components/HURUmap/ChartFilter"; -const useStyles = makeStyles(({ typography }) => ({ - root: { - paddingBottom: typography.pxToRem(18), - }, -})); - function Filters({ filterGroups, defaultFilters, filterSelectProps, setFilterSelectProps, view, - ...props }) { - const classes = useStyles(props); const [availableGroups, setAvailableGroups] = useState([]); const handleFilterSelectProps = (v) => { @@ -122,7 +113,11 @@ function Filters({ } return ( -
+ ({ + paddingBottom: typography.pxToRem(18), + })} + > { // default filters cannot be deleted // & their attributes cannot be changes, but values can @@ -149,7 +144,7 @@ function Filters({ {availableGroups?.length > 0 && ( Add new filter )} -
+ ); } From d8847aff023ef561ff7d6ff492157ec5d4a73929 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 25 Nov 2024 16:01:21 +0300 Subject: [PATCH 06/27] Remove useStyles from ChartFilters --- .../src/components/HURUmap/Chart/index.js | 37 +++++++++---------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js b/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js index 5a048f711..d5b67f381 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js @@ -1,8 +1,7 @@ import { RichTypography } from "@commons-ui/legacy"; import { ChartTooltip, IndicatorTitle, Download, Share } from "@hurumap/core"; import { Source } from "@hurumap/next"; -import { useMediaQuery, useTheme } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; +import { Box, useMediaQuery, useTheme } from "@mui/material"; import React, { useState, useRef, useCallback, useEffect } from "react"; import * as vega from "vega"; import embed from "vega-embed"; @@ -25,19 +24,6 @@ import projectlogo from "@/climatemappedafrica/assets/logos/projectLogo.svg"; import config, { hurumapArgs } from "@/climatemappedafrica/config"; import site from "@/climatemappedafrica/utils/site"; -const useStyles = makeStyles(({ typography }) => ({ - root: { - position: "relative", - width: "100%", - "&:last-of-type": { - marginBottom: typography.pxToRem(32), - }, - }, - chart: { - width: "100%", - }, -})); - function Chart({ indicator, indicatorTitle, @@ -48,7 +34,6 @@ function Chart({ isCompare, ...props }) { - const classes = useStyles(props); const chartRef = useRef(); const tooltipRef = useRef(); const [view, setView] = useState(null); @@ -328,7 +313,16 @@ function Chart({ ]; return ( -
+ ({ + position: "relative", + width: "100%", + "&:last-of-type": { + marginBottom: typography.pxToRem(32), + }, + })} + > )} -
+ ({ @@ -393,7 +392,7 @@ function Chart({ } /> )} -
+ ); } From a767c811a37dc28fe8e586947a0affd2683dcca4 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 25 Nov 2024 17:15:02 +0300 Subject: [PATCH 07/27] Remove useStyles partially from ChartFilters --- .../components/HURUmap/ChartFilter/index.js | 33 +++++++++++++++---- 1 file changed, 27 insertions(+), 6 deletions(-) diff --git a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js index e986d16f4..c58820252 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js @@ -1,4 +1,4 @@ -import { Grid, IconButton } from "@mui/material"; +import { Box, Grid, IconButton } from "@mui/material"; import PropTypes from "prop-types"; import React, { useEffect, useState } from "react"; @@ -86,10 +86,18 @@ function ChartFilter({ } return ( -
+ ({ + paddingBottom: typography.pxToRem(10), + })} + > {attributeOptions?.length > 0 && ( - + ({ + marginRight: { md: typography.pxToRem(10) }, + })} + > ({ + padding: 0, + background: palette.background.paper, + "& :hover": { + background: palette.background.paper, + }, + height: typography.pxToRem(36), + width: typography.pxToRem(36), + })} onClick={removeFilter} size="large" > @@ -132,7 +153,7 @@ function ChartFilter({ )} -
+ ); } From 4a20ee5a1515dcbf25cd2024ede08f67e4d8aea7 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 25 Nov 2024 17:39:36 +0300 Subject: [PATCH 08/27] Remove useStyles partially from KeyMetrics --- .../src/components/HURUmap/KeyMetric/index.js | 60 +++++++++++++------ .../components/HURUmap/KeyMetric/useStyles.js | 39 ------------ .../components/HURUmap/Panel/ProfileItems.js | 16 +++-- 3 files changed, 51 insertions(+), 64 deletions(-) delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/KeyMetric/useStyles.js diff --git a/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/index.js b/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/index.js index 5257ff0e9..bbe83b62b 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/index.js @@ -1,13 +1,9 @@ import { Source } from "@hurumap/next"; -import { Tooltip, Typography, LinearProgress } from "@mui/material"; -import clsx from "clsx"; +import { Tooltip, Typography, LinearProgress, Box } from "@mui/material"; import PropTypes from "prop-types"; import React from "react"; -import useStyles from "./useStyles"; - function KeyMetric({ - className, formattedValue: formattedValueProp, value: valueProp, title, @@ -17,10 +13,8 @@ function KeyMetric({ parentName, parentFormattedValue, metadata: { source, url } = {}, - ...props + sx, }) { - const classes = useStyles(props); - if (!((valueProp || formattedValueProp) && title)) { return null; } @@ -33,13 +27,37 @@ function KeyMetric({ const tooltipTitle = `${title}: ${formattedValue}`; return ( -
-
+ ({ + width: "100%", + display: "flex", + flexDirection: "column", + justifyContent: "space-between", + marginBottom: typography.pxToRem(20), + ...sx, + })} + > + ({ + backgroundColor: palette.background.paper, + padding: `${typography.pxToRem(10)} ${typography.pxToRem( + 20, + )} ${typography.pxToRem(14)} ${typography.pxToRem(20)}`, + })} + > {formattedValue} ({ + fontSize: typography.pxToRem(11), + overflow: "hidden", + display: "-webkit-box", + WebkitLineClamp: 1, + WebkitBoxOrient: "vertical", + textOverflow: "ellipsis", + marginBottom: typography.pxToRem(8), + })} > {title} @@ -48,20 +66,25 @@ function KeyMetric({ sensitivity: "accent", }) === 0 ? ( ({ + "&.MuiLinearProgress-determinate": { + backgroundColor: palette.grey.main, + }, + })} value={parseFloat(`${value}`.replace(",", ""))} color={color} variant="determinate" /> ) : null} -
+ {parentValue && ( ({ + fontSize: typography.pxToRem(11), + padding: `${typography.pxToRem(6)} 0 0 ${typography.pxToRem(20)}`, + color: "#666666", + })} > {parentValue} @@ -74,12 +97,11 @@ function KeyMetric({ > {source} -
+ ); } KeyMetric.propTypes = { - className: PropTypes.string, color: PropTypes.string, description: PropTypes.string, displayFormat: PropTypes.string, diff --git a/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/useStyles.js deleted file mode 100644 index 035b5d260..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/useStyles.js +++ /dev/null @@ -1,39 +0,0 @@ -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ typography, palette }) => ({ - root: { - width: "100%", - display: "flex", - flexDirection: "column", - justifyContent: "space-between", - marginBottom: typography.pxToRem(20), - }, - metric: { - backgroundColor: palette.background.paper, - padding: `${typography.pxToRem(10)} ${typography.pxToRem( - 20, - )} ${typography.pxToRem(14)} ${typography.pxToRem(20)}`, - }, - - progressBar: {}, - progressBarDeterminate: { - backgroundColor: palette.grey.main, - }, - text: { - fontSize: typography.pxToRem(11), - }, - title: { - overflow: "hidden", - display: "-webkit-box", - WebkitLineClamp: 1, - WebkitBoxOrient: "vertical", - textOverflow: "ellipsis", - marginBottom: typography.pxToRem(8), - }, - description: { - padding: `${typography.pxToRem(6)} 0 0 ${typography.pxToRem(20)}`, - color: "#666666", - }, -})); - -export default useStyles; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js index 09342406a..e7562f518 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js @@ -132,11 +132,11 @@ const ProfileItems = memo( value={value} displayFormat={displayFormat} metadata={metadata} - classes={{ - root: clsx({ - [classes.secondaryMetric]: secondaryProfile, - }), - }} + sx={({ typography }) => ({ + maxWidth: { + lg: typography.pxToRem(350), + }, + })} /> {secondaryMetric && ( @@ -152,7 +152,11 @@ const ProfileItems = memo( value={secondaryValue} displayFormat={secondaryDisplayFormat} metadata={secondaryMetric.metric} - className={classes.secondaryMetric} + sx={({ typography }) => ({ + maxWidth: { + lg: typography.pxToRem(350), + }, + })} /> )} From d0fb430ea9de1537cb6ec8ea2f14e70a4fa3985d Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 25 Nov 2024 20:48:31 +0300 Subject: [PATCH 09/27] Remove useStyles from LocationHeader --- .../HURUmap/LocationHeader/index.js | 86 ++++++++++++++++--- .../HURUmap/LocationHeader/useStyles.js | 62 ------------- 2 files changed, 72 insertions(+), 76 deletions(-) delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/LocationHeader/useStyles.js diff --git a/apps/climatemappedafrica/src/components/HURUmap/LocationHeader/index.js b/apps/climatemappedafrica/src/components/HURUmap/LocationHeader/index.js index ca10402df..1f473d41b 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/LocationHeader/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/LocationHeader/index.js @@ -1,4 +1,5 @@ import { + Box, Button, Grid, IconButton, @@ -8,8 +9,6 @@ import { import PropTypes from "prop-types"; import React from "react"; -import useStyles from "./useStyles"; - import CloseIcon from "@/climatemappedafrica/assets/icons/closeBlack.svg"; import Image from "@/climatemappedafrica/components/Image"; import slugify from "@/climatemappedafrica/utils/slugify"; @@ -18,19 +17,37 @@ function SvgIcon(props) { return ; } -function LocationHeader({ icon, level, onClick, parent, title, ...props }) { - const classes = useStyles(props); - +function LocationHeader({ icon, level, onClick, parent, title }) { if (!title) { return null; } return ( -
+ ({ + borderBottom: `solid 1px ${palette.divider}`, + paddingTop: typography.pxToRem(20), + position: { + lg: "relative", + }, + })} + > - + ({ + borderBottom: ({ variant }) => + `solid 5px ${ + variant === "secondary" + ? palette.secondary.main + : palette.primary.main + }`, + marginBottom: typography.pxToRem(20), + })} + > {title} @@ -38,14 +55,28 @@ function LocationHeader({ icon, level, onClick, parent, title, ...props }) { ({ + marginLeft: typography.pxToRem(20), + maxHeight: typography.pxToRem(44), + maxWidth: typography.pxToRem(44), + overflow: "hidden", + padding: 0, + })} size="large" > ({ + color: palette.grey.light, + "&:hover": { + color: "#666", + "& .Component_108-1_svg__b": { + stroke: palette.common.white, + }, + }, + })} /> @@ -54,20 +85,47 @@ function LocationHeader({ icon, level, onClick, parent, title, ...props }) { {icon ? ( -
+ ) : null} {parent && ( - + ({ + textTransform: "uppercase", + borderBottom: `solid 1px ${palette.divider}`, + paddingBottom: typography.pxToRem(10), + })} + > {`A ${level} in ${parent}`} )} -
+ ); } diff --git a/apps/climatemappedafrica/src/components/HURUmap/LocationHeader/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/LocationHeader/useStyles.js deleted file mode 100644 index 2f17071f0..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/LocationHeader/useStyles.js +++ /dev/null @@ -1,62 +0,0 @@ -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({ - root: { - borderBottom: `solid 1px ${palette.divider}`, - paddingTop: typography.pxToRem(20), - [breakpoints.up("lg")]: { - position: "relative", - }, - }, - titleContent: { - display: "flex", - justifyContent: "space-between", - }, - title: { - borderBottom: ({ variant }) => - `solid 5px ${ - variant === "secondary" ? palette.secondary.main : palette.primary.main - }`, - marginBottom: typography.pxToRem(20), - }, - description: { - textTransform: "uppercase", - borderBottom: `solid 1px ${palette.divider}`, - paddingBottom: typography.pxToRem(10), - }, - icon: { - position: "relative", - height: typography.pxToRem(20), - minWidth: typography.pxToRem(20), - }, - button: { - borderRadius: "50%", - backgroundColor: palette.grey.light, - width: typography.pxToRem(44), - height: typography.pxToRem(44), - minWidth: typography.pxToRem(44), - boxShadow: "none", - [breakpoints.up("lg")]: { - // quick fix to ensure print button aligns with rich data/pin buttons - marginTop: "10px", - }, - }, - closeButton: { - marginLeft: typography.pxToRem(20), - maxHeight: typography.pxToRem(44), - maxWidth: typography.pxToRem(44), - overflow: "hidden", - padding: 0, - }, - closeButtonIcon: { - color: palette.grey.light, - "&:hover": { - color: "#666", - "& .Component_108-1_svg__b": { - stroke: palette.common.white, - }, - }, - }, -})); - -export default useStyles; From 7df809c3e542dc63acd9ae48ebd6be16f66ac60b Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 25 Nov 2024 20:53:03 +0300 Subject: [PATCH 10/27] Remove useStyles from PanelItem --- .../components/HURUmap/Panel/ProfileItems.js | 55 +++++++------------ 1 file changed, 21 insertions(+), 34 deletions(-) diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js index e7562f518..88c1c86e8 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js @@ -1,6 +1,4 @@ import { Grid } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; -import clsx from "clsx"; import dynamic from "next/dynamic"; import PropTypes from "prop-types"; import React, { Fragment, memo } from "react"; @@ -20,33 +18,6 @@ const Chart = dynamic( }, ); -const useStyles = makeStyles(({ typography, breakpoints }) => ({ - metrics: { - marginTop: typography.pxToRem(24), - }, - metricRow: { - [breakpoints.up("lg")]: { - marginBottom: typography.pxToRem(14), - marginLeft: typography.pxToRem(18), - maxWidth: typography.pxToRem(224), - "&:first-of-type": { - marginLeft: 0, - }, - }, - }, - secondaryMetricRow: { - [breakpoints.up("lg")]: { - maxWidth: "100%", - marginLeft: 0, - }, - }, - secondaryMetric: { - [breakpoints.up("lg")]: { - maxWidth: typography.pxToRem(350), - }, - }, -})); - const ProfileItems = memo( function ProfileItems({ categories, @@ -57,8 +28,6 @@ const ProfileItems = memo( secondaryProfile, geoCode, }) { - const classes = useStyles(); - return ( <> {categories.map((category, categoryIndex) => ( @@ -76,7 +45,12 @@ const ProfileItems = memo( id={slugify(`${category.title}-${child.title}`)} title={child.title} /> - + ({ + marginTop: typography.pxToRem(24), + })} + > {child?.metrics?.map( ( { @@ -116,8 +90,21 @@ const ProfileItems = memo( container lg={secondaryProfile ? 12 : 4} key={label} - className={clsx(classes.metricRow, { - [classes.secondaryMetricRow]: secondaryProfile, + sx={({ typography }) => ({ + marginBottom: { + lg: typography.pxToRem(14), + }, + marginLeft: { + lg: secondaryProfile ? typography.pxToRem(18) : 0, + }, + maxWidth: { + lg: secondaryProfile + ? typography.pxToRem(224) + : "100%", + }, + "&:first-of-type": { + marginLeft: 0, + }, })} > From 3ea464831e91e5a93aba5f00531f7fc83f795b70 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 25 Nov 2024 21:04:26 +0300 Subject: [PATCH 11/27] Remove useStyles from PinAndCompare --- .../components/HURUmap/PinAndCompare/index.js | 25 ++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js b/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js index 1de16dbb2..1158aa293 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js @@ -1,4 +1,4 @@ -import { Box, IconButton, SvgIcon } from "@mui/material"; +import { Box, IconButton, SvgIcon, alpha } from "@mui/material"; import PropTypes from "prop-types"; import React, { useState } from "react"; @@ -67,11 +67,30 @@ function PinAndCompare({ const component = open ? PinIconSelected : PinIconDefault; return ( - + ({ + padding: `${typography.pxToRem(20)} 0`, + borderBottom: `solid 1px ${palette.divider}`, + })} + > {!isMobile && ( ({ + maxHeight: typography.pxToRem(40), + maxWidth: typography.pxToRem(40), + overflow: "hidden", + padding: 0, + marginRight: typography.pxToRem(14), + backgroundColor: palette.grey.light, + borderRadius: "0px 2px 2px 0px", + boxShadow: `0px 3px 6px ${alpha(palette.common.black, 0.16)}`, // #00000029 + "&:hover,&:focus,&:focus-within": { + backgroundColor: palette.grey.light, + }, + })} size="large" > Date: Mon, 25 Nov 2024 21:26:48 +0300 Subject: [PATCH 12/27] Remove useStyles from SubcategoryHeader --- .../HURUmap/SubcategoryHeader/index.js | 71 +++++++++---------- 1 file changed, 35 insertions(+), 36 deletions(-) diff --git a/apps/climatemappedafrica/src/components/HURUmap/SubcategoryHeader/index.js b/apps/climatemappedafrica/src/components/HURUmap/SubcategoryHeader/index.js index ba5067077..c855e0723 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/SubcategoryHeader/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/SubcategoryHeader/index.js @@ -1,50 +1,49 @@ -import { RichTypography } from "@commons-ui/legacy"; -import { Typography } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; +import { Box, Typography } from "@mui/material"; import PropTypes from "prop-types"; import React from "react"; -const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({ - root: { - borderBottom: `solid 1px ${palette.divider}`, - borderTop: `solid 1px ${palette.divider}`, - }, - title: { - color: "#1c2030", - fontWeight: 400, - letterSpacing: typography.pxToRem(2), - paddingBottom: typography.pxToRem(20), - paddingTop: typography.pxToRem(20), - // In mobile, we need to account for navbar + category tabs - scrollMarginTop: typography.pxToRem(160), - textTransform: "uppercase", - [breakpoints.up("lg")]: { - scrollMarginTop: typography.pxToRem(110), - }, - }, - description: { - paddingBottom: typography.pxToRem(20), - "& p": { - margin: 0, - }, - }, -})); - function SubcategoryHeader({ title, description, ...props }) { - const classes = useStyles(props); - if (!title) { return null; } return ( -
- + ({ + borderBottom: `solid 1px ${palette.divider}`, + borderTop: `solid 1px ${palette.divider}`, + })} + > + ({ + color: "#1c2030", + fontWeight: 400, + letterSpacing: typography.pxToRem(2), + paddingBottom: typography.pxToRem(20), + paddingTop: typography.pxToRem(20), + // In mobile, we need to account for navbar + category tabs + scrollMarginTop: { + xs: typography.pxToRem(160), + lg: typography.pxToRem(110), + }, + textTransform: "uppercase", + })} + > {title} - + ({ + paddingBottom: typography.pxToRem(20), + "& p": { + margin: 0, + }, + })} + > {description} - -
+ + ); } From 8574274f30215b02dd038a0a7657c2cef5674d23 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Mon, 25 Nov 2024 21:39:09 +0300 Subject: [PATCH 13/27] Remove useStyles from TutorialStep --- .../HURUmap/Tutorial/TutorialStep/index.js | 45 ++++++++++--------- .../Tutorial/TutorialStep/useStyles.js | 30 ------------- 2 files changed, 23 insertions(+), 52 deletions(-) delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/useStyles.js diff --git a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js index 1613f2e3f..2cf007a75 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js @@ -1,46 +1,43 @@ import { RichText } from "@commons-ui/payload"; -import { Grid, Typography, IconButton, Avatar } from "@mui/material"; +import { Grid, Typography, IconButton, Avatar, Box } from "@mui/material"; import { useTour } from "@reactour/tour"; import PropTypes from "prop-types"; import React from "react"; -import useStyles from "./useStyles"; - import CloseIcon from "@/climatemappedafrica/assets/icons/close.svg"; import Image from "@/climatemappedafrica/components/Image"; -function TutorialStep({ description, title, image, selector, ...props }) { - const classes = useStyles(props); +function TutorialStep({ description, title, image }) { const { setIsOpen, currentStep } = useTour(); const handleClose = () => { setIsOpen(false); }; return ( -
+ ({ + paddingLeft: typography.pxToRem(34), + paddingTop: typography.pxToRem(25), + paddingRight: typography.pxToRem(39), + width: typography.pxToRem(964), + })} + > ({ + marginBottom: typography.pxToRem(48), + })} container justifyContent="space-between" alignItems="center" > - + {title} {handleClose && ( - + @@ -49,7 +46,13 @@ function TutorialStep({ description, title, image, selector, ...props }) { - + ({ + background: palette.primary.main, + width: typography.pxToRem(48), + height: typography.pxToRem(48), + })} + > {currentStep + 1} @@ -74,16 +77,14 @@ function TutorialStep({ description, title, image, selector, ...props }) { -
+ ); } TutorialStep.propTypes = { description: PropTypes.arrayOf(PropTypes.shape({})), image: PropTypes.string, - onClose: PropTypes.func, title: PropTypes.string, - selector: PropTypes.string, }; export default TutorialStep; diff --git a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/useStyles.js deleted file mode 100644 index e6059fd98..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/useStyles.js +++ /dev/null @@ -1,30 +0,0 @@ -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ typography, palette }) => ({ - root: { - paddingLeft: typography.pxToRem(34), - paddingTop: typography.pxToRem(25), - paddingRight: typography.pxToRem(39), - width: typography.pxToRem(964), - }, - header: { - marginBottom: typography.pxToRem(48), - }, - description: { - marginLeft: typography.pxToRem(16), - width: typography.pxToRem(278), - lineHeight: 30 / 16, - "& p": { - marginTop: 0, - marginBottom: typography.pxToRem(32), - }, - }, - currentStep: { - background: palette.primary.main, - width: typography.pxToRem(48), - height: typography.pxToRem(48), - }, - title: {}, -})); - -export default useStyles; From 69faa7c5208388eb839a5fc5b2309e9507c672d4 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Tue, 26 Nov 2024 11:12:28 +0300 Subject: [PATCH 14/27] Remove useStyles from Mobile Navigation --- .../src/components/Loading/index.js | 20 ++++++-------- .../src/components/Menu/index.js | 16 ++++++++++-- .../Navigation/MobileNavigation/index.js | 26 +++++++++++++++---- 3 files changed, 43 insertions(+), 19 deletions(-) diff --git a/apps/climatemappedafrica/src/components/Loading/index.js b/apps/climatemappedafrica/src/components/Loading/index.js index 39165e130..3ed1d7100 100644 --- a/apps/climatemappedafrica/src/components/Loading/index.js +++ b/apps/climatemappedafrica/src/components/Loading/index.js @@ -1,20 +1,16 @@ import { Box, CircularProgress } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; import React from "react"; -const useStyles = makeStyles(({ typography }) => ({ - root: {}, - box: { - justifyContent: "center", - height: typography.pxToRem(50), - }, -})); - function Loading() { - const classes = useStyles(); return ( - - + ({ + display: "flex", + justifyContent: "center", + height: typography.pxToRem(50), + })} + > + ); } diff --git a/apps/climatemappedafrica/src/components/Menu/index.js b/apps/climatemappedafrica/src/components/Menu/index.js index ad39cdc0a..8a8f1e80d 100644 --- a/apps/climatemappedafrica/src/components/Menu/index.js +++ b/apps/climatemappedafrica/src/components/Menu/index.js @@ -82,7 +82,11 @@ function Menu({ children, explorePagePath, links, socialLinks, ...props }) { alignItems={{ lg: "center" }} direction={{ xs: "column", lg: "row" }} justifyContent={{ lg: "flex-end" }} - className={classes.root} + sx={{ + padding: { + lg: 0, + }, + }} > {links.map((item, index) => ( ({ + fontWeight: 600, + letterSpacing: "1.6px", + fontSize: { + xs: typography.pxToRem(20), + lg: typography.pxToRem(16), + }, + textTransform: "uppercase", + })} > {item.label} diff --git a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js index 3a013d150..bc44ea481 100644 --- a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js @@ -156,8 +156,11 @@ function MobileNavigation({ container alignItems="center" justifyContent="space-between" - className={classes.logoSection} - sx={sx} + sx={({ palette, typography }) => ({ + borderBottom: `2px solid ${palette.background.default}`, + padding: `${typography.pxToRem(10)} 0`, + ...sx, + })} > - +
({ + borderBottom: `2px solid ${palette.background.default}`, + padding: `${typography.pxToRem(10)} 0`, + ...sx, + })} >
- + ({ + overflow: "hidden", + padding: `${typography.pxToRem(40)} 0`, + })} + >
Date: Wed, 27 Nov 2024 09:58:21 +0300 Subject: [PATCH 15/27] Revert unnecessary changes --- .../DropdownSearch/DownloadSearch.js | 2 +- .../DropdownSearch/DropdownSearch.snap.js | 2 +- .../src/components/ExplorePage/index.js | 49 ++------------- .../src/components/ExplorePage/useStyles.js | 46 ++++++++++++++ .../src/components/Hero/Hero.snap.js | 2 +- .../src/components/Loading/index.js | 20 +++--- .../src/components/Menu/index.js | 16 +---- .../Navigation/ExploreNavigation/index.js | 61 ++++++++++++------- .../Navigation/MobileNavigation/index.js | 26 ++------ 9 files changed, 113 insertions(+), 111 deletions(-) create mode 100644 apps/climatemappedafrica/src/components/ExplorePage/useStyles.js diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js b/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js index 126af1dbe..8b8c45e3e 100644 --- a/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js +++ b/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js @@ -73,7 +73,7 @@ function DropdownSearch({ iconComponent = IconProp; iconBorder = { borderRadius: "50%", - border: "none", + border: "2px solid #fff", }; } const searchIconButton = ( diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js index 9fedd527e..55850b6f2 100644 --- a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js +++ b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js @@ -29,7 +29,7 @@ exports[` renders unchanged 1`] = ` > diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js index 3449e5482..e6f5d658e 100644 --- a/apps/climatemappedafrica/src/components/ExplorePage/index.js +++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js @@ -1,12 +1,13 @@ import { Location } from "@hurumap/core"; import { Map } from "@hurumap/next"; -import { Box, useTheme } from "@mui/material"; +import { useTheme } from "@mui/material"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; import React, { useEffect, useState } from "react"; import useExplore from "./useExplore"; import useProfileGeography from "./useProfileGeography"; +import useStyles from "./useStyles"; import Panel from "@/climatemappedafrica/components/HURUmap/Panel"; @@ -44,6 +45,7 @@ function ExplorePage({ rootGeographyHasData, } = rootGeography; const theme = useTheme(); + const classes = useStyles(props); // NOTE: This setState and the corresponding useEffect are "hacks" since at // this point, useReducer hasn't been called yet so we can't use // dispatch directly but we need handleClickTag for initializer. @@ -158,48 +160,7 @@ function ExplorePage({ } return ( <> - ({ - display: { - xs: "none", - lg: "flex", - }, - height: "calc(100vh - 88px)", - position: "fixed", - left: 0, - right: 0, - "& .tooltipPop": { - background: palette.background.default, - boxShadow: "0px 3px 6px #00000029", - height: typography.pxToRem(36), - width: typography.pxToRem(88), - "& .level": { - background: palette.primary.main, - borderRadius: typography.pxToRem(4), - color: palette.text.secondary, - display: "flex", - fontSize: typography.pxToRem(7), - fontWeight: "bold", - height: typography.pxToRem(17), - justifyContent: "center", - lineHeight: 10 / 7, - margin: "0 auto", - marginTop: typography.pxToRem(-15), - paddingTop: typography.pxToRem(2), - textTransform: "uppercase", - width: typography.pxToRem(62), - }, - "& .name": { - textAlign: "center", - fontSize: typography.pxToRem(9), - fontWeight: "bold", - lineHeight: 13 / 9, - marginTop: typography.pxToRem(5), - textTransform: "capitalize", - }, - }, - })} - > +
- +
({ + root: { + display: "none", + [breakpoints.up("lg")]: { + display: "flex", + height: "calc(100vh - 88px)", + position: "fixed", + left: 0, + right: 0, + "& .tooltipPop": { + background: palette.background.default, + boxShadow: "0px 3px 6px #00000029", + height: typography.pxToRem(36), + width: typography.pxToRem(88), + "& .level": { + background: palette.primary.main, + borderRadius: typography.pxToRem(4), + color: palette.text.secondary, + display: "flex", + fontSize: typography.pxToRem(7), + fontWeight: "bold", + height: typography.pxToRem(17), + justifyContent: "center", + lineHeight: 10 / 7, + margin: "0 auto", + marginTop: typography.pxToRem(-15), + paddingTop: typography.pxToRem(2), + textTransform: "uppercase", + width: typography.pxToRem(62), + }, + "& .name": { + textAlign: "center", + fontSize: typography.pxToRem(9), + fontWeight: "bold", + lineHeight: 13 / 9, + marginTop: typography.pxToRem(5), + textTransform: "capitalize", + }, + }, + }, + }, +})); + +export default useStyles; diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js index 81ba8d0dc..dab00515a 100644 --- a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js +++ b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js @@ -84,7 +84,7 @@ exports[` renders unchanged 1`] = ` > diff --git a/apps/climatemappedafrica/src/components/Loading/index.js b/apps/climatemappedafrica/src/components/Loading/index.js index 3ed1d7100..39165e130 100644 --- a/apps/climatemappedafrica/src/components/Loading/index.js +++ b/apps/climatemappedafrica/src/components/Loading/index.js @@ -1,16 +1,20 @@ import { Box, CircularProgress } from "@mui/material"; +import makeStyles from "@mui/styles/makeStyles"; import React from "react"; +const useStyles = makeStyles(({ typography }) => ({ + root: {}, + box: { + justifyContent: "center", + height: typography.pxToRem(50), + }, +})); + function Loading() { + const classes = useStyles(); return ( - ({ - display: "flex", - justifyContent: "center", - height: typography.pxToRem(50), - })} - > - + + ); } diff --git a/apps/climatemappedafrica/src/components/Menu/index.js b/apps/climatemappedafrica/src/components/Menu/index.js index 8a8f1e80d..ad39cdc0a 100644 --- a/apps/climatemappedafrica/src/components/Menu/index.js +++ b/apps/climatemappedafrica/src/components/Menu/index.js @@ -82,11 +82,7 @@ function Menu({ children, explorePagePath, links, socialLinks, ...props }) { alignItems={{ lg: "center" }} direction={{ xs: "column", lg: "row" }} justifyContent={{ lg: "flex-end" }} - sx={{ - padding: { - lg: 0, - }, - }} + className={classes.root} > {links.map((item, index) => ( ({ - fontWeight: 600, - letterSpacing: "1.6px", - fontSize: { - xs: typography.pxToRem(20), - lg: typography.pxToRem(16), - }, - textTransform: "uppercase", - })} + className={classes.label} > {item.label} diff --git a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js index e1db1cf3d..a01ed8ae1 100644 --- a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js @@ -1,4 +1,5 @@ import { Grid, Button } from "@mui/material"; +import makeStyles from "@mui/styles/makeStyles"; import { useTour } from "@reactour/tour"; import PropTypes from "prop-types"; import React from "react"; @@ -7,6 +8,38 @@ import SearchIcon from "@/climatemappedafrica/assets/icons/search-explore.svg"; import DropdownSearch from "@/climatemappedafrica/components/DropdownSearch"; import NextImageButton from "@/climatemappedafrica/components/NextImageButton"; +const useStyles = makeStyles(({ palette, typography }) => ({ + searchLabel: { + display: "none", + }, + searchInput: { + borderRadius: 0, + padding: `0 ${typography.pxToRem(10)}`, + color: "#959696", + textTransform: "initial", + "&::placeholder": { + opacity: 1, + }, + }, + searchInputRoot: { + borderRadius: 0, + backgroundColor: palette.background.paper, + borderColor: palette.background.default, + }, + selectMenu: { + borderRadius: 0, + border: 0, + background: palette.background.paper, + marginTop: typography.pxToRem(2), + }, + searchMenuItem: { + "&:hover": { + color: palette.text.secondary, + background: palette.primary.main, + }, + }, +})); + function ExploreNavigation({ explorePagePath, locations, @@ -15,6 +48,7 @@ function ExploreNavigation({ tutorialEnabled, variant, }) { + const classes = useStyles(); const { setIsOpen } = useTour(); const openTooltip = () => { @@ -47,27 +81,12 @@ function ExploreNavigation({ placeholder="Search for a Location" variant={variant} locations={locations} - TypographyProps={{ - display: "none", - }} - InputBaseProps={{ - sx: ({ typography }) => ({ - borderRadius: 0, - padding: `0 ${typography.pxToRem(10)}`, - color: "#959696", - textTransform: "initial", - "&::placeholder": { - opacity: 1, - }, - }), - }} - IconButtonProps={{ - sx: ({ palette, typography }) => ({ - borderRadius: "50%", - border: 0, - background: palette.background.paper, - marginTop: typography.pxToRem(2), - }), + classes={{ + inputRoot: classes.searchInputRoot, + input: classes.searchInput, + label: classes.searchLabel, + selectMenu: classes.selectMenu, + menuItem: classes.searchMenuItem, }} /> {tutorialEnabled && ( diff --git a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js index bc44ea481..3a013d150 100644 --- a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js +++ b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js @@ -156,11 +156,8 @@ function MobileNavigation({ container alignItems="center" justifyContent="space-between" - sx={({ palette, typography }) => ({ - borderBottom: `2px solid ${palette.background.default}`, - padding: `${typography.pxToRem(10)} 0`, - ...sx, - })} + className={classes.logoSection} + sx={sx} > - +
({ - borderBottom: `2px solid ${palette.background.default}`, - padding: `${typography.pxToRem(10)} 0`, - ...sx, - })} + className={classes.logoSection} >
- ({ - overflow: "hidden", - padding: `${typography.pxToRem(40)} 0`, - })} - > +
Date: Wed, 27 Nov 2024 10:16:19 +0300 Subject: [PATCH 16/27] Remove useStyles from Tutorial Line --- .../src/components/HURUmap/Tutorial/Line.js | 35 ++++++++++++++----- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/Line.js b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/Line.js index d5b49488b..031a05865 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/Line.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/Line.js @@ -1,18 +1,37 @@ +import { Box, useTheme } from "@mui/material"; import PropTypes from "prop-types"; import React from "react"; -import useStyles from "./useStyles"; - -function Line({ x1, x2, y1, y2, ...props }) { - const classes = useStyles(props); +function Line({ x1, x2, y1, y2 }) { + const theme = useTheme(); return ( -
- - + + + -
+ ); } From cc4e0e8df230d553b26e26ac04d82cc7ae9e2870 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Wed, 27 Nov 2024 12:00:50 +0300 Subject: [PATCH 17/27] Use Styled ReactTour --- .../src/components/HURUmap/Tutorial/index.js | 49 +++++++++---------- 1 file changed, 22 insertions(+), 27 deletions(-) diff --git a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/index.js b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/index.js index 49f334e16..8d411070c 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/index.js @@ -1,4 +1,4 @@ -import makeStyles from "@mui/styles/makeStyles"; +import { styled } from "@mui/material/styles"; import { TourProvider, useTour } from "@reactour/tour"; import PropTypes from "prop-types"; import React, { useState } from "react"; @@ -6,29 +6,22 @@ import React, { useState } from "react"; import Connector from "@/climatemappedafrica/components/HURUmap/Tutorial/Connector"; import TutorialStep from "@/climatemappedafrica/components/HURUmap/Tutorial/TutorialStep"; -const useStyles = makeStyles(({ typography, palette }) => ({ - tour: { - width: typography.pxToRem(1000), - maxWidth: "100vw !important", - top: `${typography.pxToRem(200)} !important`, - left: "50% !important", - transform: "translateX(-50%) !important", - paddingBottom: `${typography.pxToRem(48.62)} !important`, - display: "flex", - alignItems: "center", - flexDirection: "column", - border: `1px solid ${palette.primary.main}`, - borderRadius: typography.pxToRem(10), - "--reactour-accent": "#1C2030", - }, - mask: { - color: "#666666 !important", - opacity: "0.5 !important", - }, +const StyledTour = styled(TourProvider)(({ theme }) => ({ + width: theme.typography.pxToRem(1000), + maxWidth: "100vw !important", + top: `${theme.typography.pxToRem(200)} !important`, + left: "50% !important", + transform: "translateX(-50%) !important", + paddingBottom: `${theme.typography.pxToRem(48.62)} !important`, + display: "flex", + alignItems: "center", + flexDirection: "column", + border: `1px solid ${theme.palette.primary.main}`, + borderRadius: theme.typography.pxToRem(10), + "--reactour-accent": "#1C2030", })); -function Tutorial({ children, defaultOpen = false, items, ...props }) { - const classes = useStyles(props); +function Tutorial({ children, defaultOpen = false, items }) { const { setIsOpen } = useTour(); setIsOpen(defaultOpen); @@ -42,7 +35,7 @@ function Tutorial({ children, defaultOpen = false, items, ...props }) { }; return ( - ({ @@ -51,9 +44,13 @@ function Tutorial({ children, defaultOpen = false, items, ...props }) { height: 16, border: "2px solid #1C2030", }), + maskWrapper: (base) => ({ + ...base, + color: "#666666", + opacity: 0.5, + }), }} position="center" - className={classes.tour} showPrevNextButtons={false} showBagde={false} defaultOpen={defaultOpen} @@ -61,8 +58,6 @@ function Tutorial({ children, defaultOpen = false, items, ...props }) { beforeClose={setTourClosed} showCloseButton={false} accentColor="#fff" - maskClassName={classes.mask} - highlightedMaskClassName={classes.highlightedMask} steps={items?.map((item, index) => ({ selector: item?.selector, content: , @@ -70,7 +65,7 @@ function Tutorial({ children, defaultOpen = false, items, ...props }) { > {children} {isOpened && } - + ); } From ad3b0944fbc855cb8e6fe7b0e26a55515fa5d794 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Wed, 27 Nov 2024 12:26:52 +0300 Subject: [PATCH 18/27] Remove unused styles file --- .../components/HURUmap/Tutorial/useStyles.js | 23 ------------------- 1 file changed, 23 deletions(-) delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/Tutorial/useStyles.js diff --git a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/useStyles.js deleted file mode 100644 index 8aafb717f..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/useStyles.js +++ /dev/null @@ -1,23 +0,0 @@ -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ typography, palette }) => ({ - root: { - width: typography.pxToRem(964), - }, - lineContainer: { - position: "fixed", - top: 0, - bottom: 0, - left: 0, - right: 0, - zIndex: 9999999, - pointerEvents: "none", - }, - line: { - strokeWidth: typography.pxToRem(1), - stroke: palette.primary.main, - fill: palette.primary.main, - }, -})); - -export default useStyles; From 7f3914d108348e004e8cb1f04bec897b5a0864eb Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Wed, 27 Nov 2024 15:53:23 +0300 Subject: [PATCH 19/27] Fix mobile panel --- .../HURUmap/Panel/MobilePanel/MobilePanel.js | 61 +++++++++++++--- .../HURUmap/Panel/MobilePanel/useStyles.js | 59 --------------- .../src/components/Tabs/TabPanel.js | 5 -- .../src/components/Tabs/index.js | 71 ++++++++++++++----- .../src/components/Tabs/useStyles.js | 48 ------------- 5 files changed, 104 insertions(+), 140 deletions(-) delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/useStyles.js delete mode 100644 apps/climatemappedafrica/src/components/Tabs/useStyles.js diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js index 3fc789a10..8d07887ba 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/MobilePanel.js @@ -1,4 +1,4 @@ -import { Button, Typography } from "@mui/material"; +import { Button, Typography, useTheme } from "@mui/material"; import PropTypes from "prop-types"; import React from "react"; @@ -14,12 +14,11 @@ import { hurumapArgs } from "@/climatemappedafrica/config"; // being last is necessary for style override to work // eslint-disable-next-line import/order -import useStyles from "./useStyles"; function MobilePanel({ activeType, scrollToTopLabel, sx, ...props }) { - const classes = useStyles(props); const { onSelectLocation, primaryProfile, dataNotAvailable } = props; const { geography, items } = primaryProfile; + const theme = useTheme(); const { pinAndCompare } = hurumapArgs; @@ -85,13 +84,55 @@ function MobilePanel({ activeType, scrollToTopLabel, sx, ...props }) { name="mobilepanel" items={formatedItems} activeTab={activeTab} - classes={{ - divider: classes.tabsDivider, - indicator: classes.tabIndicator, - tabs: classes.tabs, - tab: classes.tab, - tabPanels: classes.tabPanels, - tabSelected: classes.tabSelected, + DividerProps={{ + display: "none", + }} + TabIndicatorProps={{ + display: "none", + }} + TabPanelProps={{ + marginTop: 0, + }} + TabsProps={{ + paddingBottom: theme.typography.pxToRem(16), + paddingTop: theme.typography.pxToRem(16), + paddingLeft: { + xs: theme.typography.pxToRem(20), + md: theme.typography.pxToRem(80), + }, + paddingRight: { + xs: theme.typography.pxToRem(20), + md: theme.typography.pxToRem, + }, + backgroundColor: theme.palette.background.paper, + zIndex: theme.zIndex.appBar, + width: "100%", + position: "sticky", + top: 66, // below navbar + }} + TabProps={{ + color: "#212529", + backgroundColor: theme.palette.background.default, + fontWeight: 500, + fontSize: theme.typography.pxToRem(12), + letterSpacing: theme.typography.pxToRem(1.6), + lineHeight: 30 / 12, + marginRight: theme.typography.pxToRem(20), + padding: `${theme.typography.pxToRem(6)} ${theme.typography.pxToRem(20)}`, + height: theme.typography.pxToRem(29), + maxWidth: "unset", + textTransform: "unset", + "&:last-of-type": { + marginRight: 0, + }, + "&.Mui-selected": { + color: theme.palette.background.default, + backgroundColor: "#666666", + }, + "&:hover, &:focus, &$selected": { + color: theme.palette.background.default, + backgroundColor: "#666666", + }, }} /> {items?.length > 0 && ( diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/useStyles.js deleted file mode 100644 index 5dd914e38..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/Panel/MobilePanel/useStyles.js +++ /dev/null @@ -1,59 +0,0 @@ -import makeStyles from "@mui/styles/makeStyles"; - -// We can't migrate these styles to sx until components/Tabs is upgraded -const useStyles = makeStyles( - ({ typography, palette, zIndex, breakpoints }) => ({ - tabs: { - paddingBottom: typography.pxToRem(16), - paddingTop: typography.pxToRem(16), - paddingLeft: typography.pxToRem(20), - paddingRight: typography.pxToRem(20), - backgroundColor: palette.background.paper, - zIndex: zIndex.appBar, - width: "100%", - position: "sticky", - top: 66, // below navbar - [breakpoints.up("md")]: { - paddingLeft: typography.pxToRem(80), - paddingRight: typography.pxToRem(80), - }, - }, - tabsDivider: { - display: "none", - }, - tab: { - color: "#212529", - backgroundColor: palette.background.default, - fontWeight: 500, - fontSize: typography.pxToRem(12), - letterSpacing: typography.pxToRem(1.6), - lineHeight: 30 / 12, - marginRight: typography.pxToRem(20), - padding: `${typography.pxToRem(6)} ${typography.pxToRem(20)}`, - height: typography.pxToRem(29), - maxWidth: "unset", - textTransform: "unset", - "&:last-of-type": { - marginRight: 0, - }, - }, - tabIndicator: { - display: "none", - }, - tabPanels: { - marginTop: 0, - }, - tabSelected: { - "&.Mui-selected": { - color: palette.background.default, - }, - backgroundColor: "#666666", - "&:hover, &:focus, &$selected": { - color: palette.background.default, - backgroundColor: "#666666", - }, - }, - }), -); - -export default useStyles; diff --git a/apps/climatemappedafrica/src/components/Tabs/TabPanel.js b/apps/climatemappedafrica/src/components/Tabs/TabPanel.js index b815e2aab..690174c92 100644 --- a/apps/climatemappedafrica/src/components/Tabs/TabPanel.js +++ b/apps/climatemappedafrica/src/components/Tabs/TabPanel.js @@ -1,11 +1,7 @@ import PropTypes from "prop-types"; import React from "react"; -import useStyles from "./useStyles"; - function TabPanel({ children, value, name, selected, ...props }) { - const classes = useStyles(props); - if (selected !== value || !children) { return null; } @@ -16,7 +12,6 @@ function TabPanel({ children, value, name, selected, ...props }) { id={`${name}-tabpanel-${value}`} aria-labelledby={`${name}-tab-${value}`} {...props} - className={classes.tabPanel} > {children} diff --git a/apps/climatemappedafrica/src/components/Tabs/index.js b/apps/climatemappedafrica/src/components/Tabs/index.js index 75bc7844f..8af33627c 100644 --- a/apps/climatemappedafrica/src/components/Tabs/index.js +++ b/apps/climatemappedafrica/src/components/Tabs/index.js @@ -1,10 +1,8 @@ -import { Tab, Divider, Tabs as MuiTabs } from "@mui/material"; +import { Tab, Divider, Tabs as MuiTabs, Box } from "@mui/material"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; import React, { useState } from "react"; -import useStyles from "./useStyles"; - import TabPanel from "@/climatemappedafrica/components/Tabs/TabPanel"; function a11yProps(name, index) { @@ -15,15 +13,18 @@ function a11yProps(name, index) { } function Tabs({ + DividerProps, + TabIndicatorProps, + TabProps, + TabsProps, + TabPanelProps, activeTab = 0, items, name: nameProp, onChange, linkComponent, - ...props }) { const router = useRouter(); - const classes = useStyles(props); const [value, setValue] = useState(activeTab); const name = nameProp || "simple"; @@ -38,17 +39,28 @@ function Tabs({ return null; } return ( -
+ ({ + minHeight: typography.pxToRem(23), + textTransform: "none", + "& .MuiTabs-indicator": { + backgroundColor: palette.primary.main, + height: 2, + marginBottom: 0, + ...TabIndicatorProps, + }, + ...TabsProps, + })} > {items.map(({ label, href, slug }, index) => ( ({ + color: "#666666", + fontWeight: 600, + fontSize: typography.pxToRem(16), + letterSpacing: typography.pxToRem(1.6), + lineHeight: 25 / 16, + marginRight: typography.pxToRem(40), + minHeight: typography.pxToRem(23), + minWidth: 0, + padding: `0 0 ${typography.pxToRem(4)} 0`, + textTransform: "uppercase", + "&:last-of-type": { + marginRight: 0, + }, + ...TabProps, + })} /> ))} - -
+ ({ + marginTop: typography.pxToRem(-2), + height: typography.pxToRem(2), + ...DividerProps, + })} + /> + ({ + marginTop: typography.pxToRem(40), + ...TabPanelProps, + })} + > {items.map((item, index) => ( ))} -
-
+ + ); } diff --git a/apps/climatemappedafrica/src/components/Tabs/useStyles.js b/apps/climatemappedafrica/src/components/Tabs/useStyles.js deleted file mode 100644 index 6c284d31e..000000000 --- a/apps/climatemappedafrica/src/components/Tabs/useStyles.js +++ /dev/null @@ -1,48 +0,0 @@ -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ palette, typography }) => ({ - root: { - flexGrow: 1, - }, - indicator: { - backgroundColor: palette.primary.main, - height: 2, - marginBottom: 0, - }, - divider: { - marginTop: typography.pxToRem(-2), - height: typography.pxToRem(2), - }, - tabs: { - minHeight: typography.pxToRem(23), - textTransform: "none", - }, - tab: { - color: "#666666", - fontWeight: 600, - fontSize: typography.pxToRem(16), - letterSpacing: typography.pxToRem(1.6), - lineHeight: 25 / 16, - marginRight: typography.pxToRem(40), - minHeight: typography.pxToRem(23), - minWidth: 0, - padding: `0 0 ${typography.pxToRem(4)} 0`, - textTransform: "uppercase", - "&:last-of-type": { - marginRight: 0, - }, - }, - tabSelected: { - color: palette.primary.main, - "&:hover, &:focus, &$selected": { - color: palette.primary.main, - cursor: "default", - }, - }, - tabPanel: {}, - tabPanels: { - marginTop: typography.pxToRem(40), - }, -})); - -export default useStyles; From da50fdedc05548e241acd022eabdd83c27c009af Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Wed, 27 Nov 2024 16:51:43 +0300 Subject: [PATCH 20/27] Remove useprops from select --- .../components/HURUmap/ChartFilter/index.js | 49 ++++++--- .../HURUmap/ChartFilter/useStyles.js | 39 ------- .../components/HURUmap/PinAndCompare/index.js | 33 ++++-- .../HURUmap/PinAndCompare/useStyles.js | 37 ------- .../src/components/Select/index.js | 100 ++++++++++++++---- .../src/components/Select/useStyles.js | 81 -------------- .../src/components/Tabs/useStyles.js | 48 +++++++++ 7 files changed, 188 insertions(+), 199 deletions(-) delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/ChartFilter/useStyles.js delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/useStyles.js delete mode 100644 apps/climatemappedafrica/src/components/Select/useStyles.js create mode 100644 apps/climatemappedafrica/src/components/Tabs/useStyles.js diff --git a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js index c58820252..7cd850bef 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js @@ -1,9 +1,7 @@ -import { Box, Grid, IconButton } from "@mui/material"; +import { Box, Grid, IconButton, useTheme } from "@mui/material"; import PropTypes from "prop-types"; import React, { useEffect, useState } from "react"; -import useStyles from "./useStyles"; - import CloseIcon from "@/climatemappedafrica/assets/icons/x.svg"; import Select from "@/climatemappedafrica/components/Select"; @@ -17,9 +15,8 @@ function ChartFilter({ valueText = "Select a value:", selectedAttribute: selectedAttributeProp, selectedValue: selectedValueProp, - ...props }) { - const classes = useStyles(props); + const theme = useTheme(); const [selectedAttribute, setSelectedAttribute] = useState( selectedAttributeProp, @@ -104,10 +101,23 @@ function ChartFilter({ selected={selectedAttribute} onChange={onAtrributeChange} disabled={index === "default"} - classes={{ - select: classes.select, - filled: classes.filled, - paper: classes.selectPaper, + SelectProps={{ + width: { + xs: theme.typography.pxToRem(165), + lg: theme.typography.pxToRem(200), + }, + height: theme.typography.pxToRem(40), + paddingLeft: 0, + "& .MuiSelect-filled": { + padding: `${theme.typography.pxToRem(10)} ${theme.typography.pxToRem( + 40, + )} ${theme.typography.pxToRem(10)} ${theme.typography.pxToRem(20)} !important`, + }, + }} + MenuProps={{ + "& .MuiMenu-paper": { + maxHeight: theme.typography.pxToRem(310), + }, }} /> @@ -125,10 +135,23 @@ function ChartFilter({ selected={selectedValue} label={selectedValue?.length ? "" : "Select a value"} onChange={onValueChange} - classes={{ - select: classes.select, - filled: classes.filled, - paper: classes.selectPaper, + SelectProps={{ + width: { + xs: theme.typography.pxToRem(165), + lg: theme.typography.pxToRem(200), + }, + height: theme.typography.pxToRem(40), + paddingLeft: 0, + "& .MuiSelect-filled": { + padding: `${theme.typography.pxToRem(10)} ${theme.typography.pxToRem( + 40, + )} ${theme.typography.pxToRem(10)} ${theme.typography.pxToRem(20)} !important`, + }, + }} + MenuProps={{ + "& .MuiMenu-paper": { + maxHeight: theme.typography.pxToRem(310), + }, }} /> diff --git a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/useStyles.js deleted file mode 100644 index 1a6c85531..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/useStyles.js +++ /dev/null @@ -1,39 +0,0 @@ -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ breakpoints, typography, palette }) => ({ - root: { - paddingBottom: typography.pxToRem(10), - }, - grid: { - [breakpoints.up("md")]: { - marginRight: typography.pxToRem(10), - }, - }, - icon: { - padding: 0, - background: palette.background.paper, - "& :hover": { - background: palette.background.paper, - }, - height: typography.pxToRem(36), - width: typography.pxToRem(36), - }, - select: { - width: typography.pxToRem(165), - height: typography.pxToRem(40), - paddingLeft: 0, - [breakpoints.up("lg")]: { - width: typography.pxToRem(200), - }, - }, - filled: { - padding: `${typography.pxToRem(10)} ${typography.pxToRem( - 40, - )} ${typography.pxToRem(10)} ${typography.pxToRem(20)} !important`, - }, - selectPaper: { - maxHeight: typography.pxToRem(310), - }, -})); - -export default useStyles; diff --git a/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js b/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js index 1158aa293..8c45cc98f 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js @@ -1,4 +1,4 @@ -import { Box, IconButton, SvgIcon, alpha } from "@mui/material"; +import { Box, IconButton, SvgIcon, alpha, useTheme } from "@mui/material"; import PropTypes from "prop-types"; import React, { useState } from "react"; @@ -6,10 +6,6 @@ import PinIconDefault from "@/climatemappedafrica/assets/pinBlack.svg"; import PinIconSelected from "@/climatemappedafrica/assets/pinSelected.svg"; import Select from "@/climatemappedafrica/components/Select"; -// useStyles uses import/definition order to determine how classes are ordered. -// eslint-disable-next-line import/order -import useStyles from "./useStyles"; - function PinIcon(props) { return ; } @@ -23,9 +19,8 @@ function PinAndCompare({ onClickPin, onClose, placeholder, - ...props }) { - const classes = useStyles(props); + const theme = useTheme(); const [open, setOpen] = useState(false); const [selected, setSelected] = useState(null); const options = locations @@ -110,10 +105,26 @@ function PinAndCompare({ options={options} placeholder={placeholder} selected={selected} - classes={{ - select: classes.locationSelect, - paper: classes.selectPaper, - filled: classes.filled, + SelectProps={{ + width: theme.typography.pxToRem(205), + height: theme.typography.pxToRem(40), + paddingLeft: 0, + "& .MuiSelect-filled": { + padding: `${theme.typography.pxToRem(10)} 0 ${theme.typography.pxToRem( + 10, + )} ${theme.typography.pxToRem(15)} !important`, + }, + }} + MenuProps={{ + "& .MuiMenu-paper": { + height: theme.typography.pxToRem(310), + boxShadow: "none", + }, + "& .MuiMenu-list": { + padding: `${theme.typography.pxToRem(10)} 0 ${theme.typography.pxToRem( + 10, + )} ${theme.typography.pxToRem(15)} !important`, + }, }} /> diff --git a/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/useStyles.js deleted file mode 100644 index ec69a427c..000000000 --- a/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/useStyles.js +++ /dev/null @@ -1,37 +0,0 @@ -import { alpha } from "@mui/material/styles"; -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ typography, palette }) => ({ - root: { - padding: `${typography.pxToRem(20)} 0`, - borderBottom: `solid 1px ${palette.divider}`, - }, - pinButton: { - maxHeight: typography.pxToRem(40), - maxWidth: typography.pxToRem(40), - overflow: "hidden", - padding: 0, - marginRight: typography.pxToRem(14), - backgroundColor: palette.grey.light, - borderRadius: "0px 2px 2px 0px", - boxShadow: `0px 3px 6px ${alpha(palette.common.black, 0.16)}`, // #00000029 - "&:hover,&:focus,&:focus-within": { - backgroundColor: palette.grey.light, - }, - }, - locationSelect: { - width: typography.pxToRem(205), - height: typography.pxToRem(40), - paddingLeft: 0, - }, - filled: { - padding: `${typography.pxToRem(10)} 0 ${typography.pxToRem( - 10, - )} ${typography.pxToRem(15)} !important`, - }, - selectPaper: { - height: typography.pxToRem(310), - }, -})); - -export default useStyles; diff --git a/apps/climatemappedafrica/src/components/Select/index.js b/apps/climatemappedafrica/src/components/Select/index.js index 2f951926a..a2b33cb16 100644 --- a/apps/climatemappedafrica/src/components/Select/index.js +++ b/apps/climatemappedafrica/src/components/Select/index.js @@ -7,13 +7,10 @@ import { InputLabel, Typography, } from "@mui/material"; -import clsx from "clsx"; import { uniqueId } from "lodash"; import PropTypes from "prop-types"; import React, { useState } from "react"; -import useStyles from "./useStyles"; - import ExpandMore from "@/climatemappedafrica/assets/icons/expand_more.svg"; function ExpandMoreIcon(props) { @@ -21,6 +18,8 @@ function ExpandMoreIcon(props) { } function Input({ + SelectProps, + MenuProps, disabled, helperText, label: labelProp, @@ -31,9 +30,7 @@ function Input({ options, selected, placeholder, - ...props }) { - const classes = useStyles(props); const [value, setValue] = useState(); const handleChange = (event) => { setValue(event.target.value); @@ -48,14 +45,44 @@ function Input({ variant="filled" size="small" disabled={disabled} - className={classes.formControl} + sx={{ + "& .MuiFilledInput-underline": { + "&::before": { + display: "none", + }, + }, + }} > {helperText ? ( - {helperText} + ({ + fontSize: { + xs: typography.pxToRem(10), + }, + fontWeight: "700", + color: "#666666", + textTransform: "uppercase", + marginLeft: 0, + marginBottom: typography.pxToRem(5), + })} + > + {helperText} + ) : null} {labelId ? ( - - + ({ + marginTop: typography.pxToRem(15), + })} + > + {labelProp} @@ -71,10 +98,19 @@ function Input({ defaultValue={selected || ""} IconComponent={ExpandMoreIcon} MenuProps={{ - classes: { - paper: classes.paper, - list: classes.list, - }, + sx: ({ typography }) => ({ + "& .MuiMenu-paper": { + borderBottomLeftRadius: 4, + borderBottomRightRadius: 4, + backgroundColor: "#F8F8F8", + marginTop: typography.pxToRem(5), + boxShadow: "none", + "&.MuiPaper-rounded": { + borderRadius: "0", + }, + }, + ...MenuProps, + }), anchorOrigin: { vertical: "bottom", horizontal: "left", @@ -86,13 +122,41 @@ function Input({ }, getContentAnchorEl: null, }} - classes={{ - root: classes.select, - filled: clsx(classes.filled, { [classes.filledPlaceholder]: !value }), - }} + sx={({ typography, palette }) => ({ + width: { + sx: typography.pxToRem(135), + lg: typography.pxToRem(185), + }, + background: palette.background.paper, + borderStyle: "none", + borderRadius: 2, + paddingBottom: typography.pxToRem(15), + paddingTop: typography.pxToRem(15), + fontSize: typography.caption.fontSize, + "&:focus": { + borderRadius: 2, + background: palette.background.paper, + borderColor: "none", + }, + "&::before": { + display: "none", + }, + "& .MuiSelect-filled": { + color: value ? "#959696" : "#666666", + }, + ...SelectProps, + })} > {placeholder ? ( - + {placeholder} ) : null} diff --git a/apps/climatemappedafrica/src/components/Select/useStyles.js b/apps/climatemappedafrica/src/components/Select/useStyles.js deleted file mode 100644 index 3872af0c0..000000000 --- a/apps/climatemappedafrica/src/components/Select/useStyles.js +++ /dev/null @@ -1,81 +0,0 @@ -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ typography, palette, breakpoints }) => ({ - root: {}, - formControl: { - "& .MuiFilledInput-underline": { - "&::before": { - display: "none", - }, - }, - }, - select: { - width: typography.pxToRem(135), - background: palette.background.paper, - borderStyle: "none", - borderRadius: 2, - paddingBottom: typography.pxToRem(15), - paddingTop: typography.pxToRem(15), - fontSize: typography.caption.fontSize, - "&:focus": { - borderRadius: 2, - background: palette.background.paper, - borderColor: "none", - }, - "&::before": { - display: "none", - }, - [breakpoints.up("lg")]: { - width: typography.pxToRem(185), - }, - }, - paper: { - borderBottomLeftRadius: 4, - borderBottomRightRadius: 4, - backgroundColor: "#F8F8F8", - marginTop: typography.pxToRem(5), - boxShadow: "none", - "&.MuiPaper-rounded": { - borderRadius: "0", - }, - }, - - list: { - paddingTop: 0, - paddingBottom: 0, - "& li": { - fontWeight: 400, - paddingTop: 12, - paddingBottom: 12, - }, - "& li.Mui-selected": { - fontWeight: "bold", - }, - }, - inputLabel: { - marginTop: typography.pxToRem(15), - }, - label: { - color: "#959696", - }, - helper: { - fontSize: typography.pxToRem(10), - fontWeight: "700", - color: "#666666", - textTransform: "uppercase", - marginLeft: 0, - marginBottom: typography.pxToRem(5), - }, - filled: {}, - filledPlaceholder: { - color: "#959696", - }, - placeholder: { - color: "#959696", - "&.Mui-selected": { - display: "none", - }, - }, -})); - -export default useStyles; diff --git a/apps/climatemappedafrica/src/components/Tabs/useStyles.js b/apps/climatemappedafrica/src/components/Tabs/useStyles.js new file mode 100644 index 000000000..6c284d31e --- /dev/null +++ b/apps/climatemappedafrica/src/components/Tabs/useStyles.js @@ -0,0 +1,48 @@ +import makeStyles from "@mui/styles/makeStyles"; + +const useStyles = makeStyles(({ palette, typography }) => ({ + root: { + flexGrow: 1, + }, + indicator: { + backgroundColor: palette.primary.main, + height: 2, + marginBottom: 0, + }, + divider: { + marginTop: typography.pxToRem(-2), + height: typography.pxToRem(2), + }, + tabs: { + minHeight: typography.pxToRem(23), + textTransform: "none", + }, + tab: { + color: "#666666", + fontWeight: 600, + fontSize: typography.pxToRem(16), + letterSpacing: typography.pxToRem(1.6), + lineHeight: 25 / 16, + marginRight: typography.pxToRem(40), + minHeight: typography.pxToRem(23), + minWidth: 0, + padding: `0 0 ${typography.pxToRem(4)} 0`, + textTransform: "uppercase", + "&:last-of-type": { + marginRight: 0, + }, + }, + tabSelected: { + color: palette.primary.main, + "&:hover, &:focus, &$selected": { + color: palette.primary.main, + cursor: "default", + }, + }, + tabPanel: {}, + tabPanels: { + marginTop: typography.pxToRem(40), + }, +})); + +export default useStyles; From 882128557c31432572caaa82818a27138612cee1 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Fri, 29 Nov 2024 12:08:04 +0300 Subject: [PATCH 21/27] Fix Select font size and color --- apps/climatemappedafrica/src/components/Select/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/climatemappedafrica/src/components/Select/index.js b/apps/climatemappedafrica/src/components/Select/index.js index a2b33cb16..6850e4de9 100644 --- a/apps/climatemappedafrica/src/components/Select/index.js +++ b/apps/climatemappedafrica/src/components/Select/index.js @@ -128,11 +128,12 @@ function Input({ lg: typography.pxToRem(185), }, background: palette.background.paper, + color: "#959696", borderStyle: "none", borderRadius: 2, paddingBottom: typography.pxToRem(15), paddingTop: typography.pxToRem(15), - fontSize: typography.caption.fontSize, + fontSize: `${typography.caption.fontSize} !important`, "&:focus": { borderRadius: 2, background: palette.background.paper, @@ -142,7 +143,7 @@ function Input({ display: "none", }, "& .MuiSelect-filled": { - color: value ? "#959696" : "#666666", + color: value ? "#959696" : "unset", }, ...SelectProps, })} From f387125f12afdca29ea0c7718618ad47bbc83c23 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Fri, 29 Nov 2024 17:21:17 +0300 Subject: [PATCH 22/27] Fix conditional header components --- .../HURUmap/CategoryHeader/index.js | 24 ++++++++++--------- .../HURUmap/SubcategoryHeader/index.js | 24 ++++++++++--------- 2 files changed, 26 insertions(+), 22 deletions(-) diff --git a/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js b/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js index 738ae39ea..251806987 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js @@ -36,17 +36,19 @@ function CategoryHeader({ title, description, icon, ...props }) { )} {title} - ({ - paddingBottom: typography.pxToRem(20), - "& p": { - margin: 0, - }, - })} - > - {description} - + {description && ( + ({ + paddingBottom: typography.pxToRem(20), + "& p": { + margin: 0, + }, + })} + > + {description} + + )} ); } diff --git a/apps/climatemappedafrica/src/components/HURUmap/SubcategoryHeader/index.js b/apps/climatemappedafrica/src/components/HURUmap/SubcategoryHeader/index.js index c855e0723..8f723bae9 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/SubcategoryHeader/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/SubcategoryHeader/index.js @@ -32,17 +32,19 @@ function SubcategoryHeader({ title, description, ...props }) { > {title} - ({ - paddingBottom: typography.pxToRem(20), - "& p": { - margin: 0, - }, - })} - > - {description} - + {description && ( + ({ + paddingBottom: typography.pxToRem(20), + "& p": { + margin: 0, + }, + })} + > + {description} + + )} ); } From 1cea12ab9a81b1fa24d0c2c52333cc4670b22b7d Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Fri, 29 Nov 2024 17:32:00 +0300 Subject: [PATCH 23/27] Improve Select --- .../components/HURUmap/ChartFilter/index.js | 67 +++++++------------ 1 file changed, 26 insertions(+), 41 deletions(-) diff --git a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js index 7cd850bef..3fdb9413c 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js @@ -1,10 +1,33 @@ -import { Box, Grid, IconButton, useTheme } from "@mui/material"; +import { Box, Grid, IconButton, styled } from "@mui/material"; import PropTypes from "prop-types"; import React, { useEffect, useState } from "react"; import CloseIcon from "@/climatemappedafrica/assets/icons/x.svg"; import Select from "@/climatemappedafrica/components/Select"; +const StyledSelect = styled(Select)(({ theme }) => ({ + SelectProps: { + width: { + width: { + xs: theme.typography.pxToRem(165), + lg: theme.typography.pxToRem(200), + }, + height: theme.typography.pxToRem(40), + paddingLeft: 0, + "& .MuiSelect-filled": { + padding: `${theme.typography.pxToRem(10)} ${theme.typography.pxToRem( + 40, + )} ${theme.typography.pxToRem(10)} ${theme.typography.pxToRem(20)} !important`, + }, + }, + }, + MenuProps: { + "& .MuiMenu-paper": { + maxHeight: theme.typography.pxToRem(310), + }, + }, +})); + function ChartFilter({ groups, onSelectValue, @@ -16,8 +39,6 @@ function ChartFilter({ selectedAttribute: selectedAttributeProp, selectedValue: selectedValueProp, }) { - const theme = useTheme(); - const [selectedAttribute, setSelectedAttribute] = useState( selectedAttributeProp, ); @@ -95,30 +116,12 @@ function ChartFilter({ marginRight: { md: typography.pxToRem(10) }, })} > - )} From a37d88174ef54d25865b84166c588a6049aeebed Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Tue, 3 Dec 2024 11:00:00 +0300 Subject: [PATCH 24/27] Fix review feedback --- .../src/assets/icons/x-logo.svg | 1 + .../src/components/HURUmap/Chart/index.js | 4 +- .../components/HURUmap/ChartFilter/index.js | 73 ++++++++++++------- .../src/components/Select/index.js | 3 + .../hurumap-core/src/Share/ShareButton.js | 2 +- 5 files changed, 54 insertions(+), 29 deletions(-) create mode 100644 apps/climatemappedafrica/src/assets/icons/x-logo.svg diff --git a/apps/climatemappedafrica/src/assets/icons/x-logo.svg b/apps/climatemappedafrica/src/assets/icons/x-logo.svg new file mode 100644 index 000000000..5526e4215 --- /dev/null +++ b/apps/climatemappedafrica/src/assets/icons/x-logo.svg @@ -0,0 +1 @@ + diff --git a/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js b/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js index d5b67f381..ba7f1a382 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js @@ -17,8 +17,8 @@ import FacebookIcon from "@/climatemappedafrica/assets/icons/Facebook.svg"; import LinkedInIcon from "@/climatemappedafrica/assets/icons/LinkedIn.svg"; import InfoIcon from "@/climatemappedafrica/assets/icons/plus.svg"; import ShareIcon from "@/climatemappedafrica/assets/icons/share.svg"; -import TwitterIcon from "@/climatemappedafrica/assets/icons/Twitter.svg"; import WhatsAppIcon from "@/climatemappedafrica/assets/icons/WhatsApp.svg"; +import XLogo from "@/climatemappedafrica/assets/icons/x-logo.svg"; import cfalogo from "@/climatemappedafrica/assets/logos/cfa.svg"; import projectlogo from "@/climatemappedafrica/assets/logos/projectLogo.svg"; import config, { hurumapArgs } from "@/climatemappedafrica/config"; @@ -213,7 +213,7 @@ function Chart({ }, { name: "Twitter", - icon: TwitterIcon, + icon: XLogo, props: { title, via: "Code4Africa", related: ["Code4Africa"] }, }, { diff --git a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js index 3fdb9413c..32e1e1bc6 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js @@ -1,33 +1,10 @@ -import { Box, Grid, IconButton, styled } from "@mui/material"; +import { Box, Grid, IconButton, useTheme } from "@mui/material"; import PropTypes from "prop-types"; import React, { useEffect, useState } from "react"; import CloseIcon from "@/climatemappedafrica/assets/icons/x.svg"; import Select from "@/climatemappedafrica/components/Select"; -const StyledSelect = styled(Select)(({ theme }) => ({ - SelectProps: { - width: { - width: { - xs: theme.typography.pxToRem(165), - lg: theme.typography.pxToRem(200), - }, - height: theme.typography.pxToRem(40), - paddingLeft: 0, - "& .MuiSelect-filled": { - padding: `${theme.typography.pxToRem(10)} ${theme.typography.pxToRem( - 40, - )} ${theme.typography.pxToRem(10)} ${theme.typography.pxToRem(20)} !important`, - }, - }, - }, - MenuProps: { - "& .MuiMenu-paper": { - maxHeight: theme.typography.pxToRem(310), - }, - }, -})); - function ChartFilter({ groups, onSelectValue, @@ -47,6 +24,8 @@ function ChartFilter({ const [attributeOptions, setAttributeOptions] = useState([]); const [valueOptions, setValueOptions] = useState([]); + const theme = useTheme(); + useEffect(() => { if (index === "default") { setAttributeOptions([selectedAttribute]); @@ -116,12 +95,33 @@ function ChartFilter({ marginRight: { md: typography.pxToRem(10) }, })} > - )} @@ -132,12 +132,33 @@ function ChartFilter({ marginRight: { md: typography.pxToRem(10) }, })} > - )} diff --git a/apps/climatemappedafrica/src/components/Select/index.js b/apps/climatemappedafrica/src/components/Select/index.js index 6850e4de9..5b8f6a486 100644 --- a/apps/climatemappedafrica/src/components/Select/index.js +++ b/apps/climatemappedafrica/src/components/Select/index.js @@ -145,6 +145,9 @@ function Input({ "& .MuiSelect-filled": { color: value ? "#959696" : "unset", }, + "& .MuiSelect-filled:focus": { + borderRadius: 0, + }, ...SelectProps, })} > diff --git a/packages/hurumap-core/src/Share/ShareButton.js b/packages/hurumap-core/src/Share/ShareButton.js index 9773811fb..373bebfec 100644 --- a/packages/hurumap-core/src/Share/ShareButton.js +++ b/packages/hurumap-core/src/Share/ShareButton.js @@ -54,7 +54,7 @@ const ShareButton = React.forwardRef(function ShareButton( Date: Tue, 3 Dec 2024 11:26:54 +0300 Subject: [PATCH 25/27] Minor improvements --- .../src/components/HURUmap/CategoryHeader/index.js | 9 ++++----- .../src/components/HURUmap/KeyMetric/index.js | 12 ++++++------ .../src/components/HURUmap/PinAndCompare/index.js | 8 ++++---- 3 files changed, 14 insertions(+), 15 deletions(-) diff --git a/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js b/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js index 251806987..1ad020917 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js @@ -2,8 +2,6 @@ import { Box, Typography } from "@mui/material"; import PropTypes from "prop-types"; import React from "react"; -import Image from "@/climatemappedafrica/components/Image"; - function CategoryHeader({ title, description, icon, ...props }) { if (!title) { return null; @@ -29,10 +27,11 @@ function CategoryHeader({ title, description, icon, ...props }) { height: typography.pxToRem(32), width: typography.pxToRem(32), marginRight: typography.pxToRem(10), + backgroundImage: `url(${icon})`, + backgroundSize: "contain", + backgroundRepeat: "no-repeat", })} - > - - + /> )} {title} diff --git a/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/index.js b/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/index.js index bbe83b62b..d2cca6a5f 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/index.js @@ -1,5 +1,5 @@ import { Source } from "@hurumap/next"; -import { Tooltip, Typography, LinearProgress, Box } from "@mui/material"; +import { Tooltip, Typography, LinearProgress, Box, Grid } from "@mui/material"; import PropTypes from "prop-types"; import React from "react"; @@ -27,12 +27,12 @@ function KeyMetric({ const tooltipTitle = `${title}: ${formattedValue}`; return ( - ({ width: "100%", - display: "flex", - flexDirection: "column", - justifyContent: "space-between", marginBottom: typography.pxToRem(20), ...sx, })} @@ -97,7 +97,7 @@ function KeyMetric({ > {source} - + ); } diff --git a/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js b/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js index 8c45cc98f..52aacec81 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js @@ -1,4 +1,4 @@ -import { Box, IconButton, SvgIcon, alpha, useTheme } from "@mui/material"; +import { Grid, IconButton, SvgIcon, alpha, useTheme } from "@mui/material"; import PropTypes from "prop-types"; import React, { useState } from "react"; @@ -62,8 +62,8 @@ function PinAndCompare({ const component = open ? PinIconSelected : PinIconDefault; return ( - ({ padding: `${typography.pxToRem(20)} 0`, @@ -127,7 +127,7 @@ function PinAndCompare({ }, }} /> - + ); } From 855de64eb9f15ccfeb58eb9979e6d1f593611c63 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Wed, 4 Dec 2024 16:17:05 +0300 Subject: [PATCH 26/27] Fix Select dropdown styles --- .../src/components/HURUmap/CategoryHeader/index.js | 4 ++-- .../src/components/HURUmap/ChartFilter/index.js | 9 +++------ .../src/components/HURUmap/PinAndCompare/index.js | 5 ----- .../src/components/Select/index.js | 14 +++++++++++++- 4 files changed, 18 insertions(+), 14 deletions(-) diff --git a/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js b/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js index 1ad020917..2884d8752 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js @@ -7,7 +7,7 @@ function CategoryHeader({ title, description, icon, ...props }) { return null; } return ( -
+ )} -
+ ); } diff --git a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js index 32e1e1bc6..2da5fb3f4 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js @@ -113,13 +113,10 @@ function ChartFilter({ }} MenuProps={{ "& .MuiMenu-paper": { - height: theme.typography.pxToRem(310), + maxHeight: theme.typography.pxToRem(310), boxShadow: "none", - }, - "& .MuiMenu-list": { - padding: `${theme.typography.pxToRem(10)} 0 ${theme.typography.pxToRem( - 10, - )} ${theme.typography.pxToRem(15)} !important`, + borderRadius: 0, + marginTop: theme.typography.pxToRem(5), }, }} /> diff --git a/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js b/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js index 52aacec81..f60a2d27f 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js @@ -120,11 +120,6 @@ function PinAndCompare({ height: theme.typography.pxToRem(310), boxShadow: "none", }, - "& .MuiMenu-list": { - padding: `${theme.typography.pxToRem(10)} 0 ${theme.typography.pxToRem( - 10, - )} ${theme.typography.pxToRem(15)} !important`, - }, }} /> diff --git a/apps/climatemappedafrica/src/components/Select/index.js b/apps/climatemappedafrica/src/components/Select/index.js index 5b8f6a486..4c2356952 100644 --- a/apps/climatemappedafrica/src/components/Select/index.js +++ b/apps/climatemappedafrica/src/components/Select/index.js @@ -109,6 +109,18 @@ function Input({ borderRadius: "0", }, }, + "& .MuiMenu-list": { + paddingTop: 0, + paddingBottom: 0, + "& li": { + fontWeight: 400, + paddingTop: typography.pxToRem(12), + paddingBottom: typography.pxToRem(12), + }, + "& li.Mui-selected": { + fontWeight: "bold", + }, + }, ...MenuProps, }), anchorOrigin: { @@ -130,7 +142,7 @@ function Input({ background: palette.background.paper, color: "#959696", borderStyle: "none", - borderRadius: 2, + borderRadius: typography.pxToRem(2), paddingBottom: typography.pxToRem(15), paddingTop: typography.pxToRem(15), fontSize: `${typography.caption.fontSize} !important`, From 4b998de5a11fac43755d49c41276ac17a7631af9 Mon Sep 17 00:00:00 2001 From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> Date: Wed, 4 Dec 2024 16:20:30 +0300 Subject: [PATCH 27/27] Update Chartfilter Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com> --- .../src/components/HURUmap/ChartFilter/index.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js index 2da5fb3f4..c54b4a642 100644 --- a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js +++ b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js @@ -147,13 +147,10 @@ function ChartFilter({ }} MenuProps={{ "& .MuiMenu-paper": { - height: theme.typography.pxToRem(310), + maxHeight: theme.typography.pxToRem(310), boxShadow: "none", - }, - "& .MuiMenu-list": { - padding: `${theme.typography.pxToRem(10)} 0 ${theme.typography.pxToRem( - 10, - )} ${theme.typography.pxToRem(15)} !important`, + borderRadius: 0, + marginTop: theme.typography.pxToRem(5), }, }} />