diff options
Diffstat (limited to 'packages/website/ts')
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" /> ); |