aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/onboarding
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/onboarding')
-rw-r--r--packages/website/ts/components/onboarding/onboarding_tooltip.tsx35
1 files changed, 19 insertions, 16 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
index 155c70c5f..9e0744dcb 100644
--- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
import { Container } from 'ts/components/ui/container';
import { Island } from 'ts/components/ui/island';
+import { Pointer } from 'ts/components/ui/pointer';
export type ContinueButtonDisplay = 'enabled' | 'disabled';
@@ -34,22 +35,24 @@ export const ContinueButton: React.StatelessComponent<ContinueButtonProps> = (pr
};
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>
+ <Pointer direction="left">
+ <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>
+ </Pointer>
);
OnboardingTooltip.displayName = 'OnboardingTooltip';