From 7102a23b0a3a502f250071576821ce385a761f4d Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 10 Oct 2018 15:21:41 -0700
Subject: feat: add Steve to team page

---
 packages/website/public/images/team/steve.png | Bin 0 -> 49008 bytes
 packages/website/ts/pages/about/about.tsx     |  11 +++++++++++
 2 files changed, 11 insertions(+)
 create mode 100644 packages/website/public/images/team/steve.png

(limited to 'packages')

diff --git a/packages/website/public/images/team/steve.png b/packages/website/public/images/team/steve.png
new file mode 100644
index 000000000..751583fba
Binary files /dev/null and b/packages/website/public/images/team/steve.png differ
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index 037647161..2629f8632 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -240,6 +240,16 @@ const teamRow8: ProfileInfo[] = [
     },
 ];
 
+const teamRow9: ProfileInfo[] = [
+    {
+        name: 'Steve Klebanoff',
+        title: 'Senior Engineer',
+        description: ` Full-stack engineer. Previously Staff Software Engineer at Appfolio. Computer Science & Cognitive Psychology at Northeastern University.`,
+        image: 'images/team/steve.png',
+        linkedIn: 'https://www.linkedin.com/in/steveklebanoff/',
+    },
+];
+
 const advisors1: ProfileInfo[] = [
     {
         name: 'Fred Ehrsam',
@@ -348,6 +358,7 @@ export class About extends React.Component<AboutProps, AboutState> {
                         <div className="clearfix">{this._renderProfiles(teamRow6)}</div>
                         <div className="clearfix">{this._renderProfiles(teamRow7)}</div>
                         <div className="clearfix">{this._renderProfiles(teamRow8)}</div>
+                        <div className="clearfix">{this._renderProfiles(teamRow9)}</div>
                     </div>
                     <div className="pt3 pb2">
                         <div
-- 
cgit v1.2.3


From 0aef2c8ade2b0ae7b7ab7fef25ee4e8644a8b6c4 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Fri, 12 Oct 2018 15:35:20 -0700
Subject: feat(instant): add sliding error

---
 .../animations/slide_up_and_down_animation.tsx     | 100 +++++++++++++++++++++
 packages/instant/src/components/sliding_error.tsx  |  36 ++++++++
 packages/instant/src/components/ui/text.tsx        |   4 +
 .../src/components/zero_ex_instant_container.tsx   |  14 +--
 packages/instant/src/style/theme.ts                |   4 +
 5 files changed, 152 insertions(+), 6 deletions(-)
 create mode 100644 packages/instant/src/components/animations/slide_up_and_down_animation.tsx
 create mode 100644 packages/instant/src/components/sliding_error.tsx

(limited to 'packages')

diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
new file mode 100644
index 000000000..958684021
--- /dev/null
+++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
@@ -0,0 +1,100 @@
+import * as React from 'react';
+
+import { keyframes, styled } from '../../style/theme';
+
+const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes`
+    from {
+        position: relative;
+        top: ${fromY}
+    }
+
+    to {
+        position: relative;
+        top: ${toY}
+    }
+`;
+
+export interface SlideAnimationProps {
+    keyframes: string;
+    animationType: string;
+    animationDirection?: string;
+}
+export const SlideAnimation =
+    styled.div <
+    SlideAnimationProps >
+    `
+    animation-name: ${props => props.keyframes};
+    animation-duration: 0.3s;
+    animation-timing-function: ${props => props.animationType};
+    animation-delay: 0s;
+    animation-iteration-count: 1;
+    animation-fill-mode: ${props => props.animationDirection || 'none'};
+    position: relative;
+    z-index: -1;
+`;
+
+export const SlideUpAnimationComponent: React.StatelessComponent<{ downY: string }> = props => (
+    <SlideAnimation animationType="ease-in" keyframes={slideKeyframeGenerator(props.downY, '0px')}>
+        {props.children}
+    </SlideAnimation>
+);
+
+export const SlideDownAnimationComponent: React.StatelessComponent<{ downY: string }> = props => (
+    <SlideAnimation
+        animationDirection="forwards"
+        animationType="cubic-bezier(0.25, 0.1, 0.25, 1)"
+        keyframes={slideKeyframeGenerator('0px', props.downY)}
+    >
+        {props.children}
+    </SlideAnimation>
+);
+
+export interface SlideUpAndDownAnimationProps {
+    delayMs: number;
+    downY: string;
+}
+
+interface SlideUpAndDownState {
+    slideState: 'up' | 'down';
+}
+
+export class SlideUpAndDownAnimationComponent extends React.Component<
+    SlideUpAndDownAnimationProps,
+    SlideUpAndDownState
+> {
+    private _timeoutNumber: number | undefined;
+
+    constructor(props: SlideUpAndDownAnimationProps) {
+        super(props);
+        this._timeoutNumber = undefined;
+        this.state = {
+            slideState: 'up',
+        };
+    }
+
+    public render(): JSX.Element {
+        return this._renderSlide();
+    }
+
+    public componentDidMount(): void {
+        this._timeoutNumber = window.setTimeout(() => {
+            this.setState({
+                slideState: 'down',
+            });
+        }, this.props.delayMs);
+
+        return;
+    }
+
+    public componentWillUnmount(): void {
+        if (this._timeoutNumber) {
+            window.clearTimeout(this._timeoutNumber);
+        }
+    }
+
+    private readonly _renderSlide = (): JSX.Element => {
+        const SlideComponent = this.state.slideState === 'up' ? SlideUpAnimationComponent : SlideDownAnimationComponent;
+
+        return <SlideComponent downY={this.props.downY}>{this.props.children}</SlideComponent>;
+    };
+}
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
new file mode 100644
index 000000000..2e6decbad
--- /dev/null
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { SlideUpAndDownAnimationComponent } from './animations/slide_up_and_down_animation';
+
+import { Container, Text } from './ui';
+
+export interface ErrorProps {
+    icon: string;
+    message: string;
+}
+
+export const Error: React.StatelessComponent<ErrorProps> = props => (
+    <Container
+        padding="10px"
+        border={`1px solid ${ColorOption.darkOrange}`}
+        backgroundColor={ColorOption.lightOrange}
+        width="100%"
+        borderRadius="6px"
+        marginBottom="10px"
+    >
+        <Container marginRight="5px" display="inline">
+            {props.icon}
+        </Container>
+        <Text fontWeight="500" fontColor={ColorOption.darkOrange}>
+            {props.message}
+        </Text>
+    </Container>
+);
+
+export const SlidingError: React.StatelessComponent<ErrorProps> = props => (
+    <SlideUpAndDownAnimationComponent downY="120px" delayMs={5000}>
+        <Error icon={props.icon} message={props.message} />
+    </SlideUpAndDownAnimationComponent>
+);
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index 9fb8ea26f..af8e4d933 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -21,6 +21,8 @@ export interface TextProps {
     hoverColor?: string;
     noWrap?: boolean;
     display?: string;
+    marginRight?: string;
+    marginLeft?: string;
 }
 
 const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick }) => (
@@ -47,6 +49,8 @@ export const Text = styled(PlainText)`
     ${props => (props.display ? `display: ${props.display}` : '')};
     ${props => (props.letterSpacing ? `letter-spacing: ${props.letterSpacing}` : '')};
     ${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')};
+    ${props => (props.marginRight ? `margin-right: ${props.marginRight}` : '')};
+    ${props => (props.marginLeft ? `margin-right: ${props.marginLeft}` : '')};
     &:hover {
         ${props =>
             props.onClick
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 716227b51..56e4f091c 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -10,11 +10,13 @@ import { Container, Flex } from './ui';
 export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
-    <Container hasBoxShadow={true} width="350px" backgroundColor={ColorOption.white} borderRadius="3px">
-        <Flex direction="column" justify="flex-start">
-            <InstantHeading />
-            <OrderDetails />
-            <BuyButton />
-        </Flex>
+    <Container width="350px">
+        <Container backgroundColor={ColorOption.white} borderRadius="3px" hasBoxShadow={true}>
+            <Flex direction="column" justify="flex-start">
+                <InstantHeading />
+                <OrderDetails />
+                <BuyButton />
+            </Flex>
+        </Container>
     </Container>
 );
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index cf9da5378..d26c816c1 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -12,6 +12,8 @@ export enum ColorOption {
     feintGrey = 'feintGrey',
     darkGrey = 'darkGrey',
     white = 'white',
+    lightOrange = 'lightOrange',
+    darkOrange = 'darkOrange',
 }
 
 export const theme: Theme = {
@@ -22,6 +24,8 @@ export const theme: Theme = {
     feintGrey: '#DEDEDE',
     darkGrey: '#333333',
     white: 'white',
+    lightOrange: '#F9F2ED',
+    darkOrange: '#F2994C',
 };
 
 export { styled, css, injectGlobal, keyframes, ThemeProvider };
-- 
cgit v1.2.3


From 2aa4761d6dfaa007ed632816de9416a6477cd370 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 15 Oct 2018 10:28:26 -0700
Subject: add semicolons

---
 .../instant/src/components/animations/slide_up_and_down_animation.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
index 958684021..ce1539c70 100644
--- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
+++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
@@ -5,12 +5,12 @@ import { keyframes, styled } from '../../style/theme';
 const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes`
     from {
         position: relative;
-        top: ${fromY}
+        top: ${fromY};
     }
 
     to {
         position: relative;
-        top: ${toY}
+        top: ${toY};
     }
 `;
 
-- 
cgit v1.2.3


From af495143974941fb6cc4210b1965c17f007465e6 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 15 Oct 2018 13:12:52 -0700
Subject: suggestions from code review: renaming timeoutNumber to timeoutId,
 sharing interface, renaming component

---
 .../animations/slide_up_and_down_animation.tsx     | 36 ++++++++++------------
 packages/instant/src/components/sliding_error.tsx  |  6 ++--
 2 files changed, 19 insertions(+), 23 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
index ce1539c70..2e8061a19 100644
--- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
+++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
@@ -19,6 +19,7 @@ export interface SlideAnimationProps {
     animationType: string;
     animationDirection?: string;
 }
+
 export const SlideAnimation =
     styled.div <
     SlideAnimationProps >
@@ -33,13 +34,17 @@ export const SlideAnimation =
     z-index: -1;
 `;
 
-export const SlideUpAnimationComponent: React.StatelessComponent<{ downY: string }> = props => (
+export interface SlideAnimationComponentProps {
+    downY: string;
+}
+
+export const SlideUpAnimationComponent: React.StatelessComponent<SlideAnimationComponentProps> = props => (
     <SlideAnimation animationType="ease-in" keyframes={slideKeyframeGenerator(props.downY, '0px')}>
         {props.children}
     </SlideAnimation>
 );
 
-export const SlideDownAnimationComponent: React.StatelessComponent<{ downY: string }> = props => (
+export const SlideDownAnimationComponent: React.StatelessComponent<SlideAnimationComponentProps> = props => (
     <SlideAnimation
         animationDirection="forwards"
         animationType="cubic-bezier(0.25, 0.1, 0.25, 1)"
@@ -49,35 +54,28 @@ export const SlideDownAnimationComponent: React.StatelessComponent<{ downY: stri
     </SlideAnimation>
 );
 
-export interface SlideUpAndDownAnimationProps {
+export interface SlideUpAndDownAnimationProps extends SlideAnimationComponentProps {
     delayMs: number;
-    downY: string;
 }
 
 interface SlideUpAndDownState {
     slideState: 'up' | 'down';
 }
 
-export class SlideUpAndDownAnimationComponent extends React.Component<
-    SlideUpAndDownAnimationProps,
-    SlideUpAndDownState
-> {
-    private _timeoutNumber: number | undefined;
-
+export class SlideUpAndDownAnimation extends React.Component<SlideUpAndDownAnimationProps, SlideUpAndDownState> {
+    private _timeoutId: number | undefined;
     constructor(props: SlideUpAndDownAnimationProps) {
         super(props);
-        this._timeoutNumber = undefined;
+        this._timeoutId = undefined;
         this.state = {
             slideState: 'up',
         };
     }
-
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return this._renderSlide();
     }
-
     public componentDidMount(): void {
-        this._timeoutNumber = window.setTimeout(() => {
+        this._timeoutId = window.setTimeout(() => {
             this.setState({
                 slideState: 'down',
             });
@@ -85,14 +83,12 @@ export class SlideUpAndDownAnimationComponent extends React.Component<
 
         return;
     }
-
     public componentWillUnmount(): void {
-        if (this._timeoutNumber) {
-            window.clearTimeout(this._timeoutNumber);
+        if (this._timeoutId) {
+            window.clearTimeout(this._timeoutId);
         }
     }
-
-    private readonly _renderSlide = (): JSX.Element => {
+    private readonly _renderSlide = (): React.ReactNode => {
         const SlideComponent = this.state.slideState === 'up' ? SlideUpAnimationComponent : SlideDownAnimationComponent;
 
         return <SlideComponent downY={this.props.downY}>{this.props.children}</SlideComponent>;
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index 2e6decbad..0237fb7e9 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
-import { SlideUpAndDownAnimationComponent } from './animations/slide_up_and_down_animation';
+import { SlideUpAndDownAnimation } from './animations/slide_up_and_down_animation';
 
 import { Container, Text } from './ui';
 
@@ -30,7 +30,7 @@ export const Error: React.StatelessComponent<ErrorProps> = props => (
 );
 
 export const SlidingError: React.StatelessComponent<ErrorProps> = props => (
-    <SlideUpAndDownAnimationComponent downY="120px" delayMs={5000}>
+    <SlideUpAndDownAnimation downY="120px" delayMs={5000}>
         <Error icon={props.icon} message={props.message} />
-    </SlideUpAndDownAnimationComponent>
+    </SlideUpAndDownAnimation>
 );
-- 
cgit v1.2.3


From 58ad7d7caf475309dbd4e4486a1ed43404d5193c Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 15 Oct 2018 13:15:02 -0700
Subject: change to ? syntax instead of number | undefined

---
 .../instant/src/components/animations/slide_up_and_down_animation.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
index 2e8061a19..da34b7485 100644
--- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
+++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
@@ -63,7 +63,7 @@ interface SlideUpAndDownState {
 }
 
 export class SlideUpAndDownAnimation extends React.Component<SlideUpAndDownAnimationProps, SlideUpAndDownState> {
-    private _timeoutId: number | undefined;
+    private _timeoutId?: number;
     constructor(props: SlideUpAndDownAnimationProps) {
         super(props);
         this._timeoutId = undefined;
-- 
cgit v1.2.3


From 20d60e2368b361e5055ddded9858cd11795b84d0 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 15 Oct 2018 13:33:30 -0700
Subject: dont need constructor just to set state git status

---
 .../animations/slide_up_and_down_animation.tsx       | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
index da34b7485..05dda78be 100644
--- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
+++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
@@ -36,6 +36,7 @@ export const SlideAnimation =
 
 export interface SlideAnimationComponentProps {
     downY: string;
+    children?: React.ReactNode;
 }
 
 export const SlideUpAnimationComponent: React.StatelessComponent<SlideAnimationComponentProps> = props => (
@@ -58,26 +59,27 @@ export interface SlideUpAndDownAnimationProps extends SlideAnimationComponentPro
     delayMs: number;
 }
 
+enum SlideState {
+    Up = 'up',
+    Down = 'down',
+}
 interface SlideUpAndDownState {
-    slideState: 'up' | 'down';
+    slideState: SlideState;
 }
 
 export class SlideUpAndDownAnimation extends React.Component<SlideUpAndDownAnimationProps, SlideUpAndDownState> {
+    public state = {
+        slideState: SlideState.Up,
+    };
+
     private _timeoutId?: number;
-    constructor(props: SlideUpAndDownAnimationProps) {
-        super(props);
-        this._timeoutId = undefined;
-        this.state = {
-            slideState: 'up',
-        };
-    }
     public render(): React.ReactNode {
         return this._renderSlide();
     }
     public componentDidMount(): void {
         this._timeoutId = window.setTimeout(() => {
             this.setState({
-                slideState: 'down',
+                slideState: SlideState.Down,
             });
         }, this.props.delayMs);
 
-- 
cgit v1.2.3


From 14b47f3a9f18e8c348166036ea9decdd78c8699e Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 15 Oct 2018 13:39:00 -0700
Subject: better private function syntax

---
 .../instant/src/components/animations/slide_up_and_down_animation.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
index 05dda78be..ce38e28b9 100644
--- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
+++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
@@ -90,9 +90,9 @@ export class SlideUpAndDownAnimation extends React.Component<SlideUpAndDownAnima
             window.clearTimeout(this._timeoutId);
         }
     }
-    private readonly _renderSlide = (): React.ReactNode => {
+    private _renderSlide(): React.ReactNode {
         const SlideComponent = this.state.slideState === 'up' ? SlideUpAnimationComponent : SlideDownAnimationComponent;
 
         return <SlideComponent downY={this.props.downY}>{this.props.children}</SlideComponent>;
-    };
+    }
 }
-- 
cgit v1.2.3


From 7325e1669897cb9bbacaf28319b470e45ec0d4e7 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 15 Oct 2018 13:41:36 -0700
Subject: get rid of unused marginLeft and marginRight props

---
 packages/instant/src/components/ui/text.tsx | 4 ----
 1 file changed, 4 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index af8e4d933..9fb8ea26f 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -21,8 +21,6 @@ export interface TextProps {
     hoverColor?: string;
     noWrap?: boolean;
     display?: string;
-    marginRight?: string;
-    marginLeft?: string;
 }
 
 const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick }) => (
@@ -49,8 +47,6 @@ export const Text = styled(PlainText)`
     ${props => (props.display ? `display: ${props.display}` : '')};
     ${props => (props.letterSpacing ? `letter-spacing: ${props.letterSpacing}` : '')};
     ${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')};
-    ${props => (props.marginRight ? `margin-right: ${props.marginRight}` : '')};
-    ${props => (props.marginLeft ? `margin-right: ${props.marginLeft}` : '')};
     &:hover {
         ${props =>
             props.onClick
-- 
cgit v1.2.3


From f13d061dd2725bd87a6021dec2dad6f1cccb57dc Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 15 Oct 2018 14:04:53 -0700
Subject: move z-index setting to zero instant container, and add ability for
 zindex to be set on container

---
 .../src/components/animations/slide_up_and_down_animation.tsx    | 1 -
 packages/instant/src/components/ui/container.tsx                 | 2 ++
 packages/instant/src/components/zero_ex_instant_container.tsx    | 9 ++++++++-
 3 files changed, 10 insertions(+), 2 deletions(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
index ce38e28b9..a78607afa 100644
--- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
+++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
@@ -31,7 +31,6 @@ export const SlideAnimation =
     animation-iteration-count: 1;
     animation-fill-mode: ${props => props.animationDirection || 'none'};
     position: relative;
-    z-index: -1;
 `;
 
 export interface SlideAnimationComponentProps {
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index c45f6e5e9..02b16e39f 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -26,6 +26,7 @@ export interface ContainerProps {
     className?: string;
     backgroundColor?: ColorOption;
     hasBoxShadow?: boolean;
+    zIndex?: number;
 }
 
 const PlainContainer: React.StatelessComponent<ContainerProps> = ({ children, className }) => (
@@ -52,6 +53,7 @@ export const Container = styled(PlainContainer)`
     ${props => cssRuleIfExists(props, 'border')}
     ${props => cssRuleIfExists(props, 'border-top')}
     ${props => cssRuleIfExists(props, 'border-bottom')}
+    ${props => cssRuleIfExists(props, 'z-index')}
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
     border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 56e4f091c..cbbcf979d 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -5,13 +5,20 @@ import { ColorOption } from '../style/theme';
 import { BuyButton } from './buy_button';
 import { InstantHeading } from './instant_heading';
 import { OrderDetails } from './order_details';
+import { SlidingError } from './sliding_error';
 import { Container, Flex } from './ui';
 
 export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
     <Container width="350px">
-        <Container backgroundColor={ColorOption.white} borderRadius="3px" hasBoxShadow={true}>
+        <Container
+            zIndex={2}
+            position="relative"
+            backgroundColor={ColorOption.white}
+            borderRadius="3px"
+            hasBoxShadow={true}
+        >
             <Flex direction="column" justify="flex-start">
                 <InstantHeading />
                 <OrderDetails />
-- 
cgit v1.2.3


From 45ff83d8528af047e35d0cbe5358624a2b086fa7 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 15 Oct 2018 14:15:58 -0700
Subject: remove unused import

---
 packages/instant/src/components/zero_ex_instant_container.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index cbbcf979d..a384c5f1b 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -5,7 +5,6 @@ import { ColorOption } from '../style/theme';
 import { BuyButton } from './buy_button';
 import { InstantHeading } from './instant_heading';
 import { OrderDetails } from './order_details';
-import { SlidingError } from './sliding_error';
 import { Container, Flex } from './ui';
 
 export interface ZeroExInstantContainerProps {}
-- 
cgit v1.2.3


From b0a2cacd82ba3e24f22470f624be0f3d8324a478 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Mon, 15 Oct 2018 17:11:43 -0700
Subject: take out explicit children definition in props

---
 .../instant/src/components/animations/slide_up_and_down_animation.tsx    | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages')

diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
index a78607afa..9c18e0933 100644
--- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
+++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
@@ -35,7 +35,6 @@ export const SlideAnimation =
 
 export interface SlideAnimationComponentProps {
     downY: string;
-    children?: React.ReactNode;
 }
 
 export const SlideUpAnimationComponent: React.StatelessComponent<SlideAnimationComponentProps> = props => (
-- 
cgit v1.2.3