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

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

Browse Source 
* 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>
This commit is contained in:
David Walsh 2023-02-23 07:19:28 -06:00 committed by GitHub
parent 2acd51af2e
commit 09c60e2038
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 73 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ui/components/app/account-menu/account-menu.component.js
View File

@ -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 {
Icon,
ICON_NAMES,
///: BEGIN:ONLY_INCLUDE_IN(flask)
ICON_SIZES,
///: END:ONLY_INCLUDE_IN
} from '../../component-library';
import { IconColor } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES, ICON_SIZES } 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}
/>

6
ui/components/app/dropdowns/network-dropdown.js
View File

@ -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>
)}

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

@ -237,8 +237,9 @@ exports[`MetaMetrics Opt In should match snapshot 1`] = `
<div
class="metametrics-opt-in__row"
>
<i
class="fa fa-check"
<span
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
class="fa fa-check"
<span
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"

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

@ -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>

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

@ -11,8 +11,9 @@ exports[`Transaction Confirmed should match snapshot 1`] = `
<div
class="transaction-confirmed__content"
>
<i
class="fa fa-check-circle fa-3x"
<span
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"

9
ui/components/app/modals/transaction-confirmed/transaction-confirmed.component.js
View File

@ -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
className="fa fa-check-circle fa-3x"
style={{ color: 'var(--color-success-default)' }}
<Icon
name={ICON_NAMES.CHECK}
color={IconColor.successDefault}
size={ICON_SIZES.XL}
/>
<div className="transaction-confirmed__title">
{`${t('confirmed')}!`}

7
ui/components/ui/editable-label/editable-label.js
View File

@ -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>

2
ui/components/ui/form-field/form-field.stories.js
View File

@ -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]} />;

47
ui/components/ui/icon/icon-check.js
View File

@ -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;

2
ui/components/ui/icon/icon.stories.js
View File

@ -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} />} />

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

@ -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>
)
}

10
ui/pages/onboarding-flow/metametrics/index.scss
View File

@ -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);

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

@ -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>

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

@ -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

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

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

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

@ -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
className="networks-tab__content__icon-check"
color="var(--color-success-default)"
aria-label={t('active')}
/>
<Icon name={ICON_NAMES.CHECK} color={IconColor.successDefault} />
) : (
<IconCheck
className="networks-tab__content__icon-check"
color="transparent"
aria-hidden="true"
/>
<Icon name={ICON_NAMES.CHECK} color={IconColor.transparent} />
)}
{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}
/>