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 text component color to use box color (#18246)

Browse Source 
snapshot updates

fix snapshots

add background colors

fix snapshots
This commit is contained in:
Garrett Bear 2023-03-23 13:00:37 -07:00 committed by GitHub
parent fcdc5c9c14
commit 79b2deb194
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
45 changed files with 128 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/component-library/avatar-account/__snapshots__/avatar-account.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`AvatarAccount should render correctly 1`] = `
<div>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
data-testid="avatar-account"
>
<div

2
ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`AvatarBase should render correctly 1`] = `
<div>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
data-testid="avatar-base"
/>
</div>

4
ui/components/component-library/avatar-base/avatar-base.test.js
View File

@ -73,10 +73,10 @@ describe('AvatarBase', () => {
</>,
);
expect(getByTestId(TextColor.successDefault)).toHaveClass(
`mm-text--color-${TextColor.successDefault}`,
`box--color-${TextColor.successDefault}`,
);
expect(getByTestId(TextColor.errorDefault)).toHaveClass(
`mm-text--color-${TextColor.errorDefault}`,
`box--color-${TextColor.errorDefault}`,
);
});
// background color

2
ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`AvatarFavicon should render correctly 1`] = `
<div>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
data-testid="avatar-favicon"
>
<span

2
ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`AvatarIcon should render correctly 1`] = `
<div>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-icon mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-primary-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-primary-muted box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-icon mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-primary-muted box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
data-testid="avatar-icon"
>
<span

4
ui/components/component-library/avatar-icon/avatar-icon.test.js
View File

@ -100,9 +100,7 @@ describe('AvatarIcon', () => {
/>,
);
expect(getByTestId('success')).toHaveClass(
'mm-text--color-success-default',
);
expect(getByTestId('success')).toHaveClass('box--color-success-default');
expect(getByTestId('success')).toHaveClass(
'box--background-color-success-muted',
);

2
ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`AvatarNetwork should render correctly 1`] = `
<div>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
data-testid="avatar-network"
>
?

4
ui/components/component-library/avatar-network/avatar-network.test.js
View File

@ -75,10 +75,10 @@ describe('AvatarNetwork', () => {
</>,
);
expect(getByTestId(TextColor.successDefault)).toHaveClass(
`mm-text--color-${TextColor.successDefault}`,
`box--color-${TextColor.successDefault}`,
);
expect(getByTestId(TextColor.errorDefault)).toHaveClass(
`mm-text--color-${TextColor.errorDefault}`,
`box--color-${TextColor.errorDefault}`,
);
});
// background color

2
ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`AvatarToken should render correctly 1`] = `
<div>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
data-testid="avatar-token"
>
<img

4
ui/components/component-library/avatar-token/avatar-token.test.js
View File

@ -73,10 +73,10 @@ describe('AvatarToken', () => {
</>,
);
expect(getByTestId(TextColor.successDefault)).toHaveClass(
`mm-text--color-${TextColor.successDefault}`,
`box--color-${TextColor.successDefault}`,
);
expect(getByTestId(TextColor.errorDefault)).toHaveClass(
`mm-text--color-${TextColor.errorDefault}`,
`box--color-${TextColor.errorDefault}`,
);
});
// background color

4
ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.js.snap
View File

@ -12,12 +12,12 @@ exports[`BannerAlert should render BannerAlert element correctly 1`] = `
/>
<div>
<h5
class="box mm-text mm-banner-base__title mm-text--body-lg-medium mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-banner-base__title mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
>
BannerAlert test
</h5>
<p
class="box mm-text mm-text--body-md mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
>
should render BannerAlert element correctly
</p>

4
ui/components/component-library/banner-base/__snapshots__/banner-base.test.js.snap
View File

@ -8,12 +8,12 @@ exports[`BannerBase should render bannerbase element correctly 1`] = `
>
<div>
<h5
class="box mm-text mm-banner-base__title mm-text--body-lg-medium mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-banner-base__title mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
>
Bannerbase test
</h5>
<p
class="box mm-text mm-text--body-md mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
>
should render bannerbase element correctly
</p>

