diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index 2159c1d280..f0888e53c9 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -55,10 +55,10 @@ class TableGraph extends Component { const isFixedCorner = rowIndex === 0 && columnIndex === 0 const isLastRow = rowIndex === rowCount - 1 const isLastColumn = columnIndex === columnCount - 1 - const isHovered = + const isHighlighted = rowIndex === parent.props.scrollToRow || - rowIndex === hoveredRowIndex || - columnIndex === hoveredColumnIndex + (rowIndex === hoveredRowIndex && hoveredRowIndex !== 0) || + (columnIndex === hoveredColumnIndex && hoveredColumnIndex !== 0) const cellClass = classnames('table-graph-cell', { 'table-graph-cell__fixed-row': isFixedRow, @@ -66,7 +66,7 @@ class TableGraph extends Component { 'table-graph-cell__fixed-corner': isFixedCorner, 'table-graph-cell__last-row': isLastRow, 'table-graph-cell__last-column': isLastColumn, - 'table-graph-cell__hovered': isHovered, + 'table-graph-cell__highlight': isHighlighted, }) return ( diff --git a/ui/src/style/components/table-graph.scss b/ui/src/style/components/table-graph.scss index 7b27b72ad7..be3f9e349b 100644 --- a/ui/src/style/components/table-graph.scss +++ b/ui/src/style/components/table-graph.scss @@ -18,13 +18,13 @@ line-height: 30px; padding: 0 6px; font-size: 13px; - color: $g13-mist; + color: $g12-forge; border: 1px solid $g5-pepper; &__fixed-row, &__fixed-column { font-weight: 700; - color: $g16-pearl; + color: $g14-chromium; background-color: $g4-onyx; } &__fixed-row { @@ -45,7 +45,17 @@ &__last-column { border-right: 0; } - &__hovered { - // TODO:add stylign here. + &__highlight { + background-color: $g6-smoke; + color: $g16-pearl; + } + &__highlight:not(.table-graph-cell__fixed-row):not(.table-graph-cell__fixed-column):not(.table-graph-cell__fixed-corner) { + color: $g14-chromium; + background-color: $g6-smoke; + } + &:hover:not(.table-graph-cell__fixed-row):not(.table-graph-cell__fixed-column):not(.table-graph-cell__fixed-corner) { + color: $g20-white; + background-color: $g0-obsidian; + border-color: $c-pool; } }