From 095eeab88156631e2551fc706c55ece8d4639f2c Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Thu, 14 May 2020 00:16:47 -0300
Subject: [PATCH] Update Home tab styles to match new designs (#8590)

The tabs on the Home page have been updated to match the new home
screen designs.

A new `activeClassName` prop was added to the `Tab` component to allow
applying different styles to the active tab state.

I ran into specificity problems when overriding the default `Tab` styles
because the import order of our CSS is bizarre and wrong. For now I've
used a crude workaround, but we can fix this properly later by changing
the import order to place styles likely to be overridden first.
---
 ui/app/components/ui/tabs/tab/tab.component.js |  8 +++++++-
 ui/app/pages/home/home.component.js            | 14 ++++++++++++--
 ui/app/pages/home/index.scss                   | 12 +++++++++++-
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/ui/app/components/ui/tabs/tab/tab.component.js b/ui/app/components/ui/tabs/tab/tab.component.js
index 7e48c7d85..de65c70e3 100644
--- a/ui/app/components/ui/tabs/tab/tab.component.js
+++ b/ui/app/components/ui/tabs/tab/tab.component.js
@@ -4,6 +4,7 @@ import classnames from 'classnames'
 
 const Tab = (props) => {
   const {
+    activeClassName,
     className,
     'data-testid': dataTestId,
     isActive,
@@ -17,7 +18,10 @@ const Tab = (props) => {
       className={classnames(
         'tab',
         className,
-        { 'tab--active': isActive },
+        {
+          'tab--active': isActive,
+          [activeClassName]: isActive,
+        },
       )}
       data-testid={dataTestId}
       onClick={(event) => {
@@ -31,6 +35,7 @@ const Tab = (props) => {
 }
 
 Tab.propTypes = {
+  activeClassName: PropTypes.string,
   className: PropTypes.string,
   'data-testid': PropTypes.string,
   isActive: PropTypes.bool, // required, but added using React.cloneElement
@@ -40,6 +45,7 @@ Tab.propTypes = {
 }
 
 Tab.defaultProps = {
+  activeClassName: undefined,
   className: undefined,
   onClick: undefined,
 }
diff --git a/ui/app/pages/home/home.component.js b/ui/app/pages/home/home.component.js
index a97514e74..56fe85b08 100644
--- a/ui/app/pages/home/home.component.js
+++ b/ui/app/pages/home/home.component.js
@@ -245,10 +245,20 @@ export default class Home extends PureComponent {
                         <TransactionViewBalance />
                       </div>
                       <Tabs>
-                        <Tab className="home__tab" data-testid="home__asset-tab" name="Assets">
+                        <Tab
+                          activeClassName="home__tab--active"
+                          className="home__tab"
+                          data-testid="home__asset-tab"
+                          name="Assets"
+                        >
                           <AssetList />
                         </Tab>
-                        <Tab className="home__tab" data-testid="home__history-tab" name="History">
+                        <Tab
+                          activeClassName="home__tab--active"
+                          className="home__tab"
+                          data-testid="home__history-tab"
+                          name="History"
+                        >
                           <TransactionList />
                         </Tab>
                       </Tabs>
diff --git a/ui/app/pages/home/index.scss b/ui/app/pages/home/index.scss
index a55c6b778..b00a0b3aa 100644
--- a/ui/app/pages/home/index.scss
+++ b/ui/app/pages/home/index.scss
@@ -32,8 +32,18 @@
     }
   }
 
-  &__tab {
+  // TODO: fix style import order so this isn't required to override specificity of `tab` class
+  &__main-view &__tab {
     flex-grow: 1;
+    color: $Grey-500;
+    padding: 16px 8px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 130%;
+  }
+
+  &__main-view &__tab--active {
+    color: $Blue-500;
   }
 
   &__connect-status-text {