diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-06-16 04:17:02 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-06-16 04:24:59 +0800 |
commit | 54f79c2798c095344b003139144b77fc1024d8c3 (patch) | |
tree | 079217538d8a7330cbdf90d1e0b04eb956a51e97 /packages/website | |
parent | d0a3779091661cfa099ec84f12e5d944287d1e3f (diff) | |
download | dexon-0x-contracts-54f79c2798c095344b003139144b77fc1024d8c3.tar dexon-0x-contracts-54f79c2798c095344b003139144b77fc1024d8c3.tar.gz dexon-0x-contracts-54f79c2798c095344b003139144b77fc1024d8c3.tar.bz2 dexon-0x-contracts-54f79c2798c095344b003139144b77fc1024d8c3.tar.lz dexon-0x-contracts-54f79c2798c095344b003139144b77fc1024d8c3.tar.xz dexon-0x-contracts-54f79c2798c095344b003139144b77fc1024d8c3.tar.zst dexon-0x-contracts-54f79c2798c095344b003139144b77fc1024d8c3.zip |
Improve styles of onboarding tooltip
Diffstat (limited to 'packages/website')
7 files changed, 117 insertions, 53 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 9879cd387..7a5a6e40f 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -10,8 +10,8 @@ export interface Step { title?: string; content: React.ReactNode; placement?: Placement; - hideBackButton?: boolean; - hideNextButton?: boolean; + shouldHideBackButton?: boolean; + shouldHideNextButton?: boolean; continueButtonDisplay?: ContinueButtonDisplay; } @@ -54,13 +54,13 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> { const step = steps[stepIndex]; const isLastStep = steps.length - 1 === stepIndex; return ( - <Container marginLeft="15px"> + <Container marginLeft="30px"> <OnboardingTooltip title={step.title} content={step.content} isLastStep={isLastStep} - hideBackButton={step.hideBackButton} - hideNextButton={step.hideNextButton} + shouldHideBackButton={step.shouldHideBackButton} + shouldHideNextButton={step.shouldHideNextButton} onClose={this.props.onClose} onClickNext={this._goToNextStep.bind(this)} onClickBack={this._goToPrevStep.bind(this)} diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx index 9e0744dcb..0858ad326 100644 --- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx +++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx @@ -1,8 +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 } from 'ts/components/ui/pointer'; +import { Pointer, PointerDirection } from 'ts/components/ui/pointer'; +import { Text, Title } from 'ts/components/ui/text'; export type ContinueButtonDisplay = 'enabled' | 'disabled'; @@ -14,45 +18,70 @@ export interface OnboardingTooltipProps { onClickNext: () => void; onClickBack: () => void; continueButtonDisplay?: ContinueButtonDisplay; - hideBackButton?: boolean; - hideNextButton?: boolean; + shouldHideBackButton?: boolean; + shouldHideNextButton?: boolean; + pointerDirection?: PointerDirection; + className?: string; } -// TODO: Make this more general button. -export interface ContinueButtonProps { - display: ContinueButtonDisplay; - children?: string; - onClick: () => void; -} - -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> - ); -}; - -export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = (props: OnboardingTooltipProps) => ( - <Pointer direction="left"> +export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = ({ + title, + content, + continueButtonDisplay, + 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"> - {props.title} - {props.content} - {props.continueButtonDisplay && ( - <ContinueButton onClick={props.onClickNext} display={props.continueButtonDisplay}> + <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} + > Continue - </ContinueButton> + </Button> )} - {!props.hideBackButton && <button onClick={props.onClickBack}>Back</button>} - {!props.hideNextButton && <button onClick={props.onClickNext}>Skip</button>} - <button onClick={props.onClose}>Close</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> ); +OnboardingTooltip.defaultProps = { + pointerDirection: 'left', +}; + OnboardingTooltip.displayName = 'OnboardingTooltip'; diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index efb844cb5..3deefec3c 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -47,41 +47,47 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr const steps: Step[] = [ { target: '.wallet', + title: '0x Ecosystem Setup', content: 'Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps', placement: 'right', - hideBackButton: true, - hideNextButton: true, + shouldHideBackButton: true, + shouldHideNextButton: true, }, { target: '.wallet', + title: '0x Ecosystem Setup', content: 'Unlock your metamask extension to begin', placement: 'right', - hideBackButton: true, - hideNextButton: true, + shouldHideBackButton: true, + shouldHideNextButton: true, }, { target: '.wallet', + title: '0x Ecosystem Account Setup', content: 'In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps', placement: 'right', - hideBackButton: true, + shouldHideBackButton: true, continueButtonDisplay: 'enabled', }, { target: '.eth-row', + title: 'Add ETH', content: 'Before you begin you will need to send some ETH to your metamask wallet', placement: 'right', continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled', }, { target: '.weth-row', + title: 'Step 1/2', content: 'You need to convert some of your ETH into tradeable Wrapped ETH (WETH)', placement: 'right', continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled', }, { target: '.weth-row', + title: 'Step 2/2', content: ( <div> Unlock your tokens for trading. You only need to do this once for each token. @@ -94,9 +100,11 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr }, { target: '.wallet', - content: 'Congrats! Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem.', + title: '🎉 Congrats! The ecosystem awaits.', + content: 'Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem.', placement: 'right', continueButtonDisplay: 'enabled', + shouldHideNextButton: true, }, ]; return steps; diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index 1f88297de..cb542a386 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -1,5 +1,5 @@ import { colors } from '@0xproject/react-shared'; -import { darken } from 'polished'; +import { darken, grayscale } from 'polished'; import * as React from 'react'; import { styled } from 'ts/style/theme'; @@ -12,32 +12,34 @@ export interface ButtonProps { borderColor?: string; width?: string; type?: string; + isDisabled?: boolean; onClick?: (event: React.MouseEvent<HTMLElement>) => void; } -const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, onClick, type, className }) => ( - <button type={type} className={className} onClick={onClick}> +const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => ( + <button type={type} className={className} onClick={isDisabled ? undefined : onClick}> {children} </button> ); export const Button = styled(PlainButton)` - cursor: pointer; + cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}; font-size: ${props => props.fontSize}; color: ${props => props.fontColor}; + transition: background-color 0.5s ease; padding: 0.8em 2.2em; border-radius: 6px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); font-weight: 500; font-family: ${props => props.fontFamily}; width: ${props => props.width}; - background-color: ${props => props.backgroundColor}; + background-color: ${props => (props.isDisabled ? grayscale(props.backgroundColor) : props.backgroundColor)}; border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; &:hover { - background-color: ${props => darken(0.1, props.backgroundColor)}; + background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')}; } &:active { - background-color: ${props => darken(0.2, props.backgroundColor)}; + background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')}; } `; @@ -46,6 +48,7 @@ Button.defaultProps = { backgroundColor: colors.white, width: 'auto', fontFamily: 'Roboto', + isDisabled: false, }; Button.displayName = 'Button'; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index c6a78e181..3b55a18ce 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -16,6 +16,11 @@ export interface ContainerProps { maxWidth?: StringOrNum; isHidden?: boolean; className?: string; + position?: 'absolute' | 'fixed' | 'relative' | 'unset'; + top?: string; + left?: string; + right?: string; + bottom?: string; } export const Container: React.StatelessComponent<ContainerProps> = ({ children, className, isHidden, ...style }) => { diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx index dcd1b8e54..448786bb4 100644 --- a/packages/website/ts/components/ui/pointer.tsx +++ b/packages/website/ts/components/ui/pointer.tsx @@ -1,5 +1,4 @@ import { colors } from '@0xproject/react-shared'; -import { Island } from 'ts/components/ui/island'; import * as React from 'react'; import { styled } from 'ts/style/theme'; @@ -12,7 +11,7 @@ export interface PointerProps { direction: PointerDirection; } -const PlainPointer: React.StatelessComponent<PointerProps> = props => <div {...props}/>; +const PlainPointer: React.StatelessComponent<PointerProps> = props => <div {...props} />; const positionToCss = (props: PointerProps) => { const position = { diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 7e47f1d09..073bfc2d2 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -1,8 +1,9 @@ import { colors } from '@0xproject/react-shared'; +import { darken } from 'polished'; import * as React from 'react'; import { styled } from 'ts/style/theme'; -export type TextTag = 'p' | 'div' | 'span' | 'label'; +export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4'; export interface TextProps { className?: string; @@ -14,10 +15,13 @@ export interface TextProps { minHeight?: string; center?: boolean; fontWeight?: number | string; + onClick?: () => void; } -const PlainText: React.StatelessComponent<TextProps> = ({ children, className, Tag }) => ( - <Tag className={className}>{children}</Tag> +const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => ( + <Tag className={className} onClick={onClick}> + {children} + </Tag> ); export const Text = styled(PlainText)` @@ -28,14 +32,30 @@ export const Text = styled(PlainText)` ${props => (props.center ? 'text-align: center' : '')}; color: ${props => props.fontColor}; ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')}; + ${props => (props.onClick ? 'cursor: pointer' : '')}; + transition: color 0.5s ease; + &:hover { + ${props => (props.onClick ? `color: ${darken(0.1, props.fontColor)}` : '')}; + } `; Text.defaultProps = { fontFamily: 'Roboto', fontWeight: 400, - fontColor: colors.white, + fontColor: colors.black, fontSize: '14px', Tag: 'div', }; Text.displayName = 'Text'; + +export const Title: React.StatelessComponent<TextProps> = props => <Text {...props} />; + +Title.defaultProps = { + Tag: 'h2', + fontSize: '20px', + fontWeight: 600, + fontColor: colors.black, +}; + +Title.displayName = 'Title'; |