Add box shadow and default box-sizing: border-box to container

5 files changed, 11 insertions, 9 deletions

diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 851d155a9..044a9137b 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -14,6 +14,7 @@
         }
 
         body {
+            margin: 0;
             background-color: rgba(0, 0, 0, 0.2);
         }
     </style>
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 9a70d127f..5a32b9575 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -7,7 +7,7 @@ import { Button, Container, Text } from './ui';
 export interface BuyButtonProps {}
 
 export const BuyButton: React.StatelessComponent<BuyButtonProps> = props => (
-    <Container backgroundColor={ColorOption.white} padding="20px" width="100%">
+    <Container padding="20px" width="100%">
         <Button width="100%">
             <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
                 Buy
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index f90ee9f6f..dbf2c1f0b 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -7,7 +7,7 @@ import { Container, Flex, Text } from './ui';
 export interface OrderDetailsProps {}
 
 export const OrderDetails: React.StatelessComponent<OrderDetailsProps> = props => (
-    <Container backgroundColor={ColorOption.white} padding="20px" width="100%">
+    <Container padding="20px" width="100%">
         <Container marginBottom="10px">
             <Text
                 letterSpacing="1px"
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index bc47ba0aa..64b5d4129 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -18,7 +18,6 @@ export interface ContainerProps {
     marginBottom?: string;
     marginLeft?: string;
     padding?: string;
-    boxShadow?: string;
     borderRadius?: string;
     border?: string;
     borderColor?: ColorOption;
@@ -33,6 +32,7 @@ const PlainContainer: React.StatelessComponent<ContainerProps> = ({ children, cl
 );
 
 export const Container = styled(PlainContainer)`
+    box-sizing: border-box;
     ${props => cssRuleIfExists(props, 'display')}
     ${props => cssRuleIfExists(props, 'position')}
     ${props => cssRuleIfExists(props, 'top')}
@@ -47,7 +47,6 @@ export const Container = styled(PlainContainer)`
     ${props => cssRuleIfExists(props, 'margin-bottom')}
     ${props => cssRuleIfExists(props, 'margin-left')}
     ${props => cssRuleIfExists(props, 'padding')}
-    ${props => cssRuleIfExists(props, 'box-shadow')}
     ${props => cssRuleIfExists(props, 'border-radius')}
     ${props => cssRuleIfExists(props, 'border')}
     ${props => cssRuleIfExists(props, 'border-top')}
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index d6df3ccc0..d33b4bfd5 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -10,9 +10,11 @@ import { Container, Flex, Text } from './ui';
 export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
-    <Flex direction="column" width="350px" justify="flex-start">
-        <InstantHeading />
-        <OrderDetails />
-        <BuyButton />
-    </Flex>
+    <Container hasBoxShadow={true} width="350px" backgroundColor={ColorOption.white}>
+        <Flex direction="column" justify="flex-start">
+            <InstantHeading />
+            <OrderDetails />
+            <BuyButton />
+        </Flex>
+    </Container>
 );