Merge pull request #1800 from hackforla/1791-update-styling

Use sx props for styling
hackforla · Sep 19, 2023 · 47f547d · 47f547d
2 parents 8e07604 + 8efc6dc
commit 47f547d
Showing 1 changed file with 25 additions and 23 deletions.
diff --git a/client/src/components/Layout/HeaderHome.js b/client/src/components/Layout/HeaderHome.js
@@ -1,33 +1,35 @@
 import React from "react";
 import Menu from "./Menu";
-import { AppBar, Toolbar } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles((theme) => ({
-  headerHolder: {
-    backgroundColor: "transparent",
-    marginBottom: "-65px",
-    boxShadow: "none",
-  },
-  header: {
-    minHeight: "60px",
-    display: "flex",
-    justifyContent: "flex-end",
-    padding: "0.25em 1.25em 0 0",
-    [theme.breakpoints.down("sm")]: {
-      padding: "0.25em 0.5em 0 0",
-      minHeight: "45px",
-    },
-  },
-}));
+import { AppBar, Toolbar, useMediaQuery } from "@mui/material";
+import { useTheme } from "@mui/styles";
 
 export default function Header() {
-  const classes = useStyles();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"), {
+    defaultMatches: true,
+  });
 
   return (
     <>
-      <AppBar position="sticky" className={classes.headerHolder}>
-        <Toolbar className={classes.header}>
+      <AppBar position="sticky"
+              sx={{
+                backgroundColor: 'transparent',
+                mb:'-65px',
+                boxShadow: 'none'
+                }}>
+          <Toolbar sx={(theme) => ({
+                      display: 'flex',
+                      justifyContent: "flex-end",
+                      "&.MuiToolbar-root": {
+                        minHeight: "60px",
+                        padding: "0.25em 1.25em 0 0",
+                        [theme.breakpoints.down("sm")]: { 
+                            minHeight: "45px", 
+                            padding: "0.25em 0.5em 0 0",
+                        },
+                      },
+                  })}
+          >
           <Menu />
         </Toolbar>
       </AppBar>