aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/react-docs/package.json4
-rw-r--r--packages/react-shared/src/components/anchor_title.tsx37
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,
- });
- }
}