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 | |
parent | 36836eb942dbdcf64dd211b36523f3b98af2e6cb (diff) | |
download | dexon-0x-contracts-47a267c3fa3498793568da79ebfc9b40c3d7129d.tar dexon-0x-contracts-47a267c3fa3498793568da79ebfc9b40c3d7129d.tar.gz dexon-0x-contracts-47a267c3fa3498793568da79ebfc9b40c3d7129d.tar.bz2 dexon-0x-contracts-47a267c3fa3498793568da79ebfc9b40c3d7129d.tar.lz dexon-0x-contracts-47a267c3fa3498793568da79ebfc9b40c3d7129d.tar.xz dexon-0x-contracts-47a267c3fa3498793568da79ebfc9b40c3d7129d.tar.zst dexon-0x-contracts-47a267c3fa3498793568da79ebfc9b40c3d7129d.zip |
Clicking overlay closes onboarding
Diffstat (limited to 'packages/website/ts/components')
4 files changed, 12 insertions, 6 deletions
diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx index b11cd4ef5..1dd47773c 100644 --- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx @@ -10,7 +10,7 @@ export const AddEthOnboardingStep: React.StatelessComponent<AddEthOnboardingStep <Container marginTop="15px" marginBottom="15px"> <img src="/images/ether_alt.svg" height="50px" width="50px" /> </Container> - <Text> + <Text className="xs-hide"> Click on the <img src="/images/metamask_icon.png" height="20px" width="20px" /> metamask extension in your browser and click either <b>BUY</b> or <b>DEPOSIT</b>. </Text> diff --git a/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx b/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx index 3a8db8c36..8100fd2c0 100644 --- a/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx @@ -10,6 +10,6 @@ export const CongratsOnboardingStep: React.StatelessComponent<CongratsOnboarding <Container marginTop="25px" marginBottom="15px" className="flex justify-center"> <img src="/images/zrx_ecosystem.svg" height="150px" /> </Container> - <Text>No need to log in. Each relayer automatically detects and connects to your metamask wallet.</Text> + <Text>No need to log in. Each relayer automatically detects and connects to your wallet.</Text> </div> ); 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> ); diff --git a/packages/website/ts/components/ui/overlay.tsx b/packages/website/ts/components/ui/overlay.tsx index 8b126a6d5..da26317de 100644 --- a/packages/website/ts/components/ui/overlay.tsx +++ b/packages/website/ts/components/ui/overlay.tsx @@ -4,7 +4,6 @@ import * as React from 'react'; import { zIndex } from 'ts/style/z_index'; export interface OverlayProps { - children?: React.ReactNode; style?: React.CSSProperties; onClick?: () => void; } @@ -19,7 +18,7 @@ const style: React.CSSProperties = { backgroundColor: 'rgba(0, 0, 0, 0.6)', }; -export const Overlay: React.StatelessComponent = (props: OverlayProps) => ( +export const Overlay: React.StatelessComponent<OverlayProps> = props => ( <div style={{ ...style, ...props.style }} onClick={props.onClick}> {props.children} </div> |