UX - Update all copy icons (#17445)

ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap

@@ -32,20 +32,10 @@ exports[`SelectedAccount Component should match snapshot 1`] = `
             <div
               class="selected-account__copy"
             >
-              <svg
+              <div
-                fill="none"
+                class="box mm-icon mm-icon--size-sm box--flex-direction-row box--color-icon-alternative"
-                height="11"
+                style="mask-image: url('./images/icons/copy.svg');"
-                viewBox="0 0 11 11"
+              />
-                width="11"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M0 0H1H9V1H1V9H0V0ZM2 2H11V11H2V2ZM3 3H10V10H3V3Z"
-                  fill="var(--color-icon-alternative)"
-                  fill-rule="evenodd"
-                />
-              </svg>
             </div>
           </div>
         </button>

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

@@ -4,9 +4,10 @@ import copyToClipboard from 'copy-to-clipboard';
 import { shortenAddress } from '../../../helpers/utils/util';
 
 import Tooltip from '../../ui/tooltip';
-import CopyIcon from '../../ui/icon/copy-icon.component';
 import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
 import { SECOND } from '../../../../shared/constants/time';
+import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
+import { COLORS } from '../../../helpers/constants/design-system';
 
 class SelectedAccount extends Component {
   state = {
@@ -64,7 +65,15 @@ class SelectedAccount extends Component {
             <div className="selected-account__address">
               {shortenAddress(checksummedAddress)}
               <div className="selected-account__copy">
-                <CopyIcon size={11} color="var(--color-icon-alternative)" />
+                <Icon
+                  name={
+                    this.state.copied
+                      ? ICON_NAMES.COPY_SUCCESS
+                      : ICON_NAMES.COPY
+                  }
+                  size={ICON_SIZES.SM}
+                  color={COLORS.ICON_ALTERNATIVE}
+                />
               </div>
             </div>
           </button>

ui/components/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js

@@ -1,10 +1,11 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import Tooltip from '../../../../../ui/tooltip/tooltip';
-import CopyIcon from '../../../../../ui/icon/copy-icon.component';
 import { I18nContext } from '../../../../../../contexts/i18n';
 
 import { useCopyToClipboard } from '../../../../../../hooks/useCopyToClipboard';
+import { Icon, ICON_NAMES } from '../../../../../component-library';
+import { COLORS } from '../../../../../../helpers/constants/design-system';
 
 const CopyRawData = ({ data }) => {
   const t = useContext(I18nContext);
@@ -20,7 +21,10 @@ const CopyRawData = ({ data }) => {
           className="copy-raw-data__button"
         >
           <div className="copy-raw-data__icon">
-            <CopyIcon size={12} color="var(--color-icon-default)" />
+            <Icon
+              name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
+              color={COLORS.ICON_DEFAULT}
+            />
           </div>
           <div className="copy-raw-data__label">
             {t('copyRawTransactionData')}

ui/components/ui/export-text-container/export-text-container.component.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Copy from '../icon/copy-icon.component';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { exportAsFile } from '../../../helpers/utils/export-utils';
+import { Icon, ICON_NAMES } from '../../component-library';
 
 function ExportTextContainer({
   text = '',
@@ -28,7 +28,7 @@ function ExportTextContainer({
             handleCopy(text);
           }}
         >
-          <Copy size={17} color="var(--color-primary-default)" />
+          <Icon name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY} />
           <div className="export-text-container__button-text">
             {copied ? t('copiedExclamation') : t('copyToClipboard')}
           </div>

ui/components/ui/icon/README.mdx

@@ -2,7 +2,6 @@ import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
 import IconCaretLeft from './icon-caret-left.js';
 import Approve from './approve-icon.component';
-import CopyIcon from './copy-icon.component';
 import InfoIcon from './info-icon.component';
 import InfoIconInverted from './info-icon-inverted.component';
 import Interaction from './interaction-icon.component';
@@ -175,14 +174,6 @@ Use the `className` prop to add an additional class to the icon. This additional
 
 <ArgsTable of={SwapIconComponent} />
 
-## CopyIcon
-
-<Canvas>
-  <Story id="components-ui-icon--copy-icon-story" />
-</Canvas>
-
-<ArgsTable of={CopyIcon} />
-
 ## Preloader
 
 <Canvas>

ui/components/ui/icon/copy-icon.component.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const Copy = ({ className, size, color }) => (
-  <svg
-    className={className}
-    width={size}
-    height={size}
-    viewBox="0 0 11 11"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M0 0H1H9V1H1V9H0V0ZM2 2H11V11H2V2ZM3 3H10V10H3V3Z"
-      fill={color}
-    />
-  </svg>
-);
-
-Copy.defaultProps = {
-  className: undefined,
-};
-
-Copy.propTypes = {
-  /**
-   * Additional className
-   */
-  className: PropTypes.string,
-  /**
-   * Size of the icon should adhere to 8px grid. e.g: 8, 16, 24, 32, 40
-   */
-  size: PropTypes.number.isRequired,
-  /**
-   * Color of the icon should be a valid design system color and is required
-   */
-  color: PropTypes.string.isRequired,
-};
-
-export default Copy;

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

@@ -12,7 +12,6 @@ import Box from '../box';
 import README from './README.mdx';
 
 import Approve from './approve-icon.component';
-import CopyIcon from './copy-icon.component';
 import InfoIcon from './info-icon.component';
 import InfoIconInverted from './info-icon-inverted.component';
 import Interaction from './interaction-icon.component';
@@ -159,7 +158,6 @@ export const DefaultStory = (args) => (
         <IconItem Component={<InfoIconInverted {...args} />} />
         <IconItem Component={<SunCheck {...args} />} />
         <IconItem Component={<SunCheck {...args} reverseColors />} />
-        <IconItem Component={<CopyIcon {...args} />} />
         <IconItem Component={<Preloader {...args} />} />
         <IconItem Component={<IconEye {...args} />} />
         <IconItem Component={<IconEyeSlash {...args} />} />
@@ -281,13 +279,6 @@ SunCheckStory.argTypes = {
 };
 SunCheckStory.storyName = 'SunCheck';
 
-export const CopyIconStory = (args) => <CopyIcon {...args} />;
-CopyIconStory.args = {
-  size: 40,
-  color: 'var(--color-icon-default)',
-};
-CopyIconStory.storyName = 'CopyIcon';
-
 export const PreloaderStory = (args) => <Preloader {...args} />;
 PreloaderStory.args = {
   size: 40,

ui/components/ui/nickname-popover/nickname-popover.component.js

@@ -8,10 +8,10 @@ import Popover from '../popover';
 import Button from '../button';
 import Identicon from '../identicon';
 import { shortenAddress } from '../../../helpers/utils/util';
-import CopyIcon from '../icon/copy-icon.component';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { getTokenList, getBlockExplorerLinkText } from '../../../selectors';
 import { NETWORKS_ROUTE } from '../../../helpers/constants/routes';
+import { ButtonIcon, ICON_NAMES, ICON_SIZES } from '../../component-library';
 
 const NicknamePopover = ({
   address,
@@ -62,15 +62,11 @@ const NicknamePopover = ({
             position="bottom"
             title={copied ? t('copiedExclamation') : t('copyToClipboard')}
           >
-            <button
+            <ButtonIcon
-              type="link"
+              iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
-              onClick={() => {
+              size={ICON_SIZES.SM}
-                handleCopy(address);
+              onClick={() => handleCopy(address)}
-              }}
+            />
-              title=""
-            >
-              <CopyIcon size={11} color="var(--color-icon-default)" />
-            </button>
           </Tooltip>
         </div>
 

ui/components/ui/qr-code/index.scss

@@ -28,18 +28,12 @@
   &__address-container {
     display: flex;
     justify-content: center;
+    cursor: pointer;
+    align-items: center;
 
     &__tooltip-wrapper {
       width: 100%;
     }
-
-    &:hover {
-      cursor: pointer;
-
-      .qr-code__copy-icon__svg {
-        fill: var(--color-primary-default);
-      }
-    }
   }
 
   &__address {
@@ -51,15 +45,4 @@
     word-break: break-all;
     text-align: center;
   }
-
-  &__copy-icon {
-    height: 13px;
-    padding: 17px 0;
-    position: absolute;
-    right: 24px;
-
-    &__svg {
-      fill: var(--color-icon-default);
-    }
-  }
 }

ui/components/ui/qr-code/qr-code.js

@@ -6,8 +6,8 @@ import { isHexPrefixed } from 'ethereumjs-util';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
 import Tooltip from '../tooltip';
-import CopyIcon from '../icon/copy-icon.component';
 import { useI18nContext } from '../../../hooks/useI18nContext';
+import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
 
 export default connect(mapStateToProps)(QrCodeView);
 
@@ -68,9 +68,11 @@ function QrCodeView(props) {
           }}
         >
           <div className="qr-code__address">{toChecksumHexAddress(data)}</div>
-          <div className="qr-code__copy-icon">
+          <Icon
-            <CopyIcon size={11} className="qr-code__copy-icon__svg" color="" />
+            name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
-          </div>
+            size={ICON_SIZES.SM}
+            marginInlineStart={3}
+          />
         </div>
       </Tooltip>
     </div>

ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js

@@ -11,7 +11,6 @@ import Box from '../../../components/ui/box';
 import Button from '../../../components/ui/button';
 import EditGasFeeButton from '../../../components/app/edit-gas-fee-button';
 import MultiLayerFeeMessage from '../../../components/app/multilayer-fee-message';
-import CopyIcon from '../../../components/ui/icon/copy-icon.component';
 import {
   TYPOGRAPHY,
   FONT_WEIGHT,
@@ -20,13 +19,13 @@ import {
   COLORS,
   DISPLAY,
 } from '../../../helpers/constants/design-system';
-import { SECOND } from '../../../../shared/constants/time';
 import { ConfirmPageContainerWarning } from '../../../components/app/confirm-page-container/confirm-page-container-content';
 import GasDetailsItem from '../../../components/app/gas-details-item';
 import LedgerInstructionField from '../../../components/app/ledger-instruction-field';
 import { TokenStandard } from '../../../../shared/constants/transaction';
 import { CHAIN_IDS, TEST_CHAINS } from '../../../../shared/constants/network';
 import ContractDetailsModal from '../../../components/app/modals/contract-details-modal/contract-details-modal';
+import { ICON_NAMES, ButtonIcon } from '../../../components/component-library';
 
 export default class ConfirmApproveContent extends Component {
   static contextTypes = {
@@ -210,25 +209,19 @@ export default class ConfirmApproveContent extends Component {
             {displayedAddress}
           </div>
           <div className="confirm-approve-content__medium-text">
-            <Button
+            <ButtonIcon
-              type="link"
+              ariaLabel="copy"
-              className="confirm-approve-content__copy-address"
+              onClick={() => copyToClipboard(toAddress)}
-              onClick={() => {
+              color={COLORS.ICON_DEFAULT}
-                this.setState({ copied: true });
+              iconName={
-                this.copyTimeout = setTimeout(
+                this.state.copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY
-                  () => this.setState({ copied: false }),
+              }
-                  SECOND * 3,
-                );
-                copyToClipboard(toAddress);
-              }}
               title={
                 this.state.copied
                   ? t('copiedExclamation')
                   : t('copyToClipboard')
               }
-            >
+            />
-              <CopyIcon size={14} color="var(--color-icon-default)" />
-            </Button>
           </div>
         </div>
       </div>

ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js

@@ -6,13 +6,14 @@ import classnames from 'classnames';
 import AccountListItem from '../../components/app/account-list-item';
 import Identicon from '../../components/ui/identicon';
 import Tooltip from '../../components/ui/tooltip';
-import Copy from '../../components/ui/icon/copy-icon.component';
 import { PageContainerFooter } from '../../components/ui/page-container';
 
 import { EVENT } from '../../../shared/constants/metametrics';
 import { SECOND } from '../../../shared/constants/time';
 import { Numeric } from '../../../shared/modules/Numeric';
 import { EtherDenomination } from '../../../shared/constants/common';
+import { Icon, ICON_NAMES } from '../../components/component-library';
+import { COLORS } from '../../helpers/constants/design-system';
 
 export default class ConfirmDecryptMessage extends Component {
   static contextTypes = {
@@ -238,7 +239,10 @@ export default class ConfirmDecryptMessage extends Component {
               <div className="request-decrypt-message__message-copy-text">
                 {t('decryptCopy')}
               </div>
-              <Copy size={17} color="var(--color-primary-default)" />
+              <Icon
+                name={hasCopied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
+                color={COLORS.PRIMARY_DEFAULT}
+              />
             </Tooltip>
           </div>
         ) : (

ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import Box from '../../../components/ui/box';
 import Button from '../../../components/ui/button';
 import Typography from '../../../components/ui/typography';
-import Copy from '../../../components/ui/icon/copy-icon.component';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { ONBOARDING_CONFIRM_SRP_ROUTE } from '../../../helpers/constants/routes';
@@ -13,6 +12,7 @@ import {
   TYPOGRAPHY,
   JUSTIFY_CONTENT,
   FONT_WEIGHT,
+  COLORS,
 } from '../../../helpers/constants/design-system';
 import {
   ThreeStepProgressBar,
@@ -20,6 +20,7 @@ import {
 } from '../../../components/app/step-progress-bar';
 import { EVENT_NAMES, EVENT } from '../../../../shared/constants/metametrics';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
+import { Icon, ICON_NAMES } from '../../../components/component-library';
 import RecoveryPhraseChips from './recovery-phrase-chips';
 
 export default function RecoveryPhrase({ secretRecoveryPhrase }) {
@@ -115,9 +116,10 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
                   handleCopy(secretRecoveryPhrase);
                 }}
                 icon={
-                  copied ? null : (
+                  <Icon
-                    <Copy size={20} color="var(--color-primary-default)" />
+                    name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
-                  )
+                    color={COLORS.PRIMARY_DEFAULT}
+                  />
                 }
                 className="recovery-phrase__footer__copy-and-hide__button recovery-phrase__footer__copy-and-hide__button__copy-to-clipboard"
                 type="link"

ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js

@@ -3,12 +3,17 @@ import PropTypes from 'prop-types';
 import { Redirect } from 'react-router-dom';
 
 import Identicon from '../../../../components/ui/identicon';
-import Copy from '../../../../components/ui/icon/copy-icon.component';
 import Button from '../../../../components/ui/button/button.component';
+import {
+  ButtonIcon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../../../components/component-library';
 
 import Tooltip from '../../../../components/ui/tooltip';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
+import { COLORS } from '../../../../helpers/constants/design-system';
 
 function quadSplit(address) {
   return `0x${address
@@ -62,14 +67,16 @@ function ViewContact({
               position="bottom"
               title={copied ? t('copiedExclamation') : t('copyToClipboard')}
             >
-              <button
+              <ButtonIcon
+                ariaLabel="copy"
                 className="address-book__view-contact__group__static-address--copy-icon"
                 onClick={() => {
                   handleCopy(checkSummedAddress);
                 }}
-              >
+                iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
-                <Copy size={20} color="var(--color-primary-default)" />
+                size={ICON_SIZES.LG}
-              </button>
+                color={COLORS.PRIMARY_DEFAULT}
+              />
             </Tooltip>
           </div>
         </div>

ui/pages/token-details/token-details-page.js

@@ -13,7 +13,6 @@ import { NETWORK_TYPES } from '../../../shared/constants/network';
 import { ASSET_ROUTE, DEFAULT_ROUTE } from '../../helpers/constants/routes';
 import Tooltip from '../../components/ui/tooltip';
 import Button from '../../components/ui/button';
-import CopyIcon from '../../components/ui/icon/copy-icon.component';
 import Box from '../../components/ui/box';
 import Typography from '../../components/ui/typography';
 import {
@@ -25,6 +24,11 @@ import {
   OVERFLOW_WRAP,
 } from '../../helpers/constants/design-system';
 import { isEqualCaseInsensitive } from '../../../shared/modules/string-utils';
+import {
+  ButtonIcon,
+  ICON_SIZES,
+  ICON_NAMES,
+} from '../../components/component-library';
 
 export default function TokenDetailsPage() {
   const dispatch = useDispatch();
@@ -132,15 +136,13 @@ export default function TokenDetailsPage() {
             title={copied ? t('copiedExclamation') : t('copyToClipboard')}
             containerClassName="token-details__copy-icon"
           >
-            <Button
+            <ButtonIcon
-              type="link"
+              name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
               className="token-details__copyIcon"
-              onClick={() => {
+              onClick={() => handleCopy(token.address)}
-                handleCopy(token.address);
+              color={COLORS.PRIMARY_DEFAULT}
-              }}
+              size={ICON_SIZES.SM}
-            >
+            />
-              <CopyIcon size={11} color="var(--color-primary-default)" />
-            </Button>
           </Tooltip>
         </Box>
         <Typography