From 515c452903258fd6b2ba32d350edc5b31f4d9fbd Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 12 Mar 2018 12:31:47 -0700
Subject: [PATCH] Polish crosshair styles

Also renamed some things
---
 ui/src/shared/components/Crosshair.js   | 14 +++++++++-----
 ui/src/style/components/crosshairs.scss | 22 +++++++++++-----------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/ui/src/shared/components/Crosshair.js b/ui/src/shared/components/Crosshair.js
index 4899df4cf7..a111dd35df 100644
--- a/ui/src/shared/components/Crosshair.js
+++ b/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,
           }}
diff --git a/ui/src/style/components/crosshairs.scss b/ui/src/style/components/crosshairs.scss
index 3b91bdaaab..a6d488ecca 100644
--- a/ui/src/style/components/crosshairs.scss
+++ b/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;
 }