aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/documentation/docs_content_top_bar.tsx10
-rw-r--r--packages/website/ts/components/documentation/tutorial_button.tsx73
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,
+ });
+ }
+}