From 997912a8f8647fed9ff10570e332ff84807907aa Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 13 Nov 2018 22:54:15 -0800
Subject: fix(instant): fix tabbing into erc20 token selector

---
 packages/instant/src/components/erc20_token_selector.tsx | 1 +
 packages/instant/src/components/ui/input.tsx             | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index d4a77c278..afa3f84c3 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -39,6 +39,7 @@ export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps>
                     width="100%"
                     value={this.state.searchQuery}
                     onChange={this._handleSearchInputChange}
+                    tabindex={-1}
                 />
                 <Container overflow="scroll" height="calc(100% - 90px)" marginTop="10px">
                     {_.map(tokens, token => {
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index 2fb408db4..184f89066 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import { ColorOption, styled } from '../../style/theme';
 
 export interface InputProps {
+    tabindex?: number;
     className?: string;
     value?: string;
     width?: string;
-- 
cgit v1.2.3


From 7688037fb86334ec2913c6fa850b6514fd9986b8 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 13 Nov 2018 23:14:23 -0800
Subject: fix(instant): border radius

---
 packages/instant/src/components/instant_heading.tsx           | 7 +------
 packages/instant/src/components/ui/container.tsx              | 4 ++--
 packages/instant/src/components/zero_ex_instant_container.tsx | 2 +-
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 7f9567454..002695269 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -32,12 +32,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     public render(): React.ReactNode {
         const iconOrAmounts = this._renderIcon() || this._renderAmountsSection();
         return (
-            <Container
-                backgroundColor={ColorOption.primaryColor}
-                padding="20px"
-                width="100%"
-                borderRadius="3px 3px 0px 0px"
-            >
+            <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%">
                 <Container marginBottom="5px">
                     <Text
                         letterSpacing="1px"
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 8aa5db9e5..4dafe1386 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -20,7 +20,7 @@ export interface ContainerProps {
     marginBottom?: string;
     marginLeft?: string;
     padding?: string;
-    borderRadius?: string;
+    borderRadius?: MediaChoice;
     border?: string;
     borderColor?: ColorOption;
     borderTop?: string;
@@ -57,7 +57,6 @@ export const Container =
         ${props => cssRuleIfExists(props, 'margin-bottom')}
         ${props => cssRuleIfExists(props, 'margin-left')}
         ${props => cssRuleIfExists(props, 'padding')}
-        ${props => cssRuleIfExists(props, 'border-radius')}
         ${props => cssRuleIfExists(props, 'border')}
         ${props => cssRuleIfExists(props, 'border-top')}
         ${props => cssRuleIfExists(props, 'border-bottom')}
@@ -70,6 +69,7 @@ export const Container =
         ${props => props.display && stylesForMedia<string>('display', props.display)}
         ${props => props.width && stylesForMedia<string>('width', props.width)}
         ${props => props.height && stylesForMedia<string>('height', props.height)}
+        ${props => props.borderRadius && stylesForMedia<string>('border-radius', props.borderRadius)}
         background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
         border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
         &:hover {
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index c0a197590..698bfef17 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -43,7 +43,7 @@ export class ZeroExInstantContainer extends React.Component<{}, ZeroExInstantCon
                         zIndex={zIndex.mainContainer}
                         position="relative"
                         backgroundColor={ColorOption.white}
-                        borderRadius="3px"
+                        borderRadius={{ default: '3px', sm: '0px' }}
                         hasBoxShadow={true}
                         overflow="hidden"
                         height="100%"
-- 
cgit v1.2.3


From adce627888c126bec2ea008ddae7187bfa143625 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 13 Nov 2018 23:23:23 -0800
Subject: fix(instant): match token search on prefix

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

diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index afa3f84c3..78741a617 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -63,8 +63,10 @@ export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps>
         if (_.isUndefined(searchQuery)) {
             return true;
         }
-        const stringToSearch = `${token.metaData.name} ${token.metaData.symbol}`;
-        return _.includes(stringToSearch.toLowerCase(), searchQuery.toLowerCase());
+        const searchQueryLowerCase = searchQuery.toLowerCase();
+        const tokenName = token.metaData.name.toLowerCase();
+        const tokenSymbol = token.metaData.symbol.toLowerCase();
+        return _.startsWith(tokenSymbol, searchQueryLowerCase) || _.startsWith(tokenName, searchQueryLowerCase);
     };
 }
 
-- 
cgit v1.2.3