1 files changed, 69 insertions, 34 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
index 155c70c5f..45851b4de 100644
--- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -1,7 +1,12 @@
+import { colors } from '@0xproject/react-shared';
 import * as React from 'react';
 
+import { Button } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
+import { IconButton } from 'ts/components/ui/icon_button';
 import { Island } from 'ts/components/ui/island';
+import { Pointer, PointerDirection } from 'ts/components/ui/pointer';
+import { Text, Title } from 'ts/components/ui/text';
 
 export type ContinueButtonDisplay = 'enabled' | 'disabled';
 
@@ -13,43 +18,73 @@ export interface OnboardingTooltipProps {
     onClickNext: () => void;
     onClickBack: () => void;
     continueButtonDisplay?: ContinueButtonDisplay;
-    hideBackButton?: boolean;
-    hideNextButton?: boolean;
+    shouldHideBackButton?: boolean;
+    shouldHideNextButton?: boolean;
+    pointerDirection?: PointerDirection;
+    continueButtonText?: string;
+    className?: string;
 }
 
-// TODO: Make this more general button.
-export interface ContinueButtonProps {
-    display: ContinueButtonDisplay;
-    children?: string;
-    onClick: () => void;
-}
+export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = ({
+    title,
+    content,
+    continueButtonDisplay,
+    continueButtonText,
+    onClickNext,
+    onClickBack,
+    onClose,
+    shouldHideBackButton,
+    shouldHideNextButton,
+    pointerDirection,
+    className,
+}) => (
+    <Pointer className={className} direction={pointerDirection}>
+        <Island>
+            <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px">
+                <div className="flex flex-column">
+                    <div className="flex justify-between">
+                        <Title>{title}</Title>
+                        <Container position="relative" bottom="20px" left="15px">
+                            <IconButton color={colors.grey} iconName="zmdi-close" onClick={onClose}>
+                                Close
+                            </IconButton>
+                        </Container>
+                    </div>
+                    <Container marginBottom="15px">
+                        <Text>{content}</Text>
+                    </Container>
+                    {continueButtonDisplay && (
+                        <Button
+                            isDisabled={continueButtonDisplay === 'disabled'}
+                            onClick={onClickNext}
+                            fontColor={colors.white}
+                            fontSize="15px"
+                            backgroundColor={colors.mediumBlue}
+                        >
+                            {continueButtonText}
+                        </Button>
+                    )}
+                    <Container className="flex justify-between" marginTop="15px">
+                        {!shouldHideBackButton && (
+                            <Text fontColor={colors.grey} onClick={onClickBack}>
+                                Back
+                            </Text>
+                        )}
+                        {!shouldHideNextButton && (
+                            <Text fontColor={colors.grey} onClick={onClickNext}>
+                                Skip
+                            </Text>
+                        )}
+                    </Container>
+                </div>
+            </Container>
+        </Island>
+    </Pointer>
+);
 
-export const ContinueButton: React.StatelessComponent<ContinueButtonProps> = (props: ContinueButtonProps) => {
-    const isDisabled = props.display === 'disabled';
-    return (
-        <button disabled={isDisabled} onClick={isDisabled ? undefined : props.onClick}>
-            {props.children}
-        </button>
-    );
+OnboardingTooltip.defaultProps = {
+    pointerDirection: 'left',
+    continueButtonText: 'Continue',
 };
 
-export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = (props: OnboardingTooltipProps) => (
-    <Island>
-        <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px">
-            <div className="flex flex-column">
-                {props.title}
-                {props.content}
-                {props.continueButtonDisplay && (
-                    <ContinueButton onClick={props.onClickNext} display={props.continueButtonDisplay}>
-                        Continue
-                    </ContinueButton>
-                )}
-                {!props.hideBackButton && <button onClick={props.onClickBack}>Back</button>}
-                {!props.hideNextButton && <button onClick={props.onClickNext}>Skip</button>}
-                <button onClick={props.onClose}>Close</button>
-            </div>
-        </Container>
-    </Island>
-);
-
 OnboardingTooltip.displayName = 'OnboardingTooltip';