Add NavigationTabs

src/components/Logo/index.js

@@ -3,6 +3,8 @@ import "./logo.scss";
 
 export default function Logo(props) {
   return (
-    <div className="logo">🦄</div>
+    <div className="logo">
+      <span role="img" aria-label="logo">🦄</span>
+    </div>
   );
-}
+}

src/components/NavigationTabs/index.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import {Tab, Tabs} from "../Tab";
+
+class NavigationTabs extends Component {
+  static propTypes = {
+    history: PropTypes.shape({
+      push: PropTypes.func.isRequired,
+    }),
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedPath: this.props.location.pathname,
+    };
+  }
+
+  renderTab(name, path) {
+    const { push } = this.props.history;
+    const { selectedPath } = this.state;
+    return (
+      <Tab
+        text={name}
+        onClick={() => {
+          push(path);
+          this.setState({ selectedPath: path });
+        }}
+        isSelected={path === selectedPath }
+      />
+    )
+  }
+
+  render() {
+    return (
+      <Tabs>
+        { this.renderTab('Swap', '/swap') }
+        { this.renderTab('Send', '/send') }
+        { this.renderTab('Pool', '/pool') }
+      </Tabs>
+    );
+  }
+}
+
+export default withRouter(NavigationTabs);

src/components/Tab/index.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import './tab.scss';
+
+export const Tabs = props => {
+  return (
+    <div className="tabs">
+      { props.children }
+    </div>
+  );
+};
+
+export const Tab = props => {
+  return (
+    <div
+      className={classnames("tab", {
+        'tab--selected': props.isSelected,
+      })}
+      onClick={props.onClick}
+    >
+      { props.text ? <span>{props.text}</span> : null }
+    </div>
+  );
+};
+
+Tab.propTypes = {
+  className: PropTypes.string,
+  text: PropTypes.string,
+  isSelected: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+Tab.defaultProps = {
+  className: '',
+};
+

src/components/Tab/tab.scss

@@ -0,0 +1,39 @@
+@import '../../variables.scss';
+
+.tabs {
+  @extend %row-nowrap;
+  align-items: center;
+  height: 3rem;
+  background-color: $concrete-gray;
+  border-radius: 3rem;
+  border: 1px solid $mercury-gray;
+}
+
+.tab {
+  @extend %row-nowrap;
+  align-items: center;
+  justify-content: center;
+  height: 3rem;
+  flex: 1 0 auto;
+  border-radius: 3rem;
+  border: 1px solid transparent;
+  transition: 250ms ease-in-out;
+  left: -1px;
+  position: relative;
+
+  span {
+    color: $dove-gray;
+    font-size: 1rem;
+  }
+
+  &--selected {
+    background-color: $white;
+    border-radius: 3rem;
+    border: 1px solid $mercury-gray;
+    font-weight: 500;
+
+    span {
+      color: $royal-blue;
+    }
+  }
+}

src/components/Web3Status/web3-status.scss

@@ -2,15 +2,15 @@
 
 .web3-status {
   @extend %row-nowrap;
-  width: 9.5rem;
-  font-size: .75rem;
+  width: 10rem;
+  font-size: .9rem;
   line-height: 1rem;
   align-items: center;
   border: 1px solid $mercury-gray;
   padding: .5rem 1rem;
   border-radius: 2rem;
   color: $dove-gray;
-  font-weight: 500;
+  font-weight: 400;
   box-sizing: border-box;
 
   &__identicon {

src/index.scss

@@ -18,5 +18,5 @@ html, body {
   width: 100vw;
   overflow-x: hidden;
   overflow-y: auto;
-  background-color: $concrete-gray;
+  background-color: $white;
 }

src/pages/App.js

@@ -64,6 +64,8 @@ class App extends Component {
     return (
       <Switch>
         <Route exact path="/swap" component={Swap} />
+        <Route exact path="/send" component={Swap} />
+        <Route exact path="/pool" component={Swap} />
       </Switch>
     )
   }

src/pages/Swap/index.js

@@ -1,19 +1,36 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import PropTypes from 'prop-types';
 import Header from '../../components/Header';
+import NavigationTabs from '../../components/NavigationTabs';
 
 import "./swap.scss";
 
 class Swap extends Component {
+  static propTypes = {
+    // Injected by React Router Dom
+      push: PropTypes.func.isRequired,
+      pathname: PropTypes.string.isRequired,
+  };
+
   render() {
     return (
       <div className="swap">
         <Header />
         <div className="swap__content">
+          <NavigationTabs />
         </div>
       </div>
-    )
+    );
   }
 }
 
-export default connect()(Swap);
+export default withRouter(
+  connect(
+    (state, ownProps) => ({
+      push: ownProps.history.push,
+      pathname: ownProps.location.pathname,
+    }),
+  )(Swap)
+);

src/pages/Swap/swap.scss

@@ -0,0 +1,5 @@
+.swap {
+  &__content {
+    padding: 1rem .75rem;
+  }
+}

src/variables.scss

@@ -1,9 +1,15 @@
+$white: #fff;
+$black: #000;
+
 // Gray
-$concrete-gray: #F2F2F2;
+$concrete-gray: #FBFBFB;
 $silver-gray: #C4C4C4;
 $mercury-gray: #E1E1E1;
 $dove-gray: #737373;
 
+// Blue
+$royal-blue: #2F80ED;
+
 // Purple
 $wisteria-purple: #AE60B9;