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] 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;