Use semantic tokens to calculate footer width for error modal

thesis · Apr 8, 2024 · 5f37071 · 5f37071
1 parent ed77d68
commit 5f37071
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/.../src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx b/.../src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
@@ -66,10 +66,11 @@ export default function ServerErrorModal({
         // The dialog container style has padding set by default.
         // However, the modal footer should be positioned outside this padding.
         // To avoid changing it, let's set the position to relative and calculate the correct width.
+        // To calculate the width we need to subtract the border width on two sides from the modal width.
         position="relative"
         bottom={-4}
         left={-4}
-        w={`calc(var(--chakra-sizes-${MODAL_BASE_SIZE}) - 0.25rem)`}
+        w={`calc(var(--chakra-sizes-${MODAL_BASE_SIZE}) - 2 * var(--chakra-space-modal_borderWidth))`}
       >
         <Flex flexDirection="column">
           <HStack>

diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts
@@ -3,7 +3,7 @@ import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"
 
 const baseStyleDialog = defineStyle({
   p: 4,
-  border: "2px",
+  borderWidth: "var(--chakra-space-modal_borderWidth)",
   boxShadow: "none",
   borderColor: "white",
   borderRadius: "xl",

diff --git a/dapp/src/theme/utils/semanticTokens.ts b/dapp/src/theme/utils/semanticTokens.ts
@@ -2,6 +2,7 @@ export const semanticTokens = {
   space: {
     header_height: 24,
     modal_shift: 36,
+    modal_borderWidth: "2px",
   },
   sizes: {
     sidebar_width: 80,