nit: use styled-component instead of react-state for onHover

2 files changed, 14 insertions, 27 deletions

diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index b1e80d1b6..ff23c7fe3 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -27,6 +27,7 @@
         "@0xproject/dev-utils": "^1.0.12",
         "@0xproject/tslint-config": "^1.0.8",
         "@types/compare-versions": "^3.0.0",
+        "@types/styled-components": "^4.0.0",
         "make-promises-safe": "^1.1.0",
         "shx": "^0.2.2",
         "tslint": "^5.9.1",
@@ -51,7 +52,8 @@
         "react-markdown": "^3.2.2",
         "react-scroll": "0xproject/react-scroll#similar-to-pr-330",
         "react-tooltip": "^3.2.7",
-        "semver": "5.5.0"
+        "semver": "5.5.0",
+        "styled-components": "^3.3.0"
     },
     "publishConfig": {
         "access": "public"
diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx
index 0bdf61d44..0164a8c4a 100644
--- a/packages/react-shared/src/components/anchor_title.tsx
+++ b/packages/react-shared/src/components/anchor_title.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Link as ScrollLink } from 'react-scroll';
+import styled from 'styled-components';
 
 import { HeaderSizes, Styles } from '../types';
 import { colors } from '../utils/colors';
@@ -15,12 +16,10 @@ export interface AnchorTitleProps {
     id: string;
     headerSize: HeaderSizes;
     shouldShowAnchor: boolean;
-    isDisabled?: boolean;
+    isDisabled: boolean;
 }
 
-export interface AnchorTitleState {
-    isHovering: boolean;
-}
+export interface AnchorTitleState {}
 
 const styles: Styles = {
     anchor: {
@@ -29,7 +28,7 @@ const styles: Styles = {
         cursor: 'pointer',
     },
     h1: {
-        fontSize: '30px',
+        fontSize: '1.875em',
     },
     h2: {
         fontSize: '1.5em',
@@ -44,17 +43,13 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt
     public static defaultProps: Partial<AnchorTitleProps> = {
         isDisabled: false,
     };
-    constructor(props: AnchorTitleProps) {
-        super(props);
-        this.state = {
-            isHovering: false,
-        };
-    }
     public render(): React.ReactNode {
-        let opacity = 0;
-        if (this.props.shouldShowAnchor) {
-            opacity = this.state.isHovering ? 0.6 : 1;
-        }
+        const AnchorIcon = styled.i`
+            opacity: ${this.props.shouldShowAnchor ? 1 : 0};
+            &:hover {
+                opacity: ${this.props.shouldShowAnchor ? 0.6 : 0};
+            }
+        `;
         return (
             <div
                 className="relative flex"
@@ -79,20 +74,10 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt
                         duration={constants.DOCS_SCROLL_DURATION_MS}
                         containerId={constants.SCROLL_CONTAINER_ID}
                     >
-                        <i
-                            className="zmdi zmdi-link"
-                            style={{ ...styles.anchor, opacity }}
-                            onMouseOver={this._setHoverState.bind(this, true)}
-                            onMouseOut={this._setHoverState.bind(this, false)}
-                        />
+                        <AnchorIcon className="zmdi zmdi-link" style={{ ...styles.anchor }} />
                     </ScrollLink>
                 )}
             </div>
         );
     }
-    private _setHoverState(isHovering: boolean): void {
-        this.setState({
-            isHovering,
-        });
-    }
 }