diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-05 08:47:32 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-05 08:48:10 +0800 |
commit | 98f8c7749433e63d7fea3c4e932db1f251607e4d (patch) | |
tree | 7118d4d967079a1768539ae19d35b30f6ab42c26 /packages/instant/src/components/instant_heading.tsx | |
parent | d9b7aa2e4ba088b4dda1b1d2956de5d267a0674e (diff) | |
download | dexon-sol-tools-98f8c7749433e63d7fea3c4e932db1f251607e4d.tar dexon-sol-tools-98f8c7749433e63d7fea3c4e932db1f251607e4d.tar.gz dexon-sol-tools-98f8c7749433e63d7fea3c4e932db1f251607e4d.tar.bz2 dexon-sol-tools-98f8c7749433e63d7fea3c4e932db1f251607e4d.tar.lz dexon-sol-tools-98f8c7749433e63d7fea3c4e932db1f251607e4d.tar.xz dexon-sol-tools-98f8c7749433e63d7fea3c4e932db1f251607e4d.tar.zst dexon-sol-tools-98f8c7749433e63d7fea3c4e932db1f251607e4d.zip |
Add BuyButton and other small improvement
Diffstat (limited to 'packages/instant/src/components/instant_heading.tsx')
-rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx new file mode 100644 index 000000000..5aa82bcda --- /dev/null +++ b/packages/instant/src/components/instant_heading.tsx @@ -0,0 +1,46 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Container, Flex, Text } from './ui'; + +export interface InstantHeadingProps {} + +export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = props => ( + <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> +); |