From cdaa1407dacacc53e01a70b1e0ac46536342a4e0 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 1 Nov 2018 18:36:34 -0700
Subject: feat: implement search bar UI

---
 packages/instant/src/components/erc20_token_selector.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'packages/instant/src/components/erc20_token_selector.tsx')

diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index 2f637a1a6..a9728365b 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -5,6 +5,7 @@ import { ColorOption } from '../style/theme';
 import { ERC20Asset } from '../types';
 import { assetUtils } from '../util/asset';
 
+import { SearchInput } from './search_input';
 import { Circle, Container, Flex, Text } from './ui';
 
 export interface ERC20TokenSelectorProps {
@@ -14,7 +15,8 @@ export interface ERC20TokenSelectorProps {
 
 export const ERC20TokenSelector: React.StatelessComponent<ERC20TokenSelectorProps> = ({ tokens, onTokenSelect }) => (
     <Container>
-        <Container overflow="scroll" height="325px">
+        <SearchInput placeholder="Search tokens..." width="100%" />
+        <Container overflow="scroll" height="325px" marginTop="10px">
             {_.map(tokens, token => <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />)}
         </Container>
     </Container>
@@ -40,7 +42,7 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
                 darkenOnHover={true}
                 cursor="pointer"
             >
-                <Container marginLeft="10px">
+                <Container marginLeft="5px">
                     <Flex justify="flex-start">
                         <Container marginRight="10px">
                             <Circle diameter={30} fillColor={token.metaData.primaryColor}>
-- 
cgit