Skip to content

Commit ad42c94

Browse files
pettinarippettinarip
committed
use chakra compnents for headings and paragraphs
1 parent c4646d0 commit ad42c94

File tree

1 file changed

+83
-51
lines changed

1 file changed

+83
-51
lines changed

‎src/pages/get-eth.tsx

Lines changed: 83 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react"
22
import { useTranslation } from "gatsby-plugin-react-i18next"
33
import { GatsbyImage } from "gatsby-plugin-image"
44
import { graphql, PageProps } from "gatsby"
5-
import { Box, Flex, Img, Text } from "@chakra-ui/react"
5+
import { Box, Flex, Heading, Img, Text } from "@chakra-ui/react"
66

77
import Translation from "../components/Translation"
88
import CardList from "../components/CardList"
@@ -133,9 +133,13 @@ const GetETHPage = ({ data }: PageProps<Queries.GetEthPageQuery>) => {
133133
mt={{ base: 8, lg: 24 }}
134134
textAlign="center"
135135
>
136-
<h1>
136+
<Heading
137+
as="h1"
138+
fontSize={{ base: "2.5rem", md: "5xl" }}
139+
lineHeight={1.4}
140+
>
137141
<Translation id="page-get-eth-where-to-buy-title" />
138-
</h1>
142+
</Heading>
139143
<Text
140144
fontSize="xl"
141145
lineHeight="140%"
@@ -187,14 +191,14 @@ const GetETHPage = ({ data }: PageProps<Queries.GetEthPageQuery>) => {
187191
</Link>
188192
</StyledCard>
189193
<Content>
190-
<p>
191-
<em>
194+
<Text>
195+
<Text as="em">
192196
<Translation id="listing-policy-disclaimer" />{" "}
193197
<Link to="https://github.com/ethereum/ethereum-org-website/issues/new/choose">
194198
<Translation id="listing-policy-raise-issue-link" />
195199
</Link>
196-
</em>
197-
</p>
200+
</Text>
201+
</Text>
198202
<InfoBanner emoji=":wave:" shouldCenter={true} mt={8}>
199203
<Translation id="page-get-eth-new-to-eth" />{" "}
200204
<Link to="/eth/">
@@ -221,48 +225,60 @@ const GetETHPage = ({ data }: PageProps<Queries.GetEthPageQuery>) => {
221225
<EthExchanges />
222226
</Flex>
223227
<Content id="dex">
224-
<h2>
228+
<Heading fontSize={{ base: "2xl", md: "2rem" }} lineHeight={1.4}>
225229
<Translation id="page-get-eth-dexs" />
226-
</h2>
230+
</Heading>
227231
</Content>
228232
<TwoColumnContent>
229233
<LeftColumn>
230-
<h3>
234+
<Heading
235+
as="h3"
236+
fontSize={{ base: "xl", md: "2xl" }}
237+
lineHeight={1.4}
238+
>
231239
<Translation id="page-get-eth-what-are-DEX's" />
232-
</h3>
233-
<p>
240+
</Heading>
241+
<Text>
234242
<Translation id="page-get-eth-dexs-desc" />
235-
</p>
236-
<p>
243+
</Text>
244+
<Text>
237245
<Translation id="page-get-eth-dexs-desc-2" />{" "}
238246
<Link to="/smart-contracts">
239247
<Translation id="page-get-eth-smart-contract-link" />
240248
</Link>
241-
</p>
242-
<p>
249+
</Text>
250+
<Text>
243251
<Translation id="page-get-eth-dexs-desc-3" />
244-
</p>
245-
<p>
252+
</Text>
253+
<Text>
246254
<Translation id="page-get-eth-need-wallet" />
247-
</p>
255+
</Text>
248256
<ButtonLink to="/wallets/">
249257
<Translation id="page-get-eth-get-wallet-btn" />
250258
</ButtonLink>
251259
</LeftColumn>
252260
<RightColumn>
253-
<h3>
261+
<Heading
262+
as="h3"
263+
fontSize={{ base: "xl", md: "2xl" }}
264+
lineHeight={1.4}
265+
>
254266
<Translation id="page-get-eth-traditional-currencies" />
255-
</h3>
256-
<p>
267+
</Heading>
268+
<Text>
257269
<Translation id="page-get-eth-traditional-payments" />
258-
</p>
270+
</Text>
259271
<CardList content={decentralizedExchanges} />
260-
<h3>
272+
<Heading
273+
as="h3"
274+
fontSize={{ base: "xl", md: "2xl" }}
275+
lineHeight={1.4}
276+
>
261277
<Translation id="page-get-eth-other-cryptos" />
262-
</h3>
263-
<p>
278+
</Heading>
279+
<Text>
264280
<Translation id="page-get-eth-swapping" />
265-
</p>
281+
</Text>
266282
<CardList content={tokenSwaps} />
267283
<InfoBanner isWarning={true}>
268284
<Translation id="page-get-eth-warning" />
@@ -271,9 +287,9 @@ const GetETHPage = ({ data }: PageProps<Queries.GetEthPageQuery>) => {
271287
</TwoColumnContent>
272288
<Divider />
273289
<Content>
274-
<h2>
290+
<Heading fontSize={{ base: "2xl", md: "2rem" }} lineHeight={1.4}>
275291
<Translation id="page-get-eth-keep-it-safe" />
276-
</h2>
292+
</Heading>
277293
</Content>
278294
<TwoColumnContent>
279295
<Flex as={LeftColumn} flexDir="column">
@@ -286,33 +302,45 @@ const GetETHPage = ({ data }: PageProps<Queries.GetEthPageQuery>) => {
286302
image={getImage(data.wallet)!}
287303
alt=""
288304
/>
289-
<h3>
305+
<Heading
306+
as="h3"
307+
fontSize={{ base: "xl", md: "2xl" }}
308+
lineHeight={1.4}
309+
>
290310
<Translation id="page-get-eth-community-safety" />
291-
</h3>
311+
</Heading>
292312
<CardList content={safetyArticles} />
293313
</Flex>
294314
<RightColumn>
295-
<p>
315+
<Text>
296316
<Translation id="page-get-eth-description" />
297-
</p>
298-
<p>
317+
</Text>
318+
<Text>
299319
<Translation id="page-get-eth-security" />
300-
</p>
301-
<h3>
320+
</Text>
321+
<Heading
322+
as="h3"
323+
fontSize={{ base: "xl", md: "2xl" }}
324+
lineHeight={1.4}
325+
>
302326
<Translation id="page-get-eth-protect-eth-in-wallet" />
303-
</h3>
304-
<p>
327+
</Heading>
328+
<Text>
305329
<Translation id="page-get-eth-protect-eth-desc" />
306-
</p>
330+
</Text>
307331
<Link to="/wallets/">
308332
<Translation id="page-get-eth-your-address-wallet-link" />
309333
</Link>
310-
<h3>
334+
<Heading
335+
as="h3"
336+
fontSize={{ base: "xl", md: "2xl" }}
337+
lineHeight={1.4}
338+
>
311339
<Translation id="page-get-eth-your-address" />
312-
</h3>
313-
<p>
340+
</Heading>
341+
<Text>
314342
<Translation id="page-get-eth-your-address-desc" />
315-
</p>
343+
</Text>
316344
<Flex
317345
justifyContent="space-between"
318346
bg="#191919"
@@ -339,15 +367,19 @@ const GetETHPage = ({ data }: PageProps<Queries.GetEthPageQuery>) => {
339367
/>
340368
</Text>
341369
</Flex>
342-
<p>
370+
<Text>
343371
<Translation id="page-get-eth-your-address-desc-3" />
344-
</p>
345-
<h3>
372+
</Text>
373+
<Heading
374+
as="h3"
375+
fontSize={{ base: "xl", md: "2xl" }}
376+
lineHeight={1.4}
377+
>
346378
<Translation id="page-get-eth-wallet-instructions" />
347-
</h3>
348-
<p>
379+
</Heading>
380+
<Text>
349381
<Translation id="page-get-eth-wallet-instructions-lost" />
350-
</p>
382+
</Text>
351383
</RightColumn>
352384
</TwoColumnContent>
353385
<Divider />
@@ -358,11 +390,11 @@ const GetETHPage = ({ data }: PageProps<Queries.GetEthPageQuery>) => {
358390
alt={t("page-index-sections-individuals-image-alt")}
359391
maxImageWidth={600}
360392
>
361-
<div>
393+
<Box>
362394
<ButtonLink to="/dapps/">
363395
<Translation id="page-get-eth-checkout-dapps-btn" />
364396
</ButtonLink>
365-
</div>
397+
</Box>
366398
</CalloutBanner>
367399
<FeedbackCard />
368400
</Page>

0 commit comments

Comments
 (0)