feat: Center header for large screens

visualize-admin · Nov 4, 2022 · 8700f25 · 8700f25
1 parent e027c38
commit 8700f25
Showing 1 changed file with 23 additions and 18 deletions.
diff --git a/app/components/header.tsx b/app/components/header.tsx
@@ -68,35 +68,40 @@ export const HeaderBorder = () => {
   );
 };
 
+const useHeaderStyles = makeStyles<Theme>((theme) => ({
+  wrapper: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100%",
+    overflowY: "hidden",
+    zIndex: 13,
+    backgroundColor: theme.palette.grey[100],
+  },
+  content: {
+    minHeight: 92,
+    maxWidth: 1400,
+    marginLeft: "auto",
+    marginRight: "auto",
+    color: theme.palette.grey[700],
+  },
+}));
+
 export const Header = ({
   pageType = "app",
 }: {
   pageType?: "content" | "app";
 }) => {
+  const classes = useHeaderStyles();
+
   return (
-    <Box
-      sx={
-        pageType == "content"
-          ? undefined
-          : {
-              position: "fixed",
-              top: 0,
-              left: 0,
-              width: "100%",
-              overflowY: "hidden",
-              zIndex: 13,
-            }
-      }
-    >
+    <Box className={pageType === "app" ? classes.wrapper : undefined}>
       <Flex
         component="header"
+        className={classes.content}
         sx={{
           px: [0, 4, 4],
           pt: [0, 3, 3],
-          minHeight: 92,
-
-          backgroundColor: "grey.100",
-          color: "grey.700",
           flexDirection: ["column", "row"],
         }}
       >