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

2 files changed, 45 insertions, 3 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index cb785023e..ca6761183 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -44,6 +44,9 @@
   "providerRequestInfo": {
     "message": "This site is requesting access to view your current account address. Always make sure you trust the sites you interact with."
   },
+  "aboutUs": {
+    "message": "About Us"
+  },
   "accept": {
     "message": "Accept"
   },
@@ -74,6 +77,12 @@
   "address": {
     "message": "Address"
   },
+  "advanced": {
+    "message": "Advanced"
+  },
+  "advancedSettingsDescription": {
+    "message": "Access developer features, download State Logs, Reset Account, setup testnets and custom RPC."
+  },
   "advancedOptions": {
     "message": "Advanced Options"
   },
@@ -92,9 +101,6 @@
   "addAcquiredTokens": {
     "message": "Add the tokens you've acquired using MetaMask"
   },
-  "advanced": {
-    "message": "Advanced"
-  },
   "agreeTermsOfService": {
     "message": "I agree to the Terms of Service"
   },
@@ -236,6 +242,9 @@
   "chromeRequiredForHardwareWallets": {
     "message": "You need to use MetaMask on Google Chrome in order to connect to your Hardware Wallet."
   },
+  "company": {
+    "message": "Company"
+  },
   "confirm": {
     "message": "Confirm"
   },
@@ -619,6 +628,12 @@
   "gasPriceRequired": {
     "message": "Gas Price Required"
   },
+  "general": {
+    "message": "General"
+  },
+  "generalSettingsDescription": {
+    "message": "Currency conversion, primary currency, language, blockies identicon"
+  },
   "generatingTransaction": {
     "message": "Generating transaction"
   },
@@ -790,6 +805,9 @@
   "ledgerAccountRestriction": {
     "message": "You need to make use your last account before you can add a new one."
   },
+  "legal": {
+    "message": "Legal"
+  },
   "lessThanMax": {
     "message": "must be less than or equal to $1.",
     "description": "helper for inputting hex as decimal input"
@@ -1240,6 +1258,12 @@
   "secretPhrase": {
     "message": "Enter your secret twelve word phrase here to restore your vault."
   },
+  "securityAndPrivacy": {
+    "message": "Security & Privacy"
+  },
+  "securitySettingsDescription": {
+    "message": "Privacy settings and wallet seed phrase"
+  },
   "secondsShorthand": {
     "message": "Sec"
   },
diff --git a/app/images/caret-left-black.svg b/app/images/caret-left-black.svg
new file mode 100644
index 000000000..872135ece
--- /dev/null
+++ b/app/images/caret-left-black.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="9px" height="15px" viewBox="0 0 9 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- Generator: sketchtool 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+  <title>8439120D-5704-4273-B416-FEE134322584</title>
+  <desc>Created with sketchtool.</desc>
+  <defs></defs>
+  <g id="Action-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Approve---insufficient-amount" transform="translate(-75.000000, -69.000000)" stroke="#000000" stroke-width="2">
+      <g id="Group-7" transform="translate(53.000000, 51.000000)">
+        <g id="cancel" transform="translate(24.000000, 14.000000)">
+          <g id="Group">
+            <polyline id="Path-8" points="6.1263881 18.0633906 0 11.6306831 6.31493631 5"></polyline>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>