4
ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap
View File

@ -17,12 +17,12 @@ exports[`BannerTip should render BannerTip element correctly 1`] = `
</div>
<div>
<h5
class="box mm-text mm-banner-base__title mm-text--body-lg-medium mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-banner-base__title mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
>
BannerTip test
</h5>
<p
class="box mm-text mm-text--body-md mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
>
should render BannerTip element correctly
</p>

4
ui/components/component-library/button-base/__snapshots__/button-base.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`ButtonBase should render anchor element correctly by href and externalLink, href target and rel exist 1`] = `
<div>
<a
class="box mm-text mm-button-base mm-button-base--size-md mm-text--body-md mm-text--color-text-default box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-pill"
class="box mm-text mm-button-base mm-button-base--size-md mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-pill"
data-testid="button-base"
href="https://www.test.com/"
rel="noopener noreferrer"
@ -17,7 +17,7 @@ exports[`ButtonBase should render anchor element correctly by href and externalL
exports[`ButtonBase should render button element correctly and match snapshot 1`] = `
<div>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-text--body-md mm-text--color-text-default box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-pill"
class="box mm-text mm-button-base mm-button-base--size-md mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-pill"
data-testid="button-base"
>
Button base

2
ui/components/component-library/button-link/__snapshots__/button-link.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`ButtonLink should render button element correctly 1`] = `
<div>
<button
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md mm-text--color-primary-default box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-transparent"
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
data-testid="button-link"
>
Button Link

2
ui/components/component-library/button-primary/__snapshots__/button-primary.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`ButtonPrimary should render button element correctly 1`] = `
<div>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md mm-text--color-primary-inverse box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-primary-default box--rounded-pill"
class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
data-testid="button-primary"
>
Button Primary

2
ui/components/component-library/button-secondary/__snapshots__/button-secondary.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`ButtonSecondary should render button element correctly 1`] = `
<div>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md mm-text--color-primary-default box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
class="box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
data-testid="button-secondary"
>
Button Secondary

8
ui/components/component-library/button/__snapshots__/button.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`Button should render button element correctly 1`] = `
<div>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md mm-text--color-primary-inverse box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-primary-default box--rounded-pill"
class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
data-testid="button"
>
Button
@ -14,19 +14,19 @@ exports[`Button should render button element correctly 1`] = `
exports[`Button should render with different button types 1`] = `
<div>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md mm-text--color-primary-inverse box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-primary-default box--rounded-pill"
class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
data-testid="primary"
>
Button
</button>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md mm-text--color-primary-default box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
class="box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
data-testid="secondary"
>
Button
</button>
<button
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md mm-text--color-primary-default box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-transparent"
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
data-testid="link"
>
Button

2
ui/components/component-library/form-text-field/__snapshots__/form-text-field.test.js.snap
View File

@ -10,7 +10,7 @@ exports[`FormTextField should render correctly 1`] = `
>
<input
autocomplete="off"
class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-text--color-text-default box--padding-right-4 box--padding-left-4 box--flex-direction-row box--background-color-transparent box--border-style-none"
class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md box--padding-right-4 box--padding-left-4 box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
focused="false"
type="text"
value=""

4
ui/components/component-library/form-text-field/form-text-field.test.js
View File

@ -79,9 +79,7 @@ describe('FormTextField', () => {
/>,
);
expect(getByTestId('text-field')).toHaveClass('mm-text-field--error');
expect(getByText('test help text')).toHaveClass(
'mm-text--color-error-default',
);
expect(getByText('test help text')).toHaveClass('box--color-error-default');
});
// helpText
it('should render with helpText', () => {

2
ui/components/component-library/help-text/__snapshots__/help-text.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`HelpText should match snapshot 1`] = `
<div>
<p
class="box mm-text mm-help-text mm-text--body-xs mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-help-text mm-text--body-xs box--flex-direction-row box--color-text-default"
>
help text
</p>

