Merge https://github.com/0xProject/0x-monorepo into feature/website/update-portal-v2

4 files changed, 90 insertions, 2 deletions

diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 8580c3a6e..bb61e4fb9 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -19,7 +19,7 @@ import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
 import { Container } from 'ts/components/ui/container';
 import { DropDown } from 'ts/components/ui/drop_down';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types';
+import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
@@ -238,7 +238,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
         const fullWidthClasses = isExpandedDisplayType ? 'pr4' : '';
         const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png';
         const menuClasses = `col col-${
-            isExpandedDisplayType ? '4' : '5'
+            isExpandedDisplayType ? '4' : '6'
         } ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`;
         const menuIconStyle = {
             fontSize: 25,
@@ -302,6 +302,13 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                                     isExternal={false}
                                 />
                                 <TopBarMenuItem
+                                    title={this.props.translate.get(Key.Careers, Deco.Cap)}
+                                    path={`${WebsitePaths.Careers}`}
+                                    style={styles.menuItem}
+                                    isNightVersion={isNightVersion}
+                                    isExternal={false}
+                                />
+                                <TopBarMenuItem
                                     title={this.props.translate.get(Key.TradeCallToAction, Deco.Cap)}
                                     path={`${WebsitePaths.Portal}`}
                                     isPrimary={true}
@@ -406,6 +413,9 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                     <Link to={`${WebsitePaths.About}`} className="text-decoration-none">
                         <MenuItem className="py2">{this.props.translate.get(Key.About, Deco.Cap)}</MenuItem>
                     </Link>
+                    <Link to={`${WebsitePaths.Careers}`} className="text-decoration-none">
+                        <MenuItem className="py2">{this.props.translate.get(Key.Careers, Deco.Cap)}</MenuItem>
+                    </Link>
                     <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}>
                         <MenuItem className="py2">{this.props.translate.get(Key.Blog, Deco.Cap)}</MenuItem>
                     </a>
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 2952c8859..75ba7bcff 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -96,4 +96,5 @@ export const CallToAction: React.StatelessComponent<CallToActionProps> = ({
 CallToAction.defaultProps = {
     type: 'dark',
     fontSize: '14px',
+    padding: '0.9em 1.6em',
 };
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index 734483564..cd8f290e3 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -20,6 +20,7 @@ export interface TextProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     hoverColor?: string;
     noWrap?: boolean;
+    display?: string;
 }
 
 const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
@@ -41,6 +42,7 @@ export const Text = styled(PlainText)`
     ${props => (props.onClick ? 'cursor: pointer' : '')};
     transition: color 0.5s ease;
     ${props => (props.noWrap ? 'white-space: nowrap' : '')};
+    ${props => (props.display ? `display: ${props.display}` : '')};
     &:hover {
         ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor)}` : '')};
     }
diff --git a/packages/website/ts/components/ui/typed_text.tsx b/packages/website/ts/components/ui/typed_text.tsx
new file mode 100644
index 000000000..6d38580b9
--- /dev/null
+++ b/packages/website/ts/components/ui/typed_text.tsx
@@ -0,0 +1,75 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import Typist from 'react-typist';
+
+import { Text, TextProps } from 'ts/components/ui/text';
+
+import 'react-typist/dist/Typist.css';
+
+export interface TypedTextProps extends TextProps {
+    textList: string[];
+    shouldRepeat?: boolean;
+    wordDelayMs?: number;
+    avgKeystrokeDelayMs?: number;
+    stdKeystrokeDelay?: number;
+}
+
+export interface TypedTextState {
+    cycleCount: number;
+}
+
+export class TypedText extends React.Component<TypedTextProps, TypedTextState> {
+    public static defaultProps = {
+        shouldRepeat: false,
+        avgKeystrokeDelayMs: 90,
+        wordDelayMs: 1000,
+    };
+    public state = {
+        cycleCount: 0,
+    };
+    public render(): React.ReactNode {
+        const {
+            textList,
+            shouldRepeat,
+            wordDelayMs,
+            avgKeystrokeDelayMs,
+            stdKeystrokeDelay,
+            // tslint:disable-next-line
+            ...textProps
+        } = this.props;
+        const { cycleCount } = this.state;
+        if (_.isEmpty(textList)) {
+            return null;
+        }
+        const typistChildren: React.ReactNode[] = [];
+        _.forEach(textList, text => {
+            typistChildren.push(
+                <Text key={`text-${text}-${cycleCount}`} {...textProps}>
+                    {text}
+                </Text>,
+            );
+            if (wordDelayMs) {
+                typistChildren.push(<Typist.Delay key={`delay-${text}-${cycleCount}`} ms={wordDelayMs} />);
+            }
+            typistChildren.push(<Typist.Backspace key={`backspace-${text}-${cycleCount}`} count={text.length} />);
+        });
+        return (
+            <Typist
+                avgTypingDelay={avgKeystrokeDelayMs}
+                stdTypingDelay={stdKeystrokeDelay}
+                className="inline"
+                key={`typist-key-${cycleCount}`}
+                onTypingDone={this._onTypingDone.bind(this)}
+            >
+                {typistChildren}
+            </Typist>
+        );
+    }
+    private _onTypingDone(): void {
+        if (this.props.shouldRepeat) {
+            this.setState({
+                cycleCount: this.state.cycleCount + 1,
+            });
+        }
+    }
+}