diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-30 08:02:46 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-30 08:02:46 +0800 |
commit | 475698ed92dc6310591ec9d0653eaa931d7e03f6 (patch) | |
tree | 1698fb00bafe6a4a9fb4d88bbbdfc1f4d102b055 /packages | |
parent | 48ff13e3e22bf9f71bc1a367f86aaa0ae89989ae (diff) | |
download | dexon-0x-contracts-475698ed92dc6310591ec9d0653eaa931d7e03f6.tar dexon-0x-contracts-475698ed92dc6310591ec9d0653eaa931d7e03f6.tar.gz dexon-0x-contracts-475698ed92dc6310591ec9d0653eaa931d7e03f6.tar.bz2 dexon-0x-contracts-475698ed92dc6310591ec9d0653eaa931d7e03f6.tar.lz dexon-0x-contracts-475698ed92dc6310591ec9d0653eaa931d7e03f6.tar.xz dexon-0x-contracts-475698ed92dc6310591ec9d0653eaa931d7e03f6.tar.zst dexon-0x-contracts-475698ed92dc6310591ec9d0653eaa931d7e03f6.zip |
feat: add basic panel component and other small improvements
Diffstat (limited to 'packages')
-rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 8 | ||||
-rw-r--r-- | packages/instant/src/components/panel.tsx | 27 | ||||
-rw-r--r-- | packages/instant/src/components/ui/index.ts | 2 | ||||
-rw-r--r-- | packages/instant/src/components/zero_ex_instant_container.tsx | 5 | ||||
-rw-r--r-- | packages/instant/src/style/z_index.ts | 5 |
5 files changed, 40 insertions, 7 deletions
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 1ef276ff3..81aa62a77 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -8,9 +8,7 @@ import { AsyncProcessState, OrderProcessState, OrderState } from '../types'; import { format } from '../util/format'; import { AmountPlaceholder } from './amount_placeholder'; -import { Container, Flex, Text } from './ui'; -import { Icon } from './ui/icon'; -import { Spinner } from './ui/spinner'; +import { Container, Flex, Icon, Spinner, Text } from './ui'; export interface InstantHeadingProps { selectedAssetAmount?: BigNumber; @@ -72,11 +70,11 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { const processState = this.props.buyOrderState.processState; if (processState === OrderProcessState.FAILURE) { - return <Icon icon={'failed'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />; + return <Icon icon="failed" width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />; } else if (processState === OrderProcessState.PROCESSING) { return <Spinner widthPx={ICON_HEIGHT} heightPx={ICON_HEIGHT} />; } else if (processState === OrderProcessState.SUCCESS) { - return <Icon icon={'success'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />; + return <Icon icon="success" width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />; } return undefined; } diff --git a/packages/instant/src/components/panel.tsx b/packages/instant/src/components/panel.tsx new file mode 100644 index 000000000..bb16ed9b1 --- /dev/null +++ b/packages/instant/src/components/panel.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; +import { zIndex } from '../style/z_index'; + +import { Button, Container, Text } from './ui'; + +export interface PanelProps { + onClose?: () => void; +} + +export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose }) => ( + <Container + backgroundColor={ColorOption.white} + position="absolute" + top="0px" + left="0px" + width="100%" + height="100%" + zIndex={zIndex.panel} + > + <Button onClick={onClose}> + <Text fontColor={ColorOption.white}>Close </Text> + </Button> + {children} + </Container> +); diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts index bf5f6c700..7cfee2491 100644 --- a/packages/instant/src/components/ui/index.ts +++ b/packages/instant/src/components/ui/index.ts @@ -3,3 +3,5 @@ export { Button } from './button'; export { Flex } from './flex'; export { Container } from './container'; export { Input } from './input'; +export { Icon } from './icon'; +export { Spinner } from './spinner'; diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index ff19351ff..ded0d075e 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -6,6 +6,7 @@ import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_ import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading'; import { ColorOption } from '../style/theme'; +import { zIndex } from '../style/z_index'; import { Container, Flex } from './ui'; @@ -13,11 +14,11 @@ export interface ZeroExInstantContainerProps {} export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => ( <Container width="350px"> - <Container zIndex={1} position="relative"> + <Container zIndex={zIndex.errorPopup} position="relative"> <LatestError /> </Container> <Container - zIndex={2} + zIndex={zIndex.mainContainer} position="relative" backgroundColor={ColorOption.white} borderRadius="3px" diff --git a/packages/instant/src/style/z_index.ts b/packages/instant/src/style/z_index.ts new file mode 100644 index 000000000..727a5189d --- /dev/null +++ b/packages/instant/src/style/z_index.ts @@ -0,0 +1,5 @@ +export const zIndex = { + errorPopup: 1, + mainContainer: 2, + panel: 3, +}; |