diff --git a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js index a33d2d1c6..2b4e1ce6e 100644 --- a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js +++ b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js @@ -7,12 +7,6 @@ import Card from "@/climatemappedafrica/components/Card"; import Carousel from "@/climatemappedafrica/components/Carousel"; import Section from "@/climatemappedafrica/components/Section"; -// NOTE(kilemensi) useStyles uses import/definition order to determine how -// classes are ordered. -// see: https://material-ui.com/styles/advanced/#makestyles-withstyles-styled -// eslint-disable-next-line import/order -import useStyles from "./useStyles"; - const responsive = { desktop: { items: 4, @@ -24,9 +18,8 @@ const responsive = { }, }; -function AboutTeam({ title, members: membersProp, ...props }) { +function AboutTeam({ title, members: membersProp }) { const membersCount = membersProp?.length ?? 0; - const classes = useStyles({ ...props, membersCount }); const theme = useTheme(); const isMdUp = useMediaQuery(theme.breakpoints.up("md")); const ref = useRef(); @@ -54,7 +47,6 @@ function AboutTeam({ title, members: membersProp, ...props }) { {title && ( 2 ? "flex" : "none", + md: membersCount > 4 ? "flex" : "none", + }, + "& button": { + borderColor: "#000", + height: theme.typography.pxToRem(16), + marginRight: theme.typography.pxToRem(12), + width: theme.typography.pxToRem(16), + }, + "& .react-multi-carousel-dot--active button": { + borderColor: "#000", + }, + }, + }} > {membersProp.map((member) => ( renders unchanged 1`] = ` class="MuiBox-root css-1termwk" >

renders unchanged 1`] = ` About Team

-
    +
    +
      +
