From b7f1d4236998057f1508bff8895a2e5ad90e2502 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Thu, 19 Dec 2024 14:35:35 +0100
Subject: [PATCH] Update border radius to match the style guide

---
 .../ConnectWalletModal/ConnectWalletButton.tsx         |  4 ++--
 dapp/src/components/MezoBeehiveModal.tsx               |  2 +-
 .../StakeFormModal/AcrePointsRewardEstimation.tsx      |  6 +++---
 .../StakingErrorModal/ServerErrorModal.tsx             |  2 +-
 dapp/src/components/WelcomeModal.tsx                   |  2 +-
 dapp/src/components/shared/LiveTag.tsx                 |  2 +-
 .../DashboardPage/AcrePointsCard/LabelWrapper.tsx      |  2 +-
 dapp/src/pages/DashboardPage/BeehiveCard.tsx           |  2 +-
 .../TransactionHistory/TransactionTable.tsx            |  8 +++++++-
 dapp/src/theme/alertTheme.ts                           |  2 +-
 dapp/src/theme/buttonTheme.ts                          |  4 ++--
 dapp/src/theme/cardTheme.ts                            |  2 +-
 dapp/src/theme/index.ts                                | 10 +++++++++-
 dapp/src/theme/modalTheme.ts                           |  2 +-
 dapp/src/theme/skeletonTheme.ts                        |  2 +-
 dapp/src/theme/tooltipTheme.ts                         |  4 ++--
 dapp/src/theme/utils/borderRadius.ts                   |  9 +++++++++
 dapp/src/theme/utils/index.ts                          |  1 +
 18 files changed, 45 insertions(+), 21 deletions(-)
 create mode 100644 dapp/src/theme/utils/borderRadius.ts

diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx
index 7bb69424b..c81295436 100644
--- a/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx
+++ b/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx
@@ -197,7 +197,7 @@ export default function ConnectWalletButton({
       alignSelf="stretch"
       borderWidth={1}
       borderColor="gold.300"
-      rounded="lg"
+      rounded="sm"
       mb={3}
       _last={{ mb: 0 }}
       p={0}
@@ -215,7 +215,7 @@ export default function ConnectWalletButton({
                 src={connector.icon}
                 boxSize={6}
                 bg="black"
-                rounded="sm"
+                rounded="xs"
                 {...iconStyles[connector.id]}
               />
             }
diff --git a/dapp/src/components/MezoBeehiveModal.tsx b/dapp/src/components/MezoBeehiveModal.tsx
index c9777c6c8..88915015a 100644
--- a/dapp/src/components/MezoBeehiveModal.tsx
+++ b/dapp/src/components/MezoBeehiveModal.tsx
@@ -103,7 +103,7 @@ function MezoBeehiveModalBase() {
             >
               <MezoSignIcon
                 boxSize="5.5rem" // 88px
-                rounded="lg"
+                rounded="sm"
               />
               <VStack align="start">
                 <TextMd lineHeight={5}>
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx
index a8b318714..c60e1b883 100644
--- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx
+++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx
@@ -77,7 +77,7 @@ function AcrePointsRewardEstimation(props: StackProps) {
                 h="auto"
                 px={3}
                 py={1}
-                rounded="2xl"
+                rounded="sm"
                 bg="gold.300"
                 _hover={{ bg: "gold.200" }}
               >
@@ -97,7 +97,7 @@ function AcrePointsRewardEstimation(props: StackProps) {
               <MenuList
                 p={0}
                 minW={0}
-                rounded="2xl"
+                rounded="sm"
                 shadow="none"
                 bg="gold.300"
                 border="none"
@@ -111,7 +111,7 @@ function AcrePointsRewardEstimation(props: StackProps) {
                     type="button"
                     px={3}
                     py={1}
-                    rounded="2xl"
+                    rounded="sm"
                     bg="gold.300"
                     _active={{ bg: "gold.200" }}
                     _hover={{ bg: "gold.200" }}
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
index 27056f206..2f4371a4a 100644
--- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
+++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
@@ -60,7 +60,7 @@ export default function ServerErrorModal({
         flexDirection="row"
         justifyContent="space-between"
         bgColor="gold.200"
-        borderRadius="xl"
+        borderRadius="md"
       >
         <Flex flexDirection="column">
           <HStack>
diff --git a/dapp/src/components/WelcomeModal.tsx b/dapp/src/components/WelcomeModal.tsx
index c5ab40177..cb6d39823 100644
--- a/dapp/src/components/WelcomeModal.tsx
+++ b/dapp/src/components/WelcomeModal.tsx
@@ -172,7 +172,7 @@ function WelcomeModalBase({ closeModal }: BaseModalProps) {
           muted
           loop
           objectFit="cover"
-          roundedRight="xl"
+          roundedRight="md"
           outline="1px solid #f6ead5"
           outlineOffset="-1px"
         />
diff --git a/dapp/src/components/shared/LiveTag.tsx b/dapp/src/components/shared/LiveTag.tsx
index c81e62501..72ff17ac0 100644
--- a/dapp/src/components/shared/LiveTag.tsx
+++ b/dapp/src/components/shared/LiveTag.tsx
@@ -9,7 +9,7 @@ export default function LiveTag(props: TagProps) {
     <Tag
       px={4}
       py={2}
-      rounded="3xl"
+      rounded="lg"
       color="gold.200"
       bg="grey.700"
       variant="solid"
diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard/LabelWrapper.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard/LabelWrapper.tsx
index 77ea4c33d..24cb299ed 100644
--- a/dapp/src/pages/DashboardPage/AcrePointsCard/LabelWrapper.tsx
+++ b/dapp/src/pages/DashboardPage/AcrePointsCard/LabelWrapper.tsx
@@ -3,7 +3,7 @@ import { VStack } from "@chakra-ui/react"
 
 export default function LabelWrapper({ children }: { children: ReactNode }) {
   return (
-    <VStack px={4} py={5} spacing={0} rounded="lg" bg="gold.100">
+    <VStack px={4} py={5} spacing={0} rounded="sm" bg="gold.100">
       {children}
     </VStack>
   )
diff --git a/dapp/src/pages/DashboardPage/BeehiveCard.tsx b/dapp/src/pages/DashboardPage/BeehiveCard.tsx
index 3fe55468e..a54c8f817 100644
--- a/dapp/src/pages/DashboardPage/BeehiveCard.tsx
+++ b/dapp/src/pages/DashboardPage/BeehiveCard.tsx
@@ -41,7 +41,7 @@ export default function BeehiveCard(props: CardProps) {
       <CardBody as={VStack}>
         <Image src={beehiveIllustration} boxSize={32} />
         <UserDataSkeleton w="100%" mt={-7}>
-          <Box px={4} py={3} bg="gold.100" borderRadius="lg">
+          <Box px={4} py={3} bg="gold.100" borderRadius="sm">
             <TextSm>
               <Highlight query="Mezo" styles={{ color: "mezo" }}>
                 Total collected mats from Mezo
diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
index ce14a3311..e3977c342 100644
--- a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
+++ b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
@@ -28,7 +28,13 @@ export default function TransactionTable() {
       <PaginationPage direction="column" spacing={2} pageSpacing={6}>
         {(pageData: Activity[]) =>
           pageData.map((activity) => (
-            <Card key={activity.id} role="group" bg="gold.100" p={4}>
+            <Card
+              key={activity.id}
+              role="group"
+              bg="gold.100"
+              p={4}
+              borderRadius="sm"
+            >
               <CardBody as={Flex} flexDirection="column" gap={4}>
                 <Flex flexDirection="column">
                   <Flex justifyContent="space-between">
diff --git a/dapp/src/theme/alertTheme.ts b/dapp/src/theme/alertTheme.ts
index ad63da841..afd239834 100644
--- a/dapp/src/theme/alertTheme.ts
+++ b/dapp/src/theme/alertTheme.ts
@@ -13,7 +13,7 @@ const baseStyle = multiStyleConfig.definePartsStyle({
     borderStyle: "solid",
     borderColor: $borderColor.reference,
     p: 4,
-    rounded: "xl",
+    rounded: "sm",
   },
   title: {
     fontWeight: "semibold",
diff --git a/dapp/src/theme/buttonTheme.ts b/dapp/src/theme/buttonTheme.ts
index 6bd5c08ec..b54223d90 100644
--- a/dapp/src/theme/buttonTheme.ts
+++ b/dapp/src/theme/buttonTheme.ts
@@ -29,12 +29,12 @@ const buttonTheme: ComponentSingleStyleConfig = {
     md: {
       fontSize: "sm",
       py: 2,
-      borderRadius: "md",
+      borderRadius: "sm",
     },
     lg: {
       fontSize: "md",
       py: 4,
-      borderRadius: "lg",
+      borderRadius: "sm",
       h: 14,
     },
   },
diff --git a/dapp/src/theme/cardTheme.ts b/dapp/src/theme/cardTheme.ts
index f4d0c78e5..b70116d11 100644
--- a/dapp/src/theme/cardTheme.ts
+++ b/dapp/src/theme/cardTheme.ts
@@ -6,7 +6,7 @@ const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys)
 const baseStyleContainer = defineStyle({
   boxShadow: "none",
   bg: "gold.200",
-  borderRadius: "xl",
+  borderRadius: "md",
   p: 5,
 })
 
diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts
index 5f3c9eaf2..9a3d43f68 100644
--- a/dapp/src/theme/index.ts
+++ b/dapp/src/theme/index.ts
@@ -1,5 +1,12 @@
 import { extendTheme } from "@chakra-ui/react"
-import { colors, typography, semanticTokens, styles, zIndices } from "./utils"
+import {
+  colors,
+  typography,
+  semanticTokens,
+  styles,
+  zIndices,
+  borderRadius,
+} from "./utils"
 import acreTVLProgressTheme from "./acreTVLProgressTheme"
 import alertTheme from "./alertTheme"
 import buttonTheme from "./buttonTheme"
@@ -29,6 +36,7 @@ const defaultTheme = {
   useSystemColorMode: false,
   colors,
   ...typography,
+  ...borderRadius,
   zIndices,
   semanticTokens,
   styles,
diff --git a/dapp/src/theme/modalTheme.ts b/dapp/src/theme/modalTheme.ts
index 2a1ecb89a..9c4ebec0e 100644
--- a/dapp/src/theme/modalTheme.ts
+++ b/dapp/src/theme/modalTheme.ts
@@ -12,7 +12,7 @@ const baseStyleDialog = defineStyle({
   },
   marginBottom: 8,
   boxShadow: "none",
-  borderRadius: "xl",
+  borderRadius: "md",
   p: { base: 5, sm: 0 },
   bg: "gold.100",
   border: "none",
diff --git a/dapp/src/theme/skeletonTheme.ts b/dapp/src/theme/skeletonTheme.ts
index 1f771222c..b29689dda 100644
--- a/dapp/src/theme/skeletonTheme.ts
+++ b/dapp/src/theme/skeletonTheme.ts
@@ -4,7 +4,7 @@ const $startColor = cssVar("skeleton-start-color")
 const $endColor = cssVar("skeleton-end-color")
 
 const baseStyle = defineStyle({
-  borderRadius: "lg",
+  borderRadius: "sm",
 
   _light: {
     [$startColor.variable]: "colors.gold.300",
diff --git a/dapp/src/theme/tooltipTheme.ts b/dapp/src/theme/tooltipTheme.ts
index 19875d089..859bdf593 100644
--- a/dapp/src/theme/tooltipTheme.ts
+++ b/dapp/src/theme/tooltipTheme.ts
@@ -26,14 +26,14 @@ const sizeXs = defineStyle({
   py: 1,
   fontSize: "xs",
   lineHeight: "xs",
-  borderRadius: "base",
+  borderRadius: "xs",
 })
 
 const sizeSm = defineStyle({
   p: 3,
   fontSize: "sm",
   lineHeight: "sm",
-  borderRadius: "lg",
+  borderRadius: "sm",
 })
 
 const sizes = {
diff --git a/dapp/src/theme/utils/borderRadius.ts b/dapp/src/theme/utils/borderRadius.ts
new file mode 100644
index 000000000..ffedd6b73
--- /dev/null
+++ b/dapp/src/theme/utils/borderRadius.ts
@@ -0,0 +1,9 @@
+export default {
+  radii: {
+    xs: "0.25rem", // 4px
+    sm: "0.5rem", // 8px
+    md: "0.75rem", // 12px
+    lg: "1rem", // 16px
+    xl: "1.25rem", // 20px
+  },
+}
diff --git a/dapp/src/theme/utils/index.ts b/dapp/src/theme/utils/index.ts
index d29f605b1..7246688a4 100644
--- a/dapp/src/theme/utils/index.ts
+++ b/dapp/src/theme/utils/index.ts
@@ -2,4 +2,5 @@ export { default as colors } from "./colors"
 export { default as typography } from "./typography"
 export { default as zIndices } from "./zIndices"
 export { default as semanticTokens } from "./semanticTokens"
+export { default as borderRadius } from "./borderRadius"
 export { default as styles } from "./styles"