Update border radius to match the style guide

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]}
               />
             }

dapp/src/components/MezoBeehiveModal.tsx

@@ -107,7 +107,7 @@ function MezoBeehiveModalBase() {
             >
               <MezoSignIcon
                 boxSize="5.5rem" // 88px
-                rounded="lg"
+                rounded="sm"
               />
               <VStack align="start">
                 <Text size="md">

dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx

@@ -79,7 +79,7 @@ function AcrePointsRewardEstimation(props: StackProps) {
                 h="auto"
                 px={3}
                 py={1}
-                rounded="2xl"
+                rounded="sm"
                 bg="gold.300"
                 _hover={{ bg: "gold.200" }}
               >
@@ -99,7 +99,7 @@ function AcrePointsRewardEstimation(props: StackProps) {
               <MenuList
                 p={0}
                 minW={0}
-                rounded="2xl"
+                rounded="sm"
                 shadow="none"
                 bg="gold.300"
                 border="none"
@@ -113,7 +113,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" }}

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>

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"
         />

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"

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>
   )

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">
             <Text size="sm">
               <Highlight query="Mezo" styles={{ color: "mezo" }}>
                 Total collected mats from Mezo

dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx

@@ -27,7 +27,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">

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",

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,
     },
   },

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,
 })
 

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"
@@ -30,6 +37,7 @@ const defaultTheme = {
   useSystemColorMode: false,
   colors,
   ...typography,
+  ...borderRadius,
   zIndices,
   semanticTokens,
   styles,

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",

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",

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 = {

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
+  },
+}

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"