diff options
Diffstat (limited to 'packages/website/ts/components')
| -rw-r--r-- | packages/website/ts/components/documentation/docs_content_top_bar.tsx | 10 | ||||
| -rw-r--r-- | packages/website/ts/components/documentation/tutorial_button.tsx | 73 |
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, + }); + } +} |