m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
Code

Update pin-extension.js (#18877)

Browse Source
This commit is contained in:
Harsh Shukla 2023-05-02 06:09:56 +05:30 committed by GitHub
parent 262a291185
commit 32a7f0fe09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ui/pages/onboarding-flow/pin-extension/pin-extension.js
View File

@ -2,13 +2,12 @@ import React, { useState, useContext } from 'react';
import { useHistory } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { Carousel } from 'react-responsive-carousel';
import Typography from '../../../components/ui/typography/typography';
import { useI18nContext } from '../../../hooks/useI18nContext';
import Button from '../../../components/ui/button';
import {
TypographyVariant,
FONT_WEIGHT,
TEXT_ALIGN,
TextVariant,
FontWeight,
TextAlign,
} from '../../../helpers/constants/design-system';
import { DEFAULT_ROUTE } from '../../../helpers/constants/routes';
import { setCompletedOnboarding } from '../../../store/actions';
@ -19,6 +18,7 @@ import {
import { MetaMetricsContext } from '../../../contexts/metametrics';
import { FIRST_TIME_FLOW_TYPES } from '../../../helpers/constants/onboarding';
import { getFirstTimeFlowType } from '../../../selectors';
import { Text } from '../../../components/component-library';
import OnboardingPinBillboard from './pin-billboard';
export default function OnboardingPinExtension() {
@ -54,13 +54,14 @@ export default function OnboardingPinExtension() {
className="onboarding-pin-extension"
data-testid="onboarding-pin-extension"
>
<Typography
variant={TypographyVariant.H2}
align={TEXT_ALIGN.CENTER}
fontWeight={FONT_WEIGHT.BOLD}
<Text
variant={TextVariant.headingLg}
as="h2"
align={TextAlign.Center}
fontWeight={FontWeight.Bold}
>
{t('onboardingPinExtensionTitle')}
</Typography>
</Text>
<Carousel
selectedItem={selectedIndex}
showThumbs={false}
@ -69,20 +70,20 @@ export default function OnboardingPinExtension() {
onChange={(index) => setSelectedIndex(index)}
>
<div>
<Typography align={TEXT_ALIGN.CENTER}>
<Text align={TextAlign.Center}>
{t('onboardingPinExtensionDescription')}
</Typography>
</Text>
<div className="onboarding-pin-extension__diagram">
<OnboardingPinBillboard />
</div>
</div>
<div>
<Typography align={TEXT_ALIGN.CENTER}>
<Text align={TextAlign.Center}>
{t('onboardingPinExtensionDescription2')}
</Typography>
<Typography align={TEXT_ALIGN.CENTER}>
</Text>
<Text align={TextAlign.Center}>
{t('onboardingPinExtensionDescription3')}
</Typography>
</Text>
<img
src="/images/onboarding-pin-browser.svg"
width="799"