From 145cf1ec010a95d29121440077afcd979a3f92be Mon Sep 17 00:00:00 2001 From: David Walsh Date: Tue, 31 Jan 2023 11:00:26 -0600 Subject: [PATCH] UX - Update all copy icons (#17445) --- .../selected-account-component.test.js.snap | 18 ++------ .../selected-account.component.js | 13 +++++- .../copy-raw-data/copy-raw-data.component.js | 8 +++- .../export-text-container.component.js | 4 +- ui/components/ui/icon/README.mdx | 9 ---- ui/components/ui/icon/copy-icon.component.js | 41 ------------------- ui/components/ui/icon/icon.stories.js | 9 ---- .../nickname-popover.component.js | 16 +++----- ui/components/ui/qr-code/index.scss | 21 +--------- ui/components/ui/qr-code/qr-code.js | 10 +++-- .../confirm-approve-content.component.js | 25 ++++------- .../confirm-decrypt-message.component.js | 8 +++- .../recovery-phrase/review-recovery-phrase.js | 10 +++-- .../view-contact/view-contact.component.js | 17 +++++--- ui/pages/token-details/token-details-page.js | 20 +++++---- 15 files changed, 81 insertions(+), 148 deletions(-) delete mode 100644 ui/components/ui/icon/copy-icon.component.js diff --git a/ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap b/ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap index 30f4376f7176..28920a3f19a2 100644 --- a/ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap +++ b/ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap @@ -32,20 +32,10 @@ exports[`SelectedAccount Component should match snapshot 1`] = `
- - - +
diff --git a/ui/components/app/selected-account/selected-account.component.js b/ui/components/app/selected-account/selected-account.component.js index df7b07e18ea5..8fb99436e3a2 100644 --- a/ui/components/app/selected-account/selected-account.component.js +++ b/ui/components/app/selected-account/selected-account.component.js @@ -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 {
{shortenAddress(checksummedAddress)}
- +
diff --git a/ui/components/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js b/ui/components/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js index ae61cfd0b1fa..3d45123dbc5a 100644 --- a/ui/components/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js +++ b/ui/components/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js @@ -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" >
- +
{t('copyRawTransactionData')} diff --git a/ui/components/ui/export-text-container/export-text-container.component.js b/ui/components/ui/export-text-container/export-text-container.component.js index 4733bfbb85ab..284276b766e7 100644 --- a/ui/components/ui/export-text-container/export-text-container.component.js +++ b/ui/components/ui/export-text-container/export-text-container.component.js @@ -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); }} > - +
{copied ? t('copiedExclamation') : t('copyToClipboard')}
diff --git a/ui/components/ui/icon/README.mdx b/ui/components/ui/icon/README.mdx index d437c8223e00..0f053cfce397 100644 --- 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 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 -## CopyIcon - - - - - - - ## Preloader diff --git a/ui/components/ui/icon/copy-icon.component.js b/ui/components/ui/icon/copy-icon.component.js deleted file mode 100644 index 5274398df1d0..000000000000 --- a/ui/components/ui/icon/copy-icon.component.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const Copy = ({ className, size, color }) => ( - - - -); - -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; diff --git a/ui/components/ui/icon/icon.stories.js b/ui/components/ui/icon/icon.stories.js index e16175af212e..fa1ab01b7565 100644 --- 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 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) => ( } /> } /> } /> - } /> } /> } /> } /> @@ -281,13 +279,6 @@ SunCheckStory.argTypes = { }; SunCheckStory.storyName = 'SunCheck'; -export const CopyIconStory = (args) => ; -CopyIconStory.args = { - size: 40, - color: 'var(--color-icon-default)', -}; -CopyIconStory.storyName = 'CopyIcon'; - export const PreloaderStory = (args) => ; PreloaderStory.args = { size: 40, diff --git a/ui/components/ui/nickname-popover/nickname-popover.component.js b/ui/components/ui/nickname-popover/nickname-popover.component.js index d265ba9ae331..a76f26285c6a 100644 --- a/ui/components/ui/nickname-popover/nickname-popover.component.js +++ b/ui/components/ui/nickname-popover/nickname-popover.component.js @@ -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')} > - + handleCopy(address)} + />
diff --git a/ui/components/ui/qr-code/index.scss b/ui/components/ui/qr-code/index.scss index 05a27b7e267f..035645bb8a59 100644 --- a/ui/components/ui/qr-code/index.scss +++ b/ui/components/ui/qr-code/index.scss @@ -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); - } - } } diff --git a/ui/components/ui/qr-code/qr-code.js b/ui/components/ui/qr-code/qr-code.js index d4136411375f..758620092839 100644 --- a/ui/components/ui/qr-code/qr-code.js +++ b/ui/components/ui/qr-code/qr-code.js @@ -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) { }} >
{toChecksumHexAddress(data)}
-
- -
+ diff --git a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js index 0c4a5c6f8089..ccc9112babd6 100644 --- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js +++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js @@ -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}
- + />
diff --git a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js index ed12e9e81d33..02571729e9a9 100644 --- a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js +++ b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js @@ -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 {
{t('decryptCopy')}
- + ) : ( diff --git a/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js b/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js index 64bcec6d23a8..d13f2185b48e 100644 --- a/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js +++ b/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js @@ -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 : ( - - ) + } className="recovery-phrase__footer__copy-and-hide__button recovery-phrase__footer__copy-and-hide__button__copy-to-clipboard" type="link" diff --git a/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js b/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js index 38db938ef3db..756da6c59f77 100644 --- a/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js +++ b/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js @@ -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')} > - + iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY} + size={ICON_SIZES.LG} + color={COLORS.PRIMARY_DEFAULT} + /> diff --git a/ui/pages/token-details/token-details-page.js b/ui/pages/token-details/token-details-page.js index 279fc1e4774a..fcfef705fee2 100644 --- a/ui/pages/token-details/token-details-page.js +++ b/ui/pages/token-details/token-details-page.js @@ -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" > - + onClick={() => handleCopy(token.address)} + color={COLORS.PRIMARY_DEFAULT} + size={ICON_SIZES.SM} + />