diff options
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, }; |