Add box shadow to Home screen tabs (#8739)

This matches the box shadow on the asset page. Some CSS specificity
hijinks were required to override the base `Tabs` CSS rules, and a new
`tabsClassName` prop was added to the `Tabs` component.

ui/app/components/ui/tabs/tabs.component.js

@@ -1,16 +1,19 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
 export default class Tabs extends Component {
   static defaultProps = {
     defaultActiveTabName: null,
     onTabClick: null,
+    tabsClassName: undefined,
   }
 
   static propTypes = {
     defaultActiveTabName: PropTypes.string,
     onTabClick: PropTypes.func,
     children: PropTypes.node.isRequired,
+    tabsClassName: PropTypes.string,
   }
 
   state = {
@@ -62,9 +65,10 @@ export default class Tabs extends Component {
   }
 
   render () {
+    const { tabsClassName } = this.props
     return (
       <div className="tabs">
-        <ul className="tabs__list">
+        <ul className={classnames('tabs__list', tabsClassName)}>
           { this.renderTabs() }
         </ul>
         <div className="tabs__content">

ui/app/pages/home/home.component.js

@@ -232,7 +232,7 @@ export default class Home extends PureComponent {
             <div className="home__balance-wrapper">
               <EthOverview />
             </div>
-            <Tabs defaultActiveTabName={defaultHomeActiveTabName} onTabClick={onTabClick}>
+            <Tabs defaultActiveTabName={defaultHomeActiveTabName} onTabClick={onTabClick} tabsClassName="home__tabs">
               <Tab
                 activeClassName="home__tab--active"
                 className="home__tab"

ui/app/pages/home/index.scss

@@ -21,6 +21,11 @@
   }
 
   // TODO: fix style import order so this isn't required to override specificity of `tab` class
+  &__main-view &__tabs {
+    border: none;
+    box-shadow: 0px 3px 4px rgba(135, 134, 134, 0.16);
+  }
+
   &__main-view &__tab {
     flex-grow: 1;
     color: $Grey-500;