aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx9
-rw-r--r--packages/website/ts/components/onboarding/onboarding_tooltip.tsx15
-rw-r--r--packages/website/ts/components/top_bar/provider_display.tsx3
-rw-r--r--packages/website/ts/components/ui/container.tsx15
-rw-r--r--packages/website/ts/components/ui/overlay.tsx34
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx3
-rw-r--r--packages/website/ts/utils/style.ts3
7 files changed, 69 insertions, 13 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 9c416c2e1..8af1a3a3f 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
import { Placement, Popper, PopperChildrenProps } from 'react-popper';
import { OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip';
+import { Overlay } from 'ts/components/ui/overlay';
import { zIndex } from 'ts/utils/style';
export interface Step {
@@ -35,9 +36,11 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
return null;
}
return (
- <Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}>
- {this._renderPopperChildren.bind(this)}
- </Popper>
+ <Overlay onClick={this.props.onClose}>
+ <Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}>
+ {this._renderPopperChildren.bind(this)}
+ </Popper>
+ </Overlay>
);
}
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
index 3994b0546..2d316b6b7 100644
--- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
+import { Container } from 'ts/components/ui/container';
import { Island } from 'ts/components/ui/island';
export interface OnboardingTooltipProps {
@@ -13,10 +14,14 @@ export interface OnboardingTooltipProps {
export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = (props: OnboardingTooltipProps) => (
<Island>
- {props.title}
- {props.content}
- <button onClick={props.onClickBack}>Back</button>
- <button onClick={props.onClickNext}>Skip</button>
- <button onClick={props.onClose}>Close</button>
+ <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px">
+ <div className="flex flex-column">
+ {props.title}
+ {props.content}
+ <button onClick={props.onClickBack}>Back</button>
+ <button onClick={props.onClickNext}>Skip</button>
+ <button onClick={props.onClose}>Close</button>
+ </div>
+ </Container>
</Island>
);
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 1cead7a5d..82c95aa6d 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -11,6 +11,7 @@ import { Dispatcher } from 'ts/redux/dispatcher';
import { ProviderType } from 'ts/types';
import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
+import { zIndex } from 'ts/utils/style';
import { utils } from 'ts/utils/utils';
const ROOT_HEIGHT = 24;
@@ -33,6 +34,8 @@ const styles: Styles = {
backgroundColor: colors.white,
borderRadius: ROOT_HEIGHT,
boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
+ zIndex: zIndex.aboveOverlay,
+ position: 'relative',
},
};
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 07868608c..d577447b0 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -1,10 +1,17 @@
import * as React from 'react';
+type StringOrNum = string | number;
+
export interface ContainerProps {
- marginTop?: string | number;
- marginBottom?: string | number;
- marginRight?: string | number;
- marginLeft?: string | number;
+ marginTop?: StringOrNum;
+ marginBottom?: StringOrNum;
+ marginRight?: StringOrNum;
+ marginLeft?: StringOrNum;
+ paddingTop?: StringOrNum;
+ paddingBottom?: StringOrNum;
+ paddingRight?: StringOrNum;
+ paddingLeft?: StringOrNum;
+ maxWidth?: StringOrNum;
children?: React.ReactNode;
}
diff --git a/packages/website/ts/components/ui/overlay.tsx b/packages/website/ts/components/ui/overlay.tsx
new file mode 100644
index 000000000..bb2ed8e59
--- /dev/null
+++ b/packages/website/ts/components/ui/overlay.tsx
@@ -0,0 +1,34 @@
+import { colors } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { zIndex } from 'ts/utils/style';
+
+export interface OverlayProps {
+ children?: React.ReactNode;
+ style?: React.CSSProperties;
+ onClick?: () => void;
+}
+
+const style: React.CSSProperties = {
+ position: 'fixed',
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
+ zIndex: zIndex.overlay,
+ backgroundColor: 'rgba(0, 0, 0, 0.6)',
+};
+
+export const Overlay: React.StatelessComponent = (props: OverlayProps) => (
+ <div style={{ ...style, ...props.style }} onClick={props.onClick}>
+ {props.children}
+ </div>
+);
+
+Overlay.defaultProps = {
+ style: {},
+ onClick: _.noop,
+};
+
+Overlay.displayName = 'Overlay';
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 39e591bac..eab986208 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -47,6 +47,7 @@ import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles';
+import { zIndex } from '../../utils/style';
export interface WalletProps {
userAddress: string;
@@ -85,6 +86,8 @@ interface AccessoryItemConfig {
const styles: Styles = {
root: {
width: '100%',
+ zIndex: zIndex.aboveOverlay,
+ position: 'relative',
},
headerItemInnerDiv: {
paddingLeft: 65,
diff --git a/packages/website/ts/utils/style.ts b/packages/website/ts/utils/style.ts
index 51b6e4eb6..0411cdd91 100644
--- a/packages/website/ts/utils/style.ts
+++ b/packages/website/ts/utils/style.ts
@@ -1,4 +1,5 @@
export const zIndex = {
topBar: 1100,
- overlay: 1101,
+ overlay: 1105,
+ aboveOverlay: 1106,
};