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>
jaegertracing · Feb 21, 2022 · 676a90b · 676a90b
1 parent 5c613b4
commit 676a90b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 26 deletions.
diff --git a/...ges/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap b/...ges/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
@@ -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
@@ -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