Use a semanticTokens to declare header height

dapp/src/components/DocsDrawer/index.tsx

@@ -6,16 +6,15 @@ import {
   DrawerOverlay,
 } from "@chakra-ui/react"
 import { useDocsDrawer } from "../../hooks"
-import { HEADER_HEIGHT } from "../Header"
 import { TextMd } from "../shared/Typography"
 
 export default function DocsDrawer() {
   const { isOpen, onClose } = useDocsDrawer()
 
   return (
     <Drawer size="xl" placement="right" isOpen={isOpen} onClose={onClose}>
-      <DrawerOverlay mt={HEADER_HEIGHT} />
-      <DrawerContent mt={HEADER_HEIGHT}>
+      <DrawerOverlay mt="header_height" />
+      <DrawerContent mt="header_height">
         <DrawerBody>
           {/* TODO: Add a documentation */}
           <TextMd>Documentation</TextMd>

dapp/src/components/Header/index.tsx

@@ -3,11 +3,9 @@ import { Flex, HStack, Icon } from "@chakra-ui/react"
 import ConnectWallet from "./ConnectWallet"
 import { AcreLogo } from "../../static/icons"
 
-export const HEADER_HEIGHT = 24
-
 export default function Header() {
   return (
-    <HStack as="header" p={6} height={HEADER_HEIGHT}>
+    <HStack as="header" p={6}>
       <Icon as={AcreLogo} w={20} h={12} />
       <Flex ml="auto">
         <ConnectWallet />

dapp/src/components/Sidebar/index.tsx

@@ -1,7 +1,6 @@
 import React from "react"
 import { Box, Button, useMultiStyleConfig } from "@chakra-ui/react"
 import { useDocsDrawer, useSidebar } from "../../hooks"
-import { HEADER_HEIGHT } from "../Header"
 
 export default function Sidebar() {
   const { isOpen } = useSidebar()
@@ -11,8 +10,8 @@ export default function Sidebar() {
   return (
     <Box
       as="aside"
+      mt="header_height"
       w={isOpen ? 80 : 0}
-      mt={HEADER_HEIGHT}
       __css={styles.sidebarContainer}
     >
       <Box __css={styles.sidebar}>

dapp/src/components/shared/ModalBase/index.tsx

@@ -5,7 +5,6 @@ import {
   ModalContent,
   ModalOverlay,
 } from "@chakra-ui/react"
-import { HEADER_HEIGHT } from "../../Header"
 import { ModalFlowContext, ModalFlowContextValue } from "../../../contexts"
 import { useSidebar } from "../../../hooks"
 
@@ -68,8 +67,8 @@ export default function ModalBase({
   return (
     <ModalFlowContext.Provider value={contextValue}>
       <Modal size="md" isOpen={isOpen} onClose={handleClose}>
-        <ModalOverlay mt={HEADER_HEIGHT} />
-        <ModalContent mt={2 * HEADER_HEIGHT}>
+        <ModalOverlay mt="header_height" />
+        <ModalContent mt="modal_shift">
           <ModalCloseButton />
           {children}
         </ModalContent>

dapp/src/theme/index.ts

@@ -2,7 +2,7 @@ import { StyleFunctionProps, extendTheme } from "@chakra-ui/react"
 import { mode } from "@chakra-ui/theme-tools"
 import Button from "./Button"
 import Switch from "./Switch"
-import { colors, fonts, lineHeights, zIndices } from "./utils"
+import { colors, fonts, lineHeights, semanticTokens, zIndices } from "./utils"
 import Drawer from "./Drawer"
 import Modal from "./Modal"
 import Card from "./Card"
@@ -16,6 +16,7 @@ const defaultTheme = {
   fonts,
   lineHeights,
   zIndices,
+  semanticTokens,
   styles: {
     global: (props: StyleFunctionProps) => ({
       body: {

dapp/src/theme/utils/index.ts

@@ -1,3 +1,4 @@
 export * from "./colors"
 export * from "./fonts"
 export * from "./zIndices"
+export * from "./semanticTokens"

dapp/src/theme/utils/semanticTokens.ts

@@ -0,0 +1,6 @@
+export const semanticTokens = {
+  space: {
+    header_height: 24,
+    modal_shift: 36,
+  },
+}