From 5f3707176755d9ad0a3220bbc0fa338eda40521b Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Mon, 8 Apr 2024 10:30:42 +0200
Subject: [PATCH] Use semantic tokens to calculate footer width for error modal

---
 .../ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx   | 3 ++-
 dapp/src/theme/Modal.ts                                        | 2 +-
 dapp/src/theme/utils/semanticTokens.ts                         | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
index 16fd2468a..ff4cc6b5e 100644
--- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
+++ b/dapp/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
index 69a7d7ec9..2c2d1d158 100644
--- 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
index f58e618c6..ccdf4561b 100644
--- 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,