UX: Icons: Remove IconCheck and fa-check (#17787)

* UX: Icons: Remove IconCheck and fa-check

* update jest snapshots

* Update story

* Remove dead CSS

* Update ui/components/app/account-menu/account-menu.component.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/app/dropdowns/network-dropdown.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/pages/permissions-connect/redirect/permissions-redirect.component.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/pages/send/send-content/add-recipient/domain-input.component.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/pages/onboarding-flow/metametrics/metametrics.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/app/modals/transaction-confirmed/transaction-confirmed.component.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Fix jest snapshots

* Update sizes of network andd account menu checks

* Fix ICON_SIZES in account menu

* Improvements

* Use IconColor

* Use IconColor

* Lint

* Update snapshots

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>

ui/components/app/account-menu/account-menu.component.js

@@ -31,21 +31,14 @@ import {
   ///: END:ONLY_INCLUDE_IN
 } from '../../../helpers/constants/routes';
 import TextField from '../../ui/text-field';
-import IconCheck from '../../ui/icon/icon-check';
 import IconCog from '../../ui/icon/icon-cog';
 import IconImport from '../../ui/icon/icon-import';
 
 import Button from '../../ui/button';
 import SearchIcon from '../../ui/icon/search-icon';
 import { SUPPORT_LINK } from '../../../../shared/lib/ui-utils';
-import { Color } from '../../../helpers/constants/design-system';
+import { IconColor } from '../../../helpers/constants/design-system';
-import {
+import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
-  Icon,
-  ICON_NAMES,
-  ///: BEGIN:ONLY_INCLUDE_IN(flask)
-  ICON_SIZES,
-  ///: END:ONLY_INCLUDE_IN
-} from '../../component-library';
 import KeyRingLabel from './keyring-label';
 
 export function AccountMenuItem(props) {
@@ -231,7 +224,11 @@ export default class AccountMenu extends Component {
         >
           <div className="account-menu__check-mark">
             {isSelected ? (
-              <IconCheck color="var(--color-success-default)" />
+              <Icon
+                color={IconColor.successDefault}
+                name={ICON_NAMES.CHECK}
+                size={ICON_SIZES.LG}
+              />
             ) : null}
           </div>
           <Identicon address={identity.address} diameter={24} />
@@ -377,7 +374,7 @@ export default class AccountMenu extends Component {
           icon={
             <Icon
               name={ICON_NAMES.ADD}
-              color={Color.iconAlternative}
+              color={IconColor.iconAlternative}
               ariaLabel={t('createAccount')}
             />
           }
@@ -422,7 +419,10 @@ export default class AccountMenu extends Component {
             }
           }}
           icon={
-            <Icon name={ICON_NAMES.HARDWARE} color={Color.iconAlternative} />
+            <Icon
+              name={ICON_NAMES.HARDWARE}
+              color={IconColor.iconAlternative}
+            />
           }
           text={t('connectHardwareWallet')}
         />
@@ -468,7 +468,10 @@ export default class AccountMenu extends Component {
             global.platform.openTab({ url: supportLink });
           }}
           icon={
-            <Icon name={ICON_NAMES.MESSAGES} color={Color.iconAlternative} />
+            <Icon
+              name={ICON_NAMES.MESSAGES}
+              color={IconColor.iconAlternative}
+            />
           }
           text={supportText}
         />

ui/components/app/dropdowns/network-dropdown.js

@@ -22,8 +22,8 @@ import {
   ADD_POPULAR_CUSTOM_NETWORK,
   ADVANCED_ROUTE,
 } from '../../../helpers/constants/routes';
-import IconCheck from '../../ui/icon/icon-check';
 
+import { Icon, ICON_NAMES } from '../../component-library';
 import { Dropdown, DropdownMenuItem } from './dropdown';
 
 // classes from nodes of the toggle element.
@@ -175,7 +175,7 @@ class NetworkDropdown extends Component {
           }}
         >
           {isCurrentRpcTarget ? (
-            <IconCheck color="var(--color-success-default)" />
+            <Icon name={ICON_NAMES.CHECK} color={IconColor.successDefault} />
           ) : (
             <div className="network-check__transparent">✓</div>
           )}
