m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 11:22:43 +02:00
Code

[FIX #12760] Highlighting on search (#13730)

Browse Source
This commit is contained in:
amerkadicE 2022-02-24 20:06:30 +01:00 committed by GitHub
parent 028850899e
commit 3ed08a09e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 138 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
ui/helpers/utils/settings-search.js
View File

@ -10,9 +10,6 @@ import {
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(
@ -32,6 +29,7 @@ export function getSettingsRoutes(t) {
description: '',
route: `${GENERAL_ROUTE}#currency-conversion`,
image: 'general-icon.svg',
id: 1,
},
{
tab: t('general'),
@ -39,6 +37,7 @@ export function getSettingsRoutes(t) {
description: t('primaryCurrencySettingDescription'),
route: `${GENERAL_ROUTE}#primary-currency`,
image: 'general-icon.svg',
id: 2,
},
{
tab: t('general'),
@ -46,6 +45,7 @@ export function getSettingsRoutes(t) {
description: '',
route: `${GENERAL_ROUTE}#current-language`,
image: 'general-icon.svg',
id: 3,
},
{
tab: t('general'),
@ -53,6 +53,7 @@ export function getSettingsRoutes(t) {
description: '',
route: `${GENERAL_ROUTE}#account-identicon`,
image: 'general-icon.svg',
id: 4,
},
{
tab: t('general'),
@ -60,6 +61,7 @@ export function getSettingsRoutes(t) {
description: '',
route: `${GENERAL_ROUTE}#zero-balancetokens`,
image: 'general-icon.svg',
id: 5,
},
{
tab: t('advanced'),
@ -67,6 +69,7 @@ export function getSettingsRoutes(t) {
description: t('stateLogsDescription'),
route: `${ADVANCED_ROUTE}#state-logs`,
image: 'advanced-icon.svg',
id: 6,
},
{
tab: t('advanced'),
@ -74,6 +77,7 @@ export function getSettingsRoutes(t) {
description: '',
route: `${ADVANCED_ROUTE}#sync-withmobile`,
image: 'advanced-icon.svg',
id: 7,
},
{
tab: t('advanced'),
@ -81,6 +85,7 @@ export function getSettingsRoutes(t) {
description: t('resetAccountDescription'),
route: `${ADVANCED_ROUTE}#reset-account`,
image: 'advanced-icon.svg',
id: 8,
},
{
tab: t('advanced'),
@ -88,6 +93,7 @@ export function getSettingsRoutes(t) {
description: t('showAdvancedGasInlineDescription'),
route: `${ADVANCED_ROUTE}#advanced-gascontrols`,
image: 'advanced-icon.svg',
id: 9,
},
{
tab: t('advanced'),
@ -95,6 +101,7 @@ export function getSettingsRoutes(t) {
description: t('showHexDataDescription'),
route: `${ADVANCED_ROUTE}#show-hexdata`,
image: 'advanced-icon.svg',
id: 10,
},
{
tab: t('advanced'),
@ -102,6 +109,7 @@ export function getSettingsRoutes(t) {
description: t('showFiatConversionInTestnetsDescription'),
route: `${ADVANCED_ROUTE}#conversion-testnetworks`,
image: 'advanced-icon.svg',
id: 11,
},
{
tab: t('advanced'),
@ -109,6 +117,7 @@ export function getSettingsRoutes(t) {
description: t('showTestnetNetworksDescription'),
route: `${ADVANCED_ROUTE}#show-testnets`,
image: 'advanced-icon.svg',
id: 12,
},
{
tab: t('advanced'),
@ -116,6 +125,7 @@ export function getSettingsRoutes(t) {
description: t('nonceFieldDescription'),
route: `${ADVANCED_ROUTE}#customize-nonce`,
image: 'advanced-icon.svg',
id: 13,
},
{
tab: t('advanced'),
@ -123,6 +133,7 @@ export function getSettingsRoutes(t) {
description: t('autoLockTimeLimitDescription'),
route: `${ADVANCED_ROUTE}#autolock-timer`,
image: 'advanced-icon.svg',
id: 14,
},
{
tab: t('advanced'),
@ -130,6 +141,7 @@ export function getSettingsRoutes(t) {
description: t('syncWithThreeBoxDescription'),
route: `${ADVANCED_ROUTE}#sync-with3box`,
image: 'advanced-icon.svg',
id: 15,
},
{
tab: t('advanced'),
@ -137,6 +149,7 @@ export function getSettingsRoutes(t) {
description: t('ipfsGatewayDescription'),
route: `${ADVANCED_ROUTE}#ipfs-gateway`,
image: 'advanced-icon.svg',
id: 16,
},
{
tab: t('advanced'),
@ -144,6 +157,7 @@ export function getSettingsRoutes(t) {
description: t('preferredLedgerConnectionType'),
route: `${ADVANCED_ROUTE}#ledger-connection`,
image: 'advanced-icon.svg',
id: 17,
},
{
tab: t('advanced'),
@ -151,6 +165,7 @@ export function getSettingsRoutes(t) {
description: t('dismissReminderDescriptionField'),
route: `${ADVANCED_ROUTE}#dimiss-secretrecovery`,
image: 'advanced-icon.svg',
id: 18,
},
{
tab: t('contacts'),
@ -158,6 +173,7 @@ export function getSettingsRoutes(t) {
description: t('contacts'),
route: CONTACT_LIST_ROUTE,
image: 'contacts-icon.svg',
id: 19,
},
{
tab: t('securityAndPrivacy'),
@ -165,6 +181,7 @@ export function getSettingsRoutes(t) {
description: t('revealSeedWords'),
route: `${SECURITY_ROUTE}#reveal-secretrecovery`,
image: 'security-icon.svg',
id: 20,
},
{
tab: t('securityAndPrivacy'),
@ -172,6 +189,7 @@ export function getSettingsRoutes(t) {
description: t('showIncomingTransactionsDescription'),
route: `${SECURITY_ROUTE}#incoming-transaction`,
image: 'security-icon.svg',
id: 21,
},
{
tab: t('securityAndPrivacy'),
@ -179,6 +197,7 @@ export function getSettingsRoutes(t) {
description: t('usePhishingDetectionDescription'),
route: `${SECURITY_ROUTE}#phishing-detection`,
image: 'security-icon.svg',
id: 22,
},
{
tab: t('securityAndPrivacy'),
@ -186,6 +205,7 @@ export function getSettingsRoutes(t) {
description: t('participateInMetaMetricsDescription'),
route: `${SECURITY_ROUTE}#metrametrics`,
image: 'security-icon.svg',
id: 23,
},
{
tab: t('alerts'),
@ -193,6 +213,7 @@ export function getSettingsRoutes(t) {
description: t('alertSettingsUnconnectedAccount'),
route: `${ALERTS_ROUTE}#unconnected-account`,
image: 'alerts-icon.svg',
id: 24,
},
{
tab: t('alerts'),
@ -200,6 +221,7 @@ export function getSettingsRoutes(t) {
description: t('alertSettingsWeb3ShimUsage'),
route: `${ALERTS_ROUTE}#web3-shimusage`,
image: 'alerts-icon.svg',
id: 25,
},
{
tab: t('networks'),
@ -207,6 +229,7 @@ export function getSettingsRoutes(t) {
description: t('mainnet'),
route: `${NETWORKS_ROUTE}#networks-mainnet`,
image: 'network-icon.svg',
id: 26,
},
{
tab: t('networks'),
@ -214,6 +237,7 @@ export function getSettingsRoutes(t) {
description: t('ropsten'),
route: `${NETWORKS_ROUTE}#networks-ropsten`,
image: 'network-icon.svg',
id: 27,
},
{
tab: t('networks'),
@ -221,6 +245,7 @@ export function getSettingsRoutes(t) {
description: t('rinkeby'),
route: `${NETWORKS_ROUTE}#networks-rinkeby`,
image: 'network-icon.svg',
id: 28,
},
{
tab: t('networks'),
@ -228,6 +253,7 @@ export function getSettingsRoutes(t) {
description: t('goerli'),
route: `${NETWORKS_ROUTE}#networks-goerli`,
image: 'network-icon.svg',
id: 29,
},
{
tab: t('networks'),
@ -235,6 +261,7 @@ export function getSettingsRoutes(t) {
description: t('kovan'),
route: `${NETWORKS_ROUTE}#networtks-kovan`,
image: 'network-icon.svg',
id: 30,
},
{
tab: t('networks'),
@ -242,6 +269,7 @@ export function getSettingsRoutes(t) {
description: t('localhost'),
route: `${NETWORKS_ROUTE}#network-localhost`,
image: 'network-icon.svg',
id: 31,
},
{
tab: t('experimental'),
@ -249,6 +277,7 @@ export function getSettingsRoutes(t) {
description: t('useTokenDetectionDescription'),
route: `${EXPERIMENTAL_ROUTE}#token-description`,
image: 'experimental-icon.svg',
id: 32,
},
{
tab: t('experimental'),
@ -256,6 +285,7 @@ export function getSettingsRoutes(t) {
description: t('enableOpenSeaAPIDescription'),
route: `${EXPERIMENTAL_ROUTE}#opensea-api`,
image: 'experimental-icon.svg',
id: 33,
},
{
tab: t('experimental'),
@ -263,6 +293,7 @@ export function getSettingsRoutes(t) {
description: t('useCollectibleDetectionDescription'),
route: `${EXPERIMENTAL_ROUTE}#autodetect-nfts`,
image: 'experimental-icon.svg',
id: 34,
},
{
@ -271,6 +302,7 @@ export function getSettingsRoutes(t) {
description: t('builtAroundTheWorld'),
route: `${ABOUT_US_ROUTE}#version`,
image: 'info-icon.svg',
id: 35,
},
{
tab: t('about'),
@ -278,6 +310,7 @@ export function getSettingsRoutes(t) {
description: '',
route: `${ABOUT_US_ROUTE}#links`,
image: 'info-icon.svg',
id: 36,
},
{
tab: t('about'),
@ -285,6 +318,7 @@ export function getSettingsRoutes(t) {
description: t('privacyMsg'),
route: `${ABOUT_US_ROUTE}#privacy-policy`,
image: 'info-icon.svg',
id: 37,
},
{
tab: t('about'),
@ -292,6 +326,7 @@ export function getSettingsRoutes(t) {
description: t('terms'),
route: `${ABOUT_US_ROUTE}#terms`,
image: 'info-icon.svg',
id: 38,
},
{
@ -300,6 +335,7 @@ export function getSettingsRoutes(t) {
description: t('attributions'),
route: `${ABOUT_US_ROUTE}#attributions`,
image: 'info-icon.svg',
id: 39,
},
{
@ -308,6 +344,7 @@ export function getSettingsRoutes(t) {
description: t('supportCenter'),
route: `${ABOUT_US_ROUTE}#supportcenter`,
image: 'info-icon.svg',
id: 40,
},
{
@ -316,6 +353,7 @@ export function getSettingsRoutes(t) {
description: t('visitWebSite'),
route: `${ABOUT_US_ROUTE}#visitwebsite`,
image: 'info-icon.svg',
id: 41,
},
{
@ -324,6 +362,7 @@ export function getSettingsRoutes(t) {
description: t('contactUs'),
route: `${ABOUT_US_ROUTE}#contactus`,
image: 'info-icon.svg',
id: 42,
},
];
@ -392,16 +431,21 @@ function colorText(menuElement, regex) {
);
}
}
export function highlightSearchedText(menuIndex) {
const menuTabElement = document.getElementById(`${MENU_TAB}_${menuIndex}`);
const menuSectionElement = document.getElementById(
`${MENU_SECTION}_${menuIndex}`,
export function highlightSearchedText() {
const searchElem = document.getElementById('search-settings');
const searchRegex = new RegExp(searchElem.value, 'gi');
const results = document.querySelectorAll(
'.settings-page__header__search__list__item',
);
const searchElem = document.getElementById('search-settings');
searchElem.addEventListener('input', (event) => {
const searchQuery = event.target.value;
const searchRegex = new RegExp(searchQuery, 'gi');
[...results].forEach((element) => {
const menuTabElement = element.querySelector(
'.settings-page__header__search__list__item__tab',
);
const menuSectionElement = element.querySelector(
'.settings-page__header__search__list__item__section',
);
colorText(menuTabElement, searchRegex);
colorText(menuSectionElement, searchRegex);
});

40
ui/helpers/utils/settings-search.test.js
View File

@ -155,6 +155,7 @@ describe('Settings Search Utils', () => {
const settingsListExcepted = [
{
description: '',
id: 1,
image: 'general-icon.svg',
route: '/settings/general#currency-conversion',
section: 'Currency Conversion',
@ -163,6 +164,7 @@ describe('Settings Search Utils', () => {
{
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.',
id: 2,
image: 'general-icon.svg',
route: '/settings/general#primary-currency',
section: 'Primary Currenc',
@ -170,6 +172,7 @@ describe('Settings Search Utils', () => {
},
{
description: '',
id: 3,
image: 'general-icon.svg',
route: '/settings/general#current-language',
section: 'Current Language',
@ -177,6 +180,7 @@ describe('Settings Search Utils', () => {
},
{
description: '',
id: 4,
image: 'general-icon.svg',
route: '/settings/general#account-identicon',
section: 'Current Language"',
@ -184,6 +188,7 @@ describe('Settings Search Utils', () => {
},
{
description: '',
id: 5,
image: 'general-icon.svg',
route: '/settings/general#zero-balancetokens',
section: 'Hide Tokens Without Balance',
@ -192,6 +197,7 @@ describe('Settings Search Utils', () => {
{
description:
'State logs contain your public account addresses and sent transactions.',
id: 6,
image: 'advanced-icon.svg',
route: '/settings/advanced#state-logs',
section: 'State Logs',
@ -199,6 +205,7 @@ describe('Settings Search Utils', () => {
},
{
description: '',
id: 7,
image: 'advanced-icon.svg',
route: '/settings/advanced#sync-withmobile',
section: 'Sync with mobile',
@ -207,6 +214,7 @@ describe('Settings Search Utils', () => {
{
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.',
id: 8,
image: 'advanced-icon.svg',
route: '/settings/advanced#reset-account',
section: 'Reset Account',
@ -215,6 +223,7 @@ describe('Settings Search Utils', () => {
{
description:
'Select this to show gas price and limit controls directly on the send and confirm screens.',
id: 9,
image: 'advanced-icon.svg',
route: '/settings/advanced#advanced-gascontrols',
section: 'Advanced gas controls',
@ -223,6 +232,7 @@ describe('Settings Search Utils', () => {
{
description:
'Select this to show the hex data field on the send screen',
id: 10,
image: 'advanced-icon.svg',
route: '/settings/advanced#show-hexdata',
section: 'Show Hex Data',
@ -230,6 +240,7 @@ describe('Settings Search Utils', () => {
},
{
description: 'Select this to show fiat conversion on test network',
id: 11,
image: 'advanced-icon.svg',
route: '/settings/advanced#conversion-testnetworks',
section: 'Show Conversion on test networks',
@ -237,6 +248,7 @@ describe('Settings Search Utils', () => {
},
{
description: 'Select this to show test networks in network list',
id: 12,
image: 'advanced-icon.svg',
route: '/settings/advanced#show-testnets',
section: 'Show test networks',
@ -245,6 +257,7 @@ describe('Settings Search Utils', () => {
{
description:
'Turn this on to change the nonce (transaction number) on confirmation screens. This is an advanced feature, use cautiously.',
id: 13,
image: 'advanced-icon.svg',
route: '/settings/advanced#customize-nonce',
section: 'Customize transaction nonce',
@ -253,6 +266,7 @@ describe('Settings Search Utils', () => {
{
description:
'Set the idle time in minutes before MetaMask will become locked.',
id: 14,
image: 'advanced-icon.svg',
route: '/settings/advanced#autolock-timer',
section: 'Auto-Lock Timer (minutes)',
@ -261,6 +275,7 @@ describe('Settings Search Utils', () => {
{
description:
'Turn on to have your settings backed up with 3Box. This feature is currently experimental; use at your own risk.',
id: 15,
image: 'advanced-icon.svg',
route: '/settings/advanced#sync-with3box',
section: 'Sync data with 3Box (experimental)',
@ -269,6 +284,7 @@ describe('Settings Search Utils', () => {
{
description:
'Enter the URL of the IPFS CID gateway to use for ENS content resolution.',
id: 16,
image: 'advanced-icon.svg',
route: '/settings/advanced#ipfs-gateway',
section: 'IPFS Gateway',
@ -276,6 +292,7 @@ describe('Settings Search Utils', () => {
},
{
description: 'Preferred Ledger Connection Type',
id: 17,
image: 'advanced-icon.svg',
route: '/settings/advanced#ledger-connection',
section: 'Preferred Ledger Connection Type',
@ -284,6 +301,7 @@ describe('Settings Search Utils', () => {
{
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',
id: 18,
image: 'advanced-icon.svg',
route: '/settings/advanced#dimiss-secretrecovery',
section: 'Dismiss Secret Recovery Phrase backup reminder',
@ -291,6 +309,7 @@ describe('Settings Search Utils', () => {
},
{
description: '',
id: 19,
image: 'contacts-icon.svg',
route: '/settings/contact-list',
section: '',
@ -298,6 +317,7 @@ describe('Settings Search Utils', () => {
},
{
description: 'Reveal Secret Recovery Phrase',
id: 20,
image: 'security-icon.svg',
route: '/settings/security#reveal-secretrecovery',
section: 'Reveal Secret Recovery Phrase',
@ -306,6 +326,7 @@ describe('Settings Search Utils', () => {
{
description:
'Select this to use Etherscan to show incoming transactions in the transactions list',
id: 21,
image: 'security-icon.svg',
route: '/settings/security#incoming-transaction',
section: 'Show Incoming Transactions',
@ -314,6 +335,7 @@ describe('Settings Search Utils', () => {
{
description:
'Display a warning for phishing domains targeting Ethereum users',
id: 22,
image: 'security-icon.svg',
route: '/settings/security#phishing-detection',
section: 'Use Phishing Detection',
@ -322,6 +344,7 @@ describe('Settings Search Utils', () => {
{
description:
'Participate in MetaMetrics to help us make MetaMask better',
id: 23,
image: 'security-icon.svg',
route: '/settings/security#metrametrics',
section: 'Participate in MetaMetrics',
@ -330,6 +353,7 @@ describe('Settings Search Utils', () => {
{
description:
'Browsing a website with an unconnected account selected',
id: 24,
image: 'alerts-icon.svg',
route: '/settings/alerts#unconnected-account',
section: 'Browsing a website with an unconnected account selected',
@ -338,6 +362,7 @@ describe('Settings Search Utils', () => {
{
description:
'When a website tries to use the removed window.web3 API',
id: 25,
image: 'alerts-icon.svg',
route: '/settings/alerts#web3-shimusage',
section: 'When a website tries to use the removed window.web3 API',
@ -345,6 +370,7 @@ describe('Settings Search Utils', () => {
},
{
description: 'Ethereum Mainnet',
id: 26,
image: 'network-icon.svg',
route: '/settings/networks#networks-mainnet',
section: 'Ethereum Mainnet',
@ -352,6 +378,7 @@ describe('Settings Search Utils', () => {
},
{
description: 'Ropsten Test Network',
id: 27,
image: 'network-icon.svg',
route: '/settings/networks#networks-ropsten',
section: 'Ropsten Test Network',
@ -359,6 +386,7 @@ describe('Settings Search Utils', () => {
},
{
description: 'Rinkeby Test Network',
id: 28,
image: 'network-icon.svg',
route: '/settings/networks#networks-rinkeby',
section: 'Rinkeby Test Network',
@ -366,6 +394,7 @@ describe('Settings Search Utils', () => {
},
{
description: 'Goerli Test Network',
id: 29,
image: 'network-icon.svg',
route: '/settings/networks#networks-goerli',
section: 'Goerli Test Network',
@ -373,6 +402,7 @@ describe('Settings Search Utils', () => {
},
{
description: 'Kovan Test Network',
id: 30,
image: 'network-icon.svg',
route: '/settings/networks#networtks-kovan',
section: 'Kovan Test Network',
@ -380,6 +410,7 @@ describe('Settings Search Utils', () => {
},
{
description: 'Localhost 8545',
id: 31,
image: 'network-icon.svg',
route: '/settings/networks#network-localhost',
section: 'Localhost 8545',
@ -388,6 +419,7 @@ describe('Settings Search Utils', () => {
{
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.',
id: 32,
image: 'experimental-icon.svg',
route: '/settings/experimental#token-description',
section: 'Use Token Detection',
@ -395,6 +427,7 @@ describe('Settings Search Utils', () => {
},
{
description: 'MetaMask is designed and built around the world.',
id: 35,
image: 'info-icon.svg',
route: '/settings/about-us#version',
section: 'MetaMask Version',
@ -402,6 +435,7 @@ describe('Settings Search Utils', () => {
},
{
description: '',
id: 36,
image: 'info-icon.svg',
route: '/settings/about-us#links',
section: 'Links',
@ -409,6 +443,7 @@ describe('Settings Search Utils', () => {
},
{
description: 'Privacy Policy',
id: 37,
image: 'info-icon.svg',
route: '/settings/about-us#privacy-policy',
section: 'Privacy Policy',
@ -416,6 +451,7 @@ describe('Settings Search Utils', () => {
},
{
description: 'Terms of Use',
id: 38,
image: 'info-icon.svg',
route: '/settings/about-us#terms',
section: 'Terms of Use',
@ -423,6 +459,7 @@ describe('Settings Search Utils', () => {
},
{
description: 'Attributions',
id: 39,
image: 'info-icon.svg',
route: '/settings/about-us#attributions',
section: 'Attributions',
@ -430,6 +467,7 @@ describe('Settings Search Utils', () => {
},
{
description: 'Visit our Support Center',
id: 40,
image: 'info-icon.svg',
route: '/settings/about-us#supportcenter',
section: 'Visit our Support Center',
@ -437,6 +475,7 @@ describe('Settings Search Utils', () => {
},
{
description: 'Visit our web site',
id: 41,
image: 'info-icon.svg',
route: '/settings/about-us#visitwebsite',
section: 'Visit our web site',
@ -444,6 +483,7 @@ describe('Settings Search Utils', () => {
},
{
description: 'Contact us',
id: 42,
image: 'info-icon.svg',
route: '/settings/about-us#contactus',
section: 'Contact us',

93
ui/pages/settings/settings-search-list/settings-search-list.js
View File

@ -7,63 +7,54 @@ import { I18nContext } from '../../../contexts/i18n';
export default function SettingsSearchList({ results, onClickSetting }) {
const t = useContext(I18nContext);
useEffect(() => {
results.forEach((_, i) => {
highlightSearchedText(i);
});
}, [results]);
useEffect(highlightSearchedText, [results]);
return (
<div className="settings-page__header__search__list">
{Array(5)
.fill(undefined)
.map((_, i) => {
const { image, tab, section } = results[i] || {};
{results.slice(0, 5).map((result) => {
const { image, tab, section, id } = result;
return (
Boolean(image || tab || section) && (
<div key={`settings_${id}`}>
<div
className="settings-page__header__search__list__item"
onClick={() => onClickSetting(result)}
>
<img
className="settings-page__header__search__list__item__icon"
src={`./images/${image}`}
/>
return (
Boolean(image || tab || section) && (
<div key={`settings_${i}`}>
<div
key={`res_${i}`}
className="settings-page__header__search__list__item"
onClick={() => onClickSetting(results[i])}
<span
id={`menu-tab_${id}`}
className={classnames(
'settings-page__header__search__list__item__tab',
{
'settings-page__header__search__list__item__tab-multiple-lines':
tab === t('securityAndPrivacy'),
},
)}
>
<img
className="settings-page__header__search__list__item__icon"
src={`./images/${image}`}
/>
<span
id={`menu-tab_${i}`}
className={classnames(
'settings-page__header__search__list__item__tab',
{
'settings-page__header__search__list__item__tab-multiple-lines':
tab === t('securityAndPrivacy'),
},
)}
>
{tab}
</span>
<div className="settings-page__header__search__list__item__caret" />
<span
id={`menu-section_${i}`}
className={classnames(
'settings-page__header__search__list__item__section',
{
'settings-page__header__search__list__item__section-multiple-lines':
tab === t('securityAndPrivacy') ||
tab === t('alerts'),
},
)}
>
{section}
</span>
</div>
{tab}
</span>
<div className="settings-page__header__search__list__item__caret" />
<span
id={`menu-section_${id}`}
className={classnames(
'settings-page__header__search__list__item__section',
{
'settings-page__header__search__list__item__section-multiple-lines':
tab === t('securityAndPrivacy') || tab === t('alerts'),
},
)}
>
{section}
</span>
</div>
)
);
})}
</div>
)
);
})}
{results.length === 0 && (
<div
className="settings-page__header__search__list__item"

2
ui/pages/settings/settings.component.js
View File

@ -144,7 +144,7 @@ class SettingsPage extends PureComponent {
}}
settingsRoutesList={getSettingsRoutes(t)}
/>
{isSearchList && searchText.length >= 2 && (
{isSearchList && searchText.length >= 3 && (
<SettingsSearchList
key=""
results={searchResults}