Create zrx instant container heading

packages/instant/src/components/ui/flex.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
+import { cssRuleIfExists } from '../../style/util';
 
 export interface FlexProps {
     direction?: 'row' | 'column';
     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;
     backgroundColor?: ColorOption;
     className?: string;
 }
@@ -21,6 +23,7 @@ export const Flex = styled(PlainFlex)`
     flex-wrap: ${props => props.flexWrap};
     justify-content: ${props => props.justify};
     align-items: ${props => props.align};
+    ${props => cssRuleIfExists(props, 'width')}
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
 `;
 

packages/instant/src/components/ui/text.tsx

@@ -24,9 +24,9 @@ export interface TextProps {
 }
 
 const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick }) => (
-    <p className={className} onClick={onClick}>
+    <div className={className} onClick={onClick}>
         {children}
-    </p>
+    </div>
 );
 
 const darkenOnHoverAmount = 0.3;
@@ -61,9 +61,9 @@ Text.defaultProps = {
     fontWeight: 400,
     fontColor: ColorOption.black,
     fontSize: '15px',
-    lineHeight: '1.5em',
     textDecorationLine: 'none',
     noWrap: false,
+    display: 'inline-block',
 };
 
 Text.displayName = 'Text';

packages/instant/src/components/zero_ex_instant_container.tsx

@@ -7,32 +7,45 @@ import { Container, Flex, Text } from './ui';
 export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
-    <Container width="350px" borderRadius="3px">
-        <Flex direction="column">
-            <Container backgroundColor={ColorOption.primaryColor} padding="20px">
+    <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={600}
+                    fontWeight={500}
                     textTransform="uppercase"
+                    fontSize="12px"
                 >
                     I want to buy
                 </Text>
-                <Flex direction="row" justify="space-between">
-                    <Container>
-                        <Text textTransform="uppercase">0.00</Text>
-                        <Text textTransform="uppercase"> rep </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>
-                    <Flex direction="column">
-                        <Text> 0 ETH </Text>
-                        <Text> $0.00 </Text>
-                    </Flex>
+                </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>
-            </Container>
-            <Container padding="20px" backgroundColor={ColorOption.white}>
-                <Text>hey</Text>
-            </Container>
-        </Flex>
-    </Container>
+            </Flex>
+        </Container>
+        <Container padding="20px" backgroundColor={ColorOption.white} width="100%">
+            <Text>hey</Text>
+        </Container>
+    </Flex>
 );