New settings page rebased (#6333)

* New setting tab

* Add InfoTab

* Add Advanced tab

* Add Security Tab

* Finish mobile view

* Make new setting page responsive

* Fix linter

* Fix y scrolling

* Update link in network dropdown

* Fix e2e tests

* Remove duplicate translation key

* Resolve merge conflict

* Only change settings header in popup view.

* Place mobile-sync button in advanced-tab of settings

1 files changed, 12 insertions, 4 deletions

diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js
index 06f67ad95..e25b7edf1 100644
--- a/test/e2e/beta/metamask-beta-ui.spec.js
+++ b/test/e2e/beta/metamask-beta-ui.spec.js
@@ -233,7 +233,11 @@ describe('MetaMask', function () {
       await customRpcButton.click()
       await delay(regularDelayMs)
 
-      const privacyToggle = await findElement(driver, By.css('.settings-page__content-row:nth-of-type(10) .settings-page__content-item-col > div'))
+      const securityTab = await findElement(driver, By.xpath(`//div[contains(text(), 'Security & Privacy')]`))
+      await securityTab.click()
+      await delay(regularDelayMs)
+
+      const privacyToggle = await findElement(driver, By.css('.settings-page__content-row:nth-of-type(1) .settings-page__content-item-col > div'))
       await privacyToggle.click()
       await delay(largeDelayMs * 2)
     })
@@ -472,15 +476,19 @@ describe('MetaMask', function () {
       const settingsButton = await findElement(driver, By.xpath(`//div[contains(text(), 'Settings')]`))
       settingsButton.click()
 
-      await findElement(driver, By.css('.tab-bar'))
+      // await findElement(driver, By.css('.tab-bar'))
+
+      const advancedTab = await findElement(driver, By.xpath(`//div[contains(text(), 'Advanced')]`))
+      await advancedTab.click()
+      await delay(regularDelayMs)
 
-      const showConversionToggle = await findElement(driver, By.css('.settings-page__content-row:nth-of-type(3) .settings-page__content-item-col > div'))
+      const showConversionToggle = await findElement(driver, By.css('.settings-page__content-row:nth-of-type(7) .settings-page__content-item-col > div'))
       await showConversionToggle.click()
 
       const advancedGasTitle = await findElement(driver, By.xpath(`//span[contains(text(), 'Advanced gas controls')]`))
       await driver.executeScript('arguments[0].scrollIntoView(true)', advancedGasTitle)
 
-      const advancedGasToggle = await findElement(driver, By.css('.settings-page__content-row:nth-of-type(12) .settings-page__content-item-col > div'))
+      const advancedGasToggle = await findElement(driver, By.css('.settings-page__content-row:nth-of-type(5) .settings-page__content-item-col > div'))
       await advancedGasToggle.click()
       windowHandles = await driver.getAllWindowHandles()
       extension = windowHandles[0]