diff options
| author | fragosti <francesco.agosti93@gmail.com> | 2018-10-05 07:27:04 +0800 |
|---|---|---|
| committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-05 07:27:04 +0800 |
| commit | 0cfe5637c048091c9502d49c8526e17cefb1a525 (patch) | |
| tree | b6bfde2c8eed26fc93dde160fe64f7fad0af2fdf /packages/instant/src/components/zero_ex_instant_container.tsx | |
| parent | e2220a939f75087bf5f7fd1dbb02ed5ae4ec64e4 (diff) | |
| download | dexon-0x-contracts-0cfe5637c048091c9502d49c8526e17cefb1a525.tar.gz dexon-0x-contracts-0cfe5637c048091c9502d49c8526e17cefb1a525.tar.zst dexon-0x-contracts-0cfe5637c048091c9502d49c8526e17cefb1a525.zip | |
Create zrx instant container heading
Diffstat (limited to 'packages/instant/src/components/zero_ex_instant_container.tsx')
| -rw-r--r-- | packages/instant/src/components/zero_ex_instant_container.tsx | 49 |
1 files changed, 31 insertions, 18 deletions
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index fc936c3f2..b5853594f 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/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> + </Container> + <Flex direction="column" justify="space-between"> + <Container marginBottom="5px"> + <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}> + 0 ETH + </Text> </Container> - <Flex direction="column"> - <Text> 0 ETH </Text> - <Text> $0.00 </Text> - </Flex> + <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> ); |