Add faux order details section

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';

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>
 );

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',
 };