Improve styles of onboarding tooltip

2018-06-15 13:17:02 -07:00
parent d0a3779091
commit 54f79c2798
7 changed files with 117 additions and 53 deletions
--- 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)}
--- 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';
--- 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;
--- 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';
--- 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 }) => {
--- 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 = {
--- 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';