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

UX: Icon: Stop using fa-times (#17811)

Browse Source
This commit is contained in:
David Walsh 2023-02-27 10:42:02 -06:00 committed by GitHub
parent 63cbcc7147
commit 5561987fed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 168 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/components/app/beta-header/__snapshots__/beta-header.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`Beta Header should match snapshot 1`] = ` exports[`Beta Header should match snapshot 1`] = `
<div> <div>
<div <div
class="box beta-header box--padding-2 box--display-flex box--flex-direction-row box--width-full box--background-color-warning-default" class="box beta-header box--padding-2 box--display-flex box--flex-direction-row box--align-items-center box--width-full box--background-color-warning-default"
> >
<h6 <h6
class="box box--flex-direction-row typography beta-header__message typography--h7 typography--weight-normal typography--style-normal typography--color-warning-inverse" class="box box--flex-direction-row typography beta-header__message typography--h7 typography--weight-normal typography--style-normal typography--color-warning-inverse"
@ -24,11 +24,12 @@ exports[`Beta Header should match snapshot 1`] = `
</h6> </h6>
<button <button
aria-label="Close" aria-label="Close"
class="beta-header__button" class="box mm-button-icon mm-button-icon--size-sm beta-header__button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-warning-inverse box--background-color-transparent box--rounded-lg"
data-testid="beta-header-close" data-testid="beta-header-close"
> >
<i <span
class="fa fa-times" class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
style="mask-image: url('./images/icons/close.svg');"
/> />
</button> </button>
</div> </div>

13
ui/components/app/beta-header/index.js
View File

@ -8,10 +8,13 @@ import {
Color, Color,
BLOCK_SIZES, BLOCK_SIZES,
DISPLAY, DISPLAY,
AlignItems,
IconColor,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { BETA_BUGS_URL } from '../../../helpers/constants/beta'; import { BETA_BUGS_URL } from '../../../helpers/constants/beta';
import { hideBetaHeader } from '../../../store/actions'; import { hideBetaHeader } from '../../../store/actions';
import { ButtonIcon, ICON_NAMES, ICON_SIZES } from '../../component-library';
const BetaHeader = () => { const BetaHeader = () => {
const t = useI18nContext(); const t = useI18nContext();
@ -23,6 +26,7 @@ const BetaHeader = () => {
backgroundColor={Color.warningDefault} backgroundColor={Color.warningDefault}
padding={2} padding={2}
className="beta-header" className="beta-header"
alignItems={AlignItems.center}
> >
<Typography <Typography
variant={TypographyVariant.H7} variant={TypographyVariant.H7}
@ -42,16 +46,17 @@ const BetaHeader = () => {
</a>, </a>,
])} ])}
</Typography> </Typography>
<button <ButtonIcon
iconName={ICON_NAMES.CLOSE}
size={ICON_SIZES.SM}
color={IconColor.warningInverse}
className="beta-header__button" className="beta-header__button"
data-testid="beta-header-close" data-testid="beta-header-close"
onClick={() => { onClick={() => {
hideBetaHeader(); hideBetaHeader();
}} }}
aria-label={t('close')} aria-label={t('close')}
> />
<i className="fa fa-times" />
</button>
</Box> </Box>
); );
}; };

17
ui/components/app/dropdowns/network-dropdown.js
View File

@ -22,8 +22,12 @@ import {
ADD_POPULAR_CUSTOM_NETWORK, ADD_POPULAR_CUSTOM_NETWORK,
ADVANCED_ROUTE, ADVANCED_ROUTE,
} from '../../../helpers/constants/routes'; } from '../../../helpers/constants/routes';
import {
import { Icon, ICON_NAMES } from '../../component-library'; Icon,
ButtonIcon,
ICON_NAMES,
ICON_SIZES,
} from '../../component-library';
import { Dropdown, DropdownMenuItem } from './dropdown'; import { Dropdown, DropdownMenuItem } from './dropdown';
// classes from nodes of the toggle element. // classes from nodes of the toggle element.
@ -195,9 +199,12 @@ class NetworkDropdown extends Component {
> >
{nickname || rpcUrl} {nickname || rpcUrl}
</span> </span>
{isCurrentRpcTarget ? null : ( {isCurrentRpcTarget && (
<i <ButtonIcon
className="fa fa-times delete" className="delete"
iconName={ICON_NAMES.CLOSE}
size={ICON_SIZES.SM}
ariaLabel={this.context.t('delete')}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
this.props.showConfirmDeleteNetworkModal({ this.props.showConfirmDeleteNetworkModal({

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

@ -15,6 +15,7 @@ import Box from '../../../ui/box';
import withModalProps from '../../../../helpers/higher-order-components/with-modal-props'; import withModalProps from '../../../../helpers/higher-order-components/with-modal-props';
import { useI18nContext } from '../../../../hooks/useI18nContext'; import { useI18nContext } from '../../../../hooks/useI18nContext';
import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url'; import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
import { ButtonIcon, ICON_NAMES, ICON_SIZES } from '../../../component-library';
const CustomizeNonce = ({ const CustomizeNonce = ({
hideModal, hideModal,
@ -52,9 +53,11 @@ const CustomizeNonce = ({
> >
{t('editNonceField')} {t('editNonceField')}
</Typography> </Typography>
<button <ButtonIcon
className="fas fa-times customize-nonce-modal__close" iconName={ICON_NAMES.CLOSE}
title={t('close')} className="customize-nonce-modal__close"
size={ICON_SIZES.SM}
ariaLabel={t('close')}
onClick={hideModal} onClick={hideModal}
/> />
</div> </div>

10
ui/components/app/modals/customize-nonce/customize-nonce.stories.js Normal file
View File

@ -0,0 +1,10 @@
import React from 'react';
import CustomizeNonce from '.';
export default {
title: 'Components/App/Modals/CustomizeNonce',
};
export const DefaultStory = () => <CustomizeNonce />;
DefaultStory.storyName = 'Default';

9
ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js
View File

@ -10,6 +10,7 @@ import {
calcTokenAmount, calcTokenAmount,
toPrecisionWithoutTrailingZeros, toPrecisionWithoutTrailingZeros,
} from '../../../../../shared/lib/transactions-controller-utils'; } from '../../../../../shared/lib/transactions-controller-utils';
import { ButtonIcon, ICON_SIZES, ICON_NAMES } from '../../../component-library';
const MAX_UNSIGNED_256_INT = new BigNumber(2).pow(256).minus(1).toString(10); const MAX_UNSIGNED_256_INT = new BigNumber(2).pow(256).minus(1).toString(10);
@ -57,9 +58,11 @@ export default class EditApprovalPermission extends PureComponent {
<div className="edit-approval-permission__title"> <div className="edit-approval-permission__title">
{t('editPermission')} {t('editPermission')}
</div> </div>
<i <ButtonIcon
className="fa fa-times fa-lg edit-approval-permission__header__close" iconName={ICON_NAMES.CLOSE}
onClick={() => hideModal()} size={ICON_SIZES.LG}
className="edit-approval-permission__header__close"
onClick={hideModal}
/> />
</div> </div>
<div className="edit-approval-permission__account-info"> <div className="edit-approval-permission__account-info">

8
ui/components/app/modals/new-account-modal/new-account-modal.component.js
View File

@ -1,6 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Button from '../../../ui/button/button.component'; import Button from '../../../ui/button/button.component';
import { ButtonIcon, ICON_NAMES } from '../../../component-library';
export default class NewAccountModal extends Component { export default class NewAccountModal extends Component {
static contextTypes = { static contextTypes = {
@ -43,10 +44,11 @@ export default class NewAccountModal extends Component {
<div className="new-account-modal__content"> <div className="new-account-modal__content">
<div className="new-account-modal__content__header"> <div className="new-account-modal__content__header">
{t('newAccount')} {t('newAccount')}
<button <ButtonIcon
className="fas fa-times new-account-modal__content__header-close" className="new-account-modal__content__header-close"
title={t('close')} ariaLabel={t('close')}
onClick={this.props.hideModal} onClick={this.props.hideModal}
iconName={ICON_NAMES.CLOSE}
/> />
</div> </div>
<div className="new-account-modal__input-label"> <div className="new-account-modal__input-label">

9
ui/components/ui/callout/callout.js
View File

@ -5,6 +5,7 @@ import InfoIconInverted from '../icon/info-icon-inverted.component';
import { SEVERITIES, Color } from '../../../helpers/constants/design-system'; import { SEVERITIES, Color } from '../../../helpers/constants/design-system';
import { MILLISECOND } from '../../../../shared/constants/time'; import { MILLISECOND } from '../../../../shared/constants/time';
import Typography from '../typography'; import Typography from '../typography';
import { ButtonIcon, ICON_NAMES, ICON_SIZES } from '../../component-library';
export default function Callout({ export default function Callout({
severity, severity,
@ -41,7 +42,10 @@ export default function Callout({
{children} {children}
</Typography> </Typography>
{dismiss && ( {dismiss && (
<i <ButtonIcon
iconName={ICON_NAMES.CLOSE}
size={ICON_SIZES.SM}
className="callout__close-button"
onClick={() => { onClick={() => {
setRemoved(true); setRemoved(true);
}} }}
@ -50,9 +54,6 @@ export default function Callout({
setRemoved(true); setRemoved(true);
} }
}} }}
role="button"
tabIndex={0}
className="fas fa-times callout__close-button"
/> />
)} )}
</div> </div>

16
ui/pages/add-nft/add-nft.js
View File

@ -33,6 +33,11 @@ import NftsDetectionNotice from '../../components/app/nfts-detection-notice';
import { MetaMetricsContext } from '../../contexts/metametrics'; import { MetaMetricsContext } from '../../contexts/metametrics';
import { AssetType } from '../../../shared/constants/transaction'; import { AssetType } from '../../../shared/constants/transaction';
import { EVENT, EVENT_NAMES } from '../../../shared/constants/metametrics'; import { EVENT, EVENT_NAMES } from '../../../shared/constants/metametrics';
import {
ButtonIcon,
ICON_NAMES,
ICON_SIZES,
} from '../../components/component-library';
export default function AddNft() { export default function AddNft() {
const t = useI18nContext(); const t = useI18nContext();
@ -149,13 +154,16 @@ export default function AddNft() {
<Typography <Typography
variant={TypographyVariant.H7} variant={TypographyVariant.H7}
fontWeight={FONT_WEIGHT.NORMAL} fontWeight={FONT_WEIGHT.NORMAL}
margin={0} marginTop={0}
> >
{t('nftAddFailedMessage')} {t('nftAddFailedMessage')}
</Typography> </Typography>
<button <ButtonIcon
className="fas fa-times add-nft__close" className="add-nft__close"
title={t('close')} iconName={ICON_NAMES.CLOSE}
size={ICON_SIZES.SM}
ariaLabel={t('close')}
data-testid="add-nft-error-close"
onClick={() => setNftAddFailed(false)} onClick={() => setNftAddFailed(false)}
/> />
</Box> </Box>

7
ui/pages/add-nft/add-nft.test.js
View File

@ -127,10 +127,7 @@ describe('AddNft', () => {
jest.fn().mockRejectedValue(new Error('error')), jest.fn().mockRejectedValue(new Error('error')),
); );
const { getByTestId, getByText, queryByTitle } = renderWithProvider( const { getByTestId, getByText } = renderWithProvider(<AddNft />, store);
<AddNft />,
store,
);
fireEvent.change(getByTestId('address'), { fireEvent.change(getByTestId('address'), {
target: { value: VALID_ADDRESS }, target: { value: VALID_ADDRESS },
}); });
@ -145,7 +142,7 @@ describe('AddNft', () => {
expect(setNewNftAddedMessage).toHaveBeenCalledWith('error'); expect(setNewNftAddedMessage).toHaveBeenCalledWith('error');
}); });
const addNftClose = queryByTitle('Close'); const addNftClose = getByTestId('add-nft-error-close');
fireEvent.click(addNftClose); fireEvent.click(addNftClose);
}); });

36
ui/pages/home/home.component.js
View File

@ -32,6 +32,11 @@ import {
TextColor, TextColor,
} from '../../helpers/constants/design-system'; } from '../../helpers/constants/design-system';
import { SECOND } from '../../../shared/constants/time'; import { SECOND } from '../../../shared/constants/time';
import {
ButtonIcon,
ICON_NAMES,
ICON_SIZES,
} from '../../components/component-library';
import { import {
ASSET_ROUTE, ASSET_ROUTE,
@ -337,9 +342,10 @@ export default class Home extends PureComponent {
> >
{t('newNftAddedMessage')} {t('newNftAddedMessage')}
</Typography> </Typography>
<button <ButtonIcon
className="fas fa-times home__new-nft-notification-close" iconName={ICON_NAMES.CLOSE}
title={t('close')} size={ICON_SIZES.SM}
ariaLabel={t('close')}
onClick={onAutoHide} onClick={onAutoHide}
/> />
</Box> </Box>
@ -362,9 +368,10 @@ export default class Home extends PureComponent {
> >
{t('removeNftMessage')} {t('removeNftMessage')}
</Typography> </Typography>
<button <ButtonIcon
className="fas fa-times home__new-nft-notification-close" iconName={ICON_NAMES.CLOSE}
title={t('close')} size={ICON_SIZES.SM}
ariaLabel={t('close')}
onClick={onAutoHide} onClick={onAutoHide}
/> />
</Box> </Box>
@ -384,10 +391,12 @@ export default class Home extends PureComponent {
> >
{t('newNetworkAdded', [newNetworkAdded])} {t('newNetworkAdded', [newNetworkAdded])}
</Typography> </Typography>
<button <ButtonIcon
className="fas fa-times home__new-network-notification-close" iconName={ICON_NAMES.CLOSE}
title={t('close')} size={ICON_SIZES.SM}
ariaLabel={t('close')}
onClick={() => setNewNetworkAdded('')} onClick={() => setNewNetworkAdded('')}
className="home__new-network-notification-close"
/> />
</Box> </Box>
} }
@ -416,10 +425,13 @@ export default class Home extends PureComponent {
{t('newTokensImportedMessage', [newTokensImported])} {t('newTokensImportedMessage', [newTokensImported])}
</Typography> </Typography>
</Box> </Box>
<button
className="fas fa-times home__new-tokens-imported-notification-close" <ButtonIcon
title={t('close')} iconName={ICON_NAMES.CLOSE}
size={ICON_SIZES.SM}
ariaLabel={t('close')}
onClick={() => setNewTokensImported('')} onClick={() => setNewTokensImported('')}
className="home__new-tokens-imported-notification-close"
/> />
</Box> </Box>
} }

6
ui/pages/onboarding-flow/metametrics/index.scss
View File

@ -20,12 +20,6 @@
} }
} }
.fa-times {
margin-inline-end: 12px;
color: var(--color-error-default);
padding-top: 3px;
}
&__terms a { &__terms a {
color: var(--color-primary-default); color: var(--color-primary-default);
} }

90
ui/pages/onboarding-flow/metametrics/metametrics.js
View File

@ -20,7 +20,13 @@ import {
import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics'; import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
import { MetaMetricsContext } from '../../../contexts/metametrics'; import { MetaMetricsContext } from '../../../contexts/metametrics';
import { Icon, ICON_NAMES } from '../../../components/component-library'; import {
Icon,
ICON_NAMES,
ICON_SIZES,
} from '../../../components/component-library';
import Box from '../../../components/ui/box/box';
export default function OnboardingMetametrics() { export default function OnboardingMetametrics() {
const t = useI18nContext(); const t = useI18nContext();
@ -104,40 +110,62 @@ export default function OnboardingMetametrics() {
{t('onboardingMetametricsSendAnonymize')} {t('onboardingMetametricsSendAnonymize')}
</li> </li>
<li> <li>
<i className="fa fa-times" /> <Box>
{t('onboardingMetametricsNeverCollect', [ <Icon
<Typography marginInlineEnd={2}
variant={TypographyVariant.Span} name={ICON_NAMES.CLOSE}
key="never" size={ICON_SIZES.SM}
fontWeight={FONT_WEIGHT.BOLD} color={IconColor.errorDefault}
> />
{t('onboardingMetametricsNeverEmphasis')} {t('onboardingMetametricsNeverCollect', [
</Typography>, <Typography
])} variant={TypographyVariant.span}
key="never"
fontWeight={FONT_WEIGHT.BOLD}
marginTop={0}
>
{t('onboardingMetametricsNeverEmphasis')}
</Typography>,
])}
</Box>
</li> </li>
<li> <li>
<i className="fa fa-times" /> <Box>
{t('onboardingMetametricsNeverCollectIP', [ <Icon
<Typography marginInlineEnd={2}
variant={TypographyVariant.Span} name={ICON_NAMES.CLOSE}
key="never-collect" size={ICON_SIZES.SM}
fontWeight={FONT_WEIGHT.BOLD} color={IconColor.errorDefault}
> />
{t('onboardingMetametricsNeverEmphasis')} {t('onboardingMetametricsNeverCollectIP', [
</Typography>, <Typography
])} variant={TypographyVariant.span}
key="never-collect"
fontWeight={FONT_WEIGHT.BOLD}
>
{t('onboardingMetametricsNeverEmphasis')}
</Typography>,
])}
</Box>
</li> </li>
<li> <li>
<i className="fa fa-times" /> <Box>
{t('onboardingMetametricsNeverSellData', [ <Icon
<Typography marginInlineEnd={2}
variant={TypographyVariant.Span} name={ICON_NAMES.CLOSE}
key="never-sell" size={ICON_SIZES.SM}
fontWeight={FONT_WEIGHT.BOLD} color={IconColor.errorDefault}
> />
{t('onboardingMetametricsNeverEmphasis')} {t('onboardingMetametricsNeverSellData', [
</Typography>, <Typography
])} variant={TypographyVariant.span}
key="never-sell"
fontWeight={FONT_WEIGHT.BOLD}
>
{t('onboardingMetametricsNeverEmphasis')}
</Typography>,
])}
</Box>{' '}
</li> </li>
</ul> </ul>
<Typography <Typography

16
ui/pages/send/send-content/add-recipient/domain-input.component.js
View File

@ -12,6 +12,7 @@ import {
ButtonIcon, ButtonIcon,
Icon, Icon,
ICON_NAMES, ICON_NAMES,
ICON_SIZES,
} from '../../../../components/component-library'; } from '../../../../components/component-library';
import { IconColor } from '../../../../helpers/constants/design-system'; import { IconColor } from '../../../../helpers/constants/design-system';
@ -128,18 +129,13 @@ export default class DomainInput extends Component {
</div> </div>
)} )}
</div> </div>
<button <ButtonIcon
iconName={ICON_NAMES.CLOSE}
ariaLabel={t('close')}
onClick={this.props.onReset} onClick={this.props.onReset}
className="ens-input__wrapper__action-icon-button" className="ens-input__wrapper__action-icon-button"
> size={ICON_SIZES.SM}
<i />
className="fa fa-times"
style={{
color: 'var(--color-icon-default)',
}}
title={t('close')}
/>
</button>
</> </>
) : ( ) : (
<> <>

9
ui/pages/settings/networks-tab/custom-content-search/custom-content-search.js
View File

@ -5,6 +5,7 @@ import InputAdornment from '@material-ui/core/InputAdornment';
import TextField from '../../../../components/ui/text-field'; import TextField from '../../../../components/ui/text-field';
import { I18nContext } from '../../../../contexts/i18n'; import { I18nContext } from '../../../../contexts/i18n';
import SearchIcon from '../../../../components/ui/icon/search-icon'; import SearchIcon from '../../../../components/ui/icon/search-icon';
import { Icon, ICON_NAMES } from '../../../../components/component-library';
export default function CustomContentSearch({ export default function CustomContentSearch({
onSearch, onSearch,
@ -57,11 +58,9 @@ export default function CustomContentSearch({
position="end" position="end"
onClick={() => handleSearch('')} onClick={() => handleSearch('')}
> >
<i <Icon
className="fa fa-times networks-tab__imageclose" name={ICON_NAMES.CLOSE}
width="17" className="networks-tab__imageclose"
heigth="17"
title="Close"
/> />
</InputAdornment> </InputAdornment>
)} )}

7
ui/pages/settings/settings-search/settings-search.js
View File

@ -9,6 +9,8 @@ import TextField from '../../../components/ui/text-field';
import { I18nContext } from '../../../contexts/i18n'; import { I18nContext } from '../../../contexts/i18n';
import SearchIcon from '../../../components/ui/icon/search-icon'; import SearchIcon from '../../../components/ui/icon/search-icon';
import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils'; import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils';
import { Icon, ICON_NAMES } from '../../../components/component-library';
import { IconColor } from '../../../helpers/constants/design-system';
///: BEGIN:ONLY_INCLUDE_IN(flask) ///: BEGIN:ONLY_INCLUDE_IN(flask)
import { getSnapsRouteObjects } from '../../../selectors'; import { getSnapsRouteObjects } from '../../../selectors';
///: END:ONLY_INCLUDE_IN ///: END:ONLY_INCLUDE_IN
@ -83,10 +85,7 @@ export default function SettingsSearch({
onClick={() => handleSearch('')} onClick={() => handleSearch('')}
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
> >
<i <Icon name={ICON_NAMES.CLOSE} color={IconColor.iconDefault} />
className="fa fa-times"
style={{ color: 'var(--color-icon-default)' }}
/>
</InputAdornment> </InputAdornment>
)} )}
</> </>