@@ -243,7 +243,7 @@ class NetworkDropdown extends Component {
         style={DROP_DOWN_MENU_ITEM_STYLE}
       >
         {providerType === network ? (
-          <IconCheck color="var(--color-success-default)" />
+          <Icon name={ICON_NAMES.CHECK} color={IconColor.successDefault} />
         ) : (
           <div className="network-check__transparent">✓</div>
         )}

ui/components/app/modals/metametrics-opt-in-modal/__snapshots__/metametrics-opt-in-modal.test.js.snap

@@ -237,8 +237,9 @@ exports[`MetaMetrics Opt In should match snapshot 1`] = `
             <div
               class="metametrics-opt-in__row"
             >
-              <i
+              <span
-                class="fa fa-check"
+                class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
+                style="mask-image: url('./images/icons/check.svg');"
               />
               <div
                 class="metametrics-opt-in__row-description"
@@ -249,8 +250,9 @@ exports[`MetaMetrics Opt In should match snapshot 1`] = `
             <div
               class="metametrics-opt-in__row"
             >
-              <i
+              <span
-                class="fa fa-check"
+                class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
+                style="mask-image: url('./images/icons/check.svg');"
               />
               <div
                 class="metametrics-opt-in__row-description"

ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js

@@ -7,6 +7,7 @@ import {
   EVENT,
   EVENT_NAMES,
 } from '../../../../../shared/constants/metametrics';
+import { Icon, ICON_NAMES } from '../../../component-library';
 
 export default class MetaMetricsOptInModal extends Component {
   static propTypes = {
@@ -44,13 +45,13 @@ export default class MetaMetricsOptInModal extends Component {
 
               <div className="metametrics-opt-in__committments">
                 <div className="metametrics-opt-in__row">
-                  <i className="fa fa-check" />
+                  <Icon name={ICON_NAMES.CHECK} />
                   <div className="metametrics-opt-in__row-description">
                     {t('metametricsCommitmentsAllowOptOut')}
                   </div>
                 </div>
                 <div className="metametrics-opt-in__row">
-                  <i className="fa fa-check" />
+                  <Icon name={ICON_NAMES.CHECK} />
                   <div className="metametrics-opt-in__row-description">
                     {t('metametricsCommitmentsSendAnonymizedEvents')}
                   </div>

ui/components/app/modals/transaction-confirmed/__snapshots__/transaction-confirmed.test.js.snap

@@ -11,8 +11,9 @@ exports[`Transaction Confirmed should match snapshot 1`] = `
       <div
         class="transaction-confirmed__content"
       >
-        <i
+        <span
-          class="fa fa-check-circle fa-3x"
+          class="box mm-icon mm-icon--size-xl box--display-inline-block box--flex-direction-row box--color-success-default"
+          style="mask-image: url('./images/icons/check.svg');"
         />
         <div
           class="transaction-confirmed__title"

ui/components/app/modals/transaction-confirmed/transaction-confirmed.component.js

@@ -1,6 +1,8 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Modal from '../../modal';
+import { Icon, ICON_NAMES, ICON_SIZES } from '../../../component-library';
+import { IconColor } from '../../../../helpers/constants/design-system';
 
 export default class TransactionConfirmed extends PureComponent {
   static contextTypes = {
@@ -28,9 +30,10 @@ export default class TransactionConfirmed extends PureComponent {
     return (
       <Modal onSubmit={this.handleSubmit} submitText={t('ok')}>
         <div className="transaction-confirmed__content">
-          <i
+          <Icon
-            className="fa fa-check-circle fa-3x"
+            name={ICON_NAMES.CHECK}
-            style={{ color: 'var(--color-success-default)' }}
+            color={IconColor.successDefault}
+            size={ICON_SIZES.XL}
           />
           <div className="transaction-confirmed__title">
             {`${t('confirmed')}!`}

ui/components/ui/editable-label/editable-label.js

@@ -58,12 +58,11 @@ export default class EditableLabel extends Component {
           })}
           autoFocus
         />
-        <button
+        <ButtonIcon
+          iconName={ICON_NAMES.CHECK}
           className="editable-label__icon-button"
           onClick={() => this.handleSubmit(isValidAccountName)}
-        >
+        />
-          <i className="fa fa-check editable-label__icon" />
-        </button>
         <div className="editable-label__error editable-label__error-amount">
           {errorMessage}
         </div>

ui/components/ui/form-field/form-field.stories.js

@@ -70,7 +70,7 @@ export const FormFieldWithTitleDetail = (args) => {
         Click Me
       </button>
     ),
-    checkmark: <i className="fas fa-check" />,
+    checkmark: <Icon name={ICON_NAMES.CHECK} />,
   };
 
   return <FormField {...args} titleDetail={detailOptions[args.titleDetail]} />;

ui/components/ui/icon/icon-check.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
- * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
- */
-
-const IconCheck = ({
-  size = 24,
-  color = 'currentColor',
-  ariaLabel,
-  className,
-}) => (
-  <svg
-    width={size}
-    height={size}
-    fill={color}
-    className={className}
-    aria-label={ariaLabel}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-  >
-    <path d="m420 134c9 9 9 22 0 30l-213 214c-8 8-22 8-30 0l-85-86c-9-8-9-21 0-30 8-8 21-8 30 0l70 70 198-198c9-8 22-8 30 0z" />
-  </svg>
-);
-
-IconCheck.propTypes = {
-  /**
-   * The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc
-   */
-  size: PropTypes.number,
-  /**
-   * The color of the icon accepts design token css variables
-   */
-  color: PropTypes.string,
-  /**
-   * An additional className to assign the Icon
-   */
-  className: PropTypes.string,
-  /**
-   * The aria-label of the icon for accessibility purposes
-   */
-  ariaLabel: PropTypes.string,
-};
-
-export default IconCheck;

ui/components/ui/icon/icon.stories.js

@@ -22,7 +22,6 @@ import SendIcon from './send-icon.component';
 import Sign from './sign-icon.component';
 import SunCheck from './sun-check-icon.component';
 import Swap from './swap-icon-for-list.component';
-import IconCheck from './icon-check';
 import IconCog from './icon-cog';
 import IconImport from './icon-import';
 import IconEye from './icon-eye';
@@ -117,7 +116,6 @@ export const DefaultStory = (args) => (
           gridTemplateColumns: 'repeat(auto-fill, 176px)',
         }}
       >
-        <IconItem Component={<IconCheck {...args} />} />
         <IconItem Component={<IconImport {...args} />} />
         <IconItem Component={<IconCog {...args} />} />
         <IconItem Component={<IconTokenSearch {...args} />} />

ui/pages/onboarding-flow/create-password/create-password.js

@@ -32,6 +32,7 @@ import { getFirstTimeFlowType, getCurrentKeyring } from '../../../selectors';
 import { FIRST_TIME_FLOW_TYPES } from '../../../helpers/constants/onboarding';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
+import { Icon, ICON_NAMES } from '../../../components/component-library';
 
 export default function CreatePassword({
   createNewAccount,
@@ -220,7 +221,7 @@ export default function CreatePassword({
             titleDetail={
               isValid && (
                 <div className="create-password__form--checkmark">
-                  <i className="fas fa-check" />
+                  <Icon name={ICON_NAMES.CHECK} />
                 </div>
               )
             }

ui/pages/onboarding-flow/metametrics/index.scss

@@ -20,16 +20,6 @@
     }
   }
 
-  .fa {
-    width: 16px;
-  }
-
-  .fa-check {
-    margin-inline-end: 12px;
-    color: var(--color-success-default);
-    padding-top: 2px;
-  }
-
   .fa-times {
     margin-inline-end: 12px;
     color: var(--color-error-default);

ui/pages/onboarding-flow/metametrics/metametrics.js

@@ -7,6 +7,7 @@ import {
   FONT_WEIGHT,
   TEXT_ALIGN,
   TextColor,
+  IconColor,
 } from '../../../helpers/constants/design-system';
 import Button from '../../../components/ui/button';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -19,6 +20,7 @@ import {
 import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
 
 import { MetaMetricsContext } from '../../../contexts/metametrics';
+import { Icon, ICON_NAMES } from '../../../components/component-library';
 
 export default function OnboardingMetametrics() {
   const t = useI18nContext();
@@ -86,11 +88,19 @@ export default function OnboardingMetametrics() {
       </Typography>
       <ul>
         <li>
-          <i className="fa fa-check" />
+          <Icon
+            name={ICON_NAMES.CHECK}
+            color={IconColor.successDefault}
+            marginInlineEnd={3}
+          />
           {t('onboardingMetametricsAllowOptOut')}
         </li>
         <li>
-          <i className="fa fa-check" />
+          <Icon
+            name={ICON_NAMES.CHECK}
+            color={IconColor.successDefault}
+            marginInlineEnd={3}
+          />
           {t('onboardingMetametricsSendAnonymize')}
         </li>
         <li>

ui/pages/permissions-connect/redirect/permissions-redirect.component.js

@@ -10,6 +10,11 @@ import {
   AlignItems,
 } from '../../../helpers/constants/design-system';
 import { I18nContext } from '../../../contexts/i18n';
+import {
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../../components/component-library';
 
 export default function PermissionsRedirect({ subjectMetadata }) {
   const t = useContext(I18nContext);
@@ -36,7 +41,11 @@ export default function PermissionsRedirect({ subjectMetadata }) {
             alignItems={AlignItems.center}
             justifyContent={JustifyContent.center}
           >
-            <i className="fa fa-check fa-lg permissions-redirect__check" />
+            <Icon
+              name={ICON_NAMES.CHECK}
+              size={ICON_SIZES.LG}
+              className="permissions-redirect__check"
+            />
             <div className="permissions-redirect__dashed-line" />
           </Box>
           <SiteIcon

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

@@ -104,9 +104,10 @@ export default class DomainInput extends Component {
           })}
         >
           {hasSelectedAddress ? (
-            <i
+            <Icon
-              className="ens-input__wrapper__status-icon fa fa-check-circle"
+              className="ens-input__wrapper__status-icon"
-              style={{ color: 'var(--color-success-default)' }}
+              name={ICON_NAMES.CHECK}
+              color={IconColor.successDefault}
             />
           ) : (
             <Icon

ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js

@@ -7,7 +7,6 @@ import {
   CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
   NETWORK_TYPES,
 } from '../../../../../shared/constants/network';
-import IconCheck from '../../../../components/ui/icon/icon-check';
 import { NETWORKS_ROUTE } from '../../../../helpers/constants/routes';
 import { setSelectedSettingsRpcUrl } from '../../../../store/actions';
 import { getEnvironmentType } from '../../../../../app/scripts/lib/util';
@@ -22,7 +21,7 @@ import {
   ICON_NAMES,
   ICON_SIZES,
 } from '../../../../components/component-library';
-import { Color } from '../../../../helpers/constants/design-system';
+import { IconColor } from '../../../../helpers/constants/design-system';
 
 const NetworksListItem = ({
   network,
@@ -77,17 +76,9 @@ const NetworksListItem = ({
       }}
     >
       {isCurrentRpcTarget ? (
-        <IconCheck
+        <Icon name={ICON_NAMES.CHECK} color={IconColor.successDefault} />
-          className="networks-tab__content__icon-check"
-          color="var(--color-success-default)"
-          aria-label={t('active')}
-        />
       ) : (
-        <IconCheck
+        <Icon name={ICON_NAMES.CHECK} color={IconColor.transparent} />
-          className="networks-tab__content__icon-check"
-          color="transparent"
-          aria-hidden="true"
-        />
       )}
       {network.chainId in CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP ? (
         <Identicon
@@ -129,7 +120,7 @@ const NetworksListItem = ({
         {currentProviderType !== NETWORK_TYPES.RPC && (
           <Icon
             name={ICON_NAMES.LOCK}
-            color={Color.iconMuted}
+            color={IconColor.iconMuted}
             size={ICON_SIZES.AUTO}
             marginInlineStart={2}
           />