6 files changed, 47 insertions, 15 deletions
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index 0a3d4427a..f7d5a4fe4 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -19,12 +19,12 @@ export interface ERC20TokenSelectorProps {
 }
 
 export interface ERC20TokenSelectorState {
-    searchQuery?: string;
+    searchQuery: string;
 }
 
 export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps> {
     public state: ERC20TokenSelectorState = {
-        searchQuery: undefined,
+        searchQuery: '',
     };
     public render(): React.ReactNode {
         const { tokens, onTokenSelect } = this.props;
@@ -62,10 +62,10 @@ export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps>
     };
     private readonly _isTokenQueryMatch = (token: ERC20Asset): boolean => {
         const { searchQuery } = this.state;
-        if (_.isUndefined(searchQuery)) {
+        const searchQueryLowerCase = searchQuery.toLowerCase().trim();
+        if (searchQueryLowerCase === '') {
             return true;
         }
-        const searchQueryLowerCase = searchQuery.toLowerCase();
         const tokenName = token.metaData.name.toLowerCase();
         const tokenSymbol = token.metaData.symbol.toLowerCase();
         return _.startsWith(tokenSymbol, searchQueryLowerCase) || _.startsWith(tokenName, searchQueryLowerCase);
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index 129162a74..791692257 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -98,6 +98,12 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
             inputWidthPx: this._getInputWidthInPx(),
         };
     }
+    public componentDidMount(): void {
+        // Trigger an initial notification of the calculated fontSize.
+        const currentPhase = ScalingInput.getPhaseFromProps(this.props);
+        const currentFontSize = ScalingInput.calculateFontSizeFromProps(this.props, currentPhase);
+        this.props.onFontSizeChange(currentFontSize);
+    }
     public componentDidUpdate(
         prevProps: ScalingInputProps,
         prevState: ScalingInputState,
diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx
index 8465b9cd0..fb3927088 100644
--- a/packages/instant/src/components/timed_progress_bar.tsx
+++ b/packages/instant/src/components/timed_progress_bar.tsx
@@ -1,8 +1,9 @@
 import * as _ from 'lodash';
+import { transparentize } from 'polished';
 import * as React from 'react';
 
 import { PROGRESS_FINISH_ANIMATION_TIME_MS, PROGRESS_STALL_AT_WIDTH } from '../constants';
-import { ColorOption, css, keyframes, styled } from '../style/theme';
+import { ColorOption, css, keyframes, styled, ThemeConsumer } from '../style/theme';
 
 import { Container } from './ui/container';
 
@@ -93,8 +94,16 @@ export interface ProgressBarProps extends ProgressProps {}
 
 export const ProgressBar: React.ComponentType<ProgressBarProps & React.ClassAttributes<{}>> = React.forwardRef(
     (props, ref) => (
-        <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
-            <Progress {...props} ref={ref as any} />
-        </Container>
+        <ThemeConsumer>
+            {theme => (
+                <Container
+                    width="100%"
+                    borderRadius="6px"
+                    rawBackgroundColor={transparentize(0.5, theme[ColorOption.primaryColor])}
+                >
+                    <Progress {...props} ref={ref as any} />
+                </Container>
+            )}
+        </ThemeConsumer>
     ),
 );
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 4dafe1386..a015ab5bc 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -27,6 +27,7 @@ export interface ContainerProps {
     borderBottom?: string;
     className?: string;
     backgroundColor?: ColorOption;
+    rawBackgroundColor?: string;
     hasBoxShadow?: boolean;
     zIndex?: number;
     whiteSpace?: string;
@@ -38,6 +39,16 @@ export interface ContainerProps {
     flexGrow?: string | number;
 }
 
+const getBackgroundColor = (theme: any, backgroundColor?: ColorOption, rawBackgroundColor?: string): string => {
+    if (backgroundColor) {
+        return theme[backgroundColor] as string;
+    }
+    if (rawBackgroundColor) {
+        return rawBackgroundColor;
+    }
+    return 'none';
+};
+
 export const Container =
     styled.div <
     ContainerProps >
@@ -70,7 +81,7 @@ export const Container =
         ${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')};
+        background-color: ${props => getBackgroundColor(props.theme, props.backgroundColor, props.rawBackgroundColor)};
         border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
         &:hover {
             ${props =>
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index 8e573d7b9..282477758 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -1,4 +1,3 @@
-import { darken } from 'polished';
 import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
@@ -31,7 +30,7 @@ export const Text: React.StatelessComponent<TextProps> = ({ href, onClick, ...re
     return <StyledText {...rest} onClick={computedOnClick} />;
 };
 
-const darkenOnHoverAmount = 0.3;
+const opacityOnHoverAmount = 0.5;
 export const StyledText =
     styled.div <
     TextProps >
@@ -56,8 +55,7 @@ export const StyledText =
         ${props => (props.textAlign ? `text-align: ${props.textAlign}` : '')};
         ${props => (props.width ? `width: ${props.width}` : '')};
         &:hover {
-            ${props =>
-                props.onClick ? `color: ${darken(darkenOnHoverAmount, props.theme[props.fontColor || 'white'])}` : ''};
+            ${props => (props.onClick ? `opacity: ${opacityOnHoverAmount};` : '')};
         }
     }
 `;
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index a0751286b..71e4b7052 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -1,6 +1,14 @@
 import * as styledComponents from 'styled-components';
 
-const { default: styled, css, keyframes, withTheme, createGlobalStyle, ThemeProvider } = styledComponents;
+const {
+    default: styled,
+    css,
+    keyframes,
+    withTheme,
+    createGlobalStyle,
+    ThemeConsumer,
+    ThemeProvider,
+} = styledComponents;
 
 export type Theme = { [key in ColorOption]: string };
 
@@ -45,4 +53,4 @@ export const generateOverlayBlack = (opacity = 0.6) => {
     return `rgba(0, 0, 0, ${opacity})`;
 };
 
-export { styled, css, keyframes, withTheme, createGlobalStyle, ThemeProvider };
+export { styled, css, keyframes, withTheme, createGlobalStyle, ThemeConsumer, ThemeProvider };