aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/onboarding/onboarding_card.tsx114
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx7
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx6
-rw-r--r--packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx6
4 files changed, 81 insertions, 52 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx
index ba5b3d6ea..4e853719e 100644
--- a/packages/website/ts/components/onboarding/onboarding_card.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_card.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
import * as _ from 'lodash';
import { Button } from 'ts/components/ui/button';
-import { Container } from 'ts/components/ui/container';
+import { Container, ContainerProps } from 'ts/components/ui/container';
import { IconButton } from 'ts/components/ui/icon_button';
import { Island } from 'ts/components/ui/island';
import { Text, Title } from 'ts/components/ui/text';
@@ -12,6 +12,7 @@ export type ContinueButtonDisplay = 'enabled' | 'disabled';
export interface OnboardingCardProps {
title?: string;
+ shouldCenterTitle?: boolean;
content: React.ReactNode;
isLastStep: boolean;
onClose: () => void;
@@ -23,10 +24,13 @@ export interface OnboardingCardProps {
shouldHideNextButton?: boolean;
continueButtonText?: string;
borderRadius?: string;
+ // Used for super-custom content.
+ shouldRemoveExtraSpacing?: boolean;
}
export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
title,
+ shouldCenterTitle,
content,
continueButtonDisplay,
continueButtonText,
@@ -37,55 +41,75 @@ export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
shouldHideBackButton,
shouldHideNextButton,
borderRadius,
-}) => (
- <Island borderRadius={borderRadius}>
- <Container paddingRight="30px" paddingLeft="30px" 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>
+ shouldRemoveExtraSpacing,
+}) => {
+ const padding = shouldRemoveExtraSpacing
+ ? {}
+ : {
+ paddingRight: '30px',
+ paddingLeft: '30px',
+ paddingTop: '15px',
+ paddingBottom: '15px',
+ };
+ const closeIconPositioning = shouldRemoveExtraSpacing
+ ? { right: '15px', bottom: '3px' }
+ : { bottom: '20px', left: '15px' };
+ return (
+ <Island borderRadius={borderRadius}>
+ <Container {...padding}>
+ <div className="flex flex-column">
+ <Container className="flex justify-between">
+ <Container width="100%">
+ <Title center={shouldCenterTitle}>{title}</Title>
+ </Container>
+ <Container position="relative" {...closeIconPositioning}>
+ <IconButton color={colors.grey} iconName="zmdi-close" onClick={onClose}>
+ Close
+ </IconButton>
+ </Container>
</Container>
+ <Container marginBottom={shouldRemoveExtraSpacing ? undefined : '15px'}>
+ <Text>{content}</Text>
+ </Container>
+ {continueButtonDisplay && (
+ <Button
+ isDisabled={continueButtonDisplay === 'disabled'}
+ onClick={!_.isUndefined(onContinueButtonClick) ? onContinueButtonClick : onClickNext}
+ fontColor={colors.white}
+ fontSize="15px"
+ backgroundColor={colors.mediumBlue}
+ >
+ {continueButtonText}
+ </Button>
+ )}
+ {!(shouldHideBackButton && shouldHideNextButton) && (
+ <Container className="clearfix" marginTop="15px">
+ <div className="left">
+ {!shouldHideBackButton && (
+ <Text fontColor={colors.grey} onClick={onClickBack}>
+ Back
+ </Text>
+ )}
+ </div>
+ <div className="right">
+ {!shouldHideNextButton && (
+ <Text fontColor={colors.grey} onClick={onClickNext}>
+ Skip
+ </Text>
+ )}
+ </div>
+ </Container>
+ )}
</div>
- <Container marginBottom="15px">
- <Text>{content}</Text>
- </Container>
- {continueButtonDisplay && (
- <Button
- isDisabled={continueButtonDisplay === 'disabled'}
- onClick={!_.isUndefined(onContinueButtonClick) ? onContinueButtonClick : onClickNext}
- fontColor={colors.white}
- fontSize="15px"
- backgroundColor={colors.mediumBlue}
- >
- {continueButtonText}
- </Button>
- )}
- <Container className="clearfix" marginTop="15px">
- <div className="left">
- {!shouldHideBackButton && (
- <Text fontColor={colors.grey} onClick={onClickBack}>
- Back
- </Text>
- )}
- </div>
- <div className="right">
- {!shouldHideNextButton && (
- <Text fontColor={colors.grey} onClick={onClickNext}>
- Skip
- </Text>
- )}
- </div>
- </Container>
- </div>
- </Container>
- </Island>
-);
+ </Container>
+ </Island>
+ );
+};
OnboardingCard.defaultProps = {
continueButtonText: 'Continue',
+ shouldCenterTitle: false,
+ shouldRemoveExtraSpacing: false,
};
OnboardingCard.displayName = 'OnboardingCard';
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 8aebdf1d3..91d5f2476 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -31,12 +31,15 @@ export interface Step {
// Provide either a CSS selector, or fixed position settings. Only applies to desktop.
position: TargetPositionSettings | FixedPositionSettings;
title?: string;
+ shouldCenterTitle?: boolean;
content: React.ReactNode;
shouldHideBackButton?: boolean;
shouldHideNextButton?: boolean;
continueButtonDisplay?: ContinueButtonDisplay;
continueButtonText?: string;
onContinueButtonClick?: () => void;
+ // Only used for very custom steps.
+ shouldRemoveExtraSpacing?: boolean;
}
export interface OnboardingFlowProps {
@@ -114,6 +117,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
<Container marginLeft="30px" width="400px">
<OnboardingTooltip
title={step.title}
+ shouldCenterTitle={step.shouldCenterTitle}
content={step.content}
isLastStep={isLastStep}
shouldHideBackButton={step.shouldHideBackButton}
@@ -125,6 +129,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
continueButtonText={step.continueButtonText}
onContinueButtonClick={step.onContinueButtonClick}
pointerDisplay={tooltipPointerDisplay}
+ shouldRemoveExtraSpacing={step.shouldRemoveExtraSpacing}
/>
</Container>
);
@@ -138,6 +143,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
<Container position="relative" zIndex={1}>
<OnboardingCard
title={step.title}
+ shouldCenterTitle={step.shouldCenterTitle}
content={step.content}
isLastStep={isLastStep}
shouldHideBackButton={step.shouldHideBackButton}
@@ -149,6 +155,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
continueButtonText={step.continueButtonText}
onContinueButtonClick={step.onContinueButtonClick}
borderRadius="10px 10px 0px 0px"
+ shouldRemoveExtraSpacing={step.shouldRemoveExtraSpacing}
/>
</Container>
);
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 3dec8a444..20a8f0a32 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -91,8 +91,8 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
};
const underMetamaskExtension: FixedPositionSettings = {
type: 'fixed',
- top: '5px',
- right: '5px',
+ top: '10px',
+ right: '10px',
tooltipPointerDisplay: 'none',
};
const steps: Step[] = [
@@ -109,6 +109,8 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
content: <UnlockWalletOnboardingStep />,
shouldHideBackButton: true,
shouldHideNextButton: true,
+ shouldCenterTitle: true,
+ shouldRemoveExtraSpacing: true,
},
{
position: nextToWalletPosition,
diff --git a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
index a1de469ad..358141520 100644
--- a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
@@ -4,9 +4,5 @@ import { Image } from 'ts/components/ui/image';
export interface UnlockWalletOnboardingStepProps {}
export const UnlockWalletOnboardingStep: React.StatelessComponent<UnlockWalletOnboardingStepProps> = () => (
- <div className="flex items-center flex-column">
- <div className="flex items-center flex-column">
- <Image src="/images/unlock-mm.png" />
- </div>
- </div>
+ <Image src="/images/unlock-mm.png" />
);