refactor(Trilemma): update Chakra implementations

src/components/Trilemma/Triangle.tsx

@@ -1,6 +1,5 @@
-import { ReactNode } from "react"
 import { useTranslation } from "next-i18next"
-import { chakra, HTMLChakraProps } from "@chakra-ui/react"
+import { chakra, forwardRef, HTMLChakraProps } from "@chakra-ui/react"
 
 import { HandleClickParam } from "./useTrilemma"
 
@@ -35,19 +34,18 @@ export const TriangleSVG = ({
     />
   )
 
-  const CircleSelect = ({ children, onClick }) => (
+  const CircleSelect = forwardRef((props, ref) => (
     <chakra.g
+      ref={ref}
       cursor="pointer"
       sx={{
         "circle:first-of-type": {
           fill: "white",
         },
       }}
-      onClick={onClick}
-    >
-      {children}
-    </chakra.g>
-  )
+      {...props}
+    />
+  ))
 
   const FillCircle = ({ isEthereum = false, isActive, ...rest }) => {
     return (
@@ -66,9 +64,8 @@ export const TriangleSVG = ({
 
   const Text = ({
     isActive,
-    children,
     ...rest
-  }: { isActive: boolean; children: ReactNode } & HTMLChakraProps<"text">) => (
+  }: { isActive: boolean } & HTMLChakraProps<"text">) => (
     <chakra.text
       fill={isActive ? "primary400" : "text200"}
       fontWeight={isActive ? 700 : 500}
@@ -77,9 +74,7 @@ export const TriangleSVG = ({
       textTransform="uppercase"
       transform={{ base: "translate(-80px, 0px)", sm: "none" }}
       {...rest}
-    >
-      {children}
-    </chakra.text>
+    />
   )
 
   const commonCircleStyles = {
@@ -117,7 +112,6 @@ export const TriangleSVG = ({
       viewBox="-100 100 850 915"
       fill="background.base"
       width={{ base: "full", lg: "auto" }}
-      my={{ base: -28, sm: -16, lg: 0 }}
       mt={{ lg: 32 }}
       me={{ lg: 32 }}
     >

src/components/Trilemma/index.tsx

@@ -5,13 +5,13 @@ import {
   DrawerContent,
   DrawerOverlay,
   Flex,
+  Heading,
   Hide,
-  useToken,
+  Stack,
+  Text,
 } from "@chakra-ui/react"
 
 import Card from "@/components/Card"
-import OldHeading from "@/components/OldHeading"
-import Text from "@/components/OldText"
 
 import { TriangleSVG, TriangleSVGProps } from "./Triangle"
 import { useTrilemma } from "./useTrilemma"
@@ -32,55 +32,46 @@ const Trilemma = () => {
     ...trilemmaChecks,
   }
 
-  // TODO: Replace with direct token implementation after UI migration is completed
-  const lgBp = useToken("breakpoints", "lg")
-
   return (
     <Flex
-      alignItems="flex-start"
+      alignItems="center"
       flexDirection={{ base: "column", lg: "row" }}
       justifyContent="space-between"
+      columnGap="12"
+      rowGap="8"
     >
-      <Flex
-        flexDirection="column"
-        my={{ base: 8, md: 12 }}
-        mx={{ md: 12 }}
-        py={8}
+      <Stack
+        spacing="8"
+        mt={{ base: "16", md: "20" }}
+        mb={{ lg: "20" }}
+        ms={{ md: "12" }}
+        me={{ md: "12", lg: 0 }}
         flex={{
-          base: "1 1 100%",
           lg: "0 1 500px",
         }}
       >
-        <OldHeading fontSize="2rem" mt={0}>
+        <Heading fontSize="2rem">
           {t("page-roadmap-vision-trilemma-h2")}
-        </OldHeading>
-        <Text>{t("page-roadmap-vision-trilemma-p")}</Text>
-        <Text>{t("page-roadmap-vision-trilemma-p-1")}</Text>
-        <Text>{t("page-roadmap-vision-trilemma-p-2")}</Text>
-        <Text fontWeight={600} hideFrom={lgBp}>
-          {t("page-roadmap-vision-trilemma-modal-tip")}:
-        </Text>
-        <Card {...cardDetail} mt={8} minH="300px" hideBelow={lgBp} />
-      </Flex>
-      <Hide above={lgBp}>
+        </Heading>
+        <Flex flexDir="column" gap="6">
+          <Text>{t("page-roadmap-vision-trilemma-p")}</Text>
+          <Text>{t("page-roadmap-vision-trilemma-p-1")}</Text>
+          <Text>{t("page-roadmap-vision-trilemma-p-2")}</Text>
+          <Text fontWeight={600} hideFrom="lg">
+            {t("page-roadmap-vision-trilemma-modal-tip")}:
+          </Text>
+        </Flex>
+        <Card {...cardDetail} minH="300px" hideBelow="lg" mt="6" />
+      </Stack>
+      <Hide above="lg">
         <Drawer
           isOpen={mobileModalOpen}
           onClose={handleModalClose}
           placement="bottom"
         >
           <DrawerOverlay background="rgba(0,0,0,0.3)" />
-          <DrawerContent
-            border="none"
-            borderTopRadius="1rem"
-            background="background.base"
-          >
-            <Card
-              {...cardDetail}
-              background="none"
-              border="none"
-              justifyContent="flex-start"
-              my={8}
-            />
+          <DrawerContent borderTopRadius="2xl" background="background.base">
+            <Card {...cardDetail} background="none" border="none" my="8" />
             <DrawerCloseButton top="6" insetInlineEnd="6" />
           </DrawerContent>
         </Drawer>