diff options
| -rw-r--r-- | packages/instant/src/components/ui/container.tsx | 8 | ||||
| -rw-r--r-- | packages/instant/src/components/zero_ex_instant_container.tsx | 43 | ||||
| -rw-r--r-- | packages/instant/src/style/theme.ts | 4 |
3 files changed, 15 insertions, 40 deletions
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index 8366d5748..4ebaf2af3 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -20,6 +20,9 @@ export interface ContainerProps { padding?: string; boxShadow?: string; borderRadius?: string; + border?: string; + borderColor?: ColorOption; + borderTop?: string; className?: string; backgroundColor?: ColorOption; } @@ -45,11 +48,14 @@ export const Container = styled(PlainContainer)` ${props => cssRuleIfExists(props, 'padding')} ${props => cssRuleIfExists(props, 'box-shadow')} ${props => cssRuleIfExists(props, 'border-radius')} + ${props => cssRuleIfExists(props, 'border')} + ${props => cssRuleIfExists(props, 'border-top')} background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; + border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')}; `; Container.defaultProps = { - display: 'inline-block', + display: 'block', }; Container.displayName = 'Container'; diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index b5853594f..efda6ecaf 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -2,50 +2,15 @@ import * as React from 'react'; import { ColorOption } from '../style/theme'; +import { InstantHeading } from './instant_heading'; +import { OrderDetails } from './order_details'; import { Container, Flex, Text } from './ui'; export interface ZeroExInstantContainerProps {} export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => ( <Flex direction="column" width="350px" justify="flex-start"> - <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%"> - <Container marginBottom="5px"> - <Text - letterSpacing="1px" - fontColor={ColorOption.white} - opacity={0.7} - fontWeight={500} - textTransform="uppercase" - fontSize="12px" - > - I want to buy - </Text> - </Container> - <Flex direction="row" justify="space-between"> - <Container> - <Text fontSize="45px" fontColor={ColorOption.white} opacity={0.7} textTransform="uppercase"> - 0.00 - </Text> - <Container display="inline-block" marginLeft="10px"> - <Text fontSize="45px" fontColor={ColorOption.white} textTransform="uppercase"> - rep - </Text> - </Container> - </Container> - <Flex direction="column" justify="space-between"> - <Container marginBottom="5px"> - <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}> - 0 ETH - </Text> - </Container> - <Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}> - $0.00 - </Text> - </Flex> - </Flex> - </Container> - <Container padding="20px" backgroundColor={ColorOption.white} width="100%"> - <Text>hey</Text> - </Container> + <InstantHeading /> + <OrderDetails /> </Flex> ); diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts index 02f890492..cf9da5378 100644 --- a/packages/instant/src/style/theme.ts +++ b/packages/instant/src/style/theme.ts @@ -8,6 +8,8 @@ export enum ColorOption { primaryColor = 'primaryColor', black = 'black', lightGrey = 'lightGrey', + grey = 'grey', + feintGrey = 'feintGrey', darkGrey = 'darkGrey', white = 'white', } @@ -16,6 +18,8 @@ export const theme: Theme = { primaryColor: '#512D80', black: 'black', lightGrey: '#999999', + grey: '#666666', + feintGrey: '#DEDEDE', darkGrey: '#333333', white: 'white', }; |