Tweak styles

Co-authored-by: Chris Henn <chris.henn@influxdata.com>
Co-authored-by: Andrew Watkins <andrew.watkinz@gmail.com>

ui/src/ifql/components/NoResults.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import React, {SFC} from 'react'
 
-const NoResult = () => (
+const NoResult: SFC = () => (
   <div className="graph-empty">
     <p>No Results</p>
   </div>

ui/src/ifql/components/TableSidebar.tsx

@@ -1,10 +1,11 @@
-import React, {PureComponent} from 'react'
+import React, {PureComponent, CSSProperties} from 'react'
 import _ from 'lodash'
 
 import {ScriptResult} from 'src/types'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import TableSidebarItem from 'src/ifql/components/TableSidebarItem'
+import {vis} from 'src/ifql/constants'
 
 interface Props {
   data: ScriptResult[]
@@ -20,7 +21,9 @@ export default class TableSidebar extends PureComponent<Props> {
     return (
       <div className="time-machine--sidebar">
         {!this.isDataEmpty && (
-          <div className="query-builder--heading">Results</div>
+          <div className="query-builder--heading" style={this.headingStyle}>
+            Results
+          </div>
         )}
         <FancyScrollbar>
           <div className="time-machine-vis--sidebar query-builder--list">
@@ -41,6 +44,14 @@ export default class TableSidebar extends PureComponent<Props> {
     )
   }
 
+  get headingStyle(): CSSProperties {
+    return {
+      height: `${vis.TABLE_ROW_HEIGHT + 2.5}px`,
+      backgroundColor: '#31313d',
+      borderBottom: '2px solid #383846', // $g5-pepper
+    }
+  }
+
   get isDataEmpty(): boolean {
     return _.isEmpty(this.props.data)
   }

ui/src/ifql/components/TimeMachineTable.tsx

@@ -4,8 +4,7 @@ import {Grid, GridCellProps, AutoSizer, ColumnSizer} from 'react-virtualized'
 
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import {ScriptResult} from 'src/types'
-
-const TIME_COLUMN_WIDTH = 170
+import {vis} from 'src/ifql/constants'
 
 @ErrorHandling
 export default class TimeMachineTable extends PureComponent<ScriptResult> {
@@ -18,7 +17,7 @@ export default class TimeMachineTable extends PureComponent<ScriptResult> {
           {({height, width}) => (
             <ColumnSizer
               width={width}
-              columnMinWidth={TIME_COLUMN_WIDTH}
+              columnMinWidth={vis.TIME_COLUMN_WIDTH}
               columnCount={this.columnCount}
             >
               {({adjustedWidth, getColumnWidth}) => (
@@ -29,7 +28,7 @@ export default class TimeMachineTable extends PureComponent<ScriptResult> {
                   columnWidth={getColumnWidth}
                   height={height}
                   rowCount={data.length}
-                  rowHeight={30}
+                  rowHeight={vis.TABLE_ROW_HEIGHT}
                   width={adjustedWidth}
                 />
               )}
@@ -51,8 +50,14 @@ export default class TimeMachineTable extends PureComponent<ScriptResult> {
     style,
   }: GridCellProps): React.ReactNode => {
     const {data} = this.props
+    const headerRowClass = !rowIndex ? 'table-graph-cell__fixed-row' : ''
+
     return (
-      <div key={key} style={style} className="table-graph-cell">
+      <div
+        key={key}
+        style={style}
+        className={`table-graph-cell ${headerRowClass}`}
+      >
         {data[rowIndex][columnIndex]}
       </div>
     )

ui/src/ifql/constants/index.ts

@@ -3,5 +3,6 @@ import * as editor from 'src/ifql/constants/editor'
 import * as argTypes from 'src/ifql/constants/argumentTypes'
 import * as funcNames from 'src/ifql/constants/funcNames'
 import * as builder from 'src/ifql/constants/builder'
+import * as vis from 'src/ifql/constants/vis'
 
-export {ast, funcNames, argTypes, editor, builder}
+export {ast, funcNames, argTypes, editor, builder, vis}

ui/src/ifql/constants/vis.ts

@@ -0,0 +1,2 @@
+export const TABLE_ROW_HEIGHT = 30
+export const TIME_COLUMN_WIDTH = 170