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

Part of #17670 Replace Typography with Text component for 4 files. (#18793)

Browse Source 
* Worked on issue #17670 & #18714 for 4 other files.

* Updated snapshots.

* Update index.test.js.snap

* Update customize-nonce.test.js.snap

* Update signature-request.component.test.js.snap

---------

Co-authored-by: Brad Decker <bhdecker84@gmail.com>
Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
This commit is contained in:
Harsh Shukla 2023-05-05 16:44:09 +05:30 committed by GitHub
parent 36c4ff15b2
commit 9fae71505c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 79 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap
View File

@ -15,7 +15,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
class="customize-nonce-modal__main-header" class="customize-nonce-modal__main-header"
> >
<h4 <h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography customize-nonce-modal__main-title typography--h4 typography--weight-bold typography--style-normal typography--color-text-default" class="box mm-text customize-nonce-modal__main-title mm-text--heading-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
> >
Edit nonce Edit nonce
</h4> </h4>
@ -33,7 +33,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
class="box box--margin-top-2 box--display-inline-flex box--flex-direction-row box--align-items-center" class="box box--margin-top-2 box--display-inline-flex box--flex-direction-row box--align-items-center"
> >
<h6 <h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-default" class="box mm-text mm-text--body-sm mm-text--font-weight-normal box--flex-direction-row box--color-text-default"
> >
This is an advanced feature, use cautiously. This is an advanced feature, use cautiously.
<a <a
@ -53,7 +53,8 @@ exports[`Customize Nonce should match snapshot 1`] = `
class="box box--display-flex box--flex-direction-row box--align-items-center" class="box box--display-flex box--flex-direction-row box--align-items-center"
> >
<h6 <h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row box--width-5/6 typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default" boxprops="[object Object]"
class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
> >
Edit nonce Edit nonce
</h6> </h6>

33
ui/components/app/modals/customize-nonce/customize-nonce.component.js
View File

@ -3,10 +3,9 @@ import PropTypes from 'prop-types';
import Modal from '../../modal'; import Modal from '../../modal';
import TextField from '../../../ui/text-field'; import TextField from '../../../ui/text-field';
import Button from '../../../ui/button'; import Button from '../../../ui/button';
import Typography from '../../../ui/typography';
import { import {
TypographyVariant, TextVariant,
FONT_WEIGHT, FontWeight,
AlignItems, AlignItems,
BLOCK_SIZES, BLOCK_SIZES,
DISPLAY, DISPLAY,
@ -19,6 +18,7 @@ import {
ButtonIcon, ButtonIcon,
ButtonIconSize, ButtonIconSize,
IconName, IconName,
Text,
} from '../../../component-library'; } from '../../../component-library';
const CustomizeNonce = ({ const CustomizeNonce = ({
@ -50,13 +50,14 @@ const CustomizeNonce = ({
> >
<div className="customize-nonce-modal"> <div className="customize-nonce-modal">
<div className="customize-nonce-modal__main-header"> <div className="customize-nonce-modal__main-header">
<Typography <Text
className="customize-nonce-modal__main-title" className="customize-nonce-modal__main-title"
variant={TypographyVariant.H4} variant={TextVariant.headingSm}
fontWeight={FONT_WEIGHT.BOLD} as="h4"
fontWeight={FontWeight.Bold}
> >
{t('editNonceField')} {t('editNonceField')}
</Typography> </Text>
<ButtonIcon <ButtonIcon
iconName={IconName.Close} iconName={IconName.Close}
className="customize-nonce-modal__close" className="customize-nonce-modal__close"
@ -70,9 +71,10 @@ const CustomizeNonce = ({
display={DISPLAY.INLINE_FLEX} display={DISPLAY.INLINE_FLEX}
alignItems={AlignItems.center} alignItems={AlignItems.center}
> >
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
fontWeight={FONT_WEIGHT.NORMAL} as="h6"
fontWeight={FontWeight.Normal}
> >
{t('editNonceMessage')} {t('editNonceMessage')}
<Button <Button
@ -84,17 +86,18 @@ const CustomizeNonce = ({
> >
{t('learnMoreUpperCase')} {t('learnMoreUpperCase')}
</Button> </Button>
</Typography> </Text>
</Box> </Box>
<Box marginTop={3}> <Box marginTop={3}>
<Box alignItems={AlignItems.center} display={DISPLAY.FLEX}> <Box alignItems={AlignItems.center} display={DISPLAY.FLEX}>
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
fontWeight={FONT_WEIGHT.BOLD} as="h6"
fontWeight={FontWeight.Bold}
boxProps={{ width: BLOCK_SIZES.FIVE_SIXTHS }} boxProps={{ width: BLOCK_SIZES.FIVE_SIXTHS }}
> >
{t('editNonceField')} {t('editNonceField')}
</Typography> </Text>
<Box width={BLOCK_SIZES.ONE_SIXTH}> <Box width={BLOCK_SIZES.ONE_SIXTH}>
<Button <Button
type="link" type="link"

42
ui/components/app/network-account-balance-header/network-account-balance-header.js
View File

@ -5,17 +5,17 @@ import Identicon from '../../ui/identicon';
import { import {
DISPLAY, DISPLAY,
FLEX_DIRECTION, FLEX_DIRECTION,
TypographyVariant, TextVariant,
FONT_WEIGHT, FontWeight,
AlignItems, AlignItems,
JustifyContent, JustifyContent,
TEXT_ALIGN, TextAlign,
TextColor, TextColor,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { I18nContext } from '../../../contexts/i18n'; import { I18nContext } from '../../../contexts/i18n';
import Typography from '../../ui/typography';
import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../shared/constants/network'; import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../shared/constants/network';
import { Text } from '../../component-library';
export default function NetworkAccountBalanceHeader({ export default function NetworkAccountBalanceHeader({
networkName, networkName,
@ -64,22 +64,24 @@ export default function NetworkAccountBalanceHeader({
alignItems={AlignItems.flexStart} alignItems={AlignItems.flexStart}
flexDirection={FLEX_DIRECTION.COLUMN} flexDirection={FLEX_DIRECTION.COLUMN}
> >
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
as="h6"
color={TextColor.textAlternative} color={TextColor.textAlternative}
marginBottom={0} marginBottom={0}
> >
{networkName} {networkName}
</Typography> </Text>
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
as="h6"
color={TextColor.textDefault} color={TextColor.textDefault}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
marginTop={0} marginTop={0}
> >
{accountName} {accountName}
</Typography> </Text>
</Box> </Box>
</Box> </Box>
<Box <Box
@ -87,23 +89,25 @@ export default function NetworkAccountBalanceHeader({
alignItems={AlignItems.flexEnd} alignItems={AlignItems.flexEnd}
flexDirection={FLEX_DIRECTION.COLUMN} flexDirection={FLEX_DIRECTION.COLUMN}
> >
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
as="h6"
color={TextColor.textAlternative} color={TextColor.textAlternative}
marginBottom={0} marginBottom={0}
> >
{t('balance')} {t('balance')}
</Typography> </Text>
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
as="h6"
color={TextColor.textDefault} color={TextColor.textDefault}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
marginTop={0} marginTop={0}
align={TEXT_ALIGN.END} align={TextAlign.End}
> >
{accountBalance} {tokenName} {accountBalance} {tokenName}
</Typography> </Text>
</Box> </Box>
</Box> </Box>
); );

9
ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap
View File

@ -145,12 +145,12 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = `
class="box box--display-flex box--flex-direction-column box--align-items-flex-start" class="box box--display-flex box--flex-direction-column box--align-items-flex-start"
> >
<h6 <h6
class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative" class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
> >
Unknown private network Unknown private network
</h6> </h6>
<h6 <h6
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default" class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
> >
Test Account Test Account
</h6> </h6>
@ -160,12 +160,13 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = `
class="box box--display-flex box--flex-direction-column box--align-items-flex-end" class="box box--display-flex box--flex-direction-column box--align-items-flex-end"
> >
<h6 <h6
class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative" class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
> >
Balance Balance
</h6> </h6>
<h6 <h6
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--align-end typography--color-text-default" align="end"
class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
> >
966.987986 966.987986

18
ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap
View File

@ -142,12 +142,12 @@ exports[`Signature Request Component render should match snapshot when we are us
class="box box--display-flex box--flex-direction-column box--align-items-flex-start" class="box box--display-flex box--flex-direction-column box--align-items-flex-start"
> >
<h6 <h6
class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative" class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
> >
Unknown private network Unknown private network
</h6> </h6>
<h6 <h6
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default" class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
> >
Antonio Antonio
</h6> </h6>
@ -157,12 +157,13 @@ exports[`Signature Request Component render should match snapshot when we are us
class="box box--display-flex box--flex-direction-column box--align-items-flex-end" class="box box--display-flex box--flex-direction-column box--align-items-flex-end"
> >
<h6 <h6
class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative" class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
> >
Balance Balance
</h6> </h6>
<h6 <h6
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--align-end typography--color-text-default" align="end"
class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
> >
966.987986 966.987986
@ -917,12 +918,12 @@ exports[`Signature Request Component render should match snapshot when we want t
class="box box--display-flex box--flex-direction-column box--align-items-flex-start" class="box box--display-flex box--flex-direction-column box--align-items-flex-start"
> >
<h6 <h6
class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative" class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
> >
Unknown private network Unknown private network
</h6> </h6>
<h6 <h6
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default" class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
> >
Antonio Antonio
</h6> </h6>
@ -932,12 +933,13 @@ exports[`Signature Request Component render should match snapshot when we want t
class="box box--display-flex box--flex-direction-column box--align-items-flex-end" class="box box--display-flex box--flex-direction-column box--align-items-flex-end"
> >
<h6 <h6
class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative" class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
> >
Balance Balance
</h6> </h6>
<h6 <h6
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--align-end typography--color-text-default" align="end"
class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
> >
1515270.174798 1515270.174798

28
ui/components/ui/callout/callout.stories.js
View File

@ -2,10 +2,10 @@ import React, { useState } from 'react';
import { import {
BorderColor, BorderColor,
SEVERITIES, SEVERITIES,
TypographyVariant, TextVariant,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../box'; import Box from '../box';
import Typography from '../typography'; import { Text } from '../../component-library';
import Callout from './callout'; import Callout from './callout';
export default { export default {
@ -24,12 +24,12 @@ export default {
export const PersistentCallout = (args) => ( export const PersistentCallout = (args) => (
<Box borderColor={BorderColor.borderDefault} paddingTop={8}> <Box borderColor={BorderColor.borderDefault} paddingTop={8}>
<Box margin={2}> <Box margin={2}>
<Typography variant={TypographyVariant.H4}> <Text variant={TextVariant.headingSm} as="h4">
This is your private key: This is your private key:
</Typography> </Text>
<Typography variant={TypographyVariant.H6}> <Text variant={TextVariant.bodySm} as="h6">
some seed words that are super important and probably deserve a callout some seed words that are super important and probably deserve a callout
</Typography> </Text>
</Box> </Box>
<Callout {...args}>Always back up your private key!</Callout> <Callout {...args}>Always back up your private key!</Callout>
</Box> </Box>
@ -40,13 +40,13 @@ export const DismissibleCallout = (args) => {
return ( return (
<Box borderColor={BorderColor.borderDefault} paddingTop={8}> <Box borderColor={BorderColor.borderDefault} paddingTop={8}>
<Box margin={2}> <Box margin={2}>
<Typography variant={TypographyVariant.H4}> <Text variant={TextVariant.headingSm} as="h4">
This is your private key: This is your private key:
</Typography> </Text>
<Typography variant={TypographyVariant.H6}> <Text variant={TextVariant.bodySm} as="h6">
some seed words that are super important and probably deserve a some seed words that are super important and probably deserve a
callout callout
</Typography> </Text>
</Box> </Box>
{!dismissed && ( {!dismissed && (
<Callout {...args} dismiss={() => setDismissed(true)}> <Callout {...args} dismiss={() => setDismissed(true)}>
@ -85,13 +85,13 @@ export const MultipleDismissibleCallouts = () => {
return ( return (
<Box borderColor={BorderColor.borderDefault} paddingTop={8}> <Box borderColor={BorderColor.borderDefault} paddingTop={8}>
<Box margin={2}> <Box margin={2}>
<Typography variant={TypographyVariant.H4}> <Text variant={TextVariant.headingSm} as="h4">
This is your private key: This is your private key:
</Typography> </Text>
<Typography variant={TypographyVariant.H6}> <Text variant={TextVariant.bodySm} as="h6">
some seed words that are super important and probably deserve a some seed words that are super important and probably deserve a
callout callout
</Typography> </Text>
</Box> </Box>
{Object.entries(calloutState) {Object.entries(calloutState)
.filter(([_, callout]) => callout.dismissed === false) .filter(([_, callout]) => callout.dismissed === false)

9
ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap
View File

@ -142,12 +142,12 @@ exports[`Signature Request Component render should match snapshot 1`] = `
class="box box--display-flex box--flex-direction-column box--align-items-flex-start" class="box box--display-flex box--flex-direction-column box--align-items-flex-start"
> >
<h6 <h6
class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative" class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
> >
Goerli test network Goerli test network
</h6> </h6>
<h6 <h6
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default" class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
> >
Account 1 Account 1
</h6> </h6>
@ -157,12 +157,13 @@ exports[`Signature Request Component render should match snapshot 1`] = `
class="box box--display-flex box--flex-direction-column box--align-items-flex-end" class="box box--display-flex box--flex-direction-column box--align-items-flex-end"
> >
<h6 <h6
class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative" class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
> >
Balance Balance
</h6> </h6>
<h6 <h6
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--align-end typography--color-text-default" align="end"
class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
> >
9.107408 9.107408