diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-05 05:59:07 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-05 05:59:07 +0800 |
commit | a8b01fedb1cbe61daf20dc6e0b62ccd7b1bc9b92 (patch) | |
tree | 29b6cc8e65d18f59044d4536d0ba84157efc8c35 /packages/instant/src/components/zero_ex_instant_container.tsx | |
parent | 85c34b17aa074e67ed9263094cc0ee75a8f00e60 (diff) | |
download | dexon-0x-contracts-a8b01fedb1cbe61daf20dc6e0b62ccd7b1bc9b92.tar dexon-0x-contracts-a8b01fedb1cbe61daf20dc6e0b62ccd7b1bc9b92.tar.gz dexon-0x-contracts-a8b01fedb1cbe61daf20dc6e0b62ccd7b1bc9b92.tar.bz2 dexon-0x-contracts-a8b01fedb1cbe61daf20dc6e0b62ccd7b1bc9b92.tar.lz dexon-0x-contracts-a8b01fedb1cbe61daf20dc6e0b62ccd7b1bc9b92.tar.xz dexon-0x-contracts-a8b01fedb1cbe61daf20dc6e0b62ccd7b1bc9b92.tar.zst dexon-0x-contracts-a8b01fedb1cbe61daf20dc6e0b62ccd7b1bc9b92.zip |
Improve utilities and try to use them in simple form component
Diffstat (limited to 'packages/instant/src/components/zero_ex_instant_container.tsx')
-rw-r--r-- | packages/instant/src/components/zero_ex_instant_container.tsx | 38 |
1 files changed, 38 insertions, 0 deletions
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx new file mode 100644 index 000000000..fc936c3f2 --- /dev/null +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +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"> + <Text + letterSpacing="1px" + fontColor={ColorOption.white} + opacity={0.7} + fontWeight={600} + textTransform="uppercase" + > + 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="column"> + <Text> 0 ETH </Text> + <Text> $0.00 </Text> + </Flex> + </Flex> + </Container> + <Container padding="20px" backgroundColor={ColorOption.white}> + <Text>hey</Text> + </Container> + </Flex> + </Container> +); |