Style selected token row (#41)

* Style selected token row

* Use black variable

src/components/CurrencyInputPanel/currency-panel.scss

@@ -129,6 +129,14 @@
     cursor: pointer;
     user-select: none;
 
+    &--selected {
+      background: $mercury-gray;
+
+      .token-modal__token-label {
+        color: $black;
+      }
+    }
+
     &:hover {
       background-color: $concrete-gray;
 

src/components/CurrencyInputPanel/index.js

@@ -177,6 +177,7 @@ class CurrencyInputPanel extends Component {
   renderTokenList() {
     const tokens = this.createTokenList();
     const { searchQuery } = this.state;
+    const { selectedTokens } = this.props;
     let results;
 
     if (!searchQuery) {
@@ -187,16 +188,22 @@ class CurrencyInputPanel extends Component {
 
     }
 
-    return results.map(({ label, address }) => (
-      <div
-        key={label}
-        className="token-modal__token-row"
-        onClick={() => this.onTokenSelect(address)}
-      >
-        <TokenLogo className="token-modal__token-logo" address={address} />
-        <div className="token-modal__token-label" >{label}</div>
-      </div>
-    ));
+    return results.map(({ label, address }) => {
+      const isSelected = selectedTokens.indexOf(address) > -1;
+
+      return (
+        <div
+          key={label}
+          className={
+            classnames('token-modal__token-row', { 'token-modal__token-row--selected': isSelected })
+          }
+          onClick={() => this.onTokenSelect(address)}
+        >
+          <TokenLogo className="token-modal__token-logo" address={address} />
+          <div className="token-modal__token-label" >{label}</div>
+        </div>
+      );
+    });
   }
 
   renderModal() {

src/pages/Swap/index.js

@@ -160,6 +160,7 @@ class Swap extends Component {
             title="Input"
             onCurrencySelected={d => this.props.updateField('inputCurrency', d)}
             onValueChange={d => this.updateInput(d)}
+            selectedTokens={[inputCurrency, outputCurrency]}
             value={input}
           />
           <OversizedPanel>
@@ -172,6 +173,7 @@ class Swap extends Component {
             description="(estimated)"
             onCurrencySelected={d => this.props.updateField('outputCurrency', d)}
             onValueChange={d => this.updateOutput(d)}
+            selectedTokens={[inputCurrency, outputCurrency]}
             value={output}
           />
           <OversizedPanel hideBottom>