UX: Update three-dot icon for settings (#17558)

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"
   },

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 = {

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 (
-    <>
-      <button
-        className="fas fa-ellipsis-v connected-accounts-options__button"
+    <div ref={ref}>
+      <ButtonIcon
+        iconName={ICON_NAMES.MORE_VERTICAL}
+        className="connected-accounts-options__button"
         onClick={onShowOptions}
-        ref={setOptionsButtonElement}
+        ariaLabel={t('options')}
       />
       {show ? (
         <Menu
-          anchorElement={optionsButtonElement}
+          anchorElement={ref.current}
           onHide={onHideOptions}
           popperOptions={{
             modifiers: [
@@ -30,7 +34,7 @@ const ConnectedAccountsListOptions = ({
           {children}
         </Menu>
       ) : null}
-    </>
+    </div>
   );
 };
 

ui/components/app/menu-bar/menu-bar.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useRef } from 'react';
 import browser from 'webextension-polyfill';
 import { useHistory } from 'react-router-dom';
 import { useSelector } from 'react-redux';
@@ -11,16 +11,16 @@ import { CONNECTED_ACCOUNTS_ROUTE } from '../../../helpers/constants/routes';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { getOriginOfCurrentTab } from '../../../selectors';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
+import { ButtonIcon, ICON_NAMES } from '../../component-library';
 import AccountOptionsMenu from './account-options-menu';
 
 export default function MenuBar() {
   const t = useI18nContext();
   const trackEvent = useContext(MetaMetricsContext);
   const history = useHistory();
-  const [accountOptionsButtonElement, setAccountOptionsButtonElement] =
-    useState(null);
   const [accountOptionsMenuOpen, setAccountOptionsMenuOpen] = useState(false);
   const origin = useSelector(getOriginOfCurrentTab);
+  const ref = useRef(false);
 
   const showStatus =
     getEnvironmentType() === ENVIRONMENT_TYPE_POPUP &&
@@ -34,32 +34,31 @@ export default function MenuBar() {
           onClick={() => history.push(CONNECTED_ACCOUNTS_ROUTE)}
         />
       ) : null}
-
       <SelectedAccount />
-
-      <button
-        className="fas fa-ellipsis-v menu-bar__account-options"
-        data-testid="account-options-menu-button"
-        ref={setAccountOptionsButtonElement}
-        title={t('accountOptions')}
-        onClick={() => {
-          trackEvent({
-            event: EVENT_NAMES.NAV_ACCOUNT_MENU_OPENED,
-            category: EVENT.CATEGORIES.NAVIGATION,
-            properties: {
-              location: 'Home',
-            },
-          });
-          setAccountOptionsMenuOpen(true);
-        }}
-      />
-
-      {accountOptionsMenuOpen && (
+      <span style={{ display: 'inherit' }} ref={ref}>
+        <ButtonIcon
+          iconName={ICON_NAMES.MORE_VERTICAL}
+          className="menu-bar__account-options"
+          data-testid="account-options-menu-button"
+          ariaLabel={t('accountOptions')}
+          onClick={() => {
+            trackEvent({
+              event: EVENT_NAMES.NAV_ACCOUNT_MENU_OPENED,
+              category: EVENT.CATEGORIES.NAVIGATION,
+              properties: {
+                location: 'Home',
+              },
+            });
+            setAccountOptionsMenuOpen(true);
+          }}
+        />
+      </span>
+      {accountOptionsMenuOpen ? (
         <AccountOptionsMenu
-          anchorElement={accountOptionsButtonElement}
+          anchorElement={ref.current}
           onClose={() => setAccountOptionsMenuOpen(false)}
         />
-      )}
+      ) : null}
     </div>
   );
 }

ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap

@@ -22,10 +22,18 @@ exports[`Collectible Details should match minimal props and state snapshot 1`] =
         MUNK #1
       </span>
     </button>
-    <button
-      class="fas fa-ellipsis-v collectible-options__button"
-      data-testid="collectible-options__button"
-    />
+    <div>
+      <button
+        aria-label="NFT Options"
+        class="box mm-button-icon mm-button-icon--size-lg collectible-options__button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-transparent box--rounded-lg"
+        data-testid="collectible-options__button"
+      >
+        <div
+          class="box mm-icon mm-icon--size-lg box--flex-direction-row box--color-inherit"
+          style="mask-image: url('./images/icons/more-vertical.svg');"
+        />
+      </button>
+    </div>
   </div>
   <div
     class="box collectible-details box--flex-direction-row"

ui/components/app/nft-options/index.scss

@@ -1,12 +1,5 @@
 .collectible-options {
   &__button {
-    font-size: $font-size-paragraph;
-    color: var(--color-text-default);
-    background-color: inherit;
     padding: 2px 0 2px 8px;
   }
-
-  &__icon {
-    font-weight: 900;
-  }
 }

ui/components/app/nft-options/nft-options.js

@@ -1,28 +1,31 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { I18nContext } from '../../../contexts/i18n';
 import { Menu, MenuItem } from '../../ui/menu';
-import { ICON_NAMES } from '../../component-library';
+import { ButtonIcon, ICON_NAMES } from '../../component-library';
+import { Color } from '../../../helpers/constants/design-system';
 
 const CollectibleOptions = ({ onRemove, onViewOnOpensea }) => {
   const t = useContext(I18nContext);
-  const [collectibleOptionsButtonElement, setCollectibleOptionsButtonElement] =
-    useState(null);
   const [collectibleOptionsOpen, setCollectibleOptionsOpen] = useState(false);
+  const ref = useRef(false);
 
   return (
-    <>
-      <button
-        className="fas fa-ellipsis-v collectible-options__button"
+    <div ref={ref}>
+      <ButtonIcon
+        iconName={ICON_NAMES.MORE_VERTICAL}
+        className="collectible-options__button"
         data-testid="collectible-options__button"
         onClick={() => setCollectibleOptionsOpen(true)}
-        ref={setCollectibleOptionsButtonElement}
+        color={Color.textDefault}
+        ariaLabel={t('nftOptions')}
       />
+
       {collectibleOptionsOpen ? (
         <Menu
-          anchorElement={collectibleOptionsButtonElement}
           data-testid="close-collectible-options-menu"
+          anchorElement={ref.current}
           onHide={() => setCollectibleOptionsOpen(false)}
         >
           {onViewOnOpensea ? (
@@ -49,7 +52,7 @@ const CollectibleOptions = ({ onRemove, onViewOnOpensea }) => {
           </MenuItem>
         </Menu>
       ) : null}
-    </>
+    </div>
   );
 };
 

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

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 (
-    <>
-      <button
-        className="fas fa-ellipsis-v asset-options__button"
+    <div ref={ref}>
+      <ButtonIcon
+        className="asset-options__button"
         data-testid="asset-options__button"
         onClick={() => setAssetOptionsOpen(true)}
-        ref={setAssetOptionsButtonElement}
-        title={t('assetOptions')}
+        ariaLabel={t('assetOptions')}
+        iconName={ICON_NAMES.MORE_VERTICAL}
+        color={Color.textDefault}
       />
       {assetOptionsOpen ? (
         <Menu
-          anchorElement={assetOptionsButtonElement}
+          anchorElement={ref.current}
           onHide={() => setAssetOptionsOpen(false)}
         >
           <MenuItem
@@ -99,7 +100,7 @@ const AssetOptions = ({
           )}
         </Menu>
       ) : null}
-    </>
+    </div>
   );
 };