diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-06-28 06:14:21 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-06-28 06:14:21 +0800 |
commit | 47a267c3fa3498793568da79ebfc9b40c3d7129d (patch) | |
tree | e9ffb007bcb7146050b561a35d556247300afd72 /packages/website/ts/components/onboarding/onboarding_flow.tsx | |
parent | 36836eb942dbdcf64dd211b36523f3b98af2e6cb (diff) | |
download | dexon-sol-tools-47a267c3fa3498793568da79ebfc9b40c3d7129d.tar dexon-sol-tools-47a267c3fa3498793568da79ebfc9b40c3d7129d.tar.gz dexon-sol-tools-47a267c3fa3498793568da79ebfc9b40c3d7129d.tar.bz2 dexon-sol-tools-47a267c3fa3498793568da79ebfc9b40c3d7129d.tar.lz dexon-sol-tools-47a267c3fa3498793568da79ebfc9b40c3d7129d.tar.xz dexon-sol-tools-47a267c3fa3498793568da79ebfc9b40c3d7129d.tar.zst dexon-sol-tools-47a267c3fa3498793568da79ebfc9b40c3d7129d.zip |
Clicking overlay closes onboarding
Diffstat (limited to 'packages/website/ts/components/onboarding/onboarding_flow.tsx')
-rw-r--r-- | packages/website/ts/components/onboarding/onboarding_flow.tsx | 11 |
1 files changed, 9 insertions, 2 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 8d5952b5a..20ae17e18 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -3,6 +3,7 @@ import { Placement, Popper, PopperChildrenProps } from 'react-popper'; import { OnboardingCard } from 'ts/components/onboarding/onboarding_card'; import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip'; +import { zIndex } from 'ts/style/z_index'; import { Animation } from 'ts/components/ui/animation'; import { Container } from 'ts/components/ui/container'; import { Overlay } from 'ts/components/ui/overlay'; @@ -54,14 +55,20 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> { if (this.props.disableOverlay) { return onboardingElement; } - return <Overlay>{onboardingElement}</Overlay>; + return ( + <div> + <Overlay onClick={this.props.onClose} /> + {onboardingElement} + </div> + ); } private _getElementForStep(): Element { return document.querySelector(this._getCurrentStep().target); } private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode { + const customStyles = { zIndex: zIndex.aboveOverlay }; return ( - <div ref={props.ref} style={props.style} data-placement={props.placement}> + <div ref={props.ref} style={{ ...props.style, ...customStyles }} data-placement={props.placement}> {this._renderToolTip()} </div> ); |