Improve tooltip look

2 files changed, 16 insertions, 8 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>
 );