aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/instant/public/index.html2
-rw-r--r--packages/instant/src/components/order_details.tsx2
-rw-r--r--packages/instant/src/components/ui/container.tsx3
-rw-r--r--packages/instant/src/components/ui/flex.tsx2
-rw-r--r--packages/instant/src/components/ui/overlay.tsx4
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx6
6 files changed, 13 insertions, 6 deletions
diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index cf9e0eda0..418e6261f 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -13,7 +13,7 @@
display: flex;
justify-content: center;
align-items: center;
- height: 100vh;
+ /*height: 100vh;*/
}
body {
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index 704009d89..2d98adf7e 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -23,7 +23,7 @@ export class OrderDetails extends React.Component<OrderDetailsProps> {
const ethTokenFee = buyQuoteAccessor.feeEthAmount();
const totalEthAmount = buyQuoteAccessor.totalEthAmount();
return (
- <Container padding="20px" width="100%">
+ <Container padding="20px" width="100%" flexGrow={1}>
<Container marginBottom="10px">
<Text
letterSpacing="1px"
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index a0a187e5f..228085f51 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -33,13 +33,16 @@ export interface ContainerProps {
cursor?: string;
overflow?: string;
darkenOnHover?: boolean;
+ flexGrow?: string | number;
}
+// TODO Dont commit flex grow
export const Container =
styled.div <
ContainerProps >
`
box-sizing: border-box;
+ ${props => cssRuleIfExists(props, 'flex-grow')}
${props => cssRuleIfExists(props, 'display')}
${props => cssRuleIfExists(props, 'position')}
${props => cssRuleIfExists(props, 'top')}
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 29c6511bb..57abd8b5b 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -10,6 +10,7 @@ export interface FlexProps {
height?: string;
backgroundColor?: ColorOption;
inline?: boolean;
+ flexGrow?: number | string;
}
export const Flex =
@@ -19,6 +20,7 @@ export const Flex =
display: ${props => (props.inline ? 'inline-flex' : 'flex')};
flex-direction: ${props => props.direction};
flex-wrap: ${props => props.flexWrap};
+ ${props => cssRuleIfExists(props, 'flexGrow')}
justify-content: ${props => props.justify};
align-items: ${props => props.align};
${props => cssRuleIfExists(props, 'width')}
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index f1706c874..e930ffacd 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -14,11 +14,11 @@ export interface OverlayProps {
}
const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => (
- <Flex height="100vh" className={className}>
+ <Flex className={className}>
<Container position="absolute" top="0px" right="0px">
<Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" />
</Container>
- <div>{children}</div>
+ <Container height="100%">{children}</Container>
</Flex>
);
export const Overlay = styled(PlainOverlay)`
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index c1bd17502..cf7a04554 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -14,6 +14,7 @@ import { zIndex } from '../style/z_index';
import { SlideAnimationState } from './animations/slide_animation';
import { SlidingPanel } from './sliding_panel';
import { Container, Flex } from './ui';
+
export interface ZeroExInstantContainerProps {}
export interface ZeroExInstantContainerState {
tokenSelectionPanelAnimationState: SlideAnimationState;
@@ -25,7 +26,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
};
public render(): React.ReactNode {
return (
- <Container width="350px" position="relative">
+ <Container width="350px" height="100%" position="relative">
<Container zIndex={zIndex.errorPopup} position="relative">
<LatestError />
</Container>
@@ -36,8 +37,9 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
borderRadius="3px"
hasBoxShadow={true}
overflow="hidden"
+ height="100%"
>
- <Flex direction="column" justify="flex-start">
+ <Flex direction="column" height="100%" justify="flex-start">
<SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
<SelectedAssetBuyOrderProgress />
<LatestBuyQuoteOrderDetails />