From b73e8332132236c5a0af923d551a5b1f656618d9 Mon Sep 17 00:00:00 2001
From: Ibrahim Fradj <ibrahim.fradj@ericsson.com>
Date: Thu, 5 Aug 2021 16:04:41 -0400
Subject: [PATCH] Reduction contrast of grid lines

 change the color of lineColor with #35373B for horizontal grid lines , #2B2E31 for vertical grid lines and background with #232323

Fixes #441

Signed-off-by: Ibrahim Fradj <ibrahim.fradj@ericsson.com>
---
 .../src/components/timegraph-output-component.tsx           | 6 +++---
 .../src/components/trace-context-component.tsx              | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-components/src/components/timegraph-output-component.tsx b/packages/react-components/src/components/timegraph-output-component.tsx
index fea228489..5e12b090f 100644
--- a/packages/react-components/src/components/timegraph-output-component.tsx
+++ b/packages/react-components/src/components/timegraph-output-component.tsx
@@ -81,7 +81,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             rowStyleProvider: (row: TimelineChart.TimeGraphRowModel) => ({
                 backgroundColor: 0x979797,// 0xaaaaff,
                 backgroundOpacity: row.selected ? 0.1 : 0,
-                lineColor: 0xdddddd, // hasStates ? 0xdddddd : 0xaa4444, // row.data && row.data.hasStates
+                lineColor: 0x35373B , // hasStates ? 0xdddddd : 0xaa4444, // row.data && row.data.hasStates
                 lineThickness: 1, // hasStates ? 1 : 3 // row.data && row.data.hasStates
             })
         };
@@ -328,7 +328,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
     }
 
     private getChartContainer() {
-        const grid = new TimeGraphChartGrid('timeGraphGrid', this.props.style.rowHeight, this.props.style.lineColor);
+        const grid = new TimeGraphChartGrid('timeGraphGrid', this.props.style.rowHeight, 0x2B2E31);
         const selectionRange = new TimeGraphChartSelectionRange('chart-selection-range', { color: this.props.style.cursorColor });
         return <ReactTimeGraphContainer
             options={
@@ -337,7 +337,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
                     height: parseInt(this.props.style.height.toString()),
                     width: this.props.style.chartWidth, // this.props.style.mainWidth,
                     backgroundColor: this.props.style.chartBackgroundColor,
-                    lineColor: this.props.style.lineColor,
+                    lineColor: 0x2B2E31,
                     classNames: 'horizontal-canvas'
                 }
             }
diff --git a/packages/react-components/src/components/trace-context-component.tsx b/packages/react-components/src/components/trace-context-component.tsx
index 566b9e097..3c6d741a4 100644
--- a/packages/react-components/src/components/trace-context-component.tsx
+++ b/packages/react-components/src/components/trace-context-component.tsx
@@ -101,7 +101,7 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
                 height: this.DEFAULT_COMPONENT_HEIGHT,
                 rowHeight: this.DEFAULT_COMPONENT_ROWHEIGHT,
                 naviBackgroundColor: this.props.backgroundTheme === 'light' ? 0xf4f7fb : 0x3f3f3f,
-                chartBackgroundColor: this.props.backgroundTheme === 'light' ? 0xf4f7fb : 0x3f3f3f,
+                chartBackgroundColor: this.props.backgroundTheme === 'light' ? 0xf4f7fb : 0x232323,
                 cursorColor: 0x259fd8,
                 lineColor: this.props.backgroundTheme === 'light' ? 0x757575 : 0xbbbbbb
             },
@@ -135,7 +135,7 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
                 height: this.DEFAULT_COMPONENT_HEIGHT,
                 rowHeight: this.DEFAULT_COMPONENT_ROWHEIGHT,
                 naviBackgroundColor: theme === 'light' ? 0xf4f7fb : 0x3f3f3f,
-                chartBackgroundColor: theme === 'light' ? 0xf4f7fb : 0x3f3f3f,
+                chartBackgroundColor: theme === 'light' ? 0xf4f7fb : 0x232323,
                 cursorColor: 0x259fd8,
                 lineColor: theme === 'light' ? 0x757575 : 0xbbbbbb
             },