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] 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 (
-    <Box sx={{ display: "flex" }} className={classes.box}>
-      <CircularProgress className={classes.progress} />
+    <Box
+      sx={({ typography }) => ({
+        display: "flex",
+        justifyContent: "center",
+        height: typography.pxToRem(50),
+      })}
+    >
+      <CircularProgress />
     </Box>
   );
 }
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) => (
         <Grid
@@ -129,7 +133,15 @@ function Menu({ children, explorePagePath, links, socialLinks, ...props }) {
             <Typography
               component="span"
               variant="body1"
-              className={classes.label}
+              sx={({ typography }) => ({
+                fontWeight: 600,
+                letterSpacing: "1.6px",
+                fontSize: {
+                  xs: typography.pxToRem(20),
+                  lg: typography.pxToRem(16),
+                },
+                textTransform: "uppercase",
+              })}
             >
               {item.label}
             </Typography>
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,
+      })}
     >
       <Grid item xs={10}>
         <NextImageButton
@@ -200,13 +203,21 @@ function MobileNavigation({
         TransitionComponent={Transition}
         classes={{ root: classes.dialog, paper: classes.dialogPaper }}
       >
-        <DialogActions className={classes.dialogActions}>
+        <DialogActions
+          sx={{
+            padding: 0,
+          }}
+        >
           <Section className={classes.section}>
             <Grid
               container
               alignItems="center"
               justifyContent="space-between"
-              className={classes.logoSection}
+              sx={({ palette, typography }) => ({
+                borderBottom: `2px solid ${palette.background.default}`,
+                padding: `${typography.pxToRem(10)} 0`,
+                ...sx,
+              })}
             >
               <Grid item xs={10}>
                 <NextImageButton
@@ -239,7 +250,12 @@ function MobileNavigation({
             </Grid>
           </Section>
         </DialogActions>
-        <DialogContent className={classes.dialogContent}>
+        <DialogContent
+          sx={({ typography }) => ({
+            overflow: "hidden",
+            padding: `${typography.pxToRem(40)} 0`,
+          })}
+        >
           <Section className={classes.section}>
             <Menu
               explorePagePath={explorePagePath}