aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-10-06 00:28:03 +0800
committerFabio Berger <me@fabioberger.com>2018-10-06 00:28:03 +0800
commita5d0066d0016056ca0d01ad8bebef76b35848280 (patch)
tree09eb0e60fd5ad5636b488b1a206bc6af4f9d1e37 /packages/website/ts/components
parentdf7210163ad2835dcb6e461da173d1873d3195d4 (diff)
downloaddexon-sol-tools-a5d0066d0016056ca0d01ad8bebef76b35848280.tar
dexon-sol-tools-a5d0066d0016056ca0d01ad8bebef76b35848280.tar.gz
dexon-sol-tools-a5d0066d0016056ca0d01ad8bebef76b35848280.tar.bz2
dexon-sol-tools-a5d0066d0016056ca0d01ad8bebef76b35848280.tar.lz
dexon-sol-tools-a5d0066d0016056ca0d01ad8bebef76b35848280.tar.xz
dexon-sol-tools-a5d0066d0016056ca0d01ad8bebef76b35848280.tar.zst
dexon-sol-tools-a5d0066d0016056ca0d01ad8bebef76b35848280.zip
Convert TutorialButton to styled component
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/documentation/tutorial_button.tsx109
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';