Merge branch 'development' of https://github.com/0xProject/0x-monorepo into feature/instant/prevent-css-leakage

3 files changed, 20 insertions, 12 deletions

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index db3f32f92..bffa1d7d4 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -1,17 +1,18 @@
 import { darken } from 'polished';
 
+import { MediaChoice, stylesForMedia } from '../../style/media';
 import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
 
 export interface ContainerProps {
-    display?: string;
+    display?: MediaChoice;
     position?: string;
     top?: string;
     right?: string;
     bottom?: string;
     left?: string;
-    width?: string;
-    height?: string;
+    width?: MediaChoice;
+    height?: MediaChoice;
     maxWidth?: string;
     margin?: string;
     marginTop?: string;
@@ -33,6 +34,7 @@ export interface ContainerProps {
     cursor?: string;
     overflow?: string;
     darkenOnHover?: boolean;
+    flexGrow?: string | number;
 }
 
 export const Container =
@@ -42,14 +44,12 @@ export const Container =
     && {
         all: initial;
         box-sizing: border-box;
-        ${props => cssRuleIfExists(props, 'display')}
+        ${props => cssRuleIfExists(props, 'flex-grow')}
         ${props => cssRuleIfExists(props, 'position')}
         ${props => cssRuleIfExists(props, 'top')}
         ${props => cssRuleIfExists(props, 'right')}
         ${props => cssRuleIfExists(props, 'bottom')}
         ${props => cssRuleIfExists(props, 'left')}
-        ${props => cssRuleIfExists(props, 'width')}
-        ${props => cssRuleIfExists(props, 'height')}
         ${props => cssRuleIfExists(props, 'max-width')}
         ${props => cssRuleIfExists(props, 'margin')}
         ${props => cssRuleIfExists(props, 'margin-top')}
@@ -67,6 +67,9 @@ export const Container =
         ${props => cssRuleIfExists(props, 'cursor')}
         ${props => cssRuleIfExists(props, 'overflow')}
         ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
+        ${props => props.display && stylesForMedia('display', props.display)}
+        ${props => (props.width ? stylesForMedia('width', props.width) : '')}
+        ${props => (props.height ? stylesForMedia('height', props.height) : '')}
         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/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 1ec8d1f92..5b00138b8 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -1,3 +1,4 @@
+import { MediaChoice, stylesForMedia } from '../../style/media';
 import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
 
@@ -6,10 +7,11 @@ export interface FlexProps {
     flexWrap?: 'wrap' | 'nowrap';
     justify?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
     align?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
-    width?: string;
-    height?: string;
+    width?: MediaChoice;
+    height?: MediaChoice;
     backgroundColor?: ColorOption;
     inline?: boolean;
+    flexGrow?: number | string;
 }
 
 export const Flex =
@@ -21,11 +23,12 @@ export const Flex =
         display: ${props => (props.inline ? 'inline-flex' : 'flex')};
         flex-direction: ${props => props.direction};
         flex-wrap: ${props => props.flexWrap};
+        ${props => cssRuleIfExists(props, 'flexGrow')}
         justify-content: ${props => props.justify};
         align-items: ${props => props.align};
-        ${props => cssRuleIfExists(props, 'width')}
-        ${props => cssRuleIfExists(props, 'height')}
         background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+        ${props => (props.width ? stylesForMedia('width', props.width) : '')}
+        ${props => (props.height ? stylesForMedia('height', props.height) : '')}
     }
 `;
 
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index deb16a0e8..8c9572615 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -15,10 +15,12 @@ export interface OverlayProps {
 
 const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => (
     <Flex height="100vh" className={className}>
-        <Container position="absolute" top="0px" right="0px">
+        <Container position="absolute" top="0px" right="0px" display={{ default: 'initial', sm: 'none' }}>
             <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" />
         </Container>
-        <div>{children}</div>
+        <Container width={{ default: 'auto', sm: '100%' }} height={{ default: 'auto', sm: '100%' }}>
+            {children}
+        </Container>
     </Flex>
 );
 export const Overlay = styled(PlainOverlay)`