Style hover state and cells

ui/src/logs/components/LogsTable.tsx

@@ -1,12 +1,12 @@
 import _ from 'lodash'
 import moment from 'moment'
+import classnames from 'classnames'
 import React, {Component, MouseEvent} from 'react'
 import {Grid, AutoSizer} from 'react-virtualized'
 import {getDeep} from 'src/utils/wrappers'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 
-const ROW_HEIGHT = 30
-const HIGHLIGHT_COLOR = '#555'
+const ROW_HEIGHT = 26
 
 interface Props {
   data: {
@@ -57,7 +57,7 @@ class LogsTable extends Component<Props, State> {
     return (
       <div
         className="logs-viewer--table-container"
-        onMouseOut={this.handleMouseOut}
+        onMouseOut={this.handleMouseLeave}
       >
         <AutoSizer>
           {({width}) => (
@@ -186,7 +186,11 @@ class LogsTable extends Component<Props, State> {
     )
 
     return (
-      <div style={style} key={key}>
+      <div
+        className="logs-viewer--cell logs-viewer--cell-header"
+        style={style}
+        key={key}
+      >
         {this.header(value)}
       </div>
     )
@@ -219,16 +223,14 @@ class LogsTable extends Component<Props, State> {
         )
     }
 
-    let backgroundColor = ''
-    if (rowIndex === this.state.currentRow && columnIndex > 0) {
-      backgroundColor = HIGHLIGHT_COLOR
-    }
+    const highlightRow = rowIndex === this.state.currentRow && columnIndex >= 0
 
     return (
       <div
-        style={{...style, padding: '5px', backgroundColor}}
+        className={classnames('logs-viewer--cell', {highlight: highlightRow})}
         key={key}
-        onMouseOver={this.handleMouseOver}
+        style={style}
+        onMouseOver={this.handleMouseEnter}
         data-index={rowIndex}
       >
         {value}

ui/src/style/pages/logs-viewer.scss

@@ -208,11 +208,13 @@ $logs-viewer-gutter: 60px;
 }
 
 .logs-viewer--dot {
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
   border-radius: 50%;
   display: inline-block;
   background-color: $g0-obsidian;
+  border: 2px solid $g3-castle;
+  margin-left: 2px;
 
   &.emerg-severity {
     @include gradient-diag-up($c-ruby, $c-fire);
@@ -236,7 +238,7 @@ $logs-viewer-gutter: 60px;
     @include gradient-diag-up($c-star, $c-comet);
   }
   &.debug-severity {
-    @include gradient-diag-up($g5-pepper, $g6-smoke);
+    @include gradient-diag-up($g9-mountain, $g10-wolf);
   }
 }
 
@@ -247,4 +249,44 @@ $logs-viewer-gutter: 60px;
     width: 26px;
     justify-content: center;
   }
+}
+
+// Table Cell Styles
+.logs-viewer--cell {
+  font-size: 12px;
+  padding: 0 4px;
+  color: $g11-sidewalk;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  font-family: $code-font;
+
+  &.highlight {
+    background-color: $g5-pepper;
+    color: $g20-white;
+  }
+}
+.logs-viewer--cell-header {
+  font-weight: 600;
+  color: $g15-platinum;
+  border-bottom: 2px solid $g5-pepper;
+}
+
+// Clickable Cells
+.logs-viewer--clickable {
+  padding: 1px 3px;
+  border-radius: 3px;
+  @include no-user-select();
+
+  &:hover {
+    background-color: $c-pool;
+    color: $g20-white;
+    cursor: pointer;
+  }
+
+  &:active,
+  &:active:hover {
+    background-color: $c-ocean;
+    color: $c-neutrino;
+  }
 }