diff options
3 files changed, 10 insertions, 2 deletions
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 /> |