Skip to content

Commit eef455a

Browse files
pettinarippettinarip
authored
Merge pull request #14372 from Baystef/migrate/stablecoinaccordionindex
Migrate StableCoinAccordion/index to tailwind/shadcn
2 parents 26619ff + c823ddc commit eef455a

File tree

2 files changed

+50
-81
lines changed

2 files changed

+50
-81
lines changed

‎src/components/StablecoinAccordion/AccordionCustomItem.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,9 @@ export const AccordionCustomItem = (props: AccordionCustomItemProps) => {
9292
</Tag>
9393
)}
9494
</Flex>
95-
<p className="text-start text-md">{t(contentObj.textPreview)}</p>
95+
<p className="text-start text-md text-body-medium">
96+
{t(contentObj.textPreview)}
97+
</p>
9698
</div>
9799
</Flex>
98100
<MoreOrLessLink isOpen={open} />

‎src/components/StablecoinAccordion/index.tsx

Lines changed: 47 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,16 @@
11
import { useTranslation } from "next-i18next"
22
import { MdArrowForward } from "react-icons/md"
3-
import {
4-
Box,
5-
Flex,
6-
Heading,
7-
Icon,
8-
LinkBox,
9-
LinkOverlay,
10-
} from "@chakra-ui/react"
113

124
import { ChildOnlyProp, TranslationKey } from "@/lib/types"
135

6+
import { ButtonLink } from "@/components/ui/buttons/Button"
7+
import { Flex } from "@/components/ui/flex"
8+
import InlineLink, { BaseLink } from "@/components/ui/Link"
9+
import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
10+
1411
import { Accordion } from "../../../tailwind/ui/accordion"
15-
import { ButtonLink } from "../Buttons"
1612
import CardList from "../CardList"
1713
import InfoBanner from "../InfoBanner"
18-
import InlineLink, { BaseLink } from "../Link"
19-
import OldHeading from "../OldHeading"
20-
import Text from "../OldText"
2114
import Translation from "../Translation"
2215

