m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Fix #17441 - Update all MenuItem instances to use new icons (#17468)

Browse Source
This commit is contained in:
David Walsh 2023-01-31 08:47:00 -06:00 committed by GitHub
parent ff843c1b10
commit edb2c9ea00
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 21 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/components/app/connected-accounts-list/connected-accounts-list.component.js
View File

@ -1,5 +1,6 @@
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import { ICON_NAMES } from '../../component-library';
import { MenuItem } from '../../ui/menu';
import ConnectedAccountsListItem from './connected-accounts-list-item';
import ConnectedAccountsListOptions from './connected-accounts-list-options';
@ -104,7 +105,7 @@ export default class ConnectedAccountsList extends PureComponent {
onShowOptions={this.showAccountOptions.bind(null, address)}
show={accountWithOptionsShown === address}
>
<MenuItem iconClassName="fa fa-ban" onClick={this.disconnectAccount}>
<MenuItem iconName={ICON_NAMES.LOGOUT} onClick={this.disconnectAccount}>
{t('disconnectThisAccount')}
</MenuItem>
</ConnectedAccountsListOptions>

11
ui/components/app/menu-bar/account-options-menu.js
View File

@ -24,6 +24,7 @@ import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
import { HardwareKeyringTypes } from '../../../../shared/constants/hardware-wallets';
import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import { ICON_NAMES } from '../../component-library';
export default function AccountOptionsMenu({ anchorElement, onClose }) {
const t = useI18nContext();
@ -82,7 +83,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
</span>
) : null
}
iconClassName="fas fa-external-link-alt"
iconName={ICON_NAMES.EXPORT}
>
{t(
blockExplorerLinkText.firstPart,
@ -104,7 +105,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
global.platform.openExtensionInBrowser();
onClose();
}}
iconClassName="fas fa-expand-alt"
iconName={ICON_NAMES.EXPAND}
>
{t('expandView')}
</MenuItem>
@ -122,7 +123,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
});
onClose();
}}
iconClassName="fas fa-qrcode"
iconName={ICON_NAMES.SCAN_BARCODE}
>
{t('accountDetails')}
</MenuItem>
@ -139,7 +140,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
history.push(CONNECTED_ROUTE);
onClose();
}}
iconClassName="fa fa-bullseye"
iconName={ICON_NAMES.CONNECT}
>
{t('connectedSites')}
</MenuItem>
@ -155,7 +156,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
);
onClose();
}}
iconClassName="fas fa-trash-alt"
iconName={ICON_NAMES.TRASH}
>
{t('removeAccount')}
</MenuItem>

6
ui/components/ui/menu/menu-item.js
View File

@ -8,7 +8,6 @@ const MenuItem = ({
children,
className,
'data-testid': dataTestId,
iconClassName,
iconName,
onClick,
subtitle,
@ -18,9 +17,6 @@ const MenuItem = ({
data-testid={dataTestId}
onClick={onClick}
>
{iconClassName ? (
<i className={classnames('menu-item__icon', iconClassName)} />
) : null}
{iconName ? (
<Icon name={iconName} size={ICON_SIZES.SM} marginRight={2} />
) : null}
@ -33,7 +29,6 @@ MenuItem.propTypes = {
children: PropTypes.node.isRequired,
className: PropTypes.string,
'data-testid': PropTypes.string,
iconClassName: PropTypes.string,
iconName: PropTypes.string,
onClick: PropTypes.func,
subtitle: PropTypes.node,
@ -42,7 +37,6 @@ MenuItem.propTypes = {
MenuItem.defaultProps = {
className: undefined,
'data-testid': undefined,
iconClassName: undefined,
iconName: undefined,
onClick: undefined,
subtitle: undefined,

15
ui/components/ui/menu/menu.stories.js
View File

@ -1,5 +1,6 @@
import React, { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { ICON_NAMES } from '../../component-library';
import { Menu, MenuItem } from '.';
export default {
@ -9,11 +10,11 @@ export default {
export const DefaultStory = () => {
return (
<Menu onHide={action('Hide')}>
<MenuItem iconClassName="fas fa-bullseye" onClick={action('Menu Item 1')}>
<MenuItem iconName={ICON_NAMES.EYE} onClick={action('Menu Item 1')}>
Menu Item 1
</MenuItem>
<MenuItem onClick={action('Menu Item 2')}>Menu Item 2</MenuItem>
<MenuItem iconClassName="fas fa-bold" onClick={action('Menu Item 3')}>
<MenuItem iconName={ICON_NAMES.EYE_SLASH} onClick={action('Menu Item 3')}>
Menu Item 3
</MenuItem>
</Menu>
@ -28,14 +29,14 @@ export const Anchored = () => {
<>
<button ref={setAnchorElement}>Menu</button>
<Menu anchorElement={anchorElement} onHide={action('Hide')}>
<MenuItem
iconClassName="fas fa-bullseye"
onClick={action('Menu Item 1')}
>
<MenuItem iconName={ICON_NAMES.EXPORT} onClick={action('Menu Item 1')}>
Menu Item 1
</MenuItem>
<MenuItem onClick={action('Menu Item 2')}>Menu Item 2</MenuItem>
<MenuItem iconClassName="fas fa-bold" onClick={action('Menu Item 3')}>
<MenuItem
iconName={ICON_NAMES.EYE_SLSH}
onClick={action('Menu Item 3')}
>
Menu Item 3
</MenuItem>
</Menu>

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

@ -7,6 +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';
const AssetOptions = ({
onRemove,
@ -47,7 +48,7 @@ const AssetOptions = ({
onHide={() => setAssetOptionsOpen(false)}
>
<MenuItem
iconClassName="fas fa-qrcode"
iconName={ICON_NAMES.SCAN_BARCODE}
data-testid="asset-options__account-details"
onClick={() => {
setAssetOptionsOpen(false);
@ -57,7 +58,7 @@ const AssetOptions = ({
{t('accountDetails')}
</MenuItem>
<MenuItem
iconClassName="fas fa-external-link-alt asset-options__icon"
iconName={ICON_NAMES.EXPORT}
data-testid="asset-options__etherscan"
onClick={
blockExplorerLinkText.firstPart === 'addBlockExplorer'
@ -74,7 +75,7 @@ const AssetOptions = ({
</MenuItem>
{isNativeAsset ? null : (
<MenuItem
iconClassName="fas fa-trash-alt asset-options__icon"
iconName={ICON_NAMES.TRASH}
data-testid="asset-options__hide"
onClick={() => {
setAssetOptionsOpen(false);
@ -86,7 +87,7 @@ const AssetOptions = ({
)}
{isNativeAsset ? null : (
<MenuItem
iconClassName="fas fa-info-circle asset-options__icon"
iconName={ICON_NAMES.INFO}
data-testid="asset-options__token-details"
onClick={() => {
setAssetOptionsOpen(false);