Center the dApp header (#721)

**Before** ![image](https://github.com/user-attachments/assets/d34af9a7-24dc-4a22-aaca-4cae2514e74f) **After** ![Screenshot 2024-09-04 at 11 14 18](https://github.com/user-attachments/assets/b965a5a1-a55c-40cc-bfaf-57f64d6846c1)
thesis · Sep 4, 2024 · e184147 · e184147
2 parents b85de15 + 86c68ad
commit e184147
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
  },
 }