aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-06-28 06:14:21 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-06-28 06:14:21 +0800
commit47a267c3fa3498793568da79ebfc9b40c3d7129d (patch)
treee9ffb007bcb7146050b561a35d556247300afd72 /packages/website/ts/components
parent36836eb942dbdcf64dd211b36523f3b98af2e6cb (diff)
downloaddexon-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')
-rw-r--r--packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx2
-rw-r--r--packages/website/ts/components/onboarding/congrats_onboarding_step.tsx2
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx11
-rw-r--r--packages/website/ts/components/ui/overlay.tsx3
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>