1 files changed, 33 insertions, 35 deletions

diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx
index 5f8e6a060..df55e0922 100644
--- a/packages/website/ts/components/ui/copy_icon.tsx
+++ b/packages/website/ts/components/ui/copy_icon.tsx
@@ -1,9 +1,9 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 import * as ReactDOM from 'react-dom';
 import ReactTooltip = require('react-tooltip');
+import { colors } from 'ts/utils/colors';
 
 interface CopyIconProps {
     data: string;
@@ -15,8 +15,8 @@ interface CopyIconState {
 }
 
 export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> {
-    private copyTooltipTimeoutId: number;
-    private copyable: HTMLInputElement;
+    private _copyTooltipTimeoutId: number;
+    private _copyable: HTMLInputElement;
     constructor(props: CopyIconProps) {
         super(props);
         this.state = {
@@ -25,57 +25,55 @@ export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> {
     }
     public componentDidUpdate() {
         // Remove tooltip if hover away
-        if (!this.state.isHovering && this.copyTooltipTimeoutId) {
-            clearInterval(this.copyTooltipTimeoutId);
-            this.hideTooltip();
+        if (!this.state.isHovering && this._copyTooltipTimeoutId) {
+            clearInterval(this._copyTooltipTimeoutId);
+            this._hideTooltip();
         }
     }
     public render() {
         return (
             <div className="inline-block">
-                    <CopyToClipboard text={this.props.data} onCopy={this.onCopy.bind(this)}>
-                        <div
-                            className="inline flex"
-                            style={{cursor: 'pointer', color: colors.amber600}}
-                            ref={this.setRefToProperty.bind(this)}
-                            data-tip={true}
-                            data-for="copy"
-                            data-event="click"
-                            data-iscapture={true} // This let's the click event continue to propogate
-                            onMouseOver={this.setHoverState.bind(this, true)}
-                            onMouseOut={this.setHoverState.bind(this, false)}
-                        >
-                            <div>
-                                <i style={{fontSize: 15}} className="zmdi zmdi-copy" />
-                            </div>
-                            {this.props.callToAction &&
-                                <div className="pl1">{this.props.callToAction}</div>
-                            }
+                <CopyToClipboard text={this.props.data} onCopy={this._onCopy.bind(this)}>
+                    <div
+                        className="inline flex"
+                        style={{ cursor: 'pointer', color: colors.amber600 }}
+                        ref={this._setRefToProperty.bind(this)}
+                        data-tip={true}
+                        data-for="copy"
+                        data-event="click"
+                        data-iscapture={true} // This let's the click event continue to propogate
+                        onMouseOver={this._setHoverState.bind(this, true)}
+                        onMouseOut={this._setHoverState.bind(this, false)}
+                    >
+                        <div>
+                            <i style={{ fontSize: 15 }} className="zmdi zmdi-copy" />
                         </div>
-                    </CopyToClipboard>
+                        {this.props.callToAction && <div className="pl1">{this.props.callToAction}</div>}
+                    </div>
+                </CopyToClipboard>
                 <ReactTooltip id="copy">Copied!</ReactTooltip>
             </div>
         );
     }
-    private setRefToProperty(el: HTMLInputElement) {
-        this.copyable = el;
+    private _setRefToProperty(el: HTMLInputElement) {
+        this._copyable = el;
     }
-    private setHoverState(isHovering: boolean) {
+    private _setHoverState(isHovering: boolean) {
         this.setState({
             isHovering,
         });
     }
-    private onCopy() {
-        if (this.copyTooltipTimeoutId) {
-            clearInterval(this.copyTooltipTimeoutId);
+    private _onCopy() {
+        if (this._copyTooltipTimeoutId) {
+            clearInterval(this._copyTooltipTimeoutId);
         }
 
         const tooltipLifespanMs = 1000;
-        this.copyTooltipTimeoutId = window.setTimeout(() => {
-            this.hideTooltip();
+        this._copyTooltipTimeoutId = window.setTimeout(() => {
+            this._hideTooltip();
         }, tooltipLifespanMs);
     }
-    private hideTooltip() {
-        ReactTooltip.hide(ReactDOM.findDOMNode(this.copyable));
+    private _hideTooltip() {
+        ReactTooltip.hide(ReactDOM.findDOMNode(this._copyable));
     }
 }