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

2024-12-23 01:39:44 +01:00 · 2023-02-27 10:42:02 -06:00 · 2023-02-27 10:42:02 -06:00 · 5561987fed
commit 5561987fed
parent 63cbcc7147
16 changed files with 168 additions and 103 deletions
--- a/ui/components/app/beta-header/snapshots/beta-header.test.js.snap
+++ b/ui/components/app/beta-header/snapshots/beta-header.test.js.snap
@ -3,7 +3,7 @@
 exports[`Beta Header should match snapshot 1`] = `
 <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
      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>
    <button
      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"
    >
-      <i
-        class="fa fa-times"
+      <span
+        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>
  </div>
--- a/ui/components/app/beta-header/index.js
+++ b/ui/components/app/beta-header/index.js
@ -8,10 +8,13 @@ import {
  Color,
  BLOCK_SIZES,
  DISPLAY,
+  AlignItems,
+  IconColor,
 } from '../../../helpers/constants/design-system';
 import { BETA_BUGS_URL } from '../../../helpers/constants/beta';

 import { hideBetaHeader } from '../../../store/actions';
+import { ButtonIcon, ICON_NAMES, ICON_SIZES } from '../../component-library';

 const BetaHeader = () => {
  const t = useI18nContext();
@ -23,6 +26,7 @@ const BetaHeader = () => {
      backgroundColor={Color.warningDefault}
      padding={2}
      className="beta-header"
+      alignItems={AlignItems.center}
    >
      <Typography
        variant={TypographyVariant.H7}
@ -42,16 +46,17 @@ const BetaHeader = () => {
          </a>,
        ])}
      </Typography>
-      <button
+      <ButtonIcon
+        iconName={ICON_NAMES.CLOSE}
+        size={ICON_SIZES.SM}
+        color={IconColor.warningInverse}
        className="beta-header__button"
        data-testid="beta-header-close"
        onClick={() => {
          hideBetaHeader();
        }}
        aria-label={t('close')}
-      >
-        <i className="fa fa-times" />
-      </button>
+      />
    </Box>
  );
 };
--- a/ui/components/app/dropdowns/network-dropdown.js
+++ b/ui/components/app/dropdowns/network-dropdown.js
@ -22,8 +22,12 @@ import {
  ADD_POPULAR_CUSTOM_NETWORK,
  ADVANCED_ROUTE,
 } from '../../../helpers/constants/routes';
-
-import { Icon, ICON_NAMES } from '../../component-library';
+import {
+  Icon,
+  ButtonIcon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../component-library';
 import { Dropdown, DropdownMenuItem } from './dropdown';

 // classes from nodes of the toggle element.
@ -195,9 +199,12 @@ class NetworkDropdown extends Component {
          >
            {nickname || rpcUrl}
          </span>
-          {isCurrentRpcTarget ? null : (
-            <i
-              className="fa fa-times delete"
+          {isCurrentRpcTarget && (
+            <ButtonIcon
+              className="delete"
+              iconName={ICON_NAMES.CLOSE}
+              size={ICON_SIZES.SM}
+              ariaLabel={this.context.t('delete')}
              onClick={(e) => {
                e.stopPropagation();
                this.props.showConfirmDeleteNetworkModal({
--- a/ui/components/app/modals/customize-nonce/customize-nonce.component.js
+++ b/ui/components/app/modals/customize-nonce/customize-nonce.component.js
@ -15,6 +15,7 @@ import Box from '../../../ui/box';
 import withModalProps from '../../../../helpers/higher-order-components/with-modal-props';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
+import { ButtonIcon, ICON_NAMES, ICON_SIZES } from '../../../component-library';

 const CustomizeNonce = ({
  hideModal,
@ -52,9 +53,11 @@ const CustomizeNonce = ({
          >
            {t('editNonceField')}
          </Typography>
-          <button
-            className="fas fa-times customize-nonce-modal__close"
-            title={t('close')}
+          <ButtonIcon
+            iconName={ICON_NAMES.CLOSE}
+            className="customize-nonce-modal__close"
+            size={ICON_SIZES.SM}
+            ariaLabel={t('close')}
            onClick={hideModal}
          />
        </div>
--- a/ui/components/app/modals/customize-nonce/customize-nonce.stories.js
+++ b/ui/components/app/modals/customize-nonce/customize-nonce.stories.js
@ -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';
--- a/ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js
+++ b/ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js
@ -10,6 +10,7 @@ import {
  calcTokenAmount,
  toPrecisionWithoutTrailingZeros,
 } 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);

@ -57,9 +58,11 @@ export default class EditApprovalPermission extends PureComponent {
          <div className="edit-approval-permission__title">
            {t('editPermission')}
          </div>
-          <i
-            className="fa fa-times fa-lg edit-approval-permission__header__close"
-            onClick={() => hideModal()}
+          <ButtonIcon
+            iconName={ICON_NAMES.CLOSE}
+            size={ICON_SIZES.LG}
+            className="edit-approval-permission__header__close"
+            onClick={hideModal}
          />
        </div>
        <div className="edit-approval-permission__account-info">
--- a/ui/components/app/modals/new-account-modal/new-account-modal.component.js
+++ b/ui/components/app/modals/new-account-modal/new-account-modal.component.js
@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Button from '../../../ui/button/button.component';
+import { ButtonIcon, ICON_NAMES } from '../../../component-library';

 export default class NewAccountModal extends Component {
  static contextTypes = {
@ -43,10 +44,11 @@ export default class NewAccountModal extends Component {
        <div className="new-account-modal__content">
          <div className="new-account-modal__content__header">
            {t('newAccount')}
-            <button
-              className="fas fa-times new-account-modal__content__header-close"
-              title={t('close')}
+            <ButtonIcon
+              className="new-account-modal__content__header-close"
+              ariaLabel={t('close')}
              onClick={this.props.hideModal}
+              iconName={ICON_NAMES.CLOSE}
            />
          </div>
          <div className="new-account-modal__input-label">
--- a/ui/components/ui/callout/callout.js
+++ b/ui/components/ui/callout/callout.js
@ -5,6 +5,7 @@ import InfoIconInverted from '../icon/info-icon-inverted.component';
 import { SEVERITIES, Color } from '../../../helpers/constants/design-system';
 import { MILLISECOND } from '../../../../shared/constants/time';
 import Typography from '../typography';
+import { ButtonIcon, ICON_NAMES, ICON_SIZES } from '../../component-library';

 export default function Callout({
  severity,
@ -41,7 +42,10 @@ export default function Callout({
        {children}
      </Typography>
      {dismiss && (
-        <i
+        <ButtonIcon
+          iconName={ICON_NAMES.CLOSE}
+          size={ICON_SIZES.SM}
+          className="callout__close-button"
          onClick={() => {
            setRemoved(true);
          }}
@ -50,9 +54,6 @@ export default function Callout({
              setRemoved(true);
            }
          }}
-          role="button"
-          tabIndex={0}
-          className="fas fa-times callout__close-button"
        />
      )}
    </div>
--- a/ui/pages/add-nft/add-nft.js
+++ b/ui/pages/add-nft/add-nft.js
@ -33,6 +33,11 @@ import NftsDetectionNotice from '../../components/app/nfts-detection-notice';
 import { MetaMetricsContext } from '../../contexts/metametrics';
 import { AssetType } from '../../../shared/constants/transaction';
 import { EVENT, EVENT_NAMES } from '../../../shared/constants/metametrics';
+import {
+  ButtonIcon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../components/component-library';

 export default function AddNft() {
  const t = useI18nContext();
@ -149,13 +154,16 @@ export default function AddNft() {
                    <Typography
                      variant={TypographyVariant.H7}
                      fontWeight={FONT_WEIGHT.NORMAL}
-                      margin={0}
+                      marginTop={0}
                    >
                      {t('nftAddFailedMessage')}
                    </Typography>
-                    <button
-                      className="fas fa-times add-nft__close"
-                      title={t('close')}
+                    <ButtonIcon
+                      className="add-nft__close"
+                      iconName={ICON_NAMES.CLOSE}
+                      size={ICON_SIZES.SM}
+                      ariaLabel={t('close')}
+                      data-testid="add-nft-error-close"
                      onClick={() => setNftAddFailed(false)}
                    />
                  </Box>
--- a/ui/pages/add-nft/add-nft.test.js
+++ b/ui/pages/add-nft/add-nft.test.js
@ -127,10 +127,7 @@ describe('AddNft', () => {
      jest.fn().mockRejectedValue(new Error('error')),
    );

-    const { getByTestId, getByText, queryByTitle } = renderWithProvider(
-      <AddNft />,
-      store,
-    );
+    const { getByTestId, getByText } = renderWithProvider(<AddNft />, store);
    fireEvent.change(getByTestId('address'), {
      target: { value: VALID_ADDRESS },
    });
@ -145,7 +142,7 @@ describe('AddNft', () => {
      expect(setNewNftAddedMessage).toHaveBeenCalledWith('error');
    });

-    const addNftClose = queryByTitle('Close');
+    const addNftClose = getByTestId('add-nft-error-close');

    fireEvent.click(addNftClose);
  });
--- a/ui/pages/home/home.component.js
+++ b/ui/pages/home/home.component.js
@ -32,6 +32,11 @@ import {
  TextColor,
 } from '../../helpers/constants/design-system';
 import { SECOND } from '../../../shared/constants/time';
+import {
+  ButtonIcon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../components/component-library';

 import {
  ASSET_ROUTE,
@ -337,9 +342,10 @@ export default class Home extends PureComponent {
                >
                  {t('newNftAddedMessage')}
                </Typography>
-                <button
-                  className="fas fa-times home__new-nft-notification-close"
-                  title={t('close')}
+                <ButtonIcon
+                  iconName={ICON_NAMES.CLOSE}
+                  size={ICON_SIZES.SM}
+                  ariaLabel={t('close')}
                  onClick={onAutoHide}
                />
              </Box>
@ -362,9 +368,10 @@ export default class Home extends PureComponent {
                >
                  {t('removeNftMessage')}
                </Typography>
-                <button
-                  className="fas fa-times home__new-nft-notification-close"
-                  title={t('close')}
+                <ButtonIcon
+                  iconName={ICON_NAMES.CLOSE}
+                  size={ICON_SIZES.SM}
+                  ariaLabel={t('close')}
                  onClick={onAutoHide}
                />
              </Box>
@ -384,10 +391,12 @@ export default class Home extends PureComponent {
                >
                  {t('newNetworkAdded', [newNetworkAdded])}
                </Typography>
-                <button
-                  className="fas fa-times home__new-network-notification-close"
-                  title={t('close')}
+                <ButtonIcon
+                  iconName={ICON_NAMES.CLOSE}
+                  size={ICON_SIZES.SM}
+                  ariaLabel={t('close')}
                  onClick={() => setNewNetworkAdded('')}
+                  className="home__new-network-notification-close"
                />
              </Box>
            }
@ -416,10 +425,13 @@ export default class Home extends PureComponent {
                    {t('newTokensImportedMessage', [newTokensImported])}
                  </Typography>
                </Box>
-                <button
-                  className="fas fa-times home__new-tokens-imported-notification-close"
-                  title={t('close')}
+
+                <ButtonIcon
+                  iconName={ICON_NAMES.CLOSE}
+                  size={ICON_SIZES.SM}
+                  ariaLabel={t('close')}
                  onClick={() => setNewTokensImported('')}
+                  className="home__new-tokens-imported-notification-close"
                />
              </Box>
            }
--- a/ui/pages/onboarding-flow/metametrics/index.scss
+++ b/ui/pages/onboarding-flow/metametrics/index.scss
@ -20,12 +20,6 @@
    }
  }

-  .fa-times {
-    margin-inline-end: 12px;
-    color: var(--color-error-default);
-    padding-top: 3px;
-  }
-
  &__terms a {
    color: var(--color-primary-default);
  }
--- a/ui/pages/onboarding-flow/metametrics/metametrics.js
+++ b/ui/pages/onboarding-flow/metametrics/metametrics.js
@ -20,7 +20,13 @@ import {
 import { EVENT, EVENT_NAMES } from '../../../../shared/constants/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() {
  const t = useI18nContext();
@ -104,40 +110,62 @@ export default function OnboardingMetametrics() {
          {t('onboardingMetametricsSendAnonymize')}
        </li>
        <li>
-          <i className="fa fa-times" />
-          {t('onboardingMetametricsNeverCollect', [
-            <Typography
-              variant={TypographyVariant.Span}
-              key="never"
-              fontWeight={FONT_WEIGHT.BOLD}
-            >
-              {t('onboardingMetametricsNeverEmphasis')}
-            </Typography>,
-          ])}
+          <Box>
+            <Icon
+              marginInlineEnd={2}
+              name={ICON_NAMES.CLOSE}
+              size={ICON_SIZES.SM}
+              color={IconColor.errorDefault}
+            />
+            {t('onboardingMetametricsNeverCollect', [
+              <Typography
+                variant={TypographyVariant.span}
+                key="never"
+                fontWeight={FONT_WEIGHT.BOLD}
+                marginTop={0}
+              >
+                {t('onboardingMetametricsNeverEmphasis')}
+              </Typography>,
+            ])}
+          </Box>
        </li>
        <li>
-          <i className="fa fa-times" />
-          {t('onboardingMetametricsNeverCollectIP', [
-            <Typography
-              variant={TypographyVariant.Span}
-              key="never-collect"
-              fontWeight={FONT_WEIGHT.BOLD}
-            >
-              {t('onboardingMetametricsNeverEmphasis')}
-            </Typography>,
-          ])}
+          <Box>
+            <Icon
+              marginInlineEnd={2}
+              name={ICON_NAMES.CLOSE}
+              size={ICON_SIZES.SM}
+              color={IconColor.errorDefault}
+            />
+            {t('onboardingMetametricsNeverCollectIP', [
+              <Typography
+                variant={TypographyVariant.span}
+                key="never-collect"
+                fontWeight={FONT_WEIGHT.BOLD}
+              >
+                {t('onboardingMetametricsNeverEmphasis')}
+              </Typography>,
+            ])}
+          </Box>
        </li>
        <li>
-          <i className="fa fa-times" />
-          {t('onboardingMetametricsNeverSellData', [
-            <Typography
-              variant={TypographyVariant.Span}
-              key="never-sell"
-              fontWeight={FONT_WEIGHT.BOLD}
-            >
-              {t('onboardingMetametricsNeverEmphasis')}
-            </Typography>,
-          ])}
+          <Box>
+            <Icon
+              marginInlineEnd={2}
+              name={ICON_NAMES.CLOSE}
+              size={ICON_SIZES.SM}
+              color={IconColor.errorDefault}
+            />
+            {t('onboardingMetametricsNeverSellData', [
+              <Typography
+                variant={TypographyVariant.span}
+                key="never-sell"
+                fontWeight={FONT_WEIGHT.BOLD}
+              >
+                {t('onboardingMetametricsNeverEmphasis')}
+              </Typography>,
+            ])}
+          </Box>{' '}
        </li>
      </ul>
      <Typography
--- a/ui/pages/send/send-content/add-recipient/domain-input.component.js
+++ b/ui/pages/send/send-content/add-recipient/domain-input.component.js
@ -12,6 +12,7 @@ import {
  ButtonIcon,
  Icon,
  ICON_NAMES,
+  ICON_SIZES,
 } from '../../../../components/component-library';
 import { IconColor } from '../../../../helpers/constants/design-system';

@ -128,18 +129,13 @@ export default class DomainInput extends Component {
                  </div>
                )}
              </div>
-              <button
+              <ButtonIcon
+                iconName={ICON_NAMES.CLOSE}
+                ariaLabel={t('close')}
                onClick={this.props.onReset}
                className="ens-input__wrapper__action-icon-button"
-              >
-                <i
-                  className="fa fa-times"
-                  style={{
-                    color: 'var(--color-icon-default)',
-                  }}
-                  title={t('close')}
-                />
-              </button>
+                size={ICON_SIZES.SM}
+              />
            </>
          ) : (
            <>
--- a/ui/pages/settings/networks-tab/custom-content-search/custom-content-search.js
+++ b/ui/pages/settings/networks-tab/custom-content-search/custom-content-search.js
@ -5,6 +5,7 @@ import InputAdornment from '@material-ui/core/InputAdornment';
 import TextField from '../../../../components/ui/text-field';
 import { I18nContext } from '../../../../contexts/i18n';
 import SearchIcon from '../../../../components/ui/icon/search-icon';
+import { Icon, ICON_NAMES } from '../../../../components/component-library';

 export default function CustomContentSearch({
  onSearch,
@ -57,11 +58,9 @@ export default function CustomContentSearch({
            position="end"
            onClick={() => handleSearch('')}
          >
-            <i
-              className="fa fa-times networks-tab__imageclose"
-              width="17"
-              heigth="17"
-              title="Close"
+            <Icon
+              name={ICON_NAMES.CLOSE}
+              className="networks-tab__imageclose"
            />
          </InputAdornment>
        )}
--- a/ui/pages/settings/settings-search/settings-search.js
+++ b/ui/pages/settings/settings-search/settings-search.js
@ -9,6 +9,8 @@ import TextField from '../../../components/ui/text-field';
 import { I18nContext } from '../../../contexts/i18n';
 import SearchIcon from '../../../components/ui/icon/search-icon';
 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)
 import { getSnapsRouteObjects } from '../../../selectors';
 ///: END:ONLY_INCLUDE_IN
@ -83,10 +85,7 @@ export default function SettingsSearch({
            onClick={() => handleSearch('')}
            style={{ cursor: 'pointer' }}
          >
-            <i
-              className="fa fa-times"
-              style={{ color: 'var(--color-icon-default)' }}
-            />
+            <Icon name={ICON_NAMES.CLOSE} color={IconColor.iconDefault} />
          </InputAdornment>
        )}
      </>