Convert TutorialButton to styled component

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';