18
ui/components/component-library/help-text/help-text.test.js
View File

@ -41,10 +41,10 @@ describe('HelpText', () => {
<HelpText severity={SEVERITIES.INFO}>info</HelpText>
</>,
);
expect(getByText('error')).toHaveClass('mm-text--color-error-default');
expect(getByText('success')).toHaveClass('mm-text--color-success-default');
expect(getByText('warning')).toHaveClass('mm-text--color-warning-default');
expect(getByText('info')).toHaveClass('mm-text--color-info-default');
expect(getByText('error')).toHaveClass('box--color-error-default');
expect(getByText('success')).toHaveClass('box--color-success-default');
expect(getByText('warning')).toHaveClass('box--color-warning-default');
expect(getByText('info')).toHaveClass('box--color-info-default');
});
it('should render with different colors', () => {
const { getByText } = render(
@ -55,14 +55,12 @@ describe('HelpText', () => {
<HelpText color={Color.textMuted}>text muted</HelpText>
</>,
);
expect(getByText('default')).toHaveClass('mm-text--color-text-default');
expect(getByText('text default')).toHaveClass(
'mm-text--color-text-default',
);
expect(getByText('default')).toHaveClass('box--color-text-default');
expect(getByText('text default')).toHaveClass('box--color-text-default');
expect(getByText('text alternative')).toHaveClass(
'mm-text--color-text-alternative',
'box--color-text-alternative',
);
expect(getByText('text muted')).toHaveClass('mm-text--color-text-muted');
expect(getByText('text muted')).toHaveClass('box--color-text-muted');
});
it('should render with a different html element if children is an object', () => {
const { getByText, getByTestId } = render(

2
ui/components/component-library/input/__snapshots__/input.test.js.snap
View File

@ -4,7 +4,7 @@ exports[`Input should render correctly 1`] = `
<div>
<input
autocomplete="off"
class="box mm-text mm-input mm-text--body-md mm-text--color-text-default box--flex-direction-row box--background-color-transparent box--border-style-none"
class="box mm-text mm-input mm-text--body-md box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
type="text"
value=""
/>

2
ui/components/component-library/label/__snapshots__/label.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`label should render text inside the label 1`] = `
<div>
<label
class="box mm-text mm-label mm-text--body-md mm-text--font-weight-bold mm-text--color-text-default box--display-inline-flex box--flex-direction-row box--align-items-center"
class="box mm-text mm-label mm-text--body-md mm-text--font-weight-bold box--display-inline-flex box--flex-direction-row box--align-items-center box--color-text-default"
>
label
</label>

4
ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
View File

@ -7,12 +7,12 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
data-testid="picker-network"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
>
I
</div>
<p
class="box mm-text mm-text--body-sm mm-text--ellipsis mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-sm mm-text--ellipsis box--flex-direction-row box--color-text-default"
>
Imported
</p>

4
ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
View File

@ -7,7 +7,7 @@ exports[`TagUrl should render the label inside the TagUrl 1`] = `
data-testid="tag-url"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-default"
@ -15,7 +15,7 @@ exports[`TagUrl should render the label inside the TagUrl 1`] = `
/>
</div>
<p
class="box mm-text mm-text--body-md mm-text--ellipsis mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
>
https://app.uniswap.org
</p>

2
ui/components/component-library/tag/__snapshots__/tag.test.js.snap
View File

@ -7,7 +7,7 @@ exports[`Tag should render the label inside the tag and match snapshot 1`] = `
data-testid="tag"
>
<p
class="box mm-text mm-text--body-sm mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-default"
>
Imported
</p>

2
ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap
View File

@ -11,7 +11,7 @@ exports[`TextFieldSearch should render correctly 1`] = `
/>
<input
autocomplete="off"
class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-text--color-text-default box--margin-right-6 box--padding-right-4 box--padding-left-2 box--flex-direction-row box--background-color-transparent box--border-style-none"
class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md box--margin-right-6 box--padding-right-4 box--padding-left-2 box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
focused="false"
type="search"
value=""

2
ui/components/component-library/text-field/__snapshots__/text-field.test.js.snap
View File

@ -7,7 +7,7 @@ exports[`TextField should render correctly 1`] = `
>
<input
autocomplete="off"
class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-text--color-text-default box--padding-right-4 box--padding-left-4 box--flex-direction-row box--background-color-transparent box--border-style-none"
class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md box--padding-right-4 box--padding-left-4 box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
focused="false"
type="text"
value=""

20
ui/components/component-library/text/__snapshots__/text.test.js.snap
View File

@ -3,52 +3,52 @@
exports[`Text should render the Text with proper variant class name 1`] = `
<div>
<h1
class="box mm-text mm-text--display-md mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--display-md box--flex-direction-row box--color-text-default"
>
display-md
</h1>
<h2
class="box mm-text mm-text--heading-lg mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--heading-lg box--flex-direction-row box--color-text-default"
>
heading-lg
</h2>
<h3
class="box mm-text mm-text--heading-md mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--heading-md box--flex-direction-row box--color-text-default"
>
heading-md
</h3>
<h4
class="box mm-text mm-text--heading-sm mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--heading-sm box--flex-direction-row box--color-text-default"
>
heading-sm
</h4>
<p
class="box mm-text mm-text--body-lg-medium mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
>
body-lg-medium
</p>
<p
class="box mm-text mm-text--body-md mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
>
body-md
</p>
<p
class="box mm-text mm-text--body-md-bold mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-md-bold box--flex-direction-row box--color-text-default"
>
body-md-bold
</p>
<p
class="box mm-text mm-text--body-sm mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-default"
>
body-sm
</p>
<p
class="box mm-text mm-text--body-sm-bold mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-sm-bold box--flex-direction-row box--color-text-default"
>
body-sm-bold
</p>
<p
class="box mm-text mm-text--body-xs mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-xs box--flex-direction-row box--color-text-default"
>
body-xs
</p>

2
ui/components/component-library/text/text.js
View File

@ -89,7 +89,6 @@ export const Text = React.forwardRef(
[`mm-text--ellipsis`]: Boolean(ellipsis),
[`mm-text--text-transform-${textTransform}`]: Boolean(textTransform),
[`mm-text--text-align-${textAlign}`]: Boolean(textAlign),
[`mm-text--color-${color}`]: Boolean(color),
[`mm-text--overflow-wrap-${overflowWrap}`]: Boolean(overflowWrap),
},
);
@ -100,6 +99,7 @@ export const Text = React.forwardRef(
className={classnames(computedClassName)}
as={Tag}
dir={textDirection}
color={color}
{...props}
>
{children}

6
ui/components/component-library/text/text.scss
View File

@ -46,12 +46,6 @@ $text-variants: (
}
}
@each $variant, $color in $color-map {
&--color-#{$variant} {
color: var($color);
}
}
@each $weight in $font-weight {
&--font-weight-#{$weight} {
@if $weight == "medium" {

9
ui/components/component-library/text/text.stories.js
View File

@ -147,6 +147,15 @@ function renderBackgroundColor(color) {
case Color.infoInverse:
bgColor = BackgroundColor.infoDefault;
break;
case Color.goerliInverse:
bgColor = BackgroundColor.goerli;
break;
case Color.sepoliaInverse:
bgColor = BackgroundColor.sepolia;
break;
case Color.lineaTestnetInverse:
bgColor = BackgroundColor.lineaTestnet;
break;
default:
bgColor = null;
break;

34
ui/components/component-library/text/text.test.js
View File

@ -126,40 +126,30 @@ describe('Text', () => {
<Text color={TextColor.infoInverse}>info-inverse</Text>
</>,
);
expect(getByText('text-default')).toHaveClass(
'mm-text--color-text-default',
);
expect(getByText('text-default')).toHaveClass('box--color-text-default');
expect(getByText('text-alternative')).toHaveClass(
'mm-text--color-text-alternative',
'box--color-text-alternative',
);
expect(getByText('text-muted')).toHaveClass('mm-text--color-text-muted');
expect(getByText('text-muted')).toHaveClass('box--color-text-muted');
expect(getByText('primary-default')).toHaveClass(
'mm-text--color-primary-default',
'box--color-primary-default',
);
expect(getByText('primary-inverse')).toHaveClass(
'mm-text--color-primary-inverse',
);
expect(getByText('error-default')).toHaveClass(
'mm-text--color-error-default',
);
expect(getByText('error-inverse')).toHaveClass(
'mm-text--color-error-inverse',
'box--color-primary-inverse',
);
expect(getByText('error-default')).toHaveClass('box--color-error-default');
expect(getByText('error-inverse')).toHaveClass('box--color-error-inverse');
expect(getByText('success-default')).toHaveClass(
'mm-text--color-success-default',
'box--color-success-default',
);
expect(getByText('success-inverse')).toHaveClass(
'mm-text--color-success-inverse',
'box--color-success-inverse',
);
expect(getByText('warning-inverse')).toHaveClass(
'mm-text--color-warning-inverse',
);
expect(getByText('info-default')).toHaveClass(
'mm-text--color-info-default',
);
expect(getByText('info-inverse')).toHaveClass(
'mm-text--color-info-inverse',
'box--color-warning-inverse',
);
expect(getByText('info-default')).toHaveClass('box--color-info-default');
expect(getByText('info-inverse')).toHaveClass('box--color-info-inverse');
});
it('should render the Text with proper font style class name', () => {

2
ui/components/institutional/jwt-dropdown/__snapshots__/jwt-dropdown.test.js.snap
View File

@ -6,7 +6,7 @@ exports[`JwtDropdown should render the Jwt dropdown component 1`] = `
class="box box--flex-direction-row"
>
<p
class="box mm-text custody-search-jwt__select-title mm-text--body-md mm-text--color-text-default box--padding-1 box--flex-direction-row"
class="box mm-text custody-search-jwt__select-title mm-text--body-md box--padding-1 box--flex-direction-row box--color-text-default"
>
[selectJWT]
</p>

4
ui/components/institutional/jwt-url-form/__snapshots__/jwt-url-form.test.js.snap
View File

@ -12,7 +12,7 @@ exports[`JwtUrlForm shows JWT text area when no jwt token exists 1`] = `
class="box box--flex-direction-row"
>
<p
class="box mm-text jwt-url-form__instruction mm-text--body-md mm-text--color-text-default box--flex-direction-row"
class="box mm-text jwt-url-form__instruction mm-text--body-md box--flex-direction-row box--color-text-default"
>
input text
</p>
@ -28,7 +28,7 @@ exports[`JwtUrlForm shows JWT text area when no jwt token exists 1`] = `
class="box jwt-url-form__jwt-apiUrlInput box--flex-direction-row"
>
<p
class="box mm-text jwt-url-form__instruction mm-text--body-md mm-text--color-text-default box--flex-direction-row"
class="box mm-text jwt-url-form__instruction mm-text--body-md box--flex-direction-row box--color-text-default"
/>
<div
class="box box--flex-direction-row"

4
ui/components/institutional/note-to-trader/__snapshots__/note-to-trader.test.js.snap
View File

@ -6,13 +6,13 @@ exports[`NoteToTrader should render the Note to trader component 1`] = `
class="box note-header box--display-flex box--flex-direction-row box--justify-content-space-between"
>
<label
class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-bold mm-text--color-text-default box--display-inline-flex box--flex-direction-row box--align-items-center"
class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-bold box--display-inline-flex box--flex-direction-row box--align-items-center box--color-text-default"
for="transaction-note"
>
Transaction note
</label>
<p
class="box mm-text note-header__counter mm-text--body-md mm-text--color-text-default box--flex-direction-row"
class="box mm-text note-header__counter mm-text--body-md box--flex-direction-row box--color-text-default"
>
9
/

10
ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
View File

@ -6,7 +6,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
class="box multichain-account-list-item box--padding-4 box--display-flex box--gap-2 box--flex-direction-row box--background-color-transparent"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
>
<div
class="mm-avatar-account__jazzicon"
@ -58,7 +58,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
class="box box--display-flex box--gap-2 box--flex-direction-row box--justify-content-space-between"
>
<div
class="box mm-text mm-text--body-md mm-text--ellipsis mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
>
Test Account
</div>
@ -66,7 +66,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
class="box box--display-flex box--flex-direction-row box--align-items-center"
>
<div
class="box mm-text mm-text--body-md mm-text--text-align-end mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-md mm-text--text-align-end box--flex-direction-row box--color-text-default"
>
<div
class="currency-display-component"
@ -94,12 +94,12 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
class="box box--display-flex box--flex-direction-row box--justify-content-space-between"
>
<p
class="box mm-text mm-text--body-sm mm-text--color-text-alternative box--flex-direction-row"
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
>
0x0dc...e7bc
</p>
<div
class="box mm-text mm-text--body-sm mm-text--text-align-end mm-text--color-text-alternative box--flex-direction-row"
class="box mm-text mm-text--body-sm mm-text--text-align-end box--flex-direction-row box--color-text-alternative"
>
<div
class="currency-display-component"

4
ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap
View File

@ -12,12 +12,12 @@ exports[`DetectedTokensBanner should render correctly 1`] = `
/>
<div>
<p
class="box mm-text mm-text--body-md mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
>
3 new tokens found in this account
</p>
<button
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md mm-text--color-primary-default box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-transparent"
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
>
Import tokens
</button>

8
ui/components/multichain/multichain-import-token-link/__snapshots__/multichain-import-token-link.test.js.snap
View File

@ -9,7 +9,7 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
class="box box--display-flex box--flex-direction-row box--align-items-center"
>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md mm-text--color-primary-default box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-transparent"
class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
data-testid="import-token-button"
>
<span
@ -23,7 +23,7 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
class="box box--padding-top-4 box--padding-bottom-4 box--display-flex box--flex-direction-row box--align-items-center"
>
<button
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md mm-text--color-primary-default box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-transparent"
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
data-testid="refresh-list-button"
>
<span
@ -46,7 +46,7 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
class="box box--display-flex box--flex-direction-row box--align-items-center"
>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md mm-text--color-primary-default box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-transparent"
class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
data-testid="import-token-button"
>
<span
@ -60,7 +60,7 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
class="box box--padding-top-4 box--padding-bottom-4 box--display-flex box--flex-direction-row box--align-items-center"
>
<button
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md mm-text--color-primary-default box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-transparent"
class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
data-testid="refresh-list-button"
>
<span

10
ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap
View File

@ -15,7 +15,7 @@ exports[`MultichainTokenListItem should render correctly 1`] = `
class="box mm-badge-wrapper box--margin-right-3 box--display-inline-block box--flex-direction-row"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
>
?
</div>
@ -23,7 +23,7 @@ exports[`MultichainTokenListItem should render correctly 1`] = `
class="box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right box--flex-direction-row"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-border-muted box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-muted box--border-style-solid box--border-width-1"
>
<img
alt="undefined logo"
@ -45,16 +45,16 @@ exports[`MultichainTokenListItem should render correctly 1`] = `
>
<div>
<p
class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis box--flex-direction-row box--color-text-default"
/>
</div>
</div>
<p
class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end box--flex-direction-row box--color-text-default"
/>
</div>
<p
class="box mm-text mm-text--body-md mm-text--color-text-alternative box--flex-direction-row"
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-alternative"
>
NaN

24
ui/pages/confirm-approve/confirm-approve-content/__snapshots__/confirm-approve-content.component.test.js.snap
View File

@ -21,7 +21,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
/>
</div>
<h6
class="box mm-text mm-text--body-sm mm-text--color-text-alternative box--margin-left-1 box--flex-direction-row"
class="box mm-text mm-text--body-sm box--margin-left-1 box--flex-direction-row box--color-text-alternative"
>
https://metamask.github.io/test-dapp/
</h6>
@ -135,7 +135,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
class="box confirm-approve-content__custom-nonce-header box--flex-direction-row box--justify-content-flex-start box--display-flex"
>
<h6
class="box mm-text mm-text--body-sm mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-default"
>
Nonce
</h6>
@ -148,7 +148,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
</a>
</div>
<h6
class="box mm-text confirm-approve-content__custom-nonce-value mm-text--body-sm-bold mm-text--color-text-default box--flex-direction-row"
class="box mm-text confirm-approve-content__custom-nonce-value mm-text--body-sm-bold box--flex-direction-row box--color-text-default"
>
2
</h6>
@ -197,7 +197,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
/>
</div>
<h6
class="box mm-text mm-text--body-sm mm-text--color-text-alternative box--margin-left-1 box--flex-direction-row"
class="box mm-text mm-text--body-sm box--margin-left-1 box--flex-direction-row box--color-text-alternative"
>
https://metamask.github.io/test-dapp/
</h6>
@ -322,7 +322,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
class="box confirm-approve-content__custom-nonce-header box--flex-direction-row box--justify-content-flex-start box--display-flex"
>
<h6
class="box mm-text mm-text--body-sm mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-default"
>
Nonce
</h6>
@ -335,7 +335,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
</a>
</div>
<h6
class="box mm-text confirm-approve-content__custom-nonce-value mm-text--body-sm-bold mm-text--color-text-default box--flex-direction-row"
class="box mm-text confirm-approve-content__custom-nonce-value mm-text--body-sm-bold box--flex-direction-row box--color-text-default"
>
2
</h6>
@ -384,7 +384,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
/>
</div>
<h6
class="box mm-text mm-text--body-sm mm-text--color-text-alternative box--margin-left-1 box--flex-direction-row"
class="box mm-text mm-text--body-sm box--margin-left-1 box--flex-direction-row box--color-text-alternative"
>
https://metamask.github.io/test-dapp/
</h6>
@ -509,7 +509,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
class="box confirm-approve-content__custom-nonce-header box--flex-direction-row box--justify-content-flex-start box--display-flex"
>
<h6
class="box mm-text mm-text--body-sm mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-default"
>
Nonce
</h6>
@ -522,7 +522,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
</a>
</div>
<h6
class="box mm-text confirm-approve-content__custom-nonce-value mm-text--body-sm-bold mm-text--color-text-default box--flex-direction-row"
class="box mm-text confirm-approve-content__custom-nonce-value mm-text--body-sm-bold box--flex-direction-row box--color-text-default"
>
2
</h6>
@ -571,7 +571,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
/>
</div>
<h6
class="box mm-text mm-text--body-sm mm-text--color-text-alternative box--margin-left-1 box--flex-direction-row"
class="box mm-text mm-text--body-sm box--margin-left-1 box--flex-direction-row box--color-text-alternative"
>
https://metamask.github.io/test-dapp/
</h6>
@ -696,7 +696,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
class="box confirm-approve-content__custom-nonce-header box--flex-direction-row box--justify-content-flex-start box--display-flex"
>
<h6
class="box mm-text mm-text--body-sm mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-default"
>
Nonce
</h6>
@ -709,7 +709,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
</a>
</div>
<h6
class="box mm-text confirm-approve-content__custom-nonce-value mm-text--body-sm-bold mm-text--color-text-default box--flex-direction-row"
class="box mm-text confirm-approve-content__custom-nonce-value mm-text--body-sm-bold box--flex-direction-row box--color-text-default"
>
2
</h6>

2
ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
View File

@ -254,7 +254,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
class="confirm-page-container-summary__title"
>
<h3
class="box mm-text mm-text--heading-md mm-text--font-weight-normal mm-text--ellipsis mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--heading-md mm-text--font-weight-normal mm-text--ellipsis box--flex-direction-row box--color-text-default"
>
<div
class="currency-display-component"

24
ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
View File

@ -6,18 +6,18 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
class="box page-container box--padding-top-8 box--padding-right-4 box--padding-bottom-8 box--padding-left-4 box--gap-4 box--flex-direction-row"
>
<h2
class="box mm-text mm-text--heading-lg mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--heading-lg box--flex-direction-row box--color-text-default"
>
Secret Recovery Phrase
</h2>
<p
class="box mm-text mm-text--body-md mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
>
<span>
The
<a
class="box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md mm-text--color-primary-default box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-transparent"
class="box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
href="https://metamask.zendesk.com/hc/en-us/articles/360060826432-What-is-a-Secret-Recovery-Phrase-and-how-to-keep-your-crypto-wallet-secure"
rel="noopener noreferrer"
target="_blank"
@ -26,7 +26,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
</a>
provides
<strong
class="box mm-text mm-text--body-md-bold mm-text--font-weight-bold mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-md-bold mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
>
full access to your wallet and funds.
@ -36,13 +36,13 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
</span>
</p>
<p
class="box mm-text mm-text--body-md mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
>
<span>
MetaMask is a
<a
class="box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md mm-text--color-primary-default box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-transparent"
class="box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
href="https://metamask.zendesk.com/hc/en-us/articles/360059952212-MetaMask-is-a-non-custodial-wallet"
rel="noopener noreferrer"
target="_blank"
@ -62,13 +62,13 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
/>
<div>
<p
class="box mm-text mm-text--body-md mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
>
<span>
Make sure no one is looking at your screen.
<strong
class="box mm-text mm-text--body-md-bold mm-text--font-weight-bold mm-text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-md-bold mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
>
MetaMask Support will never request this.
</strong>
@ -80,7 +80,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
</div>
<form>
<label
class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-bold mm-text--color-text-default box--display-inline-flex box--flex-direction-row box--align-items-center"
class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-bold box--display-inline-flex box--flex-direction-row box--align-items-center box--color-text-default"
for="password-box"
>
Enter password to continue
@ -90,7 +90,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
>
<input
autocomplete="off"
class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-text--color-text-default box--padding-right-4 box--padding-left-4 box--flex-direction-row box--background-color-transparent box--border-style-none"
class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md box--padding-right-4 box--padding-left-4 box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
data-testid="input-password"
focused="true"
id="password-box"
@ -104,12 +104,12 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
class="box box--margin-top-auto box--display-flex box--gap-4 box--flex-direction-row"
>
<button
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-secondary mm-text--body-md mm-text--color-primary-default box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--width-full box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-secondary mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--width-full box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
>
Cancel
</button>
<button
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md mm-text--color-primary-inverse box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--width-full box--background-color-primary-default box--rounded-pill"
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--width-full box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
disabled=""
>
Next

4
ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap
View File

@ -177,7 +177,7 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
class="settings-page__content-description"
>
<p
class="box mm-text mm-text--body-md mm-text--color-text-alternative box--flex-direction-row"
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-alternative"
>
We use third-party APIs to detect NFTs in your wallet, which means your IP address may be exposed to centralized servers. There are a few things to be cautious about when enabling this feature.
</p>
@ -195,7 +195,7 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
</li>
</ul>
<p
class="box mm-text mm-text--body-md mm-text--color-text-alternative box--padding-top-4 box--flex-direction-row"
class="box mm-text mm-text--body-md box--padding-top-4 box--flex-direction-row box--color-text-alternative"
>
Leave this feature off if you don't want the app to pull data from those services.
</p>