diff options
| -rw-r--r-- | packages/website/ts/components/documentation/tutorial_button.tsx | 109 |
1 files changed, 45 insertions, 64 deletions
diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index a0d99e175..9c13ec732 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -1,79 +1,60 @@ import { colors, Link } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; import { Deco, Key, TutorialInfo } from 'ts/types'; import { Translate } from 'ts/utils/translate'; +import { darken, saturate } from 'polished'; +import { styled } from 'ts/style/theme'; + export interface TutorialButtonProps { + className?: string; translate: Translate; 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.link.to} - shouldOpenInNewTab={this.props.tutorialInfo.link.shouldOpenInNewTab} - onMouseEnter={this._onHover.bind(this)} - onMouseOver={this._onHover.bind(this)} - onMouseLeave={this._onHoverOff.bind(this)} - > - <div - className="flex relative" - style={{ - borderRadius: 4, - border: `1px solid ${this.state.isHovering ? colors.lightLinkBlue : colors.grey325}`, - padding: 20, - marginBottom: 15, - backgroundColor: this.state.isHovering ? colors.lightestBlue : colors.white, - }} - > - <div className="col col-1 flex items-center sm-pr3"> - <img src={this.props.tutorialInfo.iconUrl} height={40} /> - </div> - <div className="lg-pl2 md-pl2 sm-pl3 col col-10"> - <Text Tag="div" fontSize="18" fontColor={colors.lightLinkBlue} fontWeight="bold"> - {this.props.translate.get(this.props.tutorialInfo.link.title as Key, Deco.Cap)} - </Text> - <Text Tag="div" fontColor={colors.grey750} fontSize="16"> - {this.props.translate.get(this.props.tutorialInfo.description as Key, Deco.Cap)} - </Text> - </div> - <div className="col col-1 flex items-center justify-end"> - <div className="right"> - <i - className="zmdi zmdi-chevron-right bold" - style={{ fontSize: 26, color: colors.lightLinkBlue }} - /> - </div> +const PlainTutorialButton: React.StatelessComponent<TutorialButtonProps> = ({ translate, tutorialInfo, className }) => ( + <Container className={className}> + <Link to={tutorialInfo.link.to} shouldOpenInNewTab={tutorialInfo.link.shouldOpenInNewTab}> + <div className="flex relative"> + <div className="col col-1 flex items-center sm-pr3"> + <img src={tutorialInfo.iconUrl} height={40} /> + </div> + <div className="lg-pl2 md-pl2 sm-pl3 col col-10"> + <Text Tag="div" fontSize="18" fontColor={colors.lightLinkBlue} fontWeight="bold"> + {translate.get(tutorialInfo.link.title as Key, Deco.Cap)} + </Text> + <Text Tag="div" fontColor={colors.grey750} fontSize="16"> + {translate.get(tutorialInfo.description as Key, Deco.Cap)} + </Text> + </div> + <div className="col col-1 flex items-center justify-end"> + <div className="right"> + <i + className="zmdi zmdi-chevron-right bold" + style={{ fontSize: 26, color: colors.lightLinkBlue }} + /> </div> </div> - </Link> - ); - } - private _onHover(_event: React.FormEvent<HTMLInputElement>): void { - if (this.state.isHovering) { - return; - } - this.setState({ - isHovering: true, - }); - } - private _onHoverOff(): void { - this.setState({ - isHovering: false, - }); + </div> + </Link> + </Container> +); + +export const TutorialButton = styled(PlainTutorialButton)` + border-radius: 4px; + border: 1px solid ${colors.grey325}; + background-color: ${colors.white}; + &:hover { + border: 1px solid ${colors.lightLinkBlue}; + background-color: ${colors.lightestBlue}; } -} + padding: 20px; + margin-bottom: 15px; +`; + +TutorialButton.defaultProps = {}; + +TutorialButton.displayName = 'TutorialButton'; |