Polish crosshair styles

Also renamed some things

ui/src/shared/components/Crosshair.js

@@ -1,24 +1,28 @@
 import React, {PropTypes, Component} from 'react'
 import {DYGRAPH_CONTAINER_XLABEL_MARGIN} from 'shared/constants'
+import {NULL_HOVER_TIME} from 'shared/constants/tableGraph'
+
 import classnames from 'classnames'
 
 class Crosshair extends Component {
   render() {
     const {dygraph, staticLegendHeight, hoverTime} = this.props
-    const crosshairleft = Math.round(
+    const crosshairLeft = Math.round(
       Math.max(-1000, dygraph.toDomXCoord(hoverTime)) || -1000 + 1
     )
     const crosshairHeight = `calc(100% - ${staticLegendHeight +
       DYGRAPH_CONTAINER_XLABEL_MARGIN}px)`
 
+    const crosshairHidden = hoverTime === NULL_HOVER_TIME
+
     return (
-      <div className="crosshair">
+      <div className="crosshair-container">
         <div
-          className={classnames('crosshair--crosshair', {
-            hidden: crosshairleft < 0,
+          className={classnames('crosshair', {
+            hidden: crosshairHidden,
           })}
           style={{
-            left: crosshairleft,
+            left: crosshairLeft,
             height: crosshairHeight,
             zIndex: 1999,
           }}

ui/src/style/components/crosshairs.scss

@@ -2,28 +2,28 @@
   Crosshairs
   ------------------------------------------------------------------------------
 */
-.crosshair {
+
+%crosshair-styles {
   position: absolute;
+  cursor: pointer;
+}
+
+.crosshair-container {
+  @extend %crosshair-styles;
   z-index: 0;
   top: 8px;
   width: calc(100% - 32px);
   height: calc(100% - 16px);
-  cursor: pointer;
-  opacity: 1;
 }
 
-.crosshair--crosshair {
-  opacity: 1;
-  position: absolute;
+.crosshair {
+  @extend %crosshair-styles;
   top: 0;
   height: calc(100% - 20px);
   width: 0.5px;
-  background: linear-gradient(to bottom, $c-dreamsicle 0%, $c-dreamsicle 100%);
-  transition: opacity 0.4s ease;
-  z-index: 5;
-  cursor: pointer;
+  background-color: $g14-chromium;
 }
 
-.crosshair--crosshair.hidden {
+.crosshair.hidden {
   visibility: hidden;
 }