m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

update icons to ts enum version (#18698)

Browse Source 
Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
Co-authored-by: George Marshall <george.marshall@consensys.net>
Co-authored-by: Brad Decker <bhdecker84@gmail.com>
Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
This commit is contained in:
Garrett Bear 2023-04-24 07:19:19 -07:00 committed by GitHub
parent b704a3d60f
commit 3e520214c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 141 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js
View File

@ -33,7 +33,7 @@ export const CustomSpendingCapTooltip = ({
<Icon
name={IconName.Danger}
className="form-field__heading-title__tooltip__warning-icon"
size={IconSize.Auto}
size={IconSize.Inherit}
style={{ 'vertical-align': 'bottom' }}
/>
) : (

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

@ -37,10 +37,10 @@ import {
MetaMetricsTokenEventSource,
} from '../../../shared/constants/metametrics';
import {
ICON_NAMES,
ICON_SIZES,
} from '../../components/component-library/icon/deprecated';
import { ButtonIcon } from '../../components/component-library/button-icon/deprecated';
ButtonIcon,
IconName,
ButtonIconSize,
} from '../../components/component-library';
export default function AddNft() {
const t = useI18nContext();
@ -163,8 +163,8 @@ export default function AddNft() {
</Typography>
<ButtonIcon
className="add-nft__close"
iconName={ICON_NAMES.CLOSE}
size={ICON_SIZES.SM}
iconName={IconName.Close}
size={ButtonIconSize.Sm}
ariaLabel={t('close')}
data-testid="add-nft-error-close"
onClick={() => setNftAddFailed(false)}

10
ui/pages/asset/components/asset-breadcrumb.js
View File

@ -2,18 +2,18 @@ import React from 'react';
import PropTypes from 'prop-types';
import {
Icon,
ICON_NAMES,
ICON_SIZES,
} from '../../../components/component-library/icon/deprecated';
IconName,
IconSize,
} from '../../../components/component-library';
const AssetBreadcrumb = ({ accountName, assetName, onBack }) => {
return (
<button className="asset-breadcrumb" onClick={onBack}>
<Icon
name={ICON_NAMES.ARROW_LEFT}
name={IconName.ArrowLeft}
data-testid="asset__back"
marginInlineEnd={3}
size={ICON_SIZES.XS}
size={IconSize.Xs}
/>
<span>{accountName}</span>
&nbsp;/&nbsp;

13
ui/pages/asset/components/asset-options.js
View File

@ -7,8 +7,7 @@ import { I18nContext } from '../../../contexts/i18n';
import { Menu, MenuItem } from '../../../components/ui/menu';
import { getBlockExplorerLinkText } from '../../../selectors';
import { NETWORKS_ROUTE } from '../../../helpers/constants/routes';
import { ICON_NAMES } from '../../../components/component-library/icon/deprecated';
import { ButtonIcon } from '../../../components/component-library/button-icon/deprecated';
import { ButtonIcon, IconName } from '../../../components/component-library';
import { Color } from '../../../helpers/constants/design-system';
const AssetOptions = ({
@ -41,7 +40,7 @@ const AssetOptions = ({
data-testid="asset-options__button"
onClick={() => setAssetOptionsOpen(true)}
ariaLabel={t('assetOptions')}
iconName={ICON_NAMES.MORE_VERTICAL}
iconName={IconName.MoreVertical}
color={Color.textDefault}
/>
{assetOptionsOpen ? (
@ -50,7 +49,7 @@ const AssetOptions = ({
onHide={() => setAssetOptionsOpen(false)}
>
<MenuItem
iconName={ICON_NAMES.SCAN_BARCODE}
iconName={IconName.ScanBarcode}
data-testid="asset-options__account-details"
onClick={() => {
setAssetOptionsOpen(false);
@ -60,7 +59,7 @@ const AssetOptions = ({
{t('accountDetails')}
</MenuItem>
<MenuItem
iconName={ICON_NAMES.EXPORT}
iconName={IconName.Export}
data-testid="asset-options__etherscan"
onClick={
blockExplorerLinkText.firstPart === 'addBlockExplorer'
@ -77,7 +76,7 @@ const AssetOptions = ({
</MenuItem>
{isNativeAsset ? null : (
<MenuItem
iconName={ICON_NAMES.TRASH}
iconName={IconName.Trash}
data-testid="asset-options__hide"
onClick={() => {
setAssetOptionsOpen(false);
@ -89,7 +88,7 @@ const AssetOptions = ({
)}
{isNativeAsset ? null : (
<MenuItem
iconName={ICON_NAMES.INFO}
iconName={IconName.Info}
data-testid="asset-options__token-details"
onClick={() => {
setAssetOptionsOpen(false);

12
ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
View File

@ -28,11 +28,11 @@ 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,
Icon,
} from '../../../components/component-library/icon/deprecated';
import { ButtonIcon } from '../../../components/component-library/button-icon/deprecated';
import { Text } from '../../../components/component-library';
IconName,
Text,
} from '../../../components/component-library';
import { ConfirmGasDisplay } from '../../../components/app/confirm-gas-display';
export default class ConfirmApproveContent extends Component {
@ -249,7 +249,7 @@ export default class ConfirmApproveContent extends Component {
onClick={() => copyToClipboard(toAddress)}
color={IconColor.iconDefault}
iconName={
this.state.copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY
this.state.copied ? IconName.CopySuccess : IconName.Copy
}
title={
this.state.copied
@ -641,7 +641,7 @@ export default class ConfirmApproveContent extends Component {
</Box>
)}
{this.renderApproveContentCard({
symbol: <Icon name={ICON_NAMES.TAG} />,
symbol: <Icon name={IconName.Tag} />,
title: t('transactionFee'),
showEdit: true,
showAdvanceGasFeeOptions: true,

7
ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
View File

@ -13,10 +13,7 @@ import { MetaMetricsEventCategory } 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/icon/deprecated';
import { Icon, IconName } from '../../components/component-library';
import { IconColor } from '../../helpers/constants/design-system';
import { formatCurrency } from '../../helpers/utils/confirm-tx.util';
import { getValueFromWeiHex } from '../../../shared/modules/conversion.utils';
@ -259,7 +256,7 @@ export default class ConfirmDecryptMessage extends Component {
{t('decryptCopy')}
</div>
<Icon
name={hasCopied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
name={hasCopied ? IconName.CopySuccess : IconName.Copy}
color={IconColor.primaryDefault}
/>
</Tooltip>

9
ui/pages/confirmation/confirmation.js
View File

@ -34,10 +34,7 @@ import {
import NetworkDisplay from '../../components/app/network-display/network-display';
import Callout from '../../components/ui/callout';
import SiteOrigin from '../../components/ui/site-origin';
import {
Icon,
ICON_NAMES,
} from '../../components/component-library/icon/deprecated';
import { Icon, IconName } from '../../components/component-library';
///: BEGIN:ONLY_INCLUDE_IN(flask)
import SnapAuthorship from '../../components/app/flask/snap-authorship/snap-authorship';
import { getSnapName } from '../../helpers/utils/util';
@ -312,7 +309,7 @@ export default function ConfirmationPage({
setCurrentPendingConfirmation(currentPendingConfirmation - 1)
}
>
<Icon name={ICON_NAMES.ARROW_LEFT} />
<Icon name={IconName.ArrowLeft} />
</button>
)}
<button
@ -324,7 +321,7 @@ export default function ConfirmationPage({
setCurrentPendingConfirmation(currentPendingConfirmation + 1)
}
>
<Icon name={ICON_NAMES.ARROW_RIGHT} />
<Icon name={IconName.ArrowRight} />
</button>
</div>
)}

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

@ -35,11 +35,11 @@ import {
} from '../../helpers/constants/design-system';
import { SECOND } from '../../../shared/constants/time';
import {
ICON_NAMES,
ICON_SIZES,
} from '../../components/component-library/icon/deprecated';
import { ButtonIcon } from '../../components/component-library/button-icon/deprecated';
import { Text } from '../../components/component-library';
ButtonIcon,
ButtonIconSize,
IconName,
Text,
} from '../../components/component-library';
import {
ASSET_ROUTE,
@ -354,8 +354,8 @@ export default class Home extends PureComponent {
{t('newNftAddedMessage')}
</Text>
<ButtonIcon
iconName={ICON_NAMES.CLOSE}
size={ICON_SIZES.SM}
iconName={IconName.Close}
size={ButtonIconSize.Sm}
ariaLabel={t('close')}
onClick={onAutoHide}
/>
@ -377,8 +377,8 @@ export default class Home extends PureComponent {
{t('removeNftMessage')}
</Text>
<ButtonIcon
iconName={ICON_NAMES.CLOSE}
size={ICON_SIZES.SM}
iconName={IconName.Close}
size={ButtonIconSize.Sm}
ariaLabel={t('close')}
onClick={onAutoHide}
/>
@ -397,8 +397,8 @@ export default class Home extends PureComponent {
{t('newNetworkAdded', [newNetworkAddedName])}
</Text>
<ButtonIcon
iconName={ICON_NAMES.CLOSE}
size={ICON_SIZES.SM}
iconName={IconName.Close}
size={ButtonIconSize.Sm}
ariaLabel={t('close')}
onClick={() => clearNewNetworkAdded()}
className="home__new-network-notification-close"
@ -432,8 +432,8 @@ export default class Home extends PureComponent {
</Box>
<ButtonIcon
iconName={ICON_NAMES.CLOSE}
size={ICON_SIZES.SM}
iconName={IconName.Close}
size={ButtonIconSize.Sm}
ariaLabel={t('close')}
onClick={() => setNewTokensImported('')}
className="home__new-tokens-imported-notification-close"

14
ui/pages/institutional/compliance-feature-page/compliance-feature-page.js
View File

@ -13,12 +13,12 @@ import {
Color,
FLEX_DIRECTION,
} from '../../../helpers/constants/design-system';
import { ButtonIcon } from '../../../components/component-library/button-icon/deprecated';
import { Text } from '../../../components/component-library';
import {
ICON_NAMES,
ICON_SIZES,
} from '../../../components/component-library/icon/deprecated';
ButtonIcon,
ButtonIconSize,
IconName,
Text,
} from '../../../components/component-library';
import Box from '../../../components/ui/box';
import ComplianceSettings from '../../../components/institutional/compliance-settings';
@ -44,8 +44,8 @@ const ComplianceFeaturePage = () => {
>
<ButtonIcon
ariaLabel={t('back')}
iconName={ICON_NAMES.ARROW_LEFT}
size={ICON_SIZES.SM}
iconName={IconName.ArrowLeft}
size={ButtonIconSize.Sm}
className="settings-page__back-button"
color={Color.iconDefault}
onClick={() => history.push(DEFAULT_ROUTE)}

12
ui/pages/notifications/notifications.js
View File

@ -17,10 +17,10 @@ import {
import Button from '../../components/ui/button';
import { useI18nContext } from '../../hooks/useI18nContext';
import {
ICON_SIZES,
ICON_NAMES,
} from '../../components/component-library/icon/deprecated';
import { ButtonIcon } from '../../components/component-library/button-icon/deprecated';
ButtonIcon,
ButtonIconSize,
IconName,
} from '../../components/component-library';
import { Color } from '../../helpers/constants/design-system';
export function NotificationItem({ notification, snaps, onItemClick }) {
@ -91,8 +91,8 @@ export default function Notifications() {
<div className="notifications__header">
<div className="notifications__header__title-container">
<ButtonIcon
iconName={ICON_NAMES.ARROW_LEFT}
size={ICON_SIZES.LG}
iconName={IconName.ArrowLeft}
size={ButtonIconSize.Lg}
color={Color.textDefault}
onClick={() => history.push(DEFAULT_ROUTE)}
/>

7
ui/pages/onboarding-flow/create-password/create-password.js
View File

@ -35,10 +35,7 @@ import {
MetaMetricsEventCategory,
MetaMetricsEventName,
} from '../../../../shared/constants/metametrics';
import {
Icon,
ICON_NAMES,
} from '../../../components/component-library/icon/deprecated';
import { Icon, IconName } from '../../../components/component-library';
export default function CreatePassword({
createNewAccount,
@ -236,7 +233,7 @@ export default function CreatePassword({
titleDetail={
isValid && (
<div className="create-password__form--checkmark">
<Icon name={ICON_NAMES.CHECK} />
<Icon name={IconName.Check} />
</div>
)
}

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

@ -26,9 +26,9 @@ import {
import { MetaMetricsContext } from '../../../contexts/metametrics';
import {
Icon,
ICON_NAMES,
ICON_SIZES,
} from '../../../components/component-library/icon/deprecated';
IconName,
IconSize,
} from '../../../components/component-library';
import Box from '../../../components/ui/box/box';
@ -99,7 +99,7 @@ export default function OnboardingMetametrics() {
<ul>
<li>
<Icon
name={ICON_NAMES.CHECK}
name={IconName.Check}
color={IconColor.successDefault}
marginInlineEnd={3}
/>
@ -107,7 +107,7 @@ export default function OnboardingMetametrics() {
</li>
<li>
<Icon
name={ICON_NAMES.CHECK}
name={IconName.Check}
color={IconColor.successDefault}
marginInlineEnd={3}
/>
@ -117,8 +117,8 @@ export default function OnboardingMetametrics() {
<Box>
<Icon
marginInlineEnd={2}
name={ICON_NAMES.CLOSE}
size={ICON_SIZES.SM}
name={IconName.Close}
size={IconSize.Sm}
color={IconColor.errorDefault}
/>
{t('onboardingMetametricsNeverCollect', [
@ -137,8 +137,8 @@ export default function OnboardingMetametrics() {
<Box>
<Icon
marginInlineEnd={2}
name={ICON_NAMES.CLOSE}
size={ICON_SIZES.SM}
name={IconName.Close}
size={IconSize.Sm}
color={IconColor.errorDefault}
/>
{t('onboardingMetametricsNeverCollectIP', [
@ -156,8 +156,8 @@ export default function OnboardingMetametrics() {
<Box>
<Icon
marginInlineEnd={2}
name={ICON_NAMES.CLOSE}
size={ICON_SIZES.SM}
name={IconName.Close}
size={IconSize.Sm}
color={IconColor.errorDefault}
/>
{t('onboardingMetametricsNeverSellData', [

7
ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js
View File

@ -23,10 +23,7 @@ import {
MetaMetricsEventName,
} from '../../../../shared/constants/metametrics';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import {
Icon,
ICON_NAMES,
} from '../../../components/component-library/icon/deprecated';
import { Icon, IconName } from '../../../components/component-library';
import RecoveryPhraseChips from './recovery-phrase-chips';
export default function RecoveryPhrase({ secretRecoveryPhrase }) {
@ -126,7 +123,7 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
}}
icon={
<Icon
name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
name={copied ? IconName.CopySuccess : IconName.Copy}
color={IconColor.primaryDefault}
/>
}

10
ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js
View File

@ -25,9 +25,9 @@ import {
import { MetaMetricsContext } from '../../../contexts/metametrics';
import {
Icon,
ICON_NAMES,
ICON_SIZES,
} from '../../../components/component-library/icon/deprecated';
IconName,
IconSize,
} from '../../../components/component-library';
export default function SkipSRPBackup({ handleClose }) {
const [checked, setChecked] = useState(false);
@ -86,8 +86,8 @@ export default function SkipSRPBackup({ handleClose }) {
margin={4}
>
<Icon
name={ICON_NAMES.DANGER}
size={ICON_SIZES.XL}
name={IconName.Danger}
size={IconSize.Xl}
className="skip-srp-backup-popover__icon"
color={IconColor.errorDefault}
/>

10
ui/pages/permissions-connect/permissions-connect.component.js
View File

@ -9,11 +9,7 @@ import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../shared/constants/app';
import { MILLISECOND } from '../../../shared/constants/time';
import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
import PermissionPageContainer from '../../components/app/permission-page-container';
import {
Icon,
ICON_NAMES,
ICON_SIZES,
} from '../../components/component-library/icon/deprecated';
import { Icon, IconName, IconSize } from '../../components/component-library';
import ChooseAccount from './choose-account';
import PermissionsRedirect from './redirect';
///: BEGIN:ONLY_INCLUDE_IN(flask)
@ -283,9 +279,9 @@ export default class PermissionConnect extends Component {
onClick={() => this.goBack()}
>
<Icon
name={ICON_NAMES.ARROW_RIGHT}
name={IconName.ArrowRight}
marginInlineEnd={1}
size={ICON_SIZES.XS}
size={IconSize.Xs}
/>
{t('back')}
</div>

10
ui/pages/permissions-connect/redirect/permissions-redirect.component.js
View File

@ -12,9 +12,9 @@ import {
import { I18nContext } from '../../../contexts/i18n';
import {
Icon,
ICON_NAMES,
ICON_SIZES,
} from '../../../components/component-library/icon/deprecated';
IconName,
IconSize,
} from '../../../components/component-library';
export default function PermissionsRedirect({ subjectMetadata }) {
const t = useContext(I18nContext);
@ -42,8 +42,8 @@ export default function PermissionsRedirect({ subjectMetadata }) {
justifyContent={JustifyContent.center}
>
<Icon
name={ICON_NAMES.CHECK}
size={ICON_SIZES.LG}
name={IconName.Check}
size={IconSize.Lg}
className="permissions-redirect__check"
/>
<div className="permissions-redirect__dashed-line" />

7
ui/pages/send/send-content/add-recipient/add-recipient.component.js
View File

@ -8,10 +8,7 @@ import RecipientGroup from '../../../../components/app/contact-list/recipient-gr
import { ellipsify } from '../../send.utils';
import Button from '../../../../components/ui/button';
import Confusable from '../../../../components/ui/confusable';
import {
Icon,
ICON_NAMES,
} from '../../../../components/component-library/icon/deprecated';
import { Icon, IconName } from '../../../../components/component-library';
export default class AddRecipient extends Component {
static propTypes = {
@ -184,7 +181,7 @@ export default class AddRecipient extends Component {
className="send__select-recipient-wrapper__list__link"
onClick={useContactListForRecipientSearch}
>
<Icon name={ICON_NAMES.ARROW_LEFT} />
<Icon name={IconName.ArrowLeft} />
{t('backToAll')}
</Button>
<RecipientGroup

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

@ -9,11 +9,11 @@ import {
isValidHexAddress,
} from '../../../../../shared/modules/hexstring-utils';
import {
ButtonIcon,
Icon,
ICON_NAMES,
ICON_SIZES,
} from '../../../../components/component-library/icon/deprecated';
import { ButtonIcon } from '../../../../components/component-library/button-icon/deprecated';
IconName,
IconSize,
} from '../../../../components/component-library';
import { IconColor } from '../../../../helpers/constants/design-system';
export default class DomainInput extends Component {
@ -107,12 +107,12 @@ export default class DomainInput extends Component {
{hasSelectedAddress ? (
<Icon
className="ens-input__wrapper__status-icon"
name={ICON_NAMES.CHECK}
name={IconName.Check}
color={IconColor.successDefault}
/>
) : (
<Icon
name={ICON_NAMES.SEARCH}
name={IconName.Search}
color={IconColor.iconMuted}
className="ens-input__wrapper__status-icon"
/>
@ -130,11 +130,11 @@ export default class DomainInput extends Component {
)}
</div>
<ButtonIcon
iconName={ICON_NAMES.CLOSE}
iconName={IconName.Close}
ariaLabel={t('close')}
onClick={this.props.onReset}
className="ens-input__wrapper__action-icon-button"
size={ICON_SIZES.SM}
size={IconSize.Sm}
/>
</>
) : (
@ -160,9 +160,7 @@ export default class DomainInput extends Component {
this.props.scanQrCode();
}
}}
iconName={
userInput ? ICON_NAMES.CLOSE : ICON_NAMES.SCAN_BARCODE
}
iconName={userInput ? IconName.Close : IconName.ScanBarcode}
ariaLabel={t(userInput ? 'close' : 'scanQrCode')}
color={
userInput ? IconColor.iconDefault : IconColor.primaryDefault

14
ui/pages/settings/contact-list-tab/contact-list-tab.component.js
View File

@ -13,10 +13,10 @@ import {
} from '../../../helpers/utils/settings-search';
import {
Icon,
ICON_NAMES,
ICON_SIZES,
} from '../../../components/component-library/icon/deprecated';
import { Color } from '../../../helpers/constants/design-system';
IconName,
IconSize,
} from '../../../components/component-library';
import { IconColor } from '../../../helpers/constants/design-system';
import EditContact from './edit-contact';
import AddContact from './add-contact';
import ViewContact from './view-contact';
@ -79,10 +79,10 @@ export default class ContactListTab extends Component {
<div className="address-book__container">
<div>
<Icon
name={ICON_NAMES.BOOK}
color={Color.iconMuted}
name={IconName.Book}
color={IconColor.iconMuted}
className="address-book__icon"
size={ICON_SIZES.XL}
size={IconSize.Xl}
/>
<h4 className="address-book__title">{t('buildContactList')}</h4>
<p className="address-book__sub-title">

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

@ -4,12 +4,12 @@ import { Redirect } from 'react-router-dom';
import Identicon from '../../../../components/ui/identicon';
import Button from '../../../../components/ui/button/button.component';
import {
ICON_NAMES,
ICON_SIZES,
} from '../../../../components/component-library/icon/deprecated';
import { ButtonIcon } from '../../../../components/component-library/button-icon/deprecated';
import {
ButtonIcon,
ButtonIconSize,
IconName,
} from '../../../../components/component-library';
import Tooltip from '../../../../components/ui/tooltip';
import { useI18nContext } from '../../../../hooks/useI18nContext';
@ -74,8 +74,8 @@ function ViewContact({
onClick={() => {
handleCopy(checkSummedAddress);
}}
iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
size={ICON_SIZES.LG}
iconName={copied ? IconName.CopySuccess : IconName.Copy}
size={ButtonIconSize.Lg}
color={IconColor.primaryDefault}
/>
</Tooltip>

15
ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js
View File

@ -6,6 +6,7 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
import {
JustifyContent,
AlignItems,
IconColor,
Color,
TEXT_ALIGN,
FLEX_DIRECTION,
@ -15,15 +16,13 @@ import Box from '../../../../components/ui/box';
import { SNAPS_VIEW_ROUTE } from '../../../../helpers/constants/routes';
import { getSnapsList } from '../../../../selectors';
import { handleSettingsRefs } from '../../../../helpers/utils/settings-search';
import {
Icon,
ICON_NAMES,
ICON_SIZES,
} from '../../../../components/component-library/icon/deprecated';
import {
BannerTip,
BannerTipLogoType,
ButtonLink,
Icon,
IconName,
IconSize,
Text,
} from '../../../../components/component-library';
@ -79,10 +78,10 @@ const SnapListTab = () => {
alignItems={AlignItems.center}
>
<Icon
name={ICON_NAMES.SNAPS}
color={Color.iconMuted}
name={IconName.Snaps}
color={IconColor.iconMuted}
className="snap-list-tab__no-snaps_icon"
size={ICON_SIZES.AUTO}
size={IconSize.Inherit}
/>
<Text
color={Color.textMuted}

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

@ -5,10 +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/icon/deprecated';
import { Icon, IconName } from '../../../../components/component-library';
export default function CustomContentSearch({
onSearch,
@ -61,10 +58,7 @@ export default function CustomContentSearch({
position="end"
onClick={() => handleSearch('')}
>
<Icon
name={ICON_NAMES.CLOSE}
className="networks-tab__imageclose"
/>
<Icon name={IconName.Close} className="networks-tab__imageclose" />
</InputAdornment>
)}
</>

14
ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js
View File

@ -18,9 +18,9 @@ import UrlIcon from '../../../../components/ui/url-icon';
import { handleSettingsRefs } from '../../../../helpers/utils/settings-search';
import {
Icon,
ICON_NAMES,
ICON_SIZES,
} from '../../../../components/component-library/icon/deprecated';
IconName,
IconSize,
} from '../../../../components/component-library';
import { IconColor } from '../../../../helpers/constants/design-system';
const NetworksListItem = ({
@ -79,9 +79,9 @@ const NetworksListItem = ({
}}
>
{isCurrentRpcTarget ? (
<Icon name={ICON_NAMES.CHECK} color={IconColor.successDefault} />
<Icon name={IconName.Check} color={IconColor.successDefault} />
) : (
<Icon name={ICON_NAMES.CHECK} color={IconColor.transparent} />
<Icon name={IconName.Check} color={IconColor.transparent} />
)}
{network.chainId in CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP ? (
<Identicon
@ -122,9 +122,9 @@ const NetworksListItem = ({
{label || t(labelKey)}
{currentProviderType !== NETWORK_TYPES.RPC && (
<Icon
name={ICON_NAMES.LOCK}
name={IconName.Lock}
color={IconColor.iconMuted}
size={ICON_SIZES.AUTO}
size={IconSize.Inherit}
marginInlineStart={2}
/>
)}

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

@ -3,10 +3,7 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import { highlightSearchedText } from '../../../helpers/utils/settings-search';
import { I18nContext } from '../../../contexts/i18n';
import {
Icon,
ICON_NAMES,
} from '../../../components/component-library/icon/deprecated';
import { Icon, IconName } from '../../../components/component-library';
import { Size } from '../../../helpers/constants/design-system';
export default function SettingsSearchList({ results, onClickSetting }) {
@ -48,7 +45,7 @@ export default function SettingsSearchList({ results, onClickSetting }) {
{tabMessage(t)}
</span>
<Icon
name={ICON_NAMES.ARROW_RIGHT}
name={IconName.ArrowRight}
size={Size.SM}
className="settings-page__header__search__list__item__caret"
/>

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

@ -9,10 +9,7 @@ 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/icon/deprecated';
import { Icon, IconName } from '../../../components/component-library';
import { IconColor } from '../../../helpers/constants/design-system';
///: BEGIN:ONLY_INCLUDE_IN(flask)
import { getSnapsRouteObjects } from '../../../selectors';
@ -88,7 +85,7 @@ export default function SettingsSearch({
onClick={() => handleSearch('')}
style={{ cursor: 'pointer' }}
>
<Icon name={ICON_NAMES.CLOSE} color={IconColor.iconDefault} />
<Icon name={IconName.Close} color={IconColor.iconDefault} />
</InputAdornment>
)}
</>

14
ui/pages/settings/settings.component.js
View File

@ -27,11 +27,7 @@ import {
import { getSettingsRoutes } from '../../helpers/utils/settings-search';
import AddNetwork from '../../components/app/add-network/add-network';
import { ButtonIcon } from '../../components/component-library/button-icon/deprecated';
import {
Icon,
ICON_NAMES,
} from '../../components/component-library/icon/deprecated';
import { ButtonIcon, Icon, IconName } from '../../components/component-library';
import { Color, DISPLAY } from '../../helpers/constants/design-system';
import SettingsTab from './settings-tab';
import AlertsTab from './alerts-tab';
@ -125,7 +121,7 @@ class SettingsPage extends PureComponent {
{currentPath !== SETTINGS_ROUTE && (
<ButtonIcon
ariaLabel={t('back')}
iconName={ICON_NAMES.ARROW_LEFT}
iconName={IconName.ArrowLeft}
className="settings-page__back-button"
color={Color.iconDefault}
onClick={() => history.push(backRoute)}
@ -263,7 +259,7 @@ class SettingsPage extends PureComponent {
const tabs = [
{
content: t('general'),
icon: <Icon name={ICON_NAMES.SETTING} />,
icon: <Icon name={IconName.Setting} />,
key: GENERAL_ROUTE,
},
{
@ -273,7 +269,7 @@ class SettingsPage extends PureComponent {
},
{
content: t('contacts'),
icon: <Icon name={ICON_NAMES.BOOK} />,
icon: <Icon name={IconName.Book} />,
key: CONTACT_LIST_ROUTE,
},
///: BEGIN:ONLY_INCLUDE_IN(flask)
@ -292,7 +288,7 @@ class SettingsPage extends PureComponent {
},
{
content: t('alerts'),
icon: <Icon name={ICON_NAMES.NOTIFICATION} />,
icon: <Icon name={IconName.Notification} />,
key: ALERTS_ROUTE,
},
{

7
ui/pages/token-allowance/token-allowance.js
View File

@ -61,10 +61,7 @@ import {
import { ConfirmPageContainerNavigation } from '../../components/app/confirm-page-container';
import { useSimulationFailureWarning } from '../../hooks/useSimulationFailureWarning';
import SimulationErrorMessage from '../../components/ui/simulation-error-message';
import {
Icon,
ICON_NAMES,
} from '../../components/component-library/icon/deprecated';
import { Icon, IconName } from '../../components/component-library';
import LedgerInstructionField from '../../components/app/ledger-instruction-field/ledger-instruction-field';
import { SECURITY_PROVIDER_MESSAGE_SEVERITIES } from '../../components/app/security-provider-banner-message/security-provider-banner-message.constants';
import SecurityProviderBannerMessage from '../../components/app/security-provider-banner-message/security-provider-banner-message';
@ -448,7 +445,7 @@ export default function TokenAllowance({
</Box>
)}
<ApproveContentCard
symbol={<Icon name={ICON_NAMES.TAG} />}
symbol={<Icon name={IconName.Tag} />}
title={t('transactionFee')}
showEdit
showAdvanceGasFeeOptions

12
ui/pages/token-details/token-details-page.js
View File

@ -26,10 +26,10 @@ import {
} from '../../helpers/constants/design-system';
import { isEqualCaseInsensitive } from '../../../shared/modules/string-utils';
import {
ICON_SIZES,
ICON_NAMES,
} from '../../components/component-library/icon/deprecated';
import { ButtonIcon } from '../../components/component-library/button-icon/deprecated';
ButtonIcon,
ButtonIconSize,
IconName,
} from '../../components/component-library';
export default function TokenDetailsPage() {
const dispatch = useDispatch();
@ -139,11 +139,11 @@ export default function TokenDetailsPage() {
>
<ButtonIcon
ariaLabel="copy"
name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
name={copied ? IconName.CopySuccess : IconName.Copy}
className="token-details__copyIcon"
onClick={() => handleCopy(token.address)}
color={IconColor.primaryDefault}
size={ICON_SIZES.SM}
size={ButtonIconSize.Sm}
/>
</Tooltip>
</Box>