diff --git a/apps/climatemappedafrica/src/components/AboutTeam/useStyles.js b/apps/climatemappedafrica/src/components/AboutTeam/useStyles.js deleted file mode 100644 index d073006fb..000000000 --- a/apps/climatemappedafrica/src/components/AboutTeam/useStyles.js +++ /dev/null @@ -1,19 +0,0 @@ -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ breakpoints, palette }) => ({ - dotList: ({ membersCount }) => ({ - display: membersCount > 2 ? "flex" : "none", - "& button": { - borderColor: "#000", - background: palette.background.paper, - }, - "& .react-multi-carousel-dot--active button": { - borderColor: "#000", - }, - [breakpoints.up("md")]: { - display: membersCount > 4 ? "flex" : "none", - }, - }), -})); - -export default useStyles; diff --git a/apps/climatemappedafrica/src/components/Card/ActionArea.js b/apps/climatemappedafrica/src/components/Card/ActionArea.js index 0e8c2d68f..96041d08d 100644 --- a/apps/climatemappedafrica/src/components/Card/ActionArea.js +++ b/apps/climatemappedafrica/src/components/Card/ActionArea.js @@ -1,20 +1,17 @@ import { Link } from "@commons-ui/next"; import { CardActionArea } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; import PropTypes from "prop-types"; import React from "react"; -const useStyles = makeStyles(() => ({ - root: {}, - focusHighlight: { - background: "transparent", - }, - focusVisible: {}, -})); - -function ActionArea({ href, children, onClick, ...props }) { - const classes = useStyles(props); - +function ActionArea({ + href, + children, + onClick, + ActionAreaRootProps, + FocusHighlightProps, + FocusVisibleProps, + ...props +}) { if (!(href || onClick)) { return children; } @@ -26,10 +23,17 @@ function ActionArea({ href, children, onClick, ...props }) { {...props} href={href} onClick={onClick} - classes={{ - root: classes.root, - focusHighlight: classes.focusHighlight, - focusVisible: classes.focusVisible, + sx={{ + "& .MuiCardActionArea-root": { + ...ActionAreaRootProps, + }, + "& .MuiCardActionArea-focusHighlight": { + background: "transparent", + ...FocusHighlightProps, + }, + "& .Mui-focusVisible": { + ...FocusVisibleProps, + }, }} > {children} diff --git a/apps/climatemappedafrica/src/components/Card/Card.js b/apps/climatemappedafrica/src/components/Card/Card.js index 552e97356..81dd71f3d 100644 --- a/apps/climatemappedafrica/src/components/Card/Card.js +++ b/apps/climatemappedafrica/src/components/Card/Card.js @@ -6,13 +6,10 @@ import React from "react"; import CardActionArea from "./ActionArea"; import CardContent from "./Content"; import CardMedia from "./Media"; -import useStyles from "./useStyles"; function Card({ alt, chart, - children, - className, ctaText, description, descriptionProps, @@ -28,10 +25,8 @@ function Card({ titleProps, variant, sx, - ...props }) { const squareMedia = mediaProps?.square; - const classes = useStyles({ ...props, squareMedia }); const actionAreaProps = { href, onClick }; const contentProps = { description, @@ -46,34 +41,27 @@ function Card({ ({ + sx={({ typography }) => ({ backgroundColor: "inherit", boxShadow: "none", borderRadius: 0, padding: { - xs: squareMedia ? `0 ${theme.typography.pxToRem(36)}` : 0, + xs: squareMedia ? `0 ${typography.pxToRem(36)}` : 0, md: 0, }, minWidth: { - xs: theme.typography.pxToRem(350), + xs: typography.pxToRem(350), md: "unset", }, width: { xs: "100%", - md: theme.typography.pxToRem(squareMedia ? 278 : 296), - lg: theme.typography.pxToRem(squareMedia ? 278 : 376), + md: typography.pxToRem(squareMedia ? 278 : 296), + lg: typography.pxToRem(squareMedia ? 278 : 376), }, ...sx, })} > - + ({ + marginTop: typography.pxToRem(squareMedia ? 20 : 40), + overflow: "hidden", + display: "-webkit-box", + WebkitLineClamp: 2, + WebkitBoxOrient: "vertical", + textOverflow: "ellipsis", + }), }} + DescriptionProps={{ + sx: { + overflow: "hidden", + display: "-webkit-box", + WebkitLineClamp: 3, + WebkitBoxOrient: "vertical", + textOverflow: "ellipsis", + }, + }} + sx={({ typography }) => ({ + backgroundColor: "inherit", + boxShadow: "none", + borderRadius: 0, + padding: { + xs: squareMedia ? `0 ${typography.pxToRem(36)}` : 0, + md: 0, + }, + minWidth: { + xs: typography.pxToRem(350), + md: "unset", + }, + width: { + xs: "100%", + md: typography.pxToRem(squareMedia ? 278 : 296), + lg: typography.pxToRem(squareMedia ? 278 : 376), + }, + })} /> {href && ctaText && ( @@ -101,9 +119,9 @@ function Card({ underline="always" variant="subtitle2" {...linkProps} - sx={(theme) => ({ + sx={({ typography }) => ({ display: "inline-flex", - marginTop: theme.typography.pxToRem(20), + marginTop: typography.pxToRem(20), fontWeight: "bold", })} > diff --git a/apps/climatemappedafrica/src/components/Card/Content.js b/apps/climatemappedafrica/src/components/Card/Content.js index 26f057b04..59cb5dbfb 100644 --- a/apps/climatemappedafrica/src/components/Card/Content.js +++ b/apps/climatemappedafrica/src/components/Card/Content.js @@ -1,65 +1,53 @@ -import { RichTypography } from "@commons-ui/legacy"; import { RichText } from "@commons-ui/payload"; -import { CardContent } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; -import clsx from "clsx"; +import { CardContent, Typography } from "@mui/material"; import PropTypes from "prop-types"; import React from "react"; -const useStyles = makeStyles(({ typography }) => ({ - root: { - padding: 0, - "&:last-child": { - padding: 0, - }, - }, - title: {}, - description: { - marginTop: typography.pxToRem(20), - }, - link: { - display: "inline-flex", - marginTop: typography.pxToRem(20), - fontWeight: "bold", - }, -})); - function Content({ - className, description, - descriptionProps, + DescriptionProps, title, - titleProps, + TitleProps, href, - ctaText, - linkProps, - ...props + sx, }) { - const classes = useStyles(props); if (!(title || description || href)) { return null; } return ( - - + + {title} - + {/* Support for rich text while keeping backwards compatibility */} {Array.isArray(description) ? ( - + ) : ( - ({ + marginTop: typography.pxToRem(20), + ...DescriptionProps?.sx, + })} > {description} - + )} ); diff --git a/apps/climatemappedafrica/src/components/Card/Media.js b/apps/climatemappedafrica/src/components/Card/Media.js index 0a0fcae70..b8710444f 100644 --- a/apps/climatemappedafrica/src/components/Card/Media.js +++ b/apps/climatemappedafrica/src/components/Card/Media.js @@ -1,56 +1,9 @@ -import { RichTypography } from "@commons-ui/legacy"; -import makeStyles from "@mui/styles/makeStyles"; +import { Box } from "@mui/material"; import PropTypes from "prop-types"; import React from "react"; import Image from "@/climatemappedafrica/components/Image"; -const useStyles = makeStyles(({ breakpoints, typography }) => ({ - root: ({ square, variant }) => { - let embedStyles; - if (variant === "embed") { - embedStyles = { - // will most likely be an iframe - "& > :first-child": { - position: "absolute", - width: "100%", - height: "100%", - left: 0, - top: 0, - }, - }; - } - return { - minWidth: typography.pxToRem(square ? 278 : 350), - position: "relative", - width: "100%", - [breakpoints.up("md")]: { - height: typography.pxToRem(square ? 278 : 183), - minWidth: typography.pxToRem(square ? 278 : 296), - width: "auto", - }, - [breakpoints.up("lg")]: { - height: typography.pxToRem(square ? 278 : 233), - minWidth: typography.pxToRem(square ? 278 : 376), - }, - "&:after": { - content: '""', - display: "block", - // square ? 278/278 ratio : 350/216 ratio - paddingTop: square ? "100%" : "61.714%", - [breakpoints.up("md")]: { - content: "", - display: "none", - }, - }, - ...embedStyles, - }; - }, - image: { - objectFit: "contain !important", - }, -})); - function Media({ alt, chart, @@ -60,26 +13,59 @@ function Media({ media: mediaProp, ...props }) { - const classes = useStyles(props); - const { variant } = props; + const { variant, square } = props; const media = (variant === "embed" ? chart || embed : image) || mediaProp; if (!media) { return null; } - if (variant === "embed") { - return {media}; - } return ( -
+ ({ + minWidth: { + xs: typography.pxToRem(square ? 278 : 350), + md: typography.pxToRem(square ? 278 : 296), + lg: typography.pxToRem(square ? 278 : 376), + }, + position: "relative", + width: { + xs: "100%", + md: "auto", + }, + height: { + md: typography.pxToRem(square ? 278 : 183), + lg: typography.pxToRem(square ? 278 : 233), + }, + "&:after": { + content: '""', + display: { + xs: "block", + md: "none", + }, + paddingTop: square ? "100%" : "61.714%", + }, + ".image": { + objectFit: "contain !important", + }, + ...(variant === "embed" && { + "& > :first-child": { + position: "absolute", + width: "100%", + height: "100%", + left: 0, + top: 0, + }, + }), + })} + > {alt} -
+ ); } diff --git a/apps/climatemappedafrica/src/components/Card/useStyles.js b/apps/climatemappedafrica/src/components/Card/useStyles.js deleted file mode 100644 index 0910736eb..000000000 --- a/apps/climatemappedafrica/src/components/Card/useStyles.js +++ /dev/null @@ -1,46 +0,0 @@ -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ breakpoints, typography }) => ({ - root: ({ squareMedia }) => ({ - backgroundColor: "inherit", - boxShadow: "none", - borderRadius: 0, - padding: squareMedia ? `0 ${typography.pxToRem(36)}` : 0, - minWidth: typography.pxToRem(350), - width: "100%", - [breakpoints.up("md")]: { - padding: 0, - minWidth: "unset", - width: typography.pxToRem(squareMedia ? 278 : 296), - }, - [breakpoints.up("lg")]: { - width: typography.pxToRem(squareMedia ? 278 : 376), - }, - }), - actionArea: {}, - actionAreaFocusHighlight: {}, - actionAreaFocusVisible: {}, - content: {}, - contentDescription: { - overflow: "hidden", - display: "-webkit-box", - WebkitLineClamp: 3, - WebkitBoxOrient: "vertical", - textOverflow: "ellipsis", - }, - contentLink: {}, - contentTitle: ({ squareMedia }) => ({ - marginTop: typography.pxToRem(squareMedia ? 20 : 40), - overflow: "hidden", - display: "-webkit-box", - WebkitLineClamp: 2, - WebkitBoxOrient: "vertical", - textOverflow: "ellipsis", - }), - media: {}, - mediaImage: { - objectFit: "contain !important", - }, -})); - -export default useStyles; diff --git a/apps/climatemappedafrica/src/components/Carousel/Carousel.js b/apps/climatemappedafrica/src/components/Carousel/Carousel.js index a1f63ea04..c44acbf88 100644 --- a/apps/climatemappedafrica/src/components/Carousel/Carousel.js +++ b/apps/climatemappedafrica/src/components/Carousel/Carousel.js @@ -1,11 +1,9 @@ +import { Box } from "@mui/material"; import { deepmerge } from "@mui/utils"; -import clsx from "clsx"; import PropTypes from "prop-types"; import React from "react"; import RMCarousel from "react-multi-carousel"; -import useStyles from "./useStyles"; - import "react-multi-carousel/lib/styles.css"; const DEFAULT_RESPONSIVE = { @@ -27,25 +25,46 @@ const DEFAULT_RESPONSIVE = { }; const Carousel = React.forwardRef(function Carousel(props, ref) { - const { children, className, responsive, ...other } = props; - const classes = useStyles(other); + const { children, className, responsive, DotListProps, ...other } = props; return ( - ({ + ".dotlist": { + display: "flex", + justifyContent: "center", + listStyle: "none", + paddingTop: theme.typography.pxToRem(40), + position: "relative", + "& button": { + borderColor: theme.palette.divider, + height: theme.typography.pxToRem(16), + marginRight: theme.typography.pxToRem(12), + width: theme.typography.pxToRem(16), + }, + "& .react-multi-carousel-dot--active button": { + borderColor: "#A0A0A0", + background: "#000", + }, + ...DotListProps?.sx, + }, + })} > - {children} - + + {children} + + ); }); diff --git a/apps/climatemappedafrica/src/components/Carousel/Carousel.snap.js b/apps/climatemappedafrica/src/components/Carousel/Carousel.snap.js index e605e4acd..d15ee3f23 100644 --- a/apps/climatemappedafrica/src/components/Carousel/Carousel.snap.js +++ b/apps/climatemappedafrica/src/components/Carousel/Carousel.snap.js @@ -3,13 +3,17 @@ exports[` renders unchanged 1`] = `
-
    +
    +
      +
`; diff --git a/apps/climatemappedafrica/src/components/Carousel/useStyles.js b/apps/climatemappedafrica/src/components/Carousel/useStyles.js deleted file mode 100644 index 1a22978d4..000000000 --- a/apps/climatemappedafrica/src/components/Carousel/useStyles.js +++ /dev/null @@ -1,22 +0,0 @@ -import makeStyles from "@mui/styles/makeStyles"; - -const useStyles = makeStyles(({ palette, typography }) => ({ - root: {}, - dotList: { - margin: `0 ${typography.pxToRem(30)}`, - paddingTop: `${typography.pxToRem(40)}`, - position: "unset", - "& button": { - borderColor: palette.divider, - height: typography.pxToRem(16), - marginRight: typography.pxToRem(12), - width: typography.pxToRem(16), - }, - "& .react-multi-carousel-dot--active button": { - borderColor: "#A0A0A0", - background: "#000", - }, - }, -})); - -export default useStyles; 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; 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..a34729577 100644 --- a/apps/climatemappedafrica/src/components/Menu/index.js +++ b/apps/climatemappedafrica/src/components/Menu/index.js @@ -1,77 +1,9 @@ -import { StayInTouch } from "@commons-ui/next"; +import { StayInTouch, Link } from "@commons-ui/next"; import { Grid, Typography } from "@mui/material"; -import makeStyles from "@mui/styles/makeStyles"; import PropTypes from "prop-types"; import React from "react"; -import Link from "@/climatemappedafrica/components/Link"; - -const useStyles = makeStyles(({ typography, breakpoints, palette }) => ({ - root: { - [breakpoints.up("lg")]: { - padding: 0, - }, - }, - links: { - padding: `${typography.pxToRem(14)} ${typography.pxToRem(28)} `, - "&:hover": { - padding: `${typography.pxToRem(16)} ${typography.pxToRem(30)} `, - border: "1px solid", - }, - }, - label: { - fontWeight: 600, - letterSpacing: "1.6px", - fontSize: typography.pxToRem(20), - [breakpoints.up("lg")]: { - fontSize: typography.pxToRem(16), - }, - textTransform: "uppercase", - }, - text: { - "&::after": { - content: '""', - backgroundImage: "none", - backgroundPosition: "center", - backgroundRepeat: "no-repeat", - marginLeft: 0, - height: 0, - width: 0, - }, - "&:hover::after": { - content: '""', - backgroundImage: "none", - backgroundPosition: "center", - backgroundRepeat: "no-repeat", - transition: "margin 0.3s ease", - marginLeft: 0, - height: 0, - width: 0, - }, - }, - menuLinks: { - color: palette.text.secondary, - margin: `${typography.pxToRem(10)} ${typography.pxToRem(-8)}`, - "&:hover, &:focus, &:focus-within": { - backgroundColor: "transparent", - textDecoration: "none", - color: palette.text.secondary, - }, - [breakpoints.up("lg")]: { - padding: `${typography.pxToRem(7)} ${typography.pxToRem(18)}`, - color: palette.grey.dark, - "&:hover, &:focus, &:focus-within": { - color: "#707070", - backgroundColor: "transparent", - textDecoration: "none", - }, - }, - }, -})); - -function Menu({ children, explorePagePath, links, socialLinks, ...props }) { - const classes = useStyles(props); - +function Menu({ children, explorePagePath, links, socialLinks, LinkProps }) { if (!links?.length) { return null; } @@ -82,9 +14,13 @@ 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) => ( + {links.map((item) => ( ({ + variant={item.href === exploreHref ? "text" : "outlined"} + sx={({ palette, typography }) => ({ borderRadius: 20, border: item.href === exploreHref ? "3px solid" : 0, - color: { - xs: theme.palette.text.secondary, - lg: theme.palette.primary.main, + padding: { + xs: + item.href === exploreHref + ? `${typography.pxToRem(14)} ${typography.pxToRem(28)} ` + : "unset", + lg: + item.href === exploreHref + ? `${typography.pxToRem(14)} ${typography.pxToRem(28)} ` + : `${typography.pxToRem(7)} ${typography.pxToRem(18)}`, + }, + margin: + item.href === exploreHref + ? 0 + : `${typography.pxToRem(10)} ${typography.pxToRem(-8)}`, + color: + item.href === exploreHref + ? palette.primary.main + : palette.grey.dark, + "&:hover, &:focus, &:focus-within": { + backgroundColor: "transparent", + textDecoration: "none", + color: + item.href === exploreHref ? palette.primary.main : "#707070", + border: item.href === exploreHref ? "1px solid" : 0, }, + ...LinkProps?.sx, })} > ({ + 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/ExploreNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js index a01ed8ae1..9f9fac7c0 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,13 +47,6 @@ 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, - }} /> {tutorialEnabled && (