diff options
| -rw-r--r-- | packages/react-docs/package.json | 4 | ||||
| -rw-r--r-- | packages/react-shared/src/components/anchor_title.tsx | 37 |
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, - }); - } } |