aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-10-30 08:02:46 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-10-30 08:02:46 +0800
commit475698ed92dc6310591ec9d0653eaa931d7e03f6 (patch)
tree1698fb00bafe6a4a9fb4d88bbbdfc1f4d102b055 /packages/instant/src
parent48ff13e3e22bf9f71bc1a367f86aaa0ae89989ae (diff)
downloaddexon-sol-tools-475698ed92dc6310591ec9d0653eaa931d7e03f6.tar
dexon-sol-tools-475698ed92dc6310591ec9d0653eaa931d7e03f6.tar.gz
dexon-sol-tools-475698ed92dc6310591ec9d0653eaa931d7e03f6.tar.bz2
dexon-sol-tools-475698ed92dc6310591ec9d0653eaa931d7e03f6.tar.lz
dexon-sol-tools-475698ed92dc6310591ec9d0653eaa931d7e03f6.tar.xz
dexon-sol-tools-475698ed92dc6310591ec9d0653eaa931d7e03f6.tar.zst
dexon-sol-tools-475698ed92dc6310591ec9d0653eaa931d7e03f6.zip
feat: add basic panel component and other small improvements
Diffstat (limited to 'packages/instant/src')
-rw-r--r--packages/instant/src/components/instant_heading.tsx8
-rw-r--r--packages/instant/src/components/panel.tsx27
-rw-r--r--packages/instant/src/components/ui/index.ts2
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx5
-rw-r--r--packages/instant/src/style/z_index.ts5
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,
+};