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

@@ -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,
 }

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>

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 {