Add first currency select panel

src/assets/images/dropdown-blue.svg

+<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0.97168 1L6.20532 6L11.439 1" stroke="#2F80ED"/>
+</svg>

src/assets/images/dropdown.svg

+<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0.97168 1L6.20532 6L11.439 1" stroke="#AEAEAE"/>
+</svg>

src/components/CurrencyInputPanel/currency-panel.scss

+@import '../../variables.scss';
+
+.currency-input-panel {
+  @extend %col-nowrap;
+
+  &__container {
+    border-radius: 1.25rem;
+    border: 1px solid $mercury-gray;
+    background-color: $white;
+    box-shadow: 0px 4px 4px 0px rgba($royal-blue, 0.05);
+  }
+
+  &__label-row {
+    @extend %row-nowrap;
+    align-items: center;
+    color: $dove-gray;
+    font-size: .75rem;
+    line-height: 1rem;
+    padding: .75rem 1rem;
+  }
+
+  &__label-container {
+    flex: 1 1 auto;
+    width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__label-description {
+    opacity: .75;
+    margin-left: .25rem;
+  }
+
+  &__input-row {
+    @extend %row-nowrap;
+    align-items: center;
+    padding: .25rem .85rem .75rem;
+  }
+
+  &__input {
+    color: $mine-shaft-gray;
+    font-size: 1.5rem;
+    outline: none;
+    border: none;
+    flex: 1 1 auto;
+    width: 0;
+
+    &::placeholder {
+      color: $chalice-gray;
+    }
+  }
+
+  &__currency-select {
+    @extend %row-nowrap;
+    align-items: center;
+    font-size: 1rem;
+    color: $royal-blue;
+    height: 2.5rem;
+    padding: .5rem 1rem;
+    border: 1px solid $royal-blue;
+    border-radius: 2.5rem;
+    background-color: $zumthor-blue;
+    outline: none;
+    cursor: pointer;
+    user-select: none;
+
+    &:active {
+      background-color: rgba($zumthor-blue, .8);
+    }
+  }
+
+  &__dropdown-icon {
+    height: 1rem;
+    width: .75rem;
+    margin-left: .4rem;
+    background-image: url(../../assets/images/dropdown-blue.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: 50% 50%;
+  }
+}
+

src/components/CurrencyInputPanel/index.js

+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import './currency-panel.scss';
+
+class CurrencyInputPanel extends Component {
+  render() {
+    return (
+      <div className="currency-input-panel">
+        <div></div>
+        <div className="currency-input-panel__container">
+          <div className="currency-input-panel__label-row">
+            <div className="currency-input-panel__label-container">
+              <span className="currency-input-panel__label">Input</span>
+              <span className="currency-input-panel__label-description">(estimated)</span>
+            </div>
+            <span className="currency-input-panel__extra-text">Balance: 0.03141</span>
+          </div>
+          <div className="currency-input-panel__input-row">
+            <input type="number" className="currency-input-panel__input" placeholder="0.0" />
+            <button className="currency-input-panel__currency-select">
+              Select a token
+              <span className="currency-input-panel__dropdown-icon" />
+            </button>
+          </div>
+        </div>
+        <div></div>
+      </div>
+    )
+  }
+}
+
+export default connect()(CurrencyInputPanel);

src/components/NavigationTabs/index.js

@@ -8,12 +8,14 @@ class NavigationTabs extends Component {
     history: PropTypes.shape({
       push: PropTypes.func.isRequired,
     }),
+    className: PropTypes.string,
   };
 
   constructor(props) {
     super(props);
     this.state = {
       selectedPath: this.props.location.pathname,
+      className: '',
     };
   }
 
@@ -34,7 +36,7 @@ class NavigationTabs extends Component {
 
   render() {
     return (
-      <Tabs>
+      <Tabs className={this.props.className}>
         { this.renderTab('Swap', '/swap') }
         { this.renderTab('Send', '/send') }
         { this.renderTab('Pool', '/pool') }

src/components/Tab/index.js

@@ -6,7 +6,7 @@ import './tab.scss';
 
 export const Tabs = props => {
   return (
-    <div className="tabs">
+    <div className={classnames("tabs", props.className)}>
       { props.children }
     </div>
   );

src/components/Tab/tab.scss

@@ -7,6 +7,14 @@
   background-color: $concrete-gray;
   border-radius: 3rem;
   border: 1px solid $mercury-gray;
+
+  .tab:first-child {
+    margin-left: -1px;
+  }
+
+  .tab:last-child {
+    margin-right: -1px;
+  }
 }
 
 .tab {
@@ -17,9 +25,8 @@
   flex: 1 0 auto;
   border-radius: 3rem;
   border: 1px solid transparent;
-  transition: 250ms ease-in-out;
-  left: -1px;
-  position: relative;
+  transition: 300ms ease-in-out;
+  cursor: pointer;
 
   span {
     color: $dove-gray;

src/pages/Swap/index.js

@@ -4,6 +4,7 @@ import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import Header from '../../components/Header';
 import NavigationTabs from '../../components/NavigationTabs';
+import CurrencyInputPanel from '../../components/CurrencyInputPanel';
 
 import "./swap.scss";
 
@@ -18,8 +19,9 @@ class Swap extends Component {
     return (
       <div className="swap">
         <Header />
+        <NavigationTabs className="swap__navigation" />
         <div className="swap__content">
-          <NavigationTabs />
+          <CurrencyInputPanel />
         </div>
       </div>
     );

src/pages/Swap/swap.scss

 .swap {
   &__content {
     padding: 1rem .75rem;
+    margin-top: 1rem;
+  }
+
+  &__navigation {
+    margin: 0 .75rem;
   }
 }
\ No newline at end of file

src/variables.scss

@@ -3,11 +3,14 @@ $black: #000;
 
 // Gray
 $concrete-gray: #FBFBFB;
-$silver-gray: #C4C4C4;
 $mercury-gray: #E1E1E1;
+$silver-gray: #C4C4C4;
+$chalice-gray: #AEAEAE;
 $dove-gray: #737373;
+$mine-shaft-gray: #2B2B2B;
 
 // Blue
+$zumthor-blue: #EBF4FF;
 $royal-blue: #2F80ED;
 
 // Purple