From 1105da780005aad4a1b9e11c8b4e0481ae24dc23 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Mon, 23 Mar 2020 21:18:45 -0300
Subject: [PATCH] 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)
---
 .../confirm-page-container-content.component.js          | 4 ++--
 .../confirm-page-container-content/index.scss            | 7 +++++++
 ui/app/components/ui/page-container/index.scss           | 9 ---------
 .../ui/page-container/page-container.component.js        | 1 -
 ui/app/components/ui/tabs/index.scss                     | 1 -
 ui/app/components/ui/tabs/tab/index.scss                 | 6 +-----
 6 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
index 8a5f90c76..e87492832 100644
--- a/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
+++ b/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>
diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-content/index.scss b/ui/app/components/app/confirm-page-container/confirm-page-container-content/index.scss
index ebc252e73..50d15d193 100644
--- a/ui/app/components/app/confirm-page-container/confirm-page-container-content/index.scss
+++ b/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;
+  }
 }
diff --git a/ui/app/components/ui/page-container/index.scss b/ui/app/components/ui/page-container/index.scss
index 8e292ba67..21f6ca0c5 100644
--- a/ui/app/components/ui/page-container/index.scss
+++ b/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 {
diff --git a/ui/app/components/ui/page-container/page-container.component.js b/ui/app/components/ui/page-container/page-container.component.js
index 8ea9aa6b0..a35524121 100644
--- a/ui/app/components/ui/page-container/page-container.component.js
+++ b/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',
       })
     })
   }
diff --git a/ui/app/components/ui/tabs/index.scss b/ui/app/components/ui/tabs/index.scss
index 25143ff35..678f2afe5 100644
--- a/ui/app/components/ui/tabs/index.scss
+++ b/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;
   }
diff --git a/ui/app/components/ui/tabs/tab/index.scss b/ui/app/components/ui/tabs/tab/index.scss
index 1de6ffa0e..7245c695e 100644
--- a/ui/app/components/ui/tabs/tab/index.scss
+++ b/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;
-  margin: 0 8px;
+  padding: 8px;
   min-width: 50px;
   text-align: center;