Skip to content

Commit 64f0e3c

Browse files
authored
Merge pull request #10490 from TylerAPfledderer/refactor/trilemma-chakra-updates
refactor(Trilemma): update Chakra implementations
2 parents 90b2187 + 048ce66 commit 64f0e3c

File tree

2 files changed

+35
-50
lines changed

2 files changed

+35
-50
lines changed

src/components/Trilemma/Triangle.tsx

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { ReactNode } from "react"
21
import { useTranslation } from "next-i18next"
3-
import { chakra, HTMLChakraProps } from "@chakra-ui/react"
2+
import { chakra, forwardRef, HTMLChakraProps } from "@chakra-ui/react"
43

54
import { HandleClickParam } from "./useTrilemma"
65

@@ -35,19 +34,18 @@ export const TriangleSVG = ({
3534
/>
3635
)
3736

38-
const CircleSelect = ({ children, onClick }) => (
37+
const CircleSelect = forwardRef((props, ref) => (
3938
<chakra.g
39+
ref={ref}
4040
cursor="pointer"
4141
sx={{
4242
"circle:first-of-type": {
4343
fill: "white",
4444
},
4545
}}
46-
onClick={onClick}
47-
>
48-
{children}
49-
</chakra.g>
50-
)
46+
{...props}
47+
/>
48+
))
5149

5250
const FillCircle = ({ isEthereum = false, isActive, ...rest }) => {
5351
return (
@@ -66,9 +64,8 @@ export const TriangleSVG = ({
6664

6765
const Text = ({
6866
isActive,
69-
children,
7067
...rest
71-
}: { isActive: boolean; children: ReactNode } & HTMLChakraProps<"text">) => (
68+
}: { isActive: boolean } & HTMLChakraProps<"text">) => (
7269
<chakra.text
7370
fill={isActive ? "primary400" : "text200"}
7471
fontWeight={isActive ? 700 : 500}
@@ -77,9 +74,7 @@ export const TriangleSVG = ({
7774
textTransform="uppercase"
7875
transform={{ base: "translate(-80px, 0px)", sm: "none" }}
7976
{...rest}
80-
>
81-
{children}
82-
</chakra.text>
77+
/>
8378
)
8479

8580
const commonCircleStyles = {
@@ -117,7 +112,6 @@ export const TriangleSVG = ({
117112
viewBox="-100 100 850 915"
118113
fill="background.base"
119114
width={{ base: "full", lg: "auto" }}
120-
my={{ base: -28, sm: -16, lg: 0 }}
121115
mt={{ lg: 32 }}
122116
me={{ lg: 32 }}
123117
>

src/components/Trilemma/index.tsx

Lines changed: 27 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ import {
55
DrawerContent,
66
DrawerOverlay,
77
Flex,
8+
Heading,
89
Hide,
9-
useToken,
10+
Stack,
11+
Text,
1012
} from "@chakra-ui/react"
1113

1214
import Card from "@/components/Card"
13-
import OldHeading from "@/components/OldHeading"
14-
import Text from "@/components/OldText"
1515

1616
import { TriangleSVG, TriangleSVGProps } from "./Triangle"
1717
import { useTrilemma } from "./useTrilemma"
@@ -32,55 +32,46 @@ const Trilemma = () => {
3232
...trilemmaChecks,
3333
}
3434

35-
// TODO: Replace with direct token implementation after UI migration is completed
36-
const lgBp = useToken("breakpoints", "lg")
37-
3835
return (
3936
<Flex
40-
alignItems="flex-start"
37+
alignItems="center"
4138
flexDirection={{ base: "column", lg: "row" }}
4239
justifyContent="space-between"
40+
columnGap="12"
41+
rowGap="8"
4342
>
44-
<Flex
45-
flexDirection="column"
46-
my={{ base: 8, md: 12 }}
47-
mx={{ md: 12 }}
48-
py={8}
43+
<Stack
44+
spacing="8"
45+
mt={{ base: "16", md: "20" }}
46+
mb={{ lg: "20" }}
47+
ms={{ md: "12" }}
48+
me={{ md: "12", lg: 0 }}
4949
flex={{
50-
base: "1 1 100%",
5150
lg: "0 1 500px",
5251
}}
5352
>
54-
<OldHeading fontSize="2rem" mt={0}>
53+
<Heading fontSize="2rem">
5554
{t("page-roadmap-vision-trilemma-h2")}
56-
</OldHeading>
57-
<Text>{t("page-roadmap-vision-trilemma-p")}</Text>
58-
<Text>{t("page-roadmap-vision-trilemma-p-1")}</Text>
59-
<Text>{t("page-roadmap-vision-trilemma-p-2")}</Text>
60-
<Text fontWeight={600} hideFrom={lgBp}>
61-
{t("page-roadmap-vision-trilemma-modal-tip")}:
62-
</Text>
63-
<Card {...cardDetail} mt={8} minH="300px" hideBelow={lgBp} />
64-
</Flex>
65-
<Hide above={lgBp}>
55+
</Heading>
56+
<Flex flexDir="column" gap="6">
57+
<Text>{t("page-roadmap-vision-trilemma-p")}</Text>
58+
<Text>{t("page-roadmap-vision-trilemma-p-1")}</Text>
59+
<Text>{t("page-roadmap-vision-trilemma-p-2")}</Text>
60+
<Text fontWeight={600} hideFrom="lg">
61+
{t("page-roadmap-vision-trilemma-modal-tip")}:
62+
</Text>
63+
</Flex>
64+
<Card {...cardDetail} minH="300px" hideBelow="lg" mt="6" />
65+
</Stack>
66+
<Hide above="lg">
6667
<Drawer
6768
isOpen={mobileModalOpen}
6869
onClose={handleModalClose}
6970
placement="bottom"
7071
>
7172
<DrawerOverlay background="rgba(0,0,0,0.3)" />
72-
<DrawerContent
73-
border="none"
74-
borderTopRadius="1rem"
75-
background="background.base"
76-
>
77-
<Card
78-
{...cardDetail}
79-
background="none"
80-
border="none"
81-
justifyContent="flex-start"
82-
my={8}
83-
/>
73+
<DrawerContent borderTopRadius="2xl" background="background.base">
74+
<Card {...cardDetail} background="none" border="none" my="8" />
8475
<DrawerCloseButton top="6" insetInlineEnd="6" />
8576
</DrawerContent>
8677
</Drawer>

0 commit comments

Comments
 (0)