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, 60 insertions, 8 deletions

diff --git a/ui/app/css/itcss/components/tab-bar.scss b/ui/app/css/itcss/components/tab-bar.scss
index 4f3077974..bb9f8f261 100644
--- a/ui/app/css/itcss/components/tab-bar.scss
+++ b/ui/app/css/itcss/components/tab-bar.scss
@@ -1,21 +1,73 @@
 .tab-bar {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: flex-start;
-  align-items: flex-end;
 }
 
 .tab-bar__tab {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-start;
   min-width: 0;
   flex: 0 0 auto;
-  padding: 15px 25px;
-  border-bottom: 1px solid $alto;
   box-sizing: border-box;
-  font-size: 18px;
-}
+  font-size: 16px;
+  padding: 16px 24px;
+  opacity: .5;
+  transition: opacity 200ms ease-in-out;
+
+  @media screen and (min-width: 576px) {
+    &:hover {
+      opacity: .4;
+    }
+
+    &:active {
+      opacity: .6;
+    }
+  }
+
+  @media screen and (max-width: 575px) {
+    font-size: 18px;
+    padding: 24px;
+    border-bottom: 1px solid $alto;
+    opacity: 1;
+  }
+
+  &__content {
+    flex: 1 1 auto;
+    width: 0;
+
+    &__description {
+      display: none;
+
+      @media screen and (max-width: 575px) {
+        display: block;
+        font-size: 14px;
+        font-weight: 300;
+        margin-top: 8px;
+        min-height: 14px;
+      }
+    }
+  }
+
+  &__caret {
+    display: none;
+
+    @media screen and (max-width: 575px) {
+      display: block;
+      background-image: url('/images/caret-right.svg');
+      width: 36px;
+      height: 36px;
+      opacity: .5;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+  }
 
-.tab-bar__tab--active {
-  border-color: $black;
+  &--active {
+    opacity: 1 !important;
+  }
 }
 
 .tab-bar__grow-tab {