@@ -5,13 +5,13 @@ import {
5
5
DrawerContent ,
6
6
DrawerOverlay ,
7
7
Flex ,
8
+ Heading ,
8
9
Hide ,
9
- useToken ,
10
+ Stack ,
11
+ Text ,
10
12
} from "@chakra-ui/react"
11
13
12
14
import Card from "@/components/Card"
13
- import OldHeading from "@/components/OldHeading"
14
- import Text from "@/components/OldText"
15
15
16
16
import { TriangleSVG , TriangleSVGProps } from "./Triangle"
17
17
import { useTrilemma } from "./useTrilemma"
@@ -32,55 +32,46 @@ const Trilemma = () => {
32
32
...trilemmaChecks ,
33
33
}
34
34
35
- // TODO: Replace with direct token implementation after UI migration is completed
36
- const lgBp = useToken ( "breakpoints" , "lg" )
37
-
38
35
return (
39
36
< Flex
40
- alignItems = "flex-start "
37
+ alignItems = "center "
41
38
flexDirection = { { base : "column" , lg : "row" } }
42
39
justifyContent = "space-between"
40
+ columnGap = "12"
41
+ rowGap = "8"
43
42
>
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 } }
49
49
flex = { {
50
- base : "1 1 100%" ,
51
50
lg : "0 1 500px" ,
52
51
} }
53
52
>
54
- < OldHeading fontSize = "2rem" mt = { 0 } >
53
+ < Heading fontSize = "2rem" >
55
54
{ 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" >
66
67
< Drawer
67
68
isOpen = { mobileModalOpen }
68
69
onClose = { handleModalClose }
69
70
placement = "bottom"
70
71
>
71
72
< 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" />
84
75
< DrawerCloseButton top = "6" insetInlineEnd = "6" />
85
76
</ DrawerContent >
86
77
</ Drawer >
0 commit comments