Center the dApp header

thesis · Sep 4, 2024 · 86c68ad · 86c68ad
1 parent b85de15
commit 86c68ad
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/dapp/src/components/Header/index.tsx b/dapp/src/components/Header/index.tsx
@@ -10,7 +10,15 @@ export default function Header() {
   const isMobileMode = useMobileMode()
 
   return (
-    <HStack as="header" px={10} py={7} justify="center">
+    <HStack
+      as="header"
+      w="full"
+      mx="auto"
+      justify="center"
+      py={7}
+      px="page_content_padding_x"
+      maxW="page_content_max_width"
+    >
       <Link href={EXTERNAL_HREF.WEBSITE} isExternal>
         <Icon as={AcreLogo} w={20} h={12} />
       </Link>

diff --git a/dapp/src/pages/DashboardPage/PageLayout/PageLayout.tsx b/dapp/src/pages/DashboardPage/PageLayout/PageLayout.tsx
@@ -7,9 +7,9 @@ function PageLayout(props: GridProps) {
   return (
     <Grid
       w="full"
-      maxW="110rem" // 1760px -> content width + x-axis padding
       mx="auto"
-      px={10}
+      maxW="page_content_max_width"
+      px="page_content_padding_x"
       py={9}
       gap={8}
       alignItems="start"

diff --git a/dapp/src/theme/utils/semanticTokens.ts b/dapp/src/theme/utils/semanticTokens.ts
@@ -3,9 +3,10 @@ export const semanticTokens = {
     header_height: 24,
     modal_shift: "9.75rem", // 156px
     dashboard_card_padding: 5,
+    page_content_padding_x: 10,
   },
   sizes: {
     sidebar_width: 80,
-    landing_page_content_width: "73.375rem", // 1174px
+    page_content_max_width: "110rem", // 1760px -> content width + x-axis padding
   },
 }