Update overview icons for buy, send, and swap (#17492)

MetaMask · Jan 31, 2023 · 18a1beb · 18a1beb
1 parent d057410
commit 18a1beb
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 92 deletions.
diff --git a/development/ts-migration-dashboard/files-to-convert.json b/development/ts-migration-dashboard/files-to-convert.json
@@ -902,8 +902,6 @@
   "ui/components/ui/icon/info-icon-inverted.component.js",
   "ui/components/ui/icon/info-icon.component.js",
   "ui/components/ui/icon/interaction-icon.component.js",
-  "ui/components/ui/icon/overview-buy-icon.component.js",
-  "ui/components/ui/icon/overview-send-icon.component.js",
   "ui/components/ui/icon/preloader/index.js",
   "ui/components/ui/icon/preloader/preloader-icon.component.js",
   "ui/components/ui/icon/receive-icon.component.js",
@@ -912,7 +910,6 @@
   "ui/components/ui/icon/sign-icon.component.js",
   "ui/components/ui/icon/sun-check-icon.component.js",
   "ui/components/ui/icon/swap-icon-for-list.component.js",
-  "ui/components/ui/icon/swap-icon.component.js",
   "ui/components/ui/identicon/blockieIdenticon/blockieIdenticon.component.js",
   "ui/components/ui/identicon/blockieIdenticon/index.js",
   "ui/components/ui/identicon/identicon.component.js",

diff --git a/ui/components/app/wallet-overview/eth-overview.js b/ui/components/app/wallet-overview/eth-overview.js
@@ -23,9 +23,6 @@ import {
   getNativeCurrencyImage,
   getSelectedAccountCachedBalance,
 } from '../../../selectors/selectors';
-import SwapIcon from '../../ui/icon/swap-icon.component';
-import BuyIcon from '../../ui/icon/overview-buy-icon.component';
-import SendIcon from '../../ui/icon/overview-send-icon.component';
 import { setSwapsFromToken } from '../../../ducks/swaps/swaps';
 import IconButton from '../../ui/icon-button';
 import { isHardwareKeyring } from '../../../helpers/utils/hardware';
@@ -35,6 +32,8 @@ import Spinner from '../../ui/spinner';
 import { startNewDraftTransaction } from '../../../ducks/send';
 import { AssetType } from '../../../../shared/constants/transaction';
 import DepositPopover from '../deposit-popover';
+import { Icon, ICON_NAMES } from '../../component-library';
+import { COLORS } from '../../../helpers/constants/design-system';
 import WalletOverview from './wallet-overview';
 
 const EthOverview = ({ className }) => {
@@ -109,7 +108,9 @@ const EthOverview = ({ className }) => {
           <>
             <IconButton
               className="eth-overview__button"
-              Icon={BuyIcon}
+              Icon={
+                <Icon name={ICON_NAMES.CARD} color={COLORS.PRIMARY_INVERSE} />
+              }
               disabled={!isBuyableChain}
               label={t('buy')}
               onClick={() => {
@@ -127,7 +128,9 @@ const EthOverview = ({ className }) => {
             <IconButton
               className="eth-overview__button"
               data-testid="eth-overview-send"
-              Icon={SendIcon}
+              Icon={
+                <Icon name={ICON_NAMES.SEND_1} color={COLORS.PRIMARY_INVERSE} />
+              }
               label={t('send')}
               onClick={() => {
                 trackEvent({
@@ -149,7 +152,12 @@ const EthOverview = ({ className }) => {
             <IconButton
               className="eth-overview__button"
               disabled={!isSwapsChain}
-              Icon={SwapIcon}
+              Icon={
+                <Icon
+                  name={ICON_NAMES.SWAP_HORIZONTAL}
+                  color={COLORS.PRIMARY_INVERSE}
+                />
+              }
               onClick={() => {
                 if (isSwapsChain) {
                   trackEvent({

diff --git a/ui/components/app/wallet-overview/token-overview.js b/ui/components/app/wallet-overview/token-overview.js
@@ -25,17 +25,16 @@ import {
   getIsBuyableWyreToken,
 } from '../../../selectors/selectors';
 
-import BuyIcon from '../../ui/icon/overview-buy-icon.component';
-import SwapIcon from '../../ui/icon/swap-icon.component';
-import SendIcon from '../../ui/icon/overview-send-icon.component';
-
 import IconButton from '../../ui/icon-button';
 import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys';
 import { showModal } from '../../../store/actions';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
 import { AssetType } from '../../../../shared/constants/transaction';
 import DepositPopover from '../deposit-popover';
+
+import { Icon, ICON_NAMES } from '../../component-library';
+import { COLORS } from '../../../helpers/constants/design-system';
 import WalletOverview from './wallet-overview';
 
 const TokenOverview = ({ className, token }) => {
@@ -115,7 +114,9 @@ const TokenOverview = ({ className, token }) => {
             {isBuyable && (
               <IconButton
                 className="token-overview__button"
-                Icon={BuyIcon}
+                Icon={
+                  <Icon name={ICON_NAMES.CARD} color={COLORS.PRIMARY_INVERSE} />
+                }
                 label={t('buy')}
                 onClick={() => {
                   trackEvent({
@@ -157,15 +158,22 @@ const TokenOverview = ({ className, token }) => {
                   }
                 }
               }}
-              Icon={SendIcon}
+              Icon={
+                <Icon name={ICON_NAMES.SEND_1} color={COLORS.PRIMARY_INVERSE} />
+              }
               label={t('send')}
               data-testid="eth-overview-send"
               disabled={token.isERC721}
             />
             <IconButton
               className="token-overview__button"
               disabled={!isSwapsChain}
-              Icon={SwapIcon}
+              Icon={
+                <Icon
+                  name={ICON_NAMES.SWAP_HORIZONTAL}
+                  color={COLORS.PRIMARY_INVERSE}
+                />
+              }
               onClick={() => {
                 if (isSwapsChain) {
                   trackEvent({

diff --git a/ui/components/ui/icon-button/icon-button.js b/ui/components/ui/icon-button/icon-button.js
@@ -25,9 +25,7 @@ export default function IconButton({
     >
       {renderWrapper(
         <>
-          <div className="icon-button__circle">
-            <Icon />
-          </div>
+          <div className="icon-button__circle">{Icon}</div>
           <span>{label}</span>
         </>,
       )}

diff --git a/ui/components/ui/icon/README.mdx b/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 BuyIcon from './overview-buy-icon.component';
 import CopyIcon from './copy-icon.component';
 import InfoIcon from './info-icon.component';
 import InfoIconInverted from './info-icon-inverted.component';
@@ -13,8 +12,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 SwapIcon from './overview-send-icon.component';
-import SwapIconComponent from './swap-icon.component';
 import IconCopy from './icon-copy'
 import IconBlockExplorer from './icon-block-explorer';
 

diff --git a/ui/components/ui/icon/icon.stories.js b/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 BuyIcon from './overview-buy-icon.component';
 import CopyIcon from './copy-icon.component';
 import InfoIcon from './info-icon.component';
 import InfoIconInverted from './info-icon-inverted.component';
@@ -23,8 +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 SwapIcon from './overview-send-icon.component';
-import SwapIconComponent from './swap-icon.component';
 import IconCaretLeft from './icon-caret-left';
 import IconCaretRight from './icon-caret-right';
 import IconCaretDown from './icon-caret-down';
@@ -162,9 +159,6 @@ export const DefaultStory = (args) => (
         <IconItem Component={<InfoIconInverted {...args} />} />
         <IconItem Component={<SunCheck {...args} />} />
         <IconItem Component={<SunCheck {...args} reverseColors />} />
-        <IconItem Component={<BuyIcon {...args} />} />
-        <IconItem Component={<SwapIcon {...args} />} />
-        <IconItem Component={<SwapIconComponent {...args} />} />
         <IconItem Component={<CopyIcon {...args} />} />
         <IconItem Component={<Preloader {...args} />} />
         <IconItem Component={<IconEye {...args} />} />
@@ -287,30 +281,6 @@ SunCheckStory.argTypes = {
 };
 SunCheckStory.storyName = 'SunCheck';
 
-export const BuyIconStory = (args) => <BuyIcon {...args} />;
-BuyIconStory.args = {
-  width: '17',
-  height: '21',
-  fill: 'var(--color-primary-default)',
-};
-BuyIconStory.storyName = 'BuyIcon';
-
-export const SwapIconStory = (args) => <SwapIcon {...args} />;
-SwapIconStory.args = {
-  width: '17',
-  height: '21',
-  fill: 'var(--color-primary-default)',
-};
-SwapIconStory.storyName = 'SwapIcon';
-
-export const SendSwapIconStory = (args) => <SwapIconComponent {...args} />;
-SendSwapIconStory.args = {
-  width: '17',
-  height: '17',
-  color: 'var(--color-icon-default)',
-};
-SendSwapIconStory.storyName = 'Send/SwapIcon';
-
 export const CopyIconStory = (args) => <CopyIcon {...args} />;
 CopyIconStory.args = {
   size: 40,

diff --git a/ui/components/ui/icon/swap-icon.component.js b/ui/components/ui/icon/swap-icon.component.js