diff options
author | Francesco Agosti <francesco.agosti93@gmail.com> | 2018-10-11 09:27:54 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-10-11 09:27:54 +0800 |
commit | a5a033c359a1a00a144ae0655080b4e6d0e43c88 (patch) | |
tree | 50b79c4061c91753030bafa34ff6a60a5c97ea02 /packages/instant/src/components/instant_heading.tsx | |
parent | 01ccd8ff1a995f6b74f52533bc595cbc428b9eef (diff) | |
parent | 50442c3ebbf7a27e49f04a7f0512dcfed9686857 (diff) | |
download | dexon-0x-contracts-a5a033c359a1a00a144ae0655080b4e6d0e43c88.tar.gz dexon-0x-contracts-a5a033c359a1a00a144ae0655080b4e6d0e43c88.tar.zst dexon-0x-contracts-a5a033c359a1a00a144ae0655080b4e6d0e43c88.zip |
Merge pull request #1114 from 0xProject/feature/instant/redux-styles-container
[instant] Add styles and redux to instant
Diffstat (limited to 'packages/instant/src/components/instant_heading.tsx')
-rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 45 |
1 files changed, 45 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..be0414b8d --- /dev/null +++ b/packages/instant/src/components/instant_heading.tsx @@ -0,0 +1,45 @@ +import * as React from 'react'; + +import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input'; +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%" borderRadius="3px 3px 0px 0px"> + <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> + <SelectedAssetAmountInput fontSize="45px" /> + <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> +); |