2316
import {
@@ -28,19 +21,11 @@ import {
2821
import { useStablecoinAccordion } from "./useStablecoinAccordion"
2922

3023
const SectionTitle = (props: ChildOnlyProp) => (
31-
<OldHeading
32-
as="h4"
33-
fontSize="1.25rem"
34-
fontWeight={700}
35-
lineHeight="22px"
36-
textAlign="start"
37-
mt={0}
38-
{...props}
39-
/>
24+
<h4 className="mb-8 mt-0 text-start text-xl font-bold" {...props} />
4025
)
4126

4227
const StepBoxContainer = (props: ChildOnlyProp) => (
43-
<Box mt={4} mb={8} {...props} />
28+
<div className="mb-8 mt-4" {...props} />
4429
)
4530

4631
const StepBox = (
@@ -49,51 +34,27 @@ const StepBox = (
4934
const { t } = useTranslation("page-stablecoins")
5035

5136
return (
52-
<Flex
53-
as={LinkBox}
54-
alignItems={{ base: "flex-start", md: "normal" }}
55-
background="background.base"
56-
border="1px"
57-
borderColor="border"
58-
color="text"
59-
flexDirection={{ base: "column", md: "row" }}
60-
p={4}
61-
sx={{
62-
"&:not(:first-of-type)": {
63-
mt: "-1px",
64-
},
65-
}}
66-
_hover={{
67-
background: "ednBackground",
68-
transition: "transform 0.2s",
69-
transform: "scale(1.05)",
70-
}}
71-
>
72-
<Flex justifyContent="space-between" alignItems="center" width="100%">
73-
<Box>
74-
<LinkOverlay
75-
as={BaseLink}
76-
color="inherit"
77-
textDecoration="inherit"
78-
href={props.href}
79-
fontWeight={700}
80-
textAlign="start"
81-
_hover={{
82-
textDecoration: "inherit",
83-
}}
84-
>
85-
{t(props.titleId)}
37+
<LinkBox className="flex flex-col items-start border bg-background p-4 transition-transform duration-200 hover:scale-105 hover:bg-background-highlight not-[:first]:-mt-px md:flex-row md:items-stretch">
38+
<Flex className="w-full items-center justify-between">
39+
<div>
40+
<LinkOverlay asChild>
41+
<BaseLink
42+
className="text-start font-bold text-inherit no-underline hover:no-underline"
43+
href={props.href}
44+
>
45+
{t(props.titleId)}
46+
</BaseLink>
8647
</LinkOverlay>
87-
<Text mb={0}>{t(props.descId)}</Text>
88-
</Box>
89-
<Icon as={MdArrowForward} ms={4} minW={6} />
48+
<p className="mb-0">{t(props.descId)}</p>
49+
</div>
50+
<MdArrowForward className="ms-4 min-w-6" />
9051
</Flex>
91-
</Flex>
52+
</LinkBox>
9253
)
9354
}
9455

9556
const H4 = (props: ChildOnlyProp) => (
96-
<Heading fontSize="1.25rem" fontWeight={700} mb={4} {...props} />
57+
<h4 className="mb-4 text-xl font-bold" {...props} />
9758
)
9859

9960
const StablecoinAccordion = () => {
@@ -124,7 +85,9 @@ const StablecoinAccordion = () => {
12485
</StepBoxContainer>
12586
<InfoBanner emoji=":light_bulb:">
12687
<H4>{t("page-stablecoins-accordion-swap-editors-tip")}</H4>
127-
<Text>{t("page-stablecoins-accordion-swap-editors-tip-copy")}</Text>
88+
<p className="mb-6 leading-6">
89+
{t("page-stablecoins-accordion-swap-editors-tip-copy")}
90+
</p>
12891
<ButtonLink href="/wallets/find-wallet/">
12992
{t("page-stablecoins-accordion-swap-editors-tip-button")}
13093
</ButtonLink>
@@ -134,12 +97,12 @@ const StablecoinAccordion = () => {
13497
<SectionTitle>
13598
{t("page-stablecoins-accordion-swap-dapp-title")}
13699
</SectionTitle>
137-
<Text>
100+
<p className="mb-6 leading-6">
138101
<Translation id="page-stablecoins:page-stablecoins-accordion-swap-dapp-intro" />{" "}
139102
<InlineLink href="/get-eth/#dex">
140103
{t("page-stablecoins-accordion-swap-dapp-link")}
141104
</InlineLink>
142-
</Text>
105+
</p>
143106
<CardList
144107
items={cardListGroups.dapps}
145108
imageWidth={DEFAULT_IMAGE_WIDTH}
@@ -151,9 +114,9 @@ const StablecoinAccordion = () => {
151114
<SectionTitle>
152115
{t("page-stablecoins-accordion-requirements")}
153116
</SectionTitle>
154-
<Text>
117+
<p className="mb-6 leading-6">
155118
{t("page-stablecoins-accordion-buy-requirements-description")}
156-
</Text>
119+
</p>
157120
<StepBoxContainer>
158121
<StepBox
159122
href="/get-eth/"
@@ -180,9 +143,9 @@ const StablecoinAccordion = () => {
180143
<SectionTitle>
181144
{t("page-stablecoins-accordion-requirements")}
182145
</SectionTitle>
183-
<Text>
146+
<p className="mb-6 leading-6">
184147
{t("page-stablecoins-accordion-earn-requirements-description")}
185-
</Text>
148+
</p>
186149
<StepBoxContainer>
187150
<StepBox
188151
href="/wallets/"
@@ -195,7 +158,9 @@ const StablecoinAccordion = () => {
195158
<SectionTitle>
196159
{t("page-stablecoins-accordion-earn-projects-title")}
197160
</SectionTitle>
198-
<Text>{t("page-stablecoins-accordion-earn-projects-copy")}</Text>
161+
<p className="mb-6 leading-6">
162+
{t("page-stablecoins-accordion-earn-projects-copy")}
163+
</p>
199164
<CardList
200165
items={cardListGroups.earn}
201166
imageWidth={DEFAULT_IMAGE_WIDTH}
@@ -207,9 +172,9 @@ const StablecoinAccordion = () => {
207172
<SectionTitle>
208173
{t("page-stablecoins-accordion-requirements")}
209174
</SectionTitle>
210-
<Text>
175+
<p className="mb-6 leading-6">
211176
{t("page-stablecoins-accordion-borrow-requirements-description")}
212-
</Text>
177+
</p>
213178
<StepBoxContainer>
214179
<StepBox
215180
href="/wallets/"
@@ -225,36 +190,38 @@ const StablecoinAccordion = () => {
225190
<SectionTitle>
226191
{t("page-stablecoins-accordion-borrow-crypto-collateral")}
227192
</SectionTitle>
228-
<Text>
193+
<p className="mb-6 leading-6">
229194
{t("page-stablecoins-accordion-borrow-crypto-collateral-copy")}{" "}
230195
<InlineLink href="#how">
231196
{t("page-stablecoins-accordion-borrow-crypto-collateral-link")}
232197
</InlineLink>
233-
</Text>
234-
<Text>
198+
</p>
199+
<p className="mb-6 leading-6">
235200
{t("page-stablecoins-accordion-borrow-crypto-collateral-copy-p2")}
236-
</Text>
201+
</p>
237202
</LeftColumnPanel>
238203
<RightColumnPanel>
239204
<SectionTitle>
240205
{t("page-stablecoins-accordion-borrow-places-title")}
241206
</SectionTitle>
242-
<Text>{t("page-stablecoins-accordion-borrow-places-intro")}</Text>
243-
<Box mb={8}>
207+
<p className="mb-6 leading-6">
208+
{t("page-stablecoins-accordion-borrow-places-intro")}
209+
</p>
210+
<div className="mb-8">
244211
<CardList
245212
items={cardListGroups.borrow}
246213
imageWidth={DEFAULT_IMAGE_WIDTH}
247214
/>
248-
</Box>
215+
</div>
249216
<SectionTitle>
250217
{t("page-stablecoins-accordion-borrow-risks-title")}
251218
</SectionTitle>
252-
<Text>
219+
<p className="mb-6 leading-6">
253220
{t("page-stablecoins-accordion-borrow-risks-copy")}{" "}
254221
<InlineLink href="/eth/">
255222
{t("page-stablecoins-accordion-borrow-risks-link")}
256223
</InlineLink>
257-
</Text>
224+
</p>
258225
</RightColumnPanel>
259226
</AccordionCustomItem>
260227
</Accordion>

0 commit comments

Comments
 (0)