Refactor tab styles to minimize tab component styles (#8209)

* Refactor tab styles to minimize tab component styles

The tab component styles were not applicable to all tab instances, so
they were being overridden in a few places. Instead the tab styles have
been reduced to a minimal set that should be applicable in most cases.

There are a few functional changes here as well, meant to undo
changes made accidentally in #8132. Before that PR the page container
was overriding the tab styles altogether, but after that PR they were
combined with the base tab styles instead.

* Remove background color

This was previously being overridden by the page container styles, and
it matches the inherited background color already in the one other case
(the confirm page for token interactions)

ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js

@@ -39,10 +39,10 @@ export default class ConfirmPageContainerContent extends Component {
 
     return (
       <Tabs>
-        <Tab name="Details">
+        <Tab className="confirm-page-container-content__tab" name="Details">
           { detailsComponent }
         </Tab>
-        <Tab name="Data">
+        <Tab className="confirm-page-container-content__tab" name="Data">
           { dataComponent }
         </Tab>
       </Tabs>

ui/app/components/app/confirm-page-container/confirm-page-container-content/index.scss

@@ -66,4 +66,11 @@
     color: $black;
     padding-left: 5px;
   }
+
+  &__tab {
+    font-size: .75rem;
+    color: #8C8E94;
+    text-transform: uppercase;
+    margin: 0 8px;
+  }
 }

ui/app/components/ui/page-container/index.scss

@@ -117,23 +117,14 @@
 
   &__tab {
     min-width: 5rem;
-    padding: 8px;
     color: $dusty-gray;
-    font-family: Roboto;
     font-size: 1rem;
-    text-align: center;
-    cursor: pointer;
     border-bottom: none;
     margin-right: 16px;
 
     &:last-of-type {
       margin-right: 0;
     }
-
-    &--selected {
-      color: $curious-blue;
-      border-bottom: 2px solid $curious-blue;
-    }
   }
 
   &--full-width {

ui/app/components/ui/page-container/page-container.component.js

@@ -53,7 +53,6 @@ export default class PageContainer extends PureComponent {
         isActive: numberOfTabs > 1 && tabIndex === this.state.activeTabIndex,
         key: tabIndex,
         className: 'page-container__tab',
-        activeClassName: 'page-container__tab--selected',
       })
     })
   }

ui/app/components/ui/tabs/index.scss

@@ -4,7 +4,6 @@
   &__list {
     display: flex;
     justify-content: flex-start;
-    background-color: #f9fafa;
     border-bottom: 1px solid $geyser;
     padding: 0 16px;
   }

ui/app/components/ui/tabs/tab/index.scss

@@ -1,10 +1,6 @@
 .tab {
-  color: #8C8E94;
-  font-size: .75rem;
-  text-transform: uppercase;
   cursor: pointer;
-  padding: 8px 0;
+  padding: 8px;
-  margin: 0 8px;
   min-width: 50px;
   text-align: center;