Clean up the DE columns

ui/src/data_explorer/components/MeasurementList.js

@@ -72,7 +72,7 @@ const MeasurementList = React.createClass({
   render() {
     return (
       <div className="query-builder--column">
-        <div className="query-builder--column-heading">Measurement</div>
+        <div className="query-builder--column-heading">Measurements</div>
         {this.props.query.database ? <div className="qeditor--list-header">
           <input className="qeditor--filter" ref="filterText" placeholder="Filter Measurements..." type="text" value={this.state.filterText} onChange={this.handleFilterText} onKeyUp={this.handleEscape} />
           <span className="icon search"></span>

ui/src/data_explorer/components/QueryEditor.js

@@ -79,8 +79,10 @@ const QueryEditor = React.createClass({
   render() {
     return (
       <div className="query-builder--tab-contents">
-        {this.renderQuery()}
-        {this.renderLists()}
+        <div>
+          {this.renderQuery()}
+          {this.renderLists()}
+        </div>
       </div>
     );
   },
@@ -91,7 +93,7 @@ const QueryEditor = React.createClass({
 
     if (!query.rawText) {
       return (
-        <div className="qeditor--query-preview">
+        <div className="query-builder--query-preview">
           <pre><code>{statement}</code></pre>
         </div>
       );

ui/src/data_explorer/components/TagList.js

@@ -91,7 +91,7 @@ const TagList = React.createClass({
 
     return (
       <div className="query-builder--column">
-        <div className="query-builder--column-heading">Fields</div>
+        <div className="query-builder--column-heading">Tags</div>
         {(!query.database || !query.measurement || !query.retentionPolicy) ? null : <div className="qeditor--list-header">
           <div className="toggle toggle-sm">
             <div onClick={this.handleAcceptReject} className={cx("toggle-btn", {active: query.areTagsAccepted})}>Accept</div>

ui/src/style/pages/data-explorer/query-builder.scss

@@ -143,11 +143,18 @@
 */
 .query-builder--tab-contents {
   width: 100%;
-  background-color: $g6-smoke;
+  background-color: $g5-pepper;
   border-radius: 0 $radius $radius 0;
   overflow: hidden;
   position: relative;
 }
+.query-builder--tab-contents > div {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: calc(100% - 8px);
+  height: calc(100% - 8px);
+}
 .query-builder--columns {
   position: absolute;
   width: 100%;
@@ -158,19 +165,34 @@
   width: 100%;
   height: 30px;
   display: flex;
-  align-items: stretch;
+  align-items: center;
   justify-content: space-between;
-
+  font-size: 14px;
+  font-weight: 600;
+  color: $g13-mist;
+  padding: 0 9px;
+  line-height: 30px;
+  border-bottom: 2px solid $g6-smoke;
 }
 .query-builder--column {
   position: absolute;
   width: 25%;
-  height: calc(100% - 30px);
-  top: 30px;
-  overflow: auto;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  @include custom-scrollbar($g6-smoke,$c-pool);
+  height: 100%;
+  top: 0;
+
+  .qeditor--list {
+    position: absolute;
+    top: 30px;
+    height: calc(100% - 30px);
+    width: 100%;
+    left: 0;
+    padding: 0;
+    overflow: auto;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    @include custom-scrollbar($g5-pepper,$c-pool);
+    background-color: $g5-pepper;
+  }
 }
 .query-builder--column:nth-of-type(1) { left: 0; }
 .query-builder--column:nth-of-type(2) { left: 25%; }

ui/src/style/pages/data-explorer/query-editor.scss

@@ -10,7 +10,7 @@ $query-editor-tab-inactive: $g2-kevlar;
 $query-editor-tab-active: $g3-castle;
 $query-editor-height: 250px;
 
-.qeditor--query-preview {
+.query-builder--query-preview {
   position: relative;
 
   pre {
@@ -18,11 +18,10 @@ $query-editor-height: 250px;
     border: 0;
     background-color: $query-editor-tab-inactive;
     color: $c-pool;
-    border-radius: $radius-small $radius-small 0 0;
-    border-bottom: 2px solid $query-editor-tab-active;
+    border-radius: $radius;
     margin-bottom: 0;
     overflow: auto;
-    min-height: 3.25em;
+    height: 56px;
     @include custom-scrollbar($query-editor-tab-inactive, $c-pool);
 
     code {
@@ -90,7 +89,8 @@ $query-editor-height: 250px;
     list-style-type: none;
     margin: 0;
     font-size: 12px;
-    padding: 4px 9px 4px 18px;
+    font-weight: 500;
+    padding: 4px 9px;
     transition:
       color 0.25s ease,
       background-color 0.25s ease;
@@ -105,7 +105,7 @@ $query-editor-height: 250px;
     &.active {
       color: $g20-white;
       background-color: $g4-onyx;
-      font-weight: 600;
+      font-weight: 700;
     }
   }
   &-checkbox {
@@ -178,14 +178,13 @@ $query-editor-height: 250px;
 
 // List empty state
 .qeditor--empty {
-  text-align: center;
+  text-align: left;
   color: $g10-wolf;
   display: inline-block;
   width: 100%;
   padding: 18px 0;
   height: $query-editor-height;
-  background-color: $query-editor-tab-active;
-  border-radius: 0 0 $radius $radius;
+  background-color: $g5-pepper;
 }
 
 // Hidden dropdowns