From 8c5fd08728b481b7b06663c3e4177bf05f0ae5d7 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Tue, 19 Dec 2023 16:23:06 +0100
Subject: [PATCH] Use a `semanticTokens` to declare header height

---
 dapp/src/components/DocsDrawer/index.tsx       | 5 ++---
 dapp/src/components/Header/index.tsx           | 4 +---
 dapp/src/components/Sidebar/index.tsx          | 3 +--
 dapp/src/components/shared/ModalBase/index.tsx | 5 ++---
 dapp/src/theme/index.ts                        | 3 ++-
 dapp/src/theme/utils/index.ts                  | 1 +
 dapp/src/theme/utils/semanticTokens.ts         | 6 ++++++
 7 files changed, 15 insertions(+), 12 deletions(-)
 create mode 100644 dapp/src/theme/utils/semanticTokens.ts

diff --git a/dapp/src/components/DocsDrawer/index.tsx b/dapp/src/components/DocsDrawer/index.tsx
index 0c948f1d5..5082af57b 100644
--- a/dapp/src/components/DocsDrawer/index.tsx
+++ b/dapp/src/components/DocsDrawer/index.tsx
@@ -6,7 +6,6 @@ import {
   DrawerOverlay,
 } from "@chakra-ui/react"
 import { useDocsDrawer } from "../../hooks"
-import { HEADER_HEIGHT } from "../Header"
 import { TextMd } from "../shared/Typography"
 
 export default function DocsDrawer() {
@@ -14,8 +13,8 @@ export default function DocsDrawer() {
 
   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>
diff --git a/dapp/src/components/Header/index.tsx b/dapp/src/components/Header/index.tsx
index 3275890c3..544fbdee9 100644
--- a/dapp/src/components/Header/index.tsx
+++ b/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 />
diff --git a/dapp/src/components/Sidebar/index.tsx b/dapp/src/components/Sidebar/index.tsx
index 9b0f59fb2..a7625698f 100644
--- a/dapp/src/components/Sidebar/index.tsx
+++ b/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}>
diff --git a/dapp/src/components/shared/ModalBase/index.tsx b/dapp/src/components/shared/ModalBase/index.tsx
index 9ad91da6d..e433adc99 100644
--- a/dapp/src/components/shared/ModalBase/index.tsx
+++ b/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>
diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts
index 70802c674..61f5bfe67 100644
--- a/dapp/src/theme/index.ts
+++ b/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: {
diff --git a/dapp/src/theme/utils/index.ts b/dapp/src/theme/utils/index.ts
index 2ea26720c..d2fad7e05 100644
--- a/dapp/src/theme/utils/index.ts
+++ b/dapp/src/theme/utils/index.ts
@@ -1,3 +1,4 @@
 export * from "./colors"
 export * from "./fonts"
 export * from "./zIndices"
+export * from "./semanticTokens"
diff --git a/dapp/src/theme/utils/semanticTokens.ts b/dapp/src/theme/utils/semanticTokens.ts
new file mode 100644
index 000000000..4d5421595
--- /dev/null
+++ b/dapp/src/theme/utils/semanticTokens.ts
@@ -0,0 +1,6 @@
+export const semanticTokens = {
+  space: {
+    header_height: 24,
+    modal_shift: 36,
+  },
+}