aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-10-05 09:02:42 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-10-05 09:02:42 +0800
commit1001dfcc30d9e7a049cc0d7719131adec6344f6c (patch)
tree805acc01211cca9dc4d086141eaf4f0adc8db80a /packages/instant/src
parent98f8c7749433e63d7fea3c4e932db1f251607e4d (diff)
downloaddexon-sol-tools-1001dfcc30d9e7a049cc0d7719131adec6344f6c.tar
dexon-sol-tools-1001dfcc30d9e7a049cc0d7719131adec6344f6c.tar.gz
dexon-sol-tools-1001dfcc30d9e7a049cc0d7719131adec6344f6c.tar.bz2
dexon-sol-tools-1001dfcc30d9e7a049cc0d7719131adec6344f6c.tar.lz
dexon-sol-tools-1001dfcc30d9e7a049cc0d7719131adec6344f6c.tar.xz
dexon-sol-tools-1001dfcc30d9e7a049cc0d7719131adec6344f6c.tar.zst
dexon-sol-tools-1001dfcc30d9e7a049cc0d7719131adec6344f6c.zip
Add box shadow and default box-sizing: border-box to container
Diffstat (limited to 'packages/instant/src')
-rw-r--r--packages/instant/src/components/buy_button.tsx2
-rw-r--r--packages/instant/src/components/order_details.tsx2
-rw-r--r--packages/instant/src/components/ui/container.tsx3
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx12
4 files changed, 10 insertions, 9 deletions
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>
);