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 - Update all copy icons (#17445)

Browse Source
This commit is contained in:
David Walsh 2023-01-31 11:00:26 -06:00 committed by GitHub
parent 8aa3263b82
commit 145cf1ec01
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 81 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,20 +32,10 @@ exports[`SelectedAccount Component should match snapshot 1`] = `
<div
class="selected-account__copy"
>
<svg
fill="none"
height="11"
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
class="box mm-icon mm-icon--size-sm box--flex-direction-row box--color-icon-alternative"
style="mask-image: url('./images/icons/copy.svg');"
/>
</div>
</div>
</button>

13
ui/components/app/selected-account/selected-account.component.js
View File

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

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

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

4
ui/components/ui/export-text-container/export-text-container.component.js
View File

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

9
ui/components/ui/icon/README.mdx
View File

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

41
ui/components/ui/icon/copy-icon.component.js
View File

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

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

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

16
ui/components/ui/nickname-popover/nickname-popover.component.js
View File

@ -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
type="link"
onClick={() => {
handleCopy(address);
}}
title=""
>
<CopyIcon size={11} color="var(--color-icon-default)" />
</button>
<ButtonIcon
iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
size={ICON_SIZES.SM}
onClick={() => handleCopy(address)}
/>
</Tooltip>
</div>

21
ui/components/ui/qr-code/index.scss
View File

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

10
ui/components/ui/qr-code/qr-code.js
View File

@ -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">
<CopyIcon size={11} className="qr-code__copy-icon__svg" color="" />
</div>
<Icon
name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
size={ICON_SIZES.SM}
marginInlineStart={3}
/>
</div>
</Tooltip>
</div>

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

@ -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
type="link"
className="confirm-approve-content__copy-address"
onClick={() => {
this.setState({ copied: true });
this.copyTimeout = setTimeout(
() => this.setState({ copied: false }),
SECOND * 3,
);
copyToClipboard(toAddress);
}}
<ButtonIcon
ariaLabel="copy"
onClick={() => copyToClipboard(toAddress)}
color={COLORS.ICON_DEFAULT}
iconName={
this.state.copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY
}
title={
this.state.copied
? t('copiedExclamation')
: t('copyToClipboard')
}
>
<CopyIcon size={14} color="var(--color-icon-default)" />
</Button>
/>
</div>
</div>
</div>

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

@ -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>
) : (

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

@ -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 : (
<Copy size={20} color="var(--color-primary-default)" />
)
<Icon
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"

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

@ -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);
}}
>
<Copy size={20} color="var(--color-primary-default)" />
</button>
iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
size={ICON_SIZES.LG}
color={COLORS.PRIMARY_DEFAULT}
/>
</Tooltip>
</div>
</div>

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

@ -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
type="link"
<ButtonIcon
name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
className="token-details__copyIcon"
onClick={() => {
handleCopy(token.address);
}}
>
<CopyIcon size={11} color="var(--color-primary-default)" />
</Button>
onClick={() => handleCopy(token.address)}
color={COLORS.PRIMARY_DEFAULT}
size={ICON_SIZES.SM}
/>
</Tooltip>
</Box>
<Typography