From fca2a3f97f6236ced2ec313b5db93b4f91d26ad3 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Wed, 15 Feb 2023 08:39:46 -0600 Subject: [PATCH] UX: Update three-dot icon for settings (#17558) --- app/_locales/en/messages.json | 6 +++ test/e2e/tests/token-details.spec.js | 2 +- ...nnected-accounts-list-options.component.js | 20 +++++--- ui/components/app/menu-bar/menu-bar.js | 49 +++++++++---------- .../__snapshots__/nft-details.test.js.snap | 16 ++++-- ui/components/app/nft-options/index.scss | 7 --- ui/components/app/nft-options/nft-options.js | 23 +++++---- ui/pages/asset/asset.scss | 7 --- ui/pages/asset/components/asset-options.js | 23 ++++----- 9 files changed, 80 insertions(+), 73 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index f619a25ec..2d11a2478 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -2188,6 +2188,9 @@ "nftDisclaimer": { "message": "Disclaimer: MetaMask pulls the media file from the source url. This url sometimes is changed by the marketplace the NFT was minted on." }, + "nftOptions": { + "message": "NFT Options" + }, "nftTokenIdPlaceholder": { "message": "Enter the token id" }, @@ -2601,6 +2604,9 @@ "optionalWithParanthesis": { "message": "(Optional)" }, + "options": { + "message": "Options" + }, "or": { "message": "or" }, diff --git a/test/e2e/tests/token-details.spec.js b/test/e2e/tests/token-details.spec.js index 56372bc0a..cceed2153 100644 --- a/test/e2e/tests/token-details.spec.js +++ b/test/e2e/tests/token-details.spec.js @@ -35,7 +35,7 @@ describe('Token Details', function () { await driver.fill('#custom-symbol', tokenSymbol); await driver.clickElement({ text: 'Add custom token', tag: 'button' }); await driver.clickElement({ text: 'Import tokens', tag: 'button' }); - await driver.clickElement('[title="Asset options"]'); + await driver.clickElement('[aria-label="Asset options"]'); await driver.clickElement({ text: 'Token details', tag: 'span' }); const tokenAddressFound = { diff --git a/ui/components/app/connected-accounts-list/connected-accounts-list-options/connected-accounts-list-options.component.js b/ui/components/app/connected-accounts-list/connected-accounts-list-options/connected-accounts-list-options.component.js index 1850b11d7..c304a0887 100644 --- a/ui/components/app/connected-accounts-list/connected-accounts-list-options/connected-accounts-list-options.component.js +++ b/ui/components/app/connected-accounts-list/connected-accounts-list-options/connected-accounts-list-options.component.js @@ -1,6 +1,8 @@ import PropTypes from 'prop-types'; -import React, { useState } from 'react'; +import React, { useRef } from 'react'; import { Menu } from '../../../ui/menu'; +import { ButtonIcon, ICON_NAMES } from '../../../component-library'; +import { useI18nContext } from '../../../../hooks/useI18nContext'; const ConnectedAccountsListOptions = ({ children, @@ -8,18 +10,20 @@ const ConnectedAccountsListOptions = ({ onHideOptions, show, }) => { - const [optionsButtonElement, setOptionsButtonElement] = useState(null); + const ref = useRef(false); + const t = useI18nContext(); return ( - <> - - +
{ const t = useContext(I18nContext); - const [collectibleOptionsButtonElement, setCollectibleOptionsButtonElement] = - useState(null); const [collectibleOptionsOpen, setCollectibleOptionsOpen] = useState(false); + const ref = useRef(false); return ( - <> -
); }; diff --git a/ui/pages/asset/asset.scss b/ui/pages/asset/asset.scss index 0b1b8543e..8cffc6eb0 100644 --- a/ui/pages/asset/asset.scss +++ b/ui/pages/asset/asset.scss @@ -34,13 +34,6 @@ .asset-options { &__button { - font-size: $font-size-paragraph; - color: var(--color-text-default); - background-color: inherit; padding: 2px 0 2px 8px; } - - &__icon { - font-weight: 900; - } } diff --git a/ui/pages/asset/components/asset-options.js b/ui/pages/asset/components/asset-options.js index 2fe53156e..2e0c87915 100644 --- a/ui/pages/asset/components/asset-options.js +++ b/ui/pages/asset/components/asset-options.js @@ -1,4 +1,4 @@ -import React, { useContext, useState } from 'react'; +import React, { useContext, useRef, useState } from 'react'; import PropTypes from 'prop-types'; import { useHistory } from 'react-router-dom'; @@ -7,7 +7,8 @@ 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'; +import { ButtonIcon, ICON_NAMES } from '../../../components/component-library'; +import { Color } from '../../../helpers/constants/design-system'; const AssetOptions = ({ onRemove, @@ -18,11 +19,10 @@ const AssetOptions = ({ isNativeAsset, }) => { const t = useContext(I18nContext); - const [assetOptionsButtonElement, setAssetOptionsButtonElement] = - useState(null); const [assetOptionsOpen, setAssetOptionsOpen] = useState(false); const history = useHistory(); const blockExplorerLinkText = useSelector(getBlockExplorerLinkText); + const ref = useRef(false); const routeToAddBlockExplorerUrl = () => { history.push(`${NETWORKS_ROUTE}#blockExplorerUrl`); @@ -34,17 +34,18 @@ const AssetOptions = ({ }; return ( - <> -