Improve tooltip look

6 files changed, 67 insertions, 12 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,