Skip to content

Commit

Permalink
Update border radius to match the style guide (#930)
Browse files Browse the repository at this point in the history
Ref AENG-9

This PR updates border radius to match the [style
guide](https://www.figma.com/design/1jAHRz9Kh43x7WpjiZ1tq2/UI-Styleguide?node-id=730-777&m=dev).
  • Loading branch information
r-czajkowski authored Dec 20, 2024
2 parents 244553b + 7f03f2a commit 0bfe2f6
Show file tree
Hide file tree
Showing 18 changed files with 45 additions and 21 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -215,7 +215,7 @@ export default function ConnectWalletButton({
src={connector.icon}
boxSize={6}
bg="black"
rounded="sm"
rounded="xs"
{...iconStyles[connector.id]}
/>
}
Expand Down
2 changes: 1 addition & 1 deletion dapp/src/components/MezoBeehiveModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ function MezoBeehiveModalBase() {
>
<MezoSignIcon
boxSize="5.5rem" // 88px
rounded="lg"
rounded="sm"
/>
<VStack align="start">
<Text size="md">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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" }}
>
Expand All @@ -99,7 +99,7 @@ function AcrePointsRewardEstimation(props: StackProps) {
<MenuList
p={0}
minW={0}
rounded="2xl"
rounded="sm"
shadow="none"
bg="gold.300"
border="none"
Expand All @@ -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" }}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export default function ServerErrorModal({
flexDirection="row"
justifyContent="space-between"
bgColor="gold.200"
borderRadius="xl"
borderRadius="md"
>
<Flex flexDirection="column">
<HStack>
Expand Down
2 changes: 1 addition & 1 deletion dapp/src/components/WelcomeModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ function WelcomeModalBase({ closeModal }: BaseModalProps) {
muted
loop
objectFit="cover"
roundedRight="xl"
roundedRight="md"
outline="1px solid #f6ead5"
outlineOffset="-1px"
/>
Expand Down
2 changes: 1 addition & 1 deletion dapp/src/components/shared/LiveTag.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
2 changes: 1 addition & 1 deletion dapp/src/pages/DashboardPage/BeehiveCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion dapp/src/theme/alertTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const baseStyle = multiStyleConfig.definePartsStyle({
borderStyle: "solid",
borderColor: $borderColor.reference,
p: 4,
rounded: "xl",
rounded: "sm",
},
title: {
fontWeight: "semibold",
Expand Down
4 changes: 2 additions & 2 deletions dapp/src/theme/buttonTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
},
Expand Down
2 changes: 1 addition & 1 deletion dapp/src/theme/cardTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys)
const baseStyleContainer = defineStyle({
boxShadow: "none",
bg: "gold.200",
borderRadius: "xl",
borderRadius: "md",
p: 5,
})

Expand Down
10 changes: 9 additions & 1 deletion dapp/src/theme/index.ts
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -30,6 +37,7 @@ const defaultTheme = {
useSystemColorMode: false,
colors,
...typography,
...borderRadius,
zIndices,
semanticTokens,
styles,
Expand Down
2 changes: 1 addition & 1 deletion dapp/src/theme/modalTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion dapp/src/theme/skeletonTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions dapp/src/theme/tooltipTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
9 changes: 9 additions & 0 deletions dapp/src/theme/utils/borderRadius.ts
Original file line number Diff line number Diff line change
@@ -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
},
}
1 change: 1 addition & 0 deletions dapp/src/theme/utils/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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"

0 comments on commit 0bfe2f6

Please sign in to comment.