From 676a90baa3238a3acbaae2e6718c55c81119420e Mon Sep 17 00:00:00 2001
From: nofar9792 <nofar.cohen@logz.io>
Date: Mon, 21 Feb 2022 21:42:50 +0200
Subject: [PATCH] Monitor Tab - Crosshair Color is too light (#888)

* Color

Signed-off-by: nofar9792 <nofar.cohen@logz.io>

* Move color to css

Signed-off-by: nofar9792 <nofar.cohen@logz.io>
---
 .../__snapshots__/serviceGraph.test.js.snap   | 30 ++++---------------
 .../Monitor/ServicesView/serviceGraph.css     |  5 ++++
 .../Monitor/ServicesView/serviceGraph.tsx     |  2 +-
 3 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap b/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
index 567b2a6932..b4aba88d6d 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
@@ -159,11 +159,7 @@ exports[`<ServiceGraph> Base graph should be displayed  1`] = `
       values={Array []}
     >
       <div
-        style={
-          Object {
-            "width": 140,
-          }
-        }
+        className="crosshair-value"
       />
     </Crosshair>
   </XYPlot>
@@ -273,11 +269,7 @@ exports[`<ServiceGraph> Base graph with custom color should be displayed 1`] = `
       values={Array []}
     >
       <div
-        style={
-          Object {
-            "width": 140,
-          }
-        }
+        className="crosshair-value"
       />
     </Crosshair>
   </XYPlot>
@@ -391,11 +383,7 @@ exports[`<ServiceGraph> Base graph with horizontal lines should be displayed 1`]
       values={Array []}
     >
       <div
-        style={
-          Object {
-            "width": 140,
-          }
-        }
+        className="crosshair-value"
       />
     </Crosshair>
   </XYPlot>
@@ -505,11 +493,7 @@ exports[`<ServiceGraph> Base graph with legends should be displayed 1`] = `
       values={Array []}
     >
       <div
-        style={
-          Object {
-            "width": 140,
-          }
-        }
+        className="crosshair-value"
       />
     </Crosshair>
     <DiscreteColorLegendItem
@@ -640,11 +624,7 @@ exports[`<ServiceGraph> Crosshair map test 1`] = `
       values={Array []}
     >
       <div
-        style={
-          Object {
-            "width": 140,
-          }
-        }
+        className="crosshair-value"
       />
     </Crosshair>
   </XYPlot>
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.css b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.css
index 467b46c770..afde571e6c 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.css
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.css
@@ -48,3 +48,8 @@ limitations under the License.
   text-align: center;
   display: table-cell;
 }
+
+.crosshair-value {
+  width: 140;
+  color: #6b6b76;
+}
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
index 0e6d03ba1a..57bc63e14e 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
@@ -163,7 +163,7 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
         <YAxis />
         {this.renderLines()}
         <Crosshair values={this.state.crosshairValues}>
-          <div style={{ width: 140 }}>
+          <div className="crosshair-value">
             {this.state.crosshairValues[0] &&
               `${new Date(this.state.crosshairValues[0].x).toLocaleDateString()} ${new Date(
                 this.state.crosshairValues[0].x