diff options
author | Francesco Agosti <francesco.agosti93@gmail.com> | 2018-11-09 08:29:34 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-11-09 08:29:34 +0800 |
commit | 3eac119399d3e2729ce65f748d9fb31207ac2540 (patch) | |
tree | 558aa4bb76eae3418cf411fcfba089ef8edf19ef /packages/instant/src/components/zero_ex_instant_overlay.tsx | |
parent | 117e2f583ff44bdb63340a2134edea0f3ecb77b3 (diff) | |
parent | cd44470a29c48275e6a2a4bba42734d8f900d387 (diff) | |
download | dexon-0x-contracts-3eac119399d3e2729ce65f748d9fb31207ac2540.tar.gz dexon-0x-contracts-3eac119399d3e2729ce65f748d9fb31207ac2540.tar.zst dexon-0x-contracts-3eac119399d3e2729ce65f748d9fb31207ac2540.zip |
Merge pull request #1230 from 0xProject/feature/instant/dropdown-ui
[instant] Dropdown Component Skeleton
Diffstat (limited to 'packages/instant/src/components/zero_ex_instant_overlay.tsx')
-rw-r--r-- | packages/instant/src/components/zero_ex_instant_overlay.tsx | 23 |
1 files changed, 21 insertions, 2 deletions
diff --git a/packages/instant/src/components/zero_ex_instant_overlay.tsx b/packages/instant/src/components/zero_ex_instant_overlay.tsx index 3461600e1..10438ab7a 100644 --- a/packages/instant/src/components/zero_ex_instant_overlay.tsx +++ b/packages/instant/src/components/zero_ex_instant_overlay.tsx @@ -1,5 +1,10 @@ import * as React from 'react'; +import { ColorOption } from '../style/theme'; + +import { Container } from './ui/container'; +import { Flex } from './ui/flex'; +import { Icon } from './ui/icon'; import { Overlay } from './ui/overlay'; import { ZeroExInstantContainer } from './zero_ex_instant_container'; import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider'; @@ -13,8 +18,22 @@ export const ZeroExInstantOverlay: React.StatelessComponent<ZeroExInstantOverlay const { onClose, zIndex, ...rest } = props; return ( <ZeroExInstantProvider {...rest}> - <Overlay onClose={onClose} zIndex={zIndex}> - <ZeroExInstantContainer /> + <Overlay zIndex={zIndex}> + <Flex height="100vh"> + <Container position="absolute" top="0px" right="0px" display={{ default: 'initial', sm: 'none' }}> + <Icon + height={18} + width={18} + color={ColorOption.white} + icon="closeX" + onClick={onClose} + padding="2em 2em" + /> + </Container> + <Container width={{ default: 'auto', sm: '100%' }} height={{ default: 'auto', sm: '100%' }}> + <ZeroExInstantContainer /> + </Container> + </Flex> </Overlay> </ZeroExInstantProvider> ); |