From f69ca3e86caa96ab3df5fa8cd4da2abf6db1a424 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Wed, 27 Nov 2024 09:58:21 +0300
Subject: [PATCH] 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[`<DropdownSearch /> renders unchanged 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-12ddcnt-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 48 48"
         />
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 (
     <>
-      <Box
-        sx={({ palette, typography }) => ({
-          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",
-            },
-          },
-        })}
-      >
+      <div className={classes.root}>
         <Map
           center={center}
           geography={geography}
@@ -227,7 +188,7 @@ function ExplorePage({
             },
           }}
         />
-      </Box>
+      </div>
       <Panel
         {...props}
         isCompare={state.isCompare}
diff --git a/apps/climatemappedafrica/src/components/ExplorePage/useStyles.js b/apps/climatemappedafrica/src/components/ExplorePage/useStyles.js
new file mode 100644
index 000000000..15069a4b4
--- /dev/null
+++ b/apps/climatemappedafrica/src/components/ExplorePage/useStyles.js
@@ -0,0 +1,46 @@
+import makeStyles from "@mui/styles/makeStyles";
+
+const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({
+  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[`<Hero /> renders unchanged 1`] = `
                   >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-12ddcnt-MuiSvgIcon-root"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
                       focusable="false"
                       viewBox="0 0 48 48"
                     />
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 (
-    <Box
-      sx={({ typography }) => ({
-        display: "flex",
-        justifyContent: "center",
-        height: typography.pxToRem(50),
-      })}
-    >
-      <CircularProgress />
+    <Box sx={{ display: "flex" }} className={classes.box}>
+      <CircularProgress className={classes.progress} />
     </Box>
   );
 }
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) => (
         <Grid
@@ -133,15 +129,7 @@ function Menu({ children, explorePagePath, links, socialLinks, ...props }) {
             <Typography
               component="span"
               variant="body1"
-              sx={({ typography }) => ({
-                fontWeight: 600,
-                letterSpacing: "1.6px",
-                fontSize: {
-                  xs: typography.pxToRem(20),
-                  lg: typography.pxToRem(16),
-                },
-                textTransform: "uppercase",
-              })}
+              className={classes.label}
             >
               {item.label}
             </Typography>
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}
     >
       <Grid item xs={10}>
         <NextImageButton
@@ -203,21 +200,13 @@ function MobileNavigation({
         TransitionComponent={Transition}
         classes={{ root: classes.dialog, paper: classes.dialogPaper }}
       >
-        <DialogActions
-          sx={{
-            padding: 0,
-          }}
-        >
+        <DialogActions className={classes.dialogActions}>
           <Section className={classes.section}>
             <Grid
               container
               alignItems="center"
               justifyContent="space-between"
-              sx={({ palette, typography }) => ({
-                borderBottom: `2px solid ${palette.background.default}`,
-                padding: `${typography.pxToRem(10)} 0`,
-                ...sx,
-              })}
+              className={classes.logoSection}
             >
               <Grid item xs={10}>
                 <NextImageButton
@@ -250,12 +239,7 @@ function MobileNavigation({
             </Grid>
           </Section>
         </DialogActions>
-        <DialogContent
-          sx={({ typography }) => ({
-            overflow: "hidden",
-            padding: `${typography.pxToRem(40)} 0`,
-          })}
-        >
+        <DialogContent className={classes.dialogContent}>
           <Section className={classes.section}>
             <Menu
               explorePagePath={explorePagePath}