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/order_details.tsx | |
parent | d9b7aa2e4ba088b4dda1b1d2956de5d267a0674e (diff) | |
download | dexon-0x-contracts-98f8c7749433e63d7fea3c4e932db1f251607e4d.tar dexon-0x-contracts-98f8c7749433e63d7fea3c4e932db1f251607e4d.tar.gz dexon-0x-contracts-98f8c7749433e63d7fea3c4e932db1f251607e4d.tar.bz2 dexon-0x-contracts-98f8c7749433e63d7fea3c4e932db1f251607e4d.tar.lz dexon-0x-contracts-98f8c7749433e63d7fea3c4e932db1f251607e4d.tar.xz dexon-0x-contracts-98f8c7749433e63d7fea3c4e932db1f251607e4d.tar.zst dexon-0x-contracts-98f8c7749433e63d7fea3c4e932db1f251607e4d.zip |
Add BuyButton and other small improvement
Diffstat (limited to 'packages/instant/src/components/order_details.tsx')
-rw-r--r-- | packages/instant/src/components/order_details.tsx | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx new file mode 100644 index 000000000..f90ee9f6f --- /dev/null +++ b/packages/instant/src/components/order_details.tsx @@ -0,0 +1,62 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Container, Flex, Text } from './ui'; + +export interface OrderDetailsProps {} + +export const OrderDetails: React.StatelessComponent<OrderDetailsProps> = props => ( + <Container backgroundColor={ColorOption.white} padding="20px" width="100%"> + <Container marginBottom="10px"> + <Text + letterSpacing="1px" + fontColor={ColorOption.primaryColor} + fontWeight={600} + textTransform="uppercase" + fontSize="14px" + > + Order Details + </Text> + </Container> + <OrderDetailsRow name="Token Price" primaryValue=".013 ETH" secondaryValue="$24.32" /> + <OrderDetailsRow name="Fee" primaryValue=".005 ETH" secondaryValue="$1.04" /> + <OrderDetailsRow name="Total Cost" primaryValue="1.66 ETH" secondaryValue="$589.56" shouldEmphasize={true} /> + </Container> +); + +OrderDetails.displayName = 'OrderDetails'; + +export interface OrderDetailsRowProps { + name: string; + primaryValue: string; + secondaryValue: string; + shouldEmphasize?: boolean; +} + +export const OrderDetailsRow: React.StatelessComponent<OrderDetailsRowProps> = props => { + const fontWeight = props.shouldEmphasize ? 700 : 400; + return ( + <Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}> + <Flex justify="space-between"> + <Text fontWeight={fontWeight} fontColor={ColorOption.grey}> + {props.name} + </Text> + <Container> + <Container marginRight="3px" display="inline-block"> + <Text fontColor={ColorOption.lightGrey}>({props.secondaryValue}) </Text> + </Container> + <Text fontWeight={fontWeight} fontColor={ColorOption.grey}> + {props.primaryValue} + </Text> + </Container> + </Flex> + </Container> + ); +}; + +OrderDetailsRow.defaultProps = { + shouldEmphasize: false, +}; + +OrderDetailsRow.displayName = 'OrderDetailsRow'; |