Skip to content

Commit b753cab

Browse files
pettinarippettinarip
committed
use chakra components for paragraphs and headings
1 parent 1a5b531 commit b753cab

File tree

1 file changed

+76
-65
lines changed

1 file changed

+76
-65
lines changed

‎src/pages-conditional/eth.tsx

Lines changed: 76 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ import {
66
FlexProps,
77
Heading,
88
HeadingProps,
9+
ListItem,
910
Text,
11+
UnorderedList,
1012
} from "@chakra-ui/react"
1113
import { GatsbyImage } from "gatsby-plugin-image"
1214
import { useTranslation } from "gatsby-plugin-react-i18next"
@@ -178,7 +180,16 @@ const H2 = (prop: HeadingProps) => (
178180
/>
179181
)
180182

181-
const H4 = (props: ChildOnlyProp) => (
183+
const H3 = (props: HeadingProps) => (
184+
<Heading
185+
as="h3"
186+
fontSize={{ base: "xl", m: "2xl" }}
187+
lineHeight={1.4}
188+
{...props}
189+
/>
190+
)
191+
192+
const H4 = (props: HeadingProps) => (
182193
<Heading
183194
as="h4"
184195
fontSize={{ base: "md", md: "xl" }}
@@ -382,9 +393,9 @@ const EthPage = (props: PageProps<Queries.EthPageQuery, Context>) => {
382393
<GrayContainer>
383394
<Content>
384395
<Intro>
385-
<p>
396+
<Text>
386397
<Translation id="page-eth-description" />{" "}
387-
</p>
398+
</Text>
388399
</Intro>
389400
<CardContainer mb={8}>
390401
{benefits.map((benefits, idx) => (
@@ -397,9 +408,9 @@ const EthPage = (props: PageProps<Queries.EthPageQuery, Context>) => {
397408
))}
398409
</CardContainer>
399410
<InfoBanner emoji=":wave:" shouldCenter>
400-
<b>
411+
<Text as="b">
401412
<Translation id="page-eth-buy-some" />
402-
</b>{" "}
413+
</Text>{" "}
403414
<Translation id="page-eth-buy-some-desc" />{" "}
404415
<Link to="/what-is-ethereum/">
405416
<Translation id="page-eth-more-on-ethereum-link" />
@@ -413,96 +424,96 @@ const EthPage = (props: PageProps<Queries.EthPageQuery, Context>) => {
413424
<H2>
414425
<Translation id="page-eth-whats-unique" />
415426
</H2>
416-
<p>
427+
<Text>
417428
<Translation id="page-eth-whats-unique-desc" />
418-
</p>
429+
</Text>
419430
<EthVideo />
420-
<div>
431+
<Box>
421432
<H4>
422433
<Translation id="page-eth-fuels" />
423434
</H4>
424-
<p>
435+
<Text>
425436
<Translation id="page-eth-fuels-desc" />
426-
</p>
427-
<p>
437+
</Text>
438+
<Text>
428439
<Translation id="page-eth-fuels-desc-2" />
429-
</p>
430-
<p>
440+
</Text>
441+
<Text>
431442
<Translation id="page-eth-fuels-desc-3" />{" "}
432-
<strong>
443+
<Text as="strong">
433444
<Translation id="page-eth-powers-ethereum" />
434-
</strong>
445+
</Text>
435446
<Translation id="page-eth-period" />
436-
</p>
437-
<p>
447+
</Text>
448+
<Text>
438449
<Translation id="page-eth-fuels-staking" />{" "}
439450
<Link to="/staking/">
440451
<Translation id="page-eth-fuels-more-staking" />
441452
</Link>
442-
</p>
443-
</div>
453+
</Text>
454+
</Box>
444455
<CentralActionCard
445456
to="/what-is-ethereum/"
446457
title={t("page-eth-whats-ethereum")}
447458
description={t("page-eth-whats-ethereum-desc")}
448459
image={getImage(data.ethereum)!}
449460
/>
450461
<TextDivider />
451-
<div>
462+
<Box>
452463
<H4>
453464
<Translation id="page-eth-underpins" />
454465
</H4>
455-
<p>
466+
<Text>
456467
<Translation id="page-eth-underpins-desc" />
457-
</p>
458-
<p>
468+
</Text>
469+
<Text>
459470
<Translation id="page-eth-underpins-desc-2" />
460-
</p>
471+
</Text>
461472
<CentralActionCard
462473
to="/defi/"
463474
title={t("page-eth-whats-defi")}
464475
description={t("page-eth-whats-defi-description")}
465476
image={getImage(data.defi)!}
466477
/>
467-
</div>
478+
</Box>
468479
<TextDivider />
469-
<div>
480+
<Box>
470481
<H4>
471482
<Translation id="page-eth-uses" />
472483
</H4>
473-
<p>
484+
<Text>
474485
<Translation id="page-eth-uses-desc" />
475-
</p>
476-
<p>
486+
</Text>
487+
<Text>
477488
<Translation id="page-eth-uses-desc-2" />{" "}
478-
</p>
479-
<ul>
480-
<li>
489+
</Text>
490+
<UnorderedList>
491+
<ListItem>
481492
<Link to="https://sablier.finance">
482493
<Translation id="page-eth-stream-link" />
483494
</Link>{" "}
484495
– <Translation id="page-eth-uses-desc-3" />
485-
</li>
486-
<li>
496+
</ListItem>
497+
<ListItem>
487498
<Link to="/get-eth/#dex">
488499
<Translation id="page-eth-trade-link-2" />
489500
</Link>{" "}
490501
– <Translation id="page-eth-uses-desc-4" />
491-
</li>
492-
<li>
502+
</ListItem>
503+
<ListItem>
493504
<Link to="https://app.compound.finance/">
494505
<Translation id="page-eth-earn-interest-link" />
495506
</Link>{" "}
496507
– <Translation id="page-eth-uses-desc-5" />
497-
</li>
498-
<li>
508+
</ListItem>
509+
<ListItem>
499510
<Link to="/stablecoins/">
500511
<Translation id="page-eth-stablecoins-link" />
501512
</Link>{" "}
502513
– <Translation id="page-eth-uses-desc-6" />
503-
</li>
504-
</ul>
505-
</div>
514+
</ListItem>
515+
</UnorderedList>
516+
</Box>
506517
<Divider />
507518
</CentralColumn>
508519
<CalloutBanner
@@ -514,59 +525,59 @@ const EthPage = (props: PageProps<Queries.EthPageQuery, Context>) => {
514525
alt={t("page-eth-cat-img-alt")}
515526
maxImageWidth={300}
516527
>
517-
<div>
528+
<Box>
518529
<ButtonLink to="/get-eth/">
519530
<Translation id="page-eth-get-eth-btn" />
520531
</ButtonLink>
521-
</div>
532+
</Box>
522533
</CalloutBanner>
523534
</Content>
524535

525536
<TwoColumnContent>
526537
<LeftColumn>
527-
<h3>
538+
<H3>
528539
<Translation id="page-eth-has-value" />
529-
</h3>
530-
<p>
540+
</H3>
541+
<Text>
531542
<Translation id="page-eth-has-value-desc" />
532-
</p>
533-
<p>
543+
</Text>
544+
<Text>
534545
<Translation id="page-eth-has-value-desc-2" />
535-
</p>
536-
<p>
546+
</Text>
547+
<Text>
537548
<Translation id="page-eth-has-value-desc-3" />
538-
</p>
539-
<p>
549+
</Text>
550+
<Text>
540551
<Translation id="page-eth-has-value-desc-4" />
541-
</p>
542-
<p>
552+
</Text>
553+
<Text>
543554
<Translation id="page-eth-has-value-desc-5" />
544-
</p>
555+
</Text>
545556
</LeftColumn>
546557
<RightColumn>
547558
<CardList content={cardListContent} />
548559
</RightColumn>
549560
</TwoColumnContent>
550561
<TwoColumnContent id="tokens" align="flex-start">
551562
<LeftColumn>
552-
<h3>
563+
<H3>
553564
<Translation id="page-eth-not-only-crypto" />
554-
</h3>
555-
<p>
565+
</H3>
566+
<Text>
556567
<Translation id="page-eth-not-only-crypto-desc" />{" "}
557-
</p>
558-
<p>
568+
</Text>
569+
<Text>
559570
<Translation id="page-eth-not-only-crypto-desc-2" />
560-
</p>
561-
<h4>
571+
</Text>
572+
<H4 fontWeight="normal">
562573
<Translation id="page-eth-more-on-tokens" />
563-
</h4>
574+
</H4>
564575
<CardList content={tokenLinks} />
565576
</LeftColumn>
566577
<RightColumn>
567-
<h3>
578+
<H3>
568579
<Translation id="page-eth-popular-tokens" />
569-
</h3>
580+
</H3>
570581
{tokens.map((token, idx) => (
571582
<TokenCard
572583
key={idx}

0 commit comments

Comments
 (0)