Setup React toolbox tabs

src/components/app/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Route, Link } from 'react-router-dom';
+import { Route } from 'react-router-dom';
 import PrivateRoutes from '../privateRoute';
 import Account from '../account';
 import Header from '../header';
@@ -10,6 +10,7 @@ import Forging from '../forging';
 import styles from './app.css';
 import Metronome from '../../utils/metronome';
 import Dialog from '../dialog';
+import Tabs from '../tabs';
   // temporary, will be deleted with #347
 
 // start dispatching sync ticks
@@ -23,12 +24,7 @@ const App = () => (
       <PrivateRoutes path='/main' render={ ({ match }) => (
         <main>
           <Account />
-          <section className='main-tabs'>
-            <Link to={`${match.url}/transactions`}>Transactions</Link>
-            <Link to={`${match.url}/voting`}>Voting</Link>
-            <Link to={`${match.url}/forging`}>Forging</Link>
-          </section>
-
+          <Tabs />
           <Route path={`${match.url}/transactions`} component={Transactions} />
           <Route path={`${match.url}/voting`} component={Voting} />
           <Route path={`${match.url}/forging`} component={Forging} />

src/components/tabs/index.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import Tabs from './tabs';
+
+const mapStateToProps = state => ({
+  isDelegate: state.account.isDelegate,
+});
+
+export default withRouter(connect(mapStateToProps)(Tabs));
+

src/components/tabs/tabs.css

@@ -0,0 +1,17 @@
+.tab {
+  background: #f4f4f4;
+  box-shadow: inset 0px -1px 1px -1px rgba(0, 0, 0, 0.12);
+  padding-right: 24px;
+  padding-left: 24px;
+}
+
+:global .theme__pointer___1xgdB {
+  height: 4px;
+  margin-top: -48px;
+}
+
+:global .theme__label___1yb8L.theme__active___2LZ7Z {
+  background: white;
+  color: #0288D1;
+  margin-bottom: -1px;
+}

src/components/tabs/tabs.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Tab, Tabs as ToolboxTabs } from 'react-toolbox';
+import styles from './tabs.css';
+
+const tabs = [
+  'Transactions',
+  'Voting',
+  'Forging',
+];
+
+const getTabs = isDelegate => (tabs.filter(t => t !== 'Forging' || isDelegate));
+
+const getIndex = history => (
+  tabs.map(t => t.toLowerCase())
+    .indexOf(history.location.pathname.replace('/main/', '')));
+
+const Tabs = props => (
+  <ToolboxTabs index={getIndex(props.history)}
+    onChange={index => props.history.push(`${tabs[index].toLowerCase()}`)}
+    className='main-tabs'>
+    {getTabs(props.isDelegate).map((tab, index) =>
+      <Tab key={index} label={tab} className={styles.tab} />)}
+  </ToolboxTabs>
+);
+
+export default Tabs;