From f5e86d035103e49cf46648214cc9c42d7318066e Mon Sep 17 00:00:00 2001 From: igorms-cons <89637087+igorms-cons@users.noreply.github.com> Date: Tue, 22 Feb 2022 21:58:21 +0100 Subject: [PATCH] Feat/settings search (#13214) * fix error with color variable - fix rebase * clean list search & fuse threshold decreased * update search-icon , fix tests * nice to have highlighting text & cleaning * unit test on settings & search input ui up on expanded view * fix color variable in alert scss * setting search input padding right up * fix dom warning * util/search test added & Dom element warning fix * renaming files * fix color text in settings search * settings search highlight text refacto & fix ui * fix settings-search test & renaming * Fix styling on search field for edge cases, update components and e2e E2E tests update for search feature Update components from class to functional component # Fix storybook for search box Fix styling Fix unit tests fix: remove z-index Fix unit tests Co-authored-by: amerkadicE --- app/_locales/en/messages.json | 12 + test/e2e/tests/custom-rpc-history.spec.js | 14 +- .../account-menu/account-menu.component.js | 2 +- ui/components/app/tab-bar/index.scss | 1 - .../ui/search-icon/search-icon.component.js | 17 +- .../ui/text-field/text-field.component.js | 9 + ui/helpers/utils/settings-search.js | 408 ++++++++++++++ ui/helpers/utils/settings-search.test.js | 524 ++++++++++++++++++ .../advanced-tab/advanced-tab.component.js | 38 +- ui/pages/settings/alerts-tab/alerts-tab.js | 63 ++- ui/pages/settings/alerts-tab/alerts-tab.scss | 26 +- .../contact-list-tab.component.js | 28 +- .../experimental-tab.component.js | 34 +- ui/pages/settings/index.scss | 149 ++++- .../settings/info-tab/info-tab.component.js | 43 +- .../networks-list-item/networks-list-item.js | 18 +- .../networks-list/networks-list.js | 3 +- .../security-tab/security-tab.component.js | 33 +- .../settings/settings-search-list/index.js | 3 + .../settings-search-list.js | 101 ++++ ui/pages/settings/settings-search/index.js | 3 + .../settings-search/settings-search.js | 105 ++++ .../settings-search.stories.js | 11 + .../settings-tab/settings-tab.component.js | 41 +- ...test.js => settings-tab.component.test.js} | 0 ui/pages/settings/settings.component.js | 72 ++- ui/pages/settings/settings.component.test.js | 52 ++ 27 files changed, 1690 insertions(+), 120 deletions(-) create mode 100644 ui/helpers/utils/settings-search.js create mode 100644 ui/helpers/utils/settings-search.test.js create mode 100644 ui/pages/settings/settings-search-list/index.js create mode 100644 ui/pages/settings/settings-search-list/settings-search-list.js create mode 100644 ui/pages/settings/settings-search/index.js create mode 100644 ui/pages/settings/settings-search/settings-search.js create mode 100644 ui/pages/settings/settings-search/settings-search.stories.js rename ui/pages/settings/settings-tab/{settings-tab.container.test.js => settings-tab.component.test.js} (100%) create mode 100644 ui/pages/settings/settings.component.test.js diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index a4350f384..cb4496c6d 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1817,6 +1817,12 @@ "missingNFT": { "message": "Don't see your NFT?" }, + "missingSetting": { + "message": "Can't find a setting?" + }, + "missingSettingRequest": { + "message": "Request here" + }, "missingToken": { "message": "Don't see your token?" }, @@ -2533,6 +2539,9 @@ "searchResults": { "message": "Search Results" }, + "searchSettings": { + "message": "Search in settings" + }, "searchTokens": { "message": "Search Tokens" }, @@ -2682,6 +2691,9 @@ "settings": { "message": "Settings" }, + "settingsSearchMatchingNotFound": { + "message": "No matching results found" + }, "show": { "message": "Show" }, diff --git a/test/e2e/tests/custom-rpc-history.spec.js b/test/e2e/tests/custom-rpc-history.spec.js index 025f7f53a..49dd59059 100644 --- a/test/e2e/tests/custom-rpc-history.spec.js +++ b/test/e2e/tests/custom-rpc-history.spec.js @@ -36,10 +36,10 @@ describe('Stores custom RPC history', function () { await driver.findElement('.networks-tab__sub-header-text'); const customRpcInputs = await driver.findElements('input[type="text"]'); - const networkNameInput = customRpcInputs[0]; - const rpcUrlInput = customRpcInputs[1]; - const chainIdInput = customRpcInputs[2]; - const symbolInput = customRpcInputs[3]; + const networkNameInput = customRpcInputs[1]; + const rpcUrlInput = customRpcInputs[2]; + const chainIdInput = customRpcInputs[3]; + const symbolInput = customRpcInputs[4]; await networkNameInput.clear(); await networkNameInput.sendKeys(networkName); @@ -84,7 +84,7 @@ describe('Stores custom RPC history', function () { await driver.findElement('.networks-tab__sub-header-text'); const customRpcInputs = await driver.findElements('input[type="text"]'); - const rpcUrlInput = customRpcInputs[1]; + const rpcUrlInput = customRpcInputs[2]; await rpcUrlInput.clear(); await rpcUrlInput.sendKeys(duplicateRpcUrl); @@ -120,8 +120,8 @@ describe('Stores custom RPC history', function () { await driver.findElement('.networks-tab__sub-header-text'); const customRpcInputs = await driver.findElements('input[type="text"]'); - const rpcUrlInput = customRpcInputs[1]; - const chainIdInput = customRpcInputs[2]; + const rpcUrlInput = customRpcInputs[2]; + const chainIdInput = customRpcInputs[3]; await chainIdInput.clear(); await chainIdInput.sendKeys(duplicateChainId); diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js index 8105af35b..4c3ff209c 100644 --- a/ui/components/app/account-menu/account-menu.component.js +++ b/ui/components/app/account-menu/account-menu.component.js @@ -125,7 +125,7 @@ export default class AccountMenu extends Component { marginLeft: '8px', }} > - + ); diff --git a/ui/components/app/tab-bar/index.scss b/ui/components/app/tab-bar/index.scss index 87b898c79..17ce585b7 100644 --- a/ui/components/app/tab-bar/index.scss +++ b/ui/components/app/tab-bar/index.scss @@ -41,7 +41,6 @@ flex-flow: row wrap; align-items: center; position: relative; - z-index: 201; &__title { @include H4; diff --git a/ui/components/ui/search-icon/search-icon.component.js b/ui/components/ui/search-icon/search-icon.component.js index 957c499bf..fd3d78081 100644 --- a/ui/components/ui/search-icon/search-icon.component.js +++ b/ui/components/ui/search-icon/search-icon.component.js @@ -1,13 +1,9 @@ import React from 'react'; +import PropTypes from 'prop-types'; -export default function SearchIcon() { +export default function SearchIcon({ color }) { return ( - + @@ -15,3 +11,10 @@ export default function SearchIcon() { ); } + +SearchIcon.propTypes = { + /** + * Color of the icon should be a valid design system color and is required + */ + color: PropTypes.string.isRequired, +}; diff --git a/ui/components/ui/text-field/text-field.component.js b/ui/components/ui/text-field/text-field.component.js index 44a96ee3f..43ef47914 100644 --- a/ui/components/ui/text-field/text-field.component.js +++ b/ui/components/ui/text-field/text-field.component.js @@ -88,6 +88,7 @@ const getMaterialThemeInputProps = ({ dir, classes: { materialLabel, materialFocused, materialError, materialUnderline }, startAdornment, + endAdornment, min, max, autoComplete, @@ -101,6 +102,7 @@ const getMaterialThemeInputProps = ({ }, InputProps: { startAdornment, + endAdornment, classes: { underline: materialUnderline, }, @@ -122,12 +124,14 @@ const getMaterialWhitePaddedThemeInputProps = ({ materialWhitePaddedUnderline, }, startAdornment, + endAdornment, min, max, autoComplete, }) => ({ InputProps: { startAdornment, + endAdornment, classes: { root: materialWhitePaddedRoot, focused: materialWhitePaddedFocused, @@ -157,6 +161,7 @@ const getBorderedThemeInputProps = ({ }, largeLabel, startAdornment, + endAdornment, min, max, autoComplete, @@ -172,6 +177,7 @@ const getBorderedThemeInputProps = ({ }, InputProps: { startAdornment, + endAdornment, disableUnderline: true, classes: { root: inputRoot, @@ -198,6 +204,7 @@ const TextField = ({ classes, theme, startAdornment, + endAdornment, largeLabel, dir, min, @@ -209,6 +216,7 @@ const TextField = ({ const inputProps = themeToInputProps[theme]({ classes, startAdornment, + endAdornment, largeLabel, dir, min, @@ -257,6 +265,7 @@ TextField.propTypes = { */ theme: PropTypes.oneOf(['bordered', 'material', 'material-white-padded']), startAdornment: PropTypes.element, + endAdornment: PropTypes.element, /** * Show large label */ diff --git a/ui/helpers/utils/settings-search.js b/ui/helpers/utils/settings-search.js new file mode 100644 index 000000000..2a41d5261 --- /dev/null +++ b/ui/helpers/utils/settings-search.js @@ -0,0 +1,408 @@ +/* eslint-disable require-unicode-regexp */ +import { + ALERTS_ROUTE, + ADVANCED_ROUTE, + SECURITY_ROUTE, + GENERAL_ROUTE, + ABOUT_US_ROUTE, + NETWORKS_ROUTE, + CONTACT_LIST_ROUTE, + EXPERIMENTAL_ROUTE, +} from '../constants/routes'; + +const MENU_TAB = 'menu-tab'; +const MENU_SECTION = 'menu-section'; + +function showHideSettings(t, settings) { + if (!process.env.COLLECTIBLES_V1) { + return settings.filter( + (e) => + e.section !== t('enableOpenSeaAPI') && + e.section !== t('useCollectibleDetection'), + ); + } + return settings; +} + +export function getSettingsRoutes(t) { + const settingsRoutesList = [ + { + tab: t('general'), + section: t('currencyConversion'), + description: '', + route: `${GENERAL_ROUTE}#currency-conversion`, + image: 'general-icon.svg', + }, + { + tab: t('general'), + section: t('primaryCurrencySetting'), + description: t('primaryCurrencySettingDescription'), + route: `${GENERAL_ROUTE}#primary-currency`, + image: 'general-icon.svg', + }, + { + tab: t('general'), + section: t('currentLanguage'), + description: '', + route: `${GENERAL_ROUTE}#current-language`, + image: 'general-icon.svg', + }, + { + tab: t('general'), + section: t('accountIdenticon'), + description: '', + route: `${GENERAL_ROUTE}#account-identicon`, + image: 'general-icon.svg', + }, + { + tab: t('general'), + section: t('hideZeroBalanceTokens'), + description: '', + route: `${GENERAL_ROUTE}#zero-balancetokens`, + image: 'general-icon.svg', + }, + { + tab: t('advanced'), + section: t('stateLogs'), + description: t('stateLogsDescription'), + route: `${ADVANCED_ROUTE}#state-logs`, + image: 'advanced-icon.svg', + }, + { + tab: t('advanced'), + section: t('syncWithMobile'), + description: '', + route: `${ADVANCED_ROUTE}#sync-withmobile`, + image: 'advanced-icon.svg', + }, + { + tab: t('advanced'), + section: t('resetAccount'), + description: t('resetAccountDescription'), + route: `${ADVANCED_ROUTE}#reset-account`, + image: 'advanced-icon.svg', + }, + { + tab: t('advanced'), + section: t('showAdvancedGasInline'), + description: t('showAdvancedGasInlineDescription'), + route: `${ADVANCED_ROUTE}#advanced-gascontrols`, + image: 'advanced-icon.svg', + }, + { + tab: t('advanced'), + section: t('showHexData'), + description: t('showHexDataDescription'), + route: `${ADVANCED_ROUTE}#show-hexdata`, + image: 'advanced-icon.svg', + }, + { + tab: t('advanced'), + section: t('showFiatConversionInTestnets'), + description: t('showFiatConversionInTestnetsDescription'), + route: `${ADVANCED_ROUTE}#conversion-testnetworks`, + image: 'advanced-icon.svg', + }, + { + tab: t('advanced'), + section: t('showTestnetNetworks'), + description: t('showTestnetNetworksDescription'), + route: `${ADVANCED_ROUTE}#show-testnets`, + image: 'advanced-icon.svg', + }, + { + tab: t('advanced'), + section: t('nonceField'), + description: t('nonceFieldDescription'), + route: `${ADVANCED_ROUTE}#customize-nonce`, + image: 'advanced-icon.svg', + }, + { + tab: t('advanced'), + section: t('autoLockTimeLimit'), + description: t('autoLockTimeLimitDescription'), + route: `${ADVANCED_ROUTE}#autolock-timer`, + image: 'advanced-icon.svg', + }, + { + tab: t('advanced'), + section: t('syncWithThreeBox'), + description: t('syncWithThreeBoxDescription'), + route: `${ADVANCED_ROUTE}#sync-with3box`, + image: 'advanced-icon.svg', + }, + { + tab: t('advanced'), + section: t('ipfsGateway'), + description: t('ipfsGatewayDescription'), + route: `${ADVANCED_ROUTE}#ipfs-gateway`, + image: 'advanced-icon.svg', + }, + { + tab: t('advanced'), + section: t('preferredLedgerConnectionType'), + description: t('preferredLedgerConnectionType'), + route: `${ADVANCED_ROUTE}#ledger-connection`, + image: 'advanced-icon.svg', + }, + { + tab: t('advanced'), + section: t('dismissReminderField'), + description: t('dismissReminderDescriptionField'), + route: `${ADVANCED_ROUTE}#dimiss-secretrecovery`, + image: 'advanced-icon.svg', + }, + { + tab: t('contacts'), + section: t('contacts'), + description: t('contacts'), + route: CONTACT_LIST_ROUTE, + image: 'contacts-icon.svg', + }, + { + tab: t('securityAndPrivacy'), + section: t('revealSeedWords'), + description: t('revealSeedWords'), + route: `${SECURITY_ROUTE}#reveal-secretrecovery`, + image: 'security-icon.svg', + }, + { + tab: t('securityAndPrivacy'), + section: t('showIncomingTransactions'), + description: t('showIncomingTransactionsDescription'), + route: `${SECURITY_ROUTE}#incoming-transaction`, + image: 'security-icon.svg', + }, + { + tab: t('securityAndPrivacy'), + section: t('usePhishingDetection'), + description: t('usePhishingDetectionDescription'), + route: `${SECURITY_ROUTE}#phishing-detection`, + image: 'security-icon.svg', + }, + { + tab: t('securityAndPrivacy'), + section: t('participateInMetaMetrics'), + description: t('participateInMetaMetricsDescription'), + route: `${SECURITY_ROUTE}#metrametrics`, + image: 'security-icon.svg', + }, + { + tab: t('alerts'), + section: t('alertSettingsUnconnectedAccount'), + description: t('alertSettingsUnconnectedAccount'), + route: `${ALERTS_ROUTE}#unconnected-account`, + image: 'alerts-icon.svg', + }, + { + tab: t('alerts'), + section: t('alertSettingsWeb3ShimUsage'), + description: t('alertSettingsWeb3ShimUsage'), + route: `${ALERTS_ROUTE}#web3-shimusage`, + image: 'alerts-icon.svg', + }, + { + tab: t('networks'), + section: t('mainnet'), + description: t('mainnet'), + route: `${NETWORKS_ROUTE}#networks-mainnet`, + image: 'network-icon.svg', + }, + { + tab: t('networks'), + section: t('ropsten'), + description: t('ropsten'), + route: `${NETWORKS_ROUTE}#networks-ropsten`, + image: 'network-icon.svg', + }, + { + tab: t('networks'), + section: t('rinkeby'), + description: t('rinkeby'), + route: `${NETWORKS_ROUTE}#networks-rinkeby`, + image: 'network-icon.svg', + }, + { + tab: t('networks'), + section: t('goerli'), + description: t('goerli'), + route: `${NETWORKS_ROUTE}#networks-goerli`, + image: 'network-icon.svg', + }, + { + tab: t('networks'), + section: t('kovan'), + description: t('kovan'), + route: `${NETWORKS_ROUTE}#networtks-kovan`, + image: 'network-icon.svg', + }, + { + tab: t('networks'), + section: t('localhost'), + description: t('localhost'), + route: `${NETWORKS_ROUTE}#network-localhost`, + image: 'network-icon.svg', + }, + { + tab: t('experimental'), + section: t('useTokenDetection'), + description: t('useTokenDetectionDescription'), + route: `${EXPERIMENTAL_ROUTE}#token-description`, + image: 'experimental-icon.svg', + }, + { + tab: t('experimental'), + section: t('enableOpenSeaAPI'), + description: t('enableOpenSeaAPIDescription'), + route: `${EXPERIMENTAL_ROUTE}#opensea-api`, + image: 'experimental-icon.svg', + }, + { + tab: t('experimental'), + section: t('useCollectibleDetection'), + description: t('useCollectibleDetectionDescription'), + route: `${EXPERIMENTAL_ROUTE}#autodetect-nfts`, + image: 'experimental-icon.svg', + }, + + { + tab: t('about'), + section: t('metamaskVersion'), + description: t('builtAroundTheWorld'), + route: `${ABOUT_US_ROUTE}#version`, + image: 'info-icon.svg', + }, + { + tab: t('about'), + section: t('links'), + description: '', + route: `${ABOUT_US_ROUTE}#links`, + image: 'info-icon.svg', + }, + { + tab: t('about'), + section: t('privacyMsg'), + description: t('privacyMsg'), + route: `${ABOUT_US_ROUTE}#privacy-policy`, + image: 'info-icon.svg', + }, + { + tab: t('about'), + section: t('terms'), + description: t('terms'), + route: `${ABOUT_US_ROUTE}#terms`, + image: 'info-icon.svg', + }, + + { + tab: t('about'), + section: t('attributions'), + description: t('attributions'), + route: `${ABOUT_US_ROUTE}#attributions`, + image: 'info-icon.svg', + }, + + { + tab: t('about'), + section: t('supportCenter'), + description: t('supportCenter'), + route: `${ABOUT_US_ROUTE}#supportcenter`, + image: 'info-icon.svg', + }, + + { + tab: t('about'), + section: t('visitWebSite'), + description: t('visitWebSite'), + route: `${ABOUT_US_ROUTE}#visitwebsite`, + image: 'info-icon.svg', + }, + + { + tab: t('about'), + section: t('contactUs'), + description: t('contactUs'), + route: `${ABOUT_US_ROUTE}#contactus`, + image: 'info-icon.svg', + }, + ]; + + // TODO: write to json file? + return showHideSettings(t, settingsRoutesList); +} + +function getFilteredSettingsRoutes(t, tabName) { + return getSettingsRoutes(t).filter((s) => s.tab === tabName); +} + +export function getSettingsSectionNumber(t, tabName) { + return getSettingsRoutes(t).filter((s) => s.tab === tabName).length; +} + +export function handleSettingsRefs(t, tabName, settingsRefs) { + const settingsSearchJsonFiltered = getFilteredSettingsRoutes(t, tabName); + const settingsRefsIndex = settingsSearchJsonFiltered.findIndex( + (s) => s.route.substring(1) === window.location.hash.substring(1), + ); + + if ( + settingsRefsIndex !== -1 && + settingsRefs[settingsRefsIndex].current !== null + ) { + settingsRefs[settingsRefsIndex].current.scrollIntoView({ + behavior: 'smooth', + }); + settingsRefs[settingsRefsIndex].current.focus(); + const historySettingsUrl = window.location.hash.split('#')[1]; + window.location.hash = historySettingsUrl; + } +} + +export function handleHooksSettingsRefs(t, tabName, settingsRefs, itemIndex) { + const settingsSearchJsonFiltered = getFilteredSettingsRoutes(t, tabName); + const settingsRefsIndex = settingsSearchJsonFiltered.findIndex( + (s) => s.route.substring(1) === window.location.hash.substring(1), + ); + + if ( + settingsRefsIndex !== -1 && + settingsRefs !== null && + itemIndex === settingsRefsIndex + ) { + settingsRefs.current.scrollIntoView({ + behavior: 'smooth', + }); + settingsRefs.current.focus(); + const historySettingsUrl = window.location.hash.split('#')[1]; + window.location.hash = historySettingsUrl; + } +} + +function colorText(menuElement, regex) { + if (menuElement !== null) { + let elemText = menuElement?.innerHTML; + elemText = elemText.replace('&', '&'); + elemText = elemText.replace( + /(|<\/span>)/gim, + '', + ); + menuElement.innerHTML = elemText.replace( + regex, + '$&', + ); + } +} +export function highlightSearchedText(menuIndex) { + const menuTabElement = document.getElementById(`${MENU_TAB}_${menuIndex}`); + const menuSectionElement = document.getElementById( + `${MENU_SECTION}_${menuIndex}`, + ); + + const searchElem = document.getElementById('search-settings'); + searchElem.addEventListener('input', (event) => { + const searchQuery = event.target.value; + const searchRegex = new RegExp(searchQuery, 'gi'); + colorText(menuTabElement, searchRegex); + colorText(menuSectionElement, searchRegex); + }); +} diff --git a/ui/helpers/utils/settings-search.test.js b/ui/helpers/utils/settings-search.test.js new file mode 100644 index 000000000..552fa3074 --- /dev/null +++ b/ui/helpers/utils/settings-search.test.js @@ -0,0 +1,524 @@ +import React from 'react'; +import { + getSettingsRoutes, + getSettingsSectionNumber, + handleSettingsRefs, +} from './settings-search'; + +const t = (key) => { + switch (key) { + case 'general': + return 'General'; + case 'currencyConversion': + return 'Currency Conversion'; + case 'primaryCurrencySetting': + return 'Primary Currenc'; + case 'primaryCurrencySettingDescription': + return 'Select native to prioritize displaying values in the native currency of the chain (e.g. ETH). Select Fiat to prioritize displaying values in your selected fiat currency.'; + case 'currentLanguage': + return 'Current Language'; + case 'accountIdenticon': + return 'Current Language"'; + case 'hideZeroBalanceTokens': + return 'Hide Tokens Without Balance'; + case 'advanced': + return 'Advanced'; + case 'stateLogs': + return 'State Logs'; + case 'stateLogsDescription': + return 'State logs contain your public account addresses and sent transactions.'; + case 'syncWithMobile': + return 'Sync with mobile'; + case 'resetAccount': + return 'Reset Account'; + case 'resetAccountDescription': + return 'Resetting your account will clear your transaction history. This will not change the balances in your accounts or require you to re-enter your Secret Recovery Phrase.'; + case 'showAdvancedGasInline': + return 'Advanced gas controls'; + case 'showAdvancedGasInlineDescription': + return 'Select this to show gas price and limit controls directly on the send and confirm screens.'; + case 'showHexData': + return 'Show Hex Data'; + case 'showHexDataDescription': + return 'Select this to show the hex data field on the send screen'; + case 'showFiatConversionInTestnets': + return 'Show Conversion on test networks'; + case 'showFiatConversionInTestnetsDescription': + return 'Select this to show fiat conversion on test network'; + case 'showTestnetNetworks': + return 'Show test networks'; + case 'showTestnetNetworksDescription': + return 'Select this to show test networks in network list'; + case 'nonceField': + return 'Customize transaction nonce'; + case 'nonceFieldDescription': + return 'Turn this on to change the nonce (transaction number) on confirmation screens. This is an advanced feature, use cautiously.'; + case 'autoLockTimeLimit': + return 'Auto-Lock Timer (minutes)'; + case 'autoLockTimeLimitDescription': + return 'Set the idle time in minutes before MetaMask will become locked.'; + case 'syncWithThreeBox': + return 'Sync data with 3Box (experimental)'; + case 'syncWithThreeBoxDescription': + return 'Turn on to have your settings backed up with 3Box. This feature is currently experimental; use at your own risk.'; + case 'ipfsGateway': + return 'IPFS Gateway'; + case 'ipfsGatewayDescription': + return 'Enter the URL of the IPFS CID gateway to use for ENS content resolution.'; + case 'preferredLedgerConnectionType': + return 'Preferred Ledger Connection Type'; + case 'dismissReminderField': + return 'Dismiss Secret Recovery Phrase backup reminder'; + case 'dismissReminderDescriptionField': + return 'Turn this on to dismiss the Secret Recovery Phrase backup reminder message. We highly recommend that you back up your Secret Recovery Phrase to avoid loss of funds'; + case 'Contacts': + return 'Contacts'; + case 'securityAndPrivacy': + return 'Security & Privacy'; + case 'revealSeedWords': + return 'Reveal Secret Recovery Phrase'; + case 'showIncomingTransactions': + return 'Show Incoming Transactions'; + case 'showIncomingTransactionsDescription': + return 'Select this to use Etherscan to show incoming transactions in the transactions list'; + case 'usePhishingDetection': + return 'Use Phishing Detection'; + case 'usePhishingDetectionDescription': + return 'Display a warning for phishing domains targeting Ethereum users'; + case 'participateInMetaMetrics': + return 'Participate in MetaMetrics'; + case 'participateInMetaMetricsDescription': + return 'Participate in MetaMetrics to help us make MetaMask better'; + case 'alerts': + return 'Alerts'; + case 'alertSettingsUnconnectedAccount': + return 'Browsing a website with an unconnected account selected'; + case 'alertSettingsWeb3ShimUsage': + return 'When a website tries to use the removed window.web3 API'; + case 'networks': + return 'Networks'; + case 'mainnet': + return 'Ethereum Mainnet'; + case 'ropsten': + return 'Ropsten Test Network'; + case 'rinkeby': + return 'Rinkeby Test Network'; + case 'goerli': + return 'Goerli Test Network'; + case 'kovan': + return 'Kovan Test Network'; + case 'localhost': + return 'Localhost 8545'; + case 'experimental': + return 'Experimental'; + case 'useTokenDetection': + return 'Use Token Detection'; + case 'useTokenDetectionDescription': + return 'We use third-party APIs to detect and display new tokens sent to your wallet. Turn off if you don’t want MetaMask to pull data from those services.'; + case 'enableOpenSeaAPI': + return 'Enable OpenSea API'; + case 'enableOpenSeaAPIDescription': + return 'Use OpenSea API to fetch NFT data.NFT auto - detection relies on OpenSea API, and will not be available when this is turned off.'; + case 'useCollectibleDetection': + return 'Autodetect NFTs'; + case 'useCollectibleDetectionDescription': + return 'Displaying NFTs media & data may expose your IP address to centralized servers. Third-party APIs (like OpenSea) are used to detect NFTs in your wallet. This exposes your account address with those services. Leave this disabled if you don’t want the app to pull data from those those services.'; + case 'about': + return 'About'; + case 'metamaskVersion': + return 'MetaMask Version'; + case 'builtAroundTheWorld': + return 'MetaMask is designed and built around the world.'; + case 'links': + return 'Links'; + case 'privacyMsg': + return 'Privacy Policy'; + case 'terms': + return 'Terms of Use'; + case 'attributions': + return 'Attributions'; + case 'supportCenter': + return 'Visit our Support Center'; + case 'visitWebSite': + return 'Visit our web site'; + case 'contactUs': + return 'Contact us'; + + default: + return ''; + } +}; + +describe('Settings Search Utils', () => { + describe('getSettingsRoutes', () => { + it('should get all settings', () => { + const settingsListExcepted = [ + { + description: '', + image: 'general-icon.svg', + route: '/settings/general#currency-conversion', + section: 'Currency Conversion', + tab: 'General', + }, + { + description: + 'Select native to prioritize displaying values in the native currency of the chain (e.g. ETH). Select Fiat to prioritize displaying values in your selected fiat currency.', + image: 'general-icon.svg', + route: '/settings/general#primary-currency', + section: 'Primary Currenc', + tab: 'General', + }, + { + description: '', + image: 'general-icon.svg', + route: '/settings/general#current-language', + section: 'Current Language', + tab: 'General', + }, + { + description: '', + image: 'general-icon.svg', + route: '/settings/general#account-identicon', + section: 'Current Language"', + tab: 'General', + }, + { + description: '', + image: 'general-icon.svg', + route: '/settings/general#zero-balancetokens', + section: 'Hide Tokens Without Balance', + tab: 'General', + }, + { + description: + 'State logs contain your public account addresses and sent transactions.', + image: 'advanced-icon.svg', + route: '/settings/advanced#state-logs', + section: 'State Logs', + tab: 'Advanced', + }, + { + description: '', + image: 'advanced-icon.svg', + route: '/settings/advanced#sync-withmobile', + section: 'Sync with mobile', + tab: 'Advanced', + }, + { + description: + 'Resetting your account will clear your transaction history. This will not change the balances in your accounts or require you to re-enter your Secret Recovery Phrase.', + image: 'advanced-icon.svg', + route: '/settings/advanced#reset-account', + section: 'Reset Account', + tab: 'Advanced', + }, + { + description: + 'Select this to show gas price and limit controls directly on the send and confirm screens.', + image: 'advanced-icon.svg', + route: '/settings/advanced#advanced-gascontrols', + section: 'Advanced gas controls', + tab: 'Advanced', + }, + { + description: + 'Select this to show the hex data field on the send screen', + image: 'advanced-icon.svg', + route: '/settings/advanced#show-hexdata', + section: 'Show Hex Data', + tab: 'Advanced', + }, + { + description: 'Select this to show fiat conversion on test network', + image: 'advanced-icon.svg', + route: '/settings/advanced#conversion-testnetworks', + section: 'Show Conversion on test networks', + tab: 'Advanced', + }, + { + description: 'Select this to show test networks in network list', + image: 'advanced-icon.svg', + route: '/settings/advanced#show-testnets', + section: 'Show test networks', + tab: 'Advanced', + }, + { + description: + 'Turn this on to change the nonce (transaction number) on confirmation screens. This is an advanced feature, use cautiously.', + image: 'advanced-icon.svg', + route: '/settings/advanced#customize-nonce', + section: 'Customize transaction nonce', + tab: 'Advanced', + }, + { + description: + 'Set the idle time in minutes before MetaMask will become locked.', + image: 'advanced-icon.svg', + route: '/settings/advanced#autolock-timer', + section: 'Auto-Lock Timer (minutes)', + tab: 'Advanced', + }, + { + description: + 'Turn on to have your settings backed up with 3Box. This feature is currently experimental; use at your own risk.', + image: 'advanced-icon.svg', + route: '/settings/advanced#sync-with3box', + section: 'Sync data with 3Box (experimental)', + tab: 'Advanced', + }, + { + description: + 'Enter the URL of the IPFS CID gateway to use for ENS content resolution.', + image: 'advanced-icon.svg', + route: '/settings/advanced#ipfs-gateway', + section: 'IPFS Gateway', + tab: 'Advanced', + }, + { + description: 'Preferred Ledger Connection Type', + image: 'advanced-icon.svg', + route: '/settings/advanced#ledger-connection', + section: 'Preferred Ledger Connection Type', + tab: 'Advanced', + }, + { + description: + 'Turn this on to dismiss the Secret Recovery Phrase backup reminder message. We highly recommend that you back up your Secret Recovery Phrase to avoid loss of funds', + image: 'advanced-icon.svg', + route: '/settings/advanced#dimiss-secretrecovery', + section: 'Dismiss Secret Recovery Phrase backup reminder', + tab: 'Advanced', + }, + { + description: '', + image: 'contacts-icon.svg', + route: '/settings/contact-list', + section: '', + tab: '', + }, + { + description: 'Reveal Secret Recovery Phrase', + image: 'security-icon.svg', + route: '/settings/security#reveal-secretrecovery', + section: 'Reveal Secret Recovery Phrase', + tab: 'Security & Privacy', + }, + { + description: + 'Select this to use Etherscan to show incoming transactions in the transactions list', + image: 'security-icon.svg', + route: '/settings/security#incoming-transaction', + section: 'Show Incoming Transactions', + tab: 'Security & Privacy', + }, + { + description: + 'Display a warning for phishing domains targeting Ethereum users', + image: 'security-icon.svg', + route: '/settings/security#phishing-detection', + section: 'Use Phishing Detection', + tab: 'Security & Privacy', + }, + { + description: + 'Participate in MetaMetrics to help us make MetaMask better', + image: 'security-icon.svg', + route: '/settings/security#metrametrics', + section: 'Participate in MetaMetrics', + tab: 'Security & Privacy', + }, + { + description: + 'Browsing a website with an unconnected account selected', + image: 'alerts-icon.svg', + route: '/settings/alerts#unconnected-account', + section: 'Browsing a website with an unconnected account selected', + tab: 'Alerts', + }, + { + description: + 'When a website tries to use the removed window.web3 API', + image: 'alerts-icon.svg', + route: '/settings/alerts#web3-shimusage', + section: 'When a website tries to use the removed window.web3 API', + tab: 'Alerts', + }, + { + description: 'Ethereum Mainnet', + image: 'network-icon.svg', + route: '/settings/networks#networks-mainnet', + section: 'Ethereum Mainnet', + tab: 'Networks', + }, + { + description: 'Ropsten Test Network', + image: 'network-icon.svg', + route: '/settings/networks#networks-ropsten', + section: 'Ropsten Test Network', + tab: 'Networks', + }, + { + description: 'Rinkeby Test Network', + image: 'network-icon.svg', + route: '/settings/networks#networks-rinkeby', + section: 'Rinkeby Test Network', + tab: 'Networks', + }, + { + description: 'Goerli Test Network', + image: 'network-icon.svg', + route: '/settings/networks#networks-goerli', + section: 'Goerli Test Network', + tab: 'Networks', + }, + { + description: 'Kovan Test Network', + image: 'network-icon.svg', + route: '/settings/networks#networtks-kovan', + section: 'Kovan Test Network', + tab: 'Networks', + }, + { + description: 'Localhost 8545', + image: 'network-icon.svg', + route: '/settings/networks#network-localhost', + section: 'Localhost 8545', + tab: 'Networks', + }, + { + description: + 'We use third-party APIs to detect and display new tokens sent to your wallet. Turn off if you don’t want MetaMask to pull data from those services.', + image: 'experimental-icon.svg', + route: '/settings/experimental#token-description', + section: 'Use Token Detection', + tab: 'Experimental', + }, + { + description: 'MetaMask is designed and built around the world.', + image: 'info-icon.svg', + route: '/settings/about-us#version', + section: 'MetaMask Version', + tab: 'About', + }, + { + description: '', + image: 'info-icon.svg', + route: '/settings/about-us#links', + section: 'Links', + tab: 'About', + }, + { + description: 'Privacy Policy', + image: 'info-icon.svg', + route: '/settings/about-us#privacy-policy', + section: 'Privacy Policy', + tab: 'About', + }, + { + description: 'Terms of Use', + image: 'info-icon.svg', + route: '/settings/about-us#terms', + section: 'Terms of Use', + tab: 'About', + }, + { + description: 'Attributions', + image: 'info-icon.svg', + route: '/settings/about-us#attributions', + section: 'Attributions', + tab: 'About', + }, + { + description: 'Visit our Support Center', + image: 'info-icon.svg', + route: '/settings/about-us#supportcenter', + section: 'Visit our Support Center', + tab: 'About', + }, + { + description: 'Visit our web site', + image: 'info-icon.svg', + route: '/settings/about-us#visitwebsite', + section: 'Visit our web site', + tab: 'About', + }, + { + description: 'Contact us', + image: 'info-icon.svg', + route: '/settings/about-us#contactus', + section: 'Contact us', + tab: 'About', + }, + ]; + expect(getSettingsRoutes(t)).toStrictEqual(settingsListExcepted); + }); + + it('should not get all settings', () => { + const settingsListExcepted = [ + { + description: '', + image: 'general-icon.svg', + route: '/settings/general#currency-conversion', + section: 'Currency Conversion', + tab: 'General', + }, + { + description: 'Contact us', + image: 'info-icon.svg', + route: '/settings/about-us#contactus', + section: 'Contact us', + tab: 'About', + }, + ]; + expect(getSettingsRoutes(t)).not.toStrictEqual(settingsListExcepted); + }); + }); + + describe('getSettingsSectionNumber', () => { + it('should get good general section number', () => { + expect(getSettingsSectionNumber(t, t('general'))).toStrictEqual(5); + }); + + it('should get good advanced section number', () => { + expect(getSettingsSectionNumber(t, t('advanced'))).toStrictEqual(13); + }); + + it('should get good contact section number', () => { + expect(getSettingsSectionNumber(t, t('contacts'))).toStrictEqual(1); + }); + + it('should get good security & privacy section number', () => { + expect( + getSettingsSectionNumber(t, t('securityAndPrivacy')), + ).toStrictEqual(4); + }); + + it('should get good alerts section number', () => { + expect(getSettingsSectionNumber(t, t('alerts'))).toStrictEqual(2); + }); + + it('should get good network section number', () => { + expect(getSettingsSectionNumber(t, t('networks'))).toStrictEqual(6); + }); + + it('should get good experimental section number', () => { + expect(getSettingsSectionNumber(t, t('experimental'))).toStrictEqual(1); + }); + + it('should get good about section number', () => { + expect(getSettingsSectionNumber(t, t('about'))).toStrictEqual(8); + }); + }); + + // Can't be tested without DOM element + describe('handleSettingsRefs', () => { + it('should handle general refs', () => { + const settingsRefs = Array(getSettingsSectionNumber(t, t('general'))) + .fill(undefined) + .map(() => { + return React.createRef(); + }); + expect(handleSettingsRefs(t, t('general'), settingsRefs)).toBeUndefined(); + }); + }); +}); diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.js b/ui/pages/settings/advanced-tab/advanced-tab.component.js index c24ddb868..116effd62 100644 --- a/ui/pages/settings/advanced-tab/advanced-tab.component.js +++ b/ui/pages/settings/advanced-tab/advanced-tab.component.js @@ -12,6 +12,10 @@ import Dialog from '../../../components/ui/dialog'; import { getPlatform } from '../../../../app/scripts/lib/util'; import { PLATFORM_FIREFOX } from '../../../../shared/constants/app'; +import { + getSettingsSectionNumber, + handleSettingsRefs, +} from '../../../helpers/utils/settings-search'; import { LEDGER_TRANSPORT_TYPES, @@ -61,13 +65,22 @@ export default class AdvancedTab extends PureComponent { showLedgerTransportWarning: false, }; - showTestNetworksRef = React.createRef(); + settingsRefs = Array( + getSettingsSectionNumber(this.context.t, this.context.t('advanced')), + ) + .fill(undefined) + .map(() => { + return React.createRef(); + }); + + componentDidUpdate() { + const { t } = this.context; + handleSettingsRefs(t, t('advanced'), this.settingsRefs); + } componentDidMount() { - if (window.location.hash.match(/show-testnets/u)) { - this.showTestNetworksRef.current.scrollIntoView({ behavior: 'smooth' }); - this.showTestNetworksRef.current.focus(); - } + const { t } = this.context; + handleSettingsRefs(t, t('advanced'), this.settingsRefs); } renderMobileSync() { @@ -76,6 +89,7 @@ export default class AdvancedTab extends PureComponent { return (
@@ -106,6 +120,7 @@ export default class AdvancedTab extends PureComponent { return (
@@ -144,6 +159,7 @@ export default class AdvancedTab extends PureComponent { return (
@@ -185,6 +201,7 @@ export default class AdvancedTab extends PureComponent { return (
@@ -214,6 +231,7 @@ export default class AdvancedTab extends PureComponent { return (
@@ -243,7 +261,7 @@ export default class AdvancedTab extends PureComponent { return (
@@ -276,6 +294,7 @@ export default class AdvancedTab extends PureComponent { return (
@@ -307,6 +326,7 @@ export default class AdvancedTab extends PureComponent { return (
@@ -355,6 +375,7 @@ export default class AdvancedTab extends PureComponent { return (
@@ -411,6 +432,7 @@ export default class AdvancedTab extends PureComponent { } return (
@@ -479,7 +501,7 @@ export default class AdvancedTab extends PureComponent { : LEDGER_TRANSPORT_NAMES.U2F; return ( -
+
{t('preferredLedgerConnectionType')}
@@ -578,6 +600,7 @@ export default class AdvancedTab extends PureComponent { return (
@@ -622,6 +645,7 @@ export default class AdvancedTab extends PureComponent { return (
diff --git a/ui/pages/settings/alerts-tab/alerts-tab.js b/ui/pages/settings/alerts-tab/alerts-tab.js index c8d092470..1bbd327e2 100644 --- a/ui/pages/settings/alerts-tab/alerts-tab.js +++ b/ui/pages/settings/alerts-tab/alerts-tab.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; @@ -8,27 +8,38 @@ import ToggleButton from '../../../components/ui/toggle-button'; import { setAlertEnabledness } from '../../../store/actions'; import { getAlertEnabledness } from '../../../ducks/metamask/metamask'; import { useI18nContext } from '../../../hooks/useI18nContext'; +import { handleHooksSettingsRefs } from '../../../helpers/utils/settings-search'; -const AlertSettingsEntry = ({ alertId, description, title }) => { +const AlertSettingsEntry = ({ alertId, description, title, alertIndex }) => { const t = useI18nContext(); + const settingsRefs = useRef(alertIndex); + + useEffect(() => { + handleHooksSettingsRefs(t, t('alerts'), settingsRefs, alertIndex); + }, [settingsRefs, t, alertIndex]); + const isEnabled = useSelector((state) => getAlertEnabledness(state)[alertId]); return ( <> - {title} - - - - setAlertEnabledness(alertId, !isEnabled)} - value={isEnabled} - /> +
+ {title} +
+ + + + setAlertEnabledness(alertId, !isEnabled)} + value={isEnabled} + /> +
+
); }; @@ -37,6 +48,7 @@ AlertSettingsEntry.propTypes = { alertId: PropTypes.string.isRequired, description: PropTypes.string.isRequired, title: PropTypes.string.isRequired, + alertIndex: PropTypes.number.isRequired, }; const AlertsTab = () => { @@ -55,14 +67,17 @@ const AlertsTab = () => { return (
- {Object.entries(alertConfig).map(([alertId, { title, description }]) => ( - - ))} + {Object.entries(alertConfig).map( + ([alertId, { title, description }], index) => ( + + ), + )}
); }; diff --git a/ui/pages/settings/alerts-tab/alerts-tab.scss b/ui/pages/settings/alerts-tab/alerts-tab.scss index de31726bf..f3873b43f 100644 --- a/ui/pages/settings/alerts-tab/alerts-tab.scss +++ b/ui/pages/settings/alerts-tab/alerts-tab.scss @@ -6,28 +6,26 @@ grid-template-columns: 8fr 30px max-content; grid-template-rows: 1fr 1fr; align-items: center; + display: block; } - &__body > * { - border-bottom: 1px solid var(--Grey-100); - padding: 16px 8px; - height: 100%; + &__description-container { + display: flex; } - &__body > :first-child { - padding-left: 32px; - } - - &__body > :nth-child(3n+4) { - padding-left: 32px; - } - - &__body > :nth-child(3n) { - padding-right: 32px; + &__description-container > * { + padding: 0 8px; } &__description { display: flex; align-items: center; } + + &__item { + border-bottom: 1px solid var(--Grey-100); + padding: 16px 32px; + display: flex; + justify-content: space-between; + } } diff --git a/ui/pages/settings/contact-list-tab/contact-list-tab.component.js b/ui/pages/settings/contact-list-tab/contact-list-tab.component.js index 707d4605f..f37f2c962 100644 --- a/ui/pages/settings/contact-list-tab/contact-list-tab.component.js +++ b/ui/pages/settings/contact-list-tab/contact-list-tab.component.js @@ -7,6 +7,10 @@ import { CONTACT_VIEW_ROUTE, } from '../../../helpers/constants/routes'; import Button from '../../../components/ui/button'; +import { + getSettingsSectionNumber, + handleSettingsRefs, +} from '../../../helpers/utils/settings-search'; import EditContact from './edit-contact'; import AddContact from './add-contact'; import ViewContact from './view-contact'; @@ -27,6 +31,24 @@ export default class ContactListTab extends Component { hideAddressBook: PropTypes.bool, }; + settingsRefs = Array( + getSettingsSectionNumber(this.context.t, this.context.t('contacts')), + ) + .fill(undefined) + .map(() => { + return React.createRef(); + }); + + componentDidUpdate() { + const { t } = this.context; + handleSettingsRefs(t, t('contacts'), this.settingsRefs); + } + + componentDidMount() { + const { t } = this.context; + handleSettingsRefs(t, t('contacts'), this.settingsRefs); + } + renderAddresses() { const { addressBook, history, selectedAddress } = this.props; const contacts = addressBook.filter(({ name }) => Boolean(name)); @@ -124,7 +146,11 @@ export default class ContactListTab extends Component { const { hideAddressBook } = this.props; if (!hideAddressBook) { - return
{this.renderAddresses()}
; + return ( +
+ {this.renderAddresses()} +
+ ); } return null; } diff --git a/ui/pages/settings/experimental-tab/experimental-tab.component.js b/ui/pages/settings/experimental-tab/experimental-tab.component.js index 3d2b16fde..6d74ca459 100644 --- a/ui/pages/settings/experimental-tab/experimental-tab.component.js +++ b/ui/pages/settings/experimental-tab/experimental-tab.component.js @@ -1,6 +1,10 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import ToggleButton from '../../../components/ui/toggle-button'; +import { + getSettingsSectionNumber, + handleSettingsRefs, +} from '../../../helpers/utils/settings-search'; export default class ExperimentalTab extends PureComponent { static contextTypes = { @@ -19,12 +23,30 @@ export default class ExperimentalTab extends PureComponent { setEIP1559V2Enabled: PropTypes.func, }; + settingsRefs = Array( + getSettingsSectionNumber(this.context.t, this.context.t('experimental')), + ) + .fill(undefined) + .map(() => { + return React.createRef(); + }); + + componentDidUpdate() { + const { t } = this.context; + handleSettingsRefs(t, t('experimental'), this.settingsRefs); + } + + componentDidMount() { + const { t } = this.context; + handleSettingsRefs(t, t('experimental'), this.settingsRefs); + } + renderTokenDetectionToggle() { const { t } = this.context; const { useTokenDetection, setUseTokenDetection } = this.props; return ( -
+
{t('useTokenDetection')}
@@ -68,7 +90,10 @@ export default class ExperimentalTab extends PureComponent { } = this.props; return ( -
+
{t('useCollectibleDetection')}
@@ -114,7 +139,10 @@ export default class ExperimentalTab extends PureComponent { } = this.props; return ( -
+
{t('enableOpenSeaAPI')}
diff --git a/ui/pages/settings/index.scss b/ui/pages/settings/index.scss index 315a70456..958915e02 100644 --- a/ui/pages/settings/index.scss +++ b/ui/pages/settings/index.scss @@ -13,22 +13,136 @@ flex-flow: column nowrap; &__header { - display: flex; - flex-flow: row nowrap; - padding: 12px 24px; - align-items: center; - flex: 0 0 auto; + padding: 8px 24px 8px 24px; + position: relative; - &__title { - @include H3; + @media screen and (max-width: $break-small) { + background: var(--ui-1); + } - flex: 1 0 auto; + &__title-container { + display: flex; + flex-flow: row nowrap; + align-items: center; + flex: 0 0 auto; + &__close-button { + margin-left: auto; + } + + &__close-button::after { + content: '\00D7'; + font-size: 40px; + color: var(--ui-4); + cursor: pointer; + } + + &__title { + @include H3; + + flex: 1 0 auto; + + @media screen and (max-width: $break-small) { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 250px; + } + } + } + + &__search { @media screen and (max-width: $break-small) { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - max-width: 250px; + position: relative; + } + + @media screen and (min-width: $break-large) { + position: absolute; + right: 57px; + top: 10px; + width: 300px; + } + + @media screen and (min-width: $break-midpoint) { + width: 400px; + } + + &__list { + background: var(--ui-white); + box-sizing: border-box; + box-shadow: 0 0 14px rgba(0, 0, 0, 0.18); + border-radius: 6px; + position: absolute; + width: 100%; + z-index: 10; + + > div { + &:hover { + background: var(--ui-1); + } + } + + &__item { + transition: 200ms ease-in-out; + display: grid; + align-items: center; + padding: 16px; + border-top: 1px solid var(--ui-2); + cursor: pointer; + grid-template-columns: 16px minmax(20px, max-content) 8px auto; + gap: 8px; + + &__icon { + background: --ui-2; + height: 15px; + width: 15px; + margin-right: 16px; + } + + &__request, + &__tab, + &__section, + &__no-matching { + @include H6; + + color: var(--ui-4); + } + + &__tab-multiple-lines { + @media screen and (max-width: $break-small) { + width: 90px; + } + } + + &__section-multiple-lines { + @media screen and (max-width: $break-small) { + width: 170px; + margin-left: 10px; + } + } + + &__caret { + background-image: url('/images/caret-right.svg'); + width: 8px; + height: 10px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + margin: 0 4px; + + [dir='rtl'] & { + transform: rotate(180deg); + } + } + + &__link { + @include H6; + + display: inline; + color: var(--primary-blue); + margin-left: 3px; + } + } } } } @@ -110,17 +224,6 @@ } } - &__close-button { - margin-left: auto; - } - - &__close-button::after { - content: '\00D7'; - font-size: 40px; - color: var(--ui-4); - cursor: pointer; - } - &__content { display: flex; flex-flow: row nowrap; diff --git a/ui/pages/settings/info-tab/info-tab.component.js b/ui/pages/settings/info-tab/info-tab.component.js index 3dd69e4fd..c4de92b31 100644 --- a/ui/pages/settings/info-tab/info-tab.component.js +++ b/ui/pages/settings/info-tab/info-tab.component.js @@ -6,6 +6,10 @@ import { SUPPORT_REQUEST_LINK, } from '../../../helpers/constants/common'; import { isBeta } from '../../../helpers/utils/build-types'; +import { + getSettingsSectionNumber, + handleSettingsRefs, +} from '../../../helpers/utils/settings-search'; export default class InfoTab extends PureComponent { state = { @@ -16,13 +20,33 @@ export default class InfoTab extends PureComponent { t: PropTypes.func, }; + settingsRefs = Array( + getSettingsSectionNumber(this.context.t, this.context.t('about')), + ) + .fill(undefined) + .map(() => { + return React.createRef(); + }); + + componentDidUpdate() { + const { t } = this.context; + handleSettingsRefs(t, t('about'), this.settingsRefs); + } + + componentDidMount() { + const { t } = this.context; + handleSettingsRefs(t, t('about'), this.settingsRefs); + } + renderInfoLinks() { const { t } = this.context; return (
-
{t('links')}
-
+
+ {t('links')} +
+
-
+
-
+
-
+
-
+
-
+