Add Swap screen

src/assets/images/arrow-down-blue.svg

+<svg width="9" height="10" viewBox="0 0 9 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.2981 -1.65714e-07L4.24041 -2.13061e-07L4.24041 7.91103L4.16486 7.91103L1.25623 4.9323L0.538514 5.66731L4.76926 10L9 5.66731L8.28228 4.9323L5.37365 7.91103L5.2981 7.91103L5.2981 -1.65714e-07Z" fill="#2F80ED"/>
+</svg>

src/components/CurrencyInputPanel/currency-panel.scss

@@ -4,10 +4,12 @@
   @extend %col-nowrap;
 
   &__container {
+    position: relative;
+    z-index: 200;
     border-radius: 1.25rem;
     border: 1px solid $mercury-gray;
     background-color: $white;
-    box-shadow: 0px 4px 4px 0px rgba($royal-blue, 0.05);
+    box-shadow: 0px 4px 4px 2px rgba($royal-blue, 0.05);
   }
 
   &__label-row {
@@ -56,8 +58,8 @@
     align-items: center;
     font-size: 1rem;
     color: $royal-blue;
-    height: 2.5rem;
-    padding: .5rem 1rem;
+    height: 2rem;
+    padding: 0 1rem;
     border: 1px solid $royal-blue;
     border-radius: 2.5rem;
     background-color: $zumthor-blue;
@@ -73,7 +75,7 @@
   &__dropdown-icon {
     height: 1rem;
     width: .75rem;
-    margin-left: .4rem;
+    margin-left: .7rem;
     background-image: url(../../assets/images/dropdown-blue.svg);
     background-repeat: no-repeat;
     background-size: contain;

src/components/CurrencyInputPanel/index.js

@@ -5,17 +5,28 @@ import PropTypes from 'prop-types';
 import './currency-panel.scss';
 
 class CurrencyInputPanel extends Component {
+  static propTypes = {
+    title: PropTypes.string,
+    description: PropTypes.string,
+    extraText: PropTypes.string,
+  };
+
   render() {
+    const {
+      title,
+      description,
+      extraText,
+    } = this.props;
+
     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>
+              <span className="currency-input-panel__label">{title}</span>
+              <span className="currency-input-panel__label-description">{description}</span>
             </div>
-            <span className="currency-input-panel__extra-text">Balance: 0.03141</span>
+            <span className="currency-input-panel__extra-text">{extraText}</span>
           </div>
           <div className="currency-input-panel__input-row">
             <input type="number" className="currency-input-panel__input" placeholder="0.0" />
@@ -25,7 +36,6 @@ class CurrencyInputPanel extends Component {
             </button>
           </div>
         </div>
-        <div></div>
       </div>
     )
   }

src/components/OversizedPanel/index.js

+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import './oversized-panel.scss';
+
+export default function OversizedPanel(props) {
+  return (
+    <div className="oversized-panel">
+      { props.hideTop || <div className="oversized-panel__top" /> }
+      {props.children}
+      { props.hideBottom || <div className="oversized-panel__bottom" /> }
+    </div>
+  );
+}

src/components/OversizedPanel/oversized-panel.scss

+@import '../../variables.scss';
+
+.oversized-panel {
+  position: relative;
+  background-color: $concrete-gray;
+  width: calc(100% - 1rem);
+  margin: 0 auto;
+  border-radius: .625rem;
+
+  &__top {
+    content: "";
+    position: absolute;
+    top: -.5rem;
+    left: 0;
+    height: 1rem;
+    width: 100%;
+    background-color: $concrete-gray;
+    z-index: 100;
+  }
+
+  &__bottom {
+    position: absolute;
+    top: 80%;
+    left: 0;
+    height: 1rem;
+    width: 100%;
+    background-color: $concrete-gray;
+    z-index: 100;
+  }
+}
\ No newline at end of file

src/pages/Swap/index.js

@@ -5,6 +5,8 @@ import PropTypes from 'prop-types';
 import Header from '../../components/Header';
 import NavigationTabs from '../../components/NavigationTabs';
 import CurrencyInputPanel from '../../components/CurrencyInputPanel';
+import OversizedPanel from '../../components/OversizedPanel';
+import ArrowDown from '../../assets/images/arrow-down-blue.svg';
 
 import "./swap.scss";
 
@@ -21,8 +23,32 @@ class Swap extends Component {
         <Header />
         <NavigationTabs className="swap__navigation" />
         <div className="swap__content">
-          <CurrencyInputPanel />
+          <CurrencyInputPanel
+            title="Input"
+            extraText="Balance: 0.03141"
+          />
+          <OversizedPanel>
+            <div className="swap__down-arrow-background">
+              <img className="swap__down-arrow" src={ArrowDown} />
+            </div>
+          </OversizedPanel>
+          <CurrencyInputPanel
+            title="Output"
+            description="(estimated)"
+            extraText="Balance: 0.0"
+          />
+          <OversizedPanel hideBottom>
+            <div className="swap__exchange-rate-wrapper">
+              <span className="swap__exchange-rate">Exchange Rate</span>
+              <span>1 ETH = 1283.878 BAT</span>
+            </div>
+          </OversizedPanel>
+          <div className="swap__summary-wrapper">
+            <div>You are selling <span className="swap__highlight-text">0.01 ETH</span></div>
+            <div>You will receive between <span className="swap__highlight-text">12.80</span> and <span className="swap__highlight-text">12.83 BAT</span></div>
+          </div>
         </div>
+        <button className="swap__cta-btn">Swap</button>
       </div>
     );
   }

src/pages/Swap/swap.scss

+@import "../../variables.scss";
+
 .swap {
+  @extend %col-nowrap;
+  height: 100%;
+
   &__content {
     padding: 1rem .75rem;
     margin-top: 1rem;
+    flex: 1 1 auto;
+    height: 0;
+    overflow-y: auto;
   }
 
   &__navigation {
     margin: 0 .75rem;
   }
+
+  &__down-arrow {
+    width: .625rem;
+    height: .625rem;
+    position: relative;
+    z-index: 200;
+    padding: .875rem;
+  }
+
+  &__down-arrow-background {
+    @extend %row-nowrap;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__exchange-rate-wrapper {
+    @extend %row-nowrap;
+    align-items: center;
+    color: $dove-gray;
+    font-size: .75rem;
+    padding: .5rem 1rem;
+  }
+
+  &__exchange-rate {
+    flex: 1 1 auto;
+    width: 0;
+    color: $chalice-gray;
+  }
+
+  &__summary-wrapper {
+    margin-top: 2rem;
+    color: #737373;
+    font-size: .75rem;
+    text-align: center;
+  }
+
+  &__highlight-text {
+    color: $royal-blue;
+  }
+
+  &__cta-btn {
+    @extend %primary-button;
+    margin: 1rem auto;
+  }
 }
\ No newline at end of file

src/variables.scss

@@ -2,7 +2,7 @@ $white: #fff;
 $black: #000;
 
 // Gray
-$concrete-gray: #FBFBFB;
+$concrete-gray: #FAFAFA;
 $mercury-gray: #E1E1E1;
 $silver-gray: #C4C4C4;
 $chalice-gray: #AEAEAE;
@@ -25,3 +25,24 @@ $wisteria-purple: #AE60B9;
   display: flex;
   flex-flow: row nowrap;
 }
+
+%primary-button {
+  font-size: 1rem;
+  min-width: 16rem;
+  padding: 1rem;
+  background-color: $royal-blue;
+  cursor: pointer;
+  border-radius: 3rem;
+  color: $white;
+  outline: none;
+  border: 1px solid transparent;
+
+  &:hover {
+    background-color: lighten($royal-blue, 5);
+  }
+
+  &:active {
+    background-color: darken($royal-blue, 5);
+  }
+
+}