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