Adapt SecondaryHeader style to SidebarHeader

shapehq · Jul 23, 2024 · 777d747 · 777d747
1 parent 01651e9
commit 777d747
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/src/features/sidebar/view/SidebarHeader.tsx b/src/features/sidebar/view/SidebarHeader.tsx
@@ -9,7 +9,7 @@ export default function SidebarHeader() {
   const projectWikiURL = process.env.NEXT_PUBLIC_SHAPE_DOCS_PROJECT_WIKI_URL || ""
 
   return (
-    <Box sx={{ padding: 2, paddingBottom: 4, display: "flex", justifyContent: "space-between", alignItems: "center"}}>
+    <Box sx={{ padding: 2, height: 80, marginBottom: 2, display: "flex", justifyContent: "space-between", alignItems: "center"}}>
       <Link
         href={"/"}
         style={{

diff --git a/src/features/sidebar/view/base/SecondaryHeader.tsx b/src/features/sidebar/view/base/SecondaryHeader.tsx
@@ -26,26 +26,28 @@ export default function SecondaryHeader({
       sx={{
         ...sx,
         backgroundColor: theme.palette.background.default,
-        color: theme.palette.text.primary
+        color: theme.palette.text.primary,
       }}
     >
-      <Box sx={{ display: "flex", alignItems: "center", padding: 2 }}>
+      <Box sx={{ display: "flex", alignItems: "center", padding: 2, maxWidth: "1460px", margin: "auto", height: 80 }}>
         {showOpenSidebar &&
           <IconButton
+            size="medium"
             color="primary"
             onClick={() => onToggleSidebarOpen(true)}
             edge="start"
           >
-            <FontAwesomeIcon icon={faBars} size="sm" style={{ aspectRatio: 1 }} />
+            <FontAwesomeIcon icon={faBars} size="sm" style={{ aspectRatio: 1, padding: 2 }} />
           </IconButton>
         }
         {showCloseSidebar &&
           <IconButton
+            size="small"
             color="primary"
             onClick={() => onToggleSidebarOpen(false)}
             edge="start"
           >
-            <FontAwesomeIcon icon={faChevronLeft} size="sm" style={{ aspectRatio: 1 }} />
+            <FontAwesomeIcon icon={faChevronLeft} size="sm" style={{ aspectRatio: 1, padding: 2 }} />
           </IconButton>
         }
         <Box sx={{ display: "flex", flexGrow: 1, justifyContent: "end" }}>