Fix mobile panel

CodeForAfrica · Nov 27, 2024 · 7f3914d · 7f3914d
1 parent ad3b094
commit 7f3914d
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 140 deletions.
diff --git 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
diff --git 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}
     </div>

diff --git 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 (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        flexGrow: 1,
+      }}
+    >
       <MuiTabs
         value={value}
         onChange={linkComponent ? undefined : handleChange}
         variant="scrollable"
         scrollButtons={false}
         aria-label={`${name} tabs`}
-        classes={{
-          root: classes.tabs,
-          indicator: classes.indicator,
-        }}
+        sx={({ palette, typography }) => ({
+          minHeight: typography.pxToRem(23),
+          textTransform: "none",
+          "& .MuiTabs-indicator": {
+            backgroundColor: palette.primary.main,
+            height: 2,
+            marginBottom: 0,
+            ...TabIndicatorProps,
+          },
+          ...TabsProps,
+        })}
       >
         {items.map(({ label, href, slug }, index) => (
           <Tab
@@ -68,15 +80,38 @@ function Tabs({
             }
             {...a11yProps(name, index)}
             disableRipple
-            classes={{
-              root: classes.tab,
-              selected: classes.tabSelected,
-            }}
+            sx={({ typography }) => ({
+              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,
+            })}
           />
         ))}
       </MuiTabs>
-      <Divider className={classes.divider} />
-      <div className={classes.tabPanels}>
+      <Divider
+        sx={({ typography }) => ({
+          marginTop: typography.pxToRem(-2),
+          height: typography.pxToRem(2),
+          ...DividerProps,
+        })}
+      />
+      <Box
+        sx={({ typography }) => ({
+          marginTop: typography.pxToRem(40),
+          ...TabPanelProps,
+        })}
+      >
         {items.map((item, index) => (
           <TabPanel
             key={item.label}
@@ -87,8 +122,8 @@ function Tabs({
             {item.children}
           </TabPanel>
         ))}
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }
 

diff --git a/apps/climatemappedafrica/src/components/Tabs/useStyles.js b/apps/climatemappedafrica/src/components/Tabs/useStyles.js