Implement dev home

2 files changed, 78 insertions, 5 deletions

diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
index 148f2f7cb..dede6f636 100644
--- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx
+++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
@@ -1,11 +1,11 @@
-import { colors, Styles } from '@0xproject/react-shared';
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import Drawer from 'material-ui/Drawer';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
 import { DocsLogo } from 'ts/components/documentation/docs_logo';
 import { Container } from 'ts/components/ui/container';
-import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types';
+import { Link } from 'ts/components/ui/link';
+import { Deco, Key, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
@@ -57,11 +57,11 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
                 title: this.props.translate.get(Key.LiveChat, Deco.Cap),
                 url: constants.URL_ZEROEX_CHAT,
                 iconUrl: '/images/developers/chat_icon.svg',
-                textStyle: { color: '#3289F1', fontWeight: 'bold' },
+                textStyle: { color: colors.lightLinkBlue, fontWeight: 'bold' },
             },
         ];
         return (
-            <Container height={75} className="pb1">
+            <Container height={75} className="pb2 mb3">
                 <Container className="flex items-center lg-pt3 md-pt3 sm-pt1 relative" width="100%">
                     <div className="col col-2 sm-hide xs-hide">
                         <Link
diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx
new file mode 100644
index 000000000..b83fd82c2
--- /dev/null
+++ b/packages/website/ts/components/documentation/tutorial_button.tsx
@@ -0,0 +1,73 @@
+import { colors } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { TutorialInfo } from 'ts/types';
+
+export interface TutorialButtonProps {
+    tutorialInfo: TutorialInfo;
+}
+
+export interface TutorialButtonState {
+    isHovering: boolean;
+}
+
+export class TutorialButton extends React.Component<TutorialButtonProps, TutorialButtonState> {
+    constructor(props: TutorialButtonProps) {
+        super(props);
+        this.state = {
+            isHovering: false,
+        };
+    }
+    public render(): React.ReactNode {
+        return (
+            <Link
+                to={this.props.tutorialInfo.location}
+                style={{ textDecoration: 'none' }}
+                onMouseEnter={this._onHover.bind(this)}
+                onMouseLeave={this._onHoverOff.bind(this)}
+            >
+                <div
+                    className="flex relative"
+                    style={{
+                        borderRadius: 4,
+                        border: `1px solid ${this.state.isHovering ? colors.lightLinkBlue : '#dfdfdf'}`,
+                        padding: 20,
+                        marginBottom: 15,
+                        backgroundColor: this.state.isHovering ? '#e7f1fd' : colors.white,
+                    }}
+                >
+                    <div>
+                        <img src={this.props.tutorialInfo.iconUrl} height={40} />
+                    </div>
+                    <div className="pl2">
+                        <Text Tag="div" fontSize="18" fontColor={colors.lightLinkBlue} fontWeight="bold">
+                            {this.props.tutorialInfo.title}
+                        </Text>
+                        <Text Tag="div" fontColor="#555555" fontSize="16">
+                            {this.props.tutorialInfo.description}
+                        </Text>
+                    </div>
+                    <div className="absolute" style={{ top: 31, right: 31 }}>
+                        <i
+                            className="zmdi zmdi-chevron-right bold"
+                            style={{ fontSize: 26, color: colors.lightLinkBlue }}
+                        />
+                    </div>
+                </div>
+            </Link>
+        );
+    }
+    private _onHover(_event: React.FormEvent<HTMLInputElement>): void {
+        this.setState({
+            isHovering: true,
+        });
+    }
+    private _onHoverOff(): void {
+        this.setState({
+            isHovering: false,
+        });
+    }
+}