Improve tooltip look

1 files changed, 10 insertions, 5 deletions

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>
 );