From 6a893f82c6b48ecfc632ee5553579bffe61cec5c Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 10 Feb 2017 14:57:30 -0800
Subject: [PATCH] Polish empty states in DE query builder

---
 ui/src/style/pages/data-explorer/query-builder.scss |  8 ++++++++
 ui/src/style/pages/data-explorer/query-editor.scss  | 12 +++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/ui/src/style/pages/data-explorer/query-builder.scss b/ui/src/style/pages/data-explorer/query-builder.scss
index 185b337d6..b04151d5e 100644
--- a/ui/src/style/pages/data-explorer/query-builder.scss
+++ b/ui/src/style/pages/data-explorer/query-builder.scss
@@ -196,6 +196,14 @@ $query-builder--column-heading-height: 60px;
     @include custom-scrollbar($g4-onyx,$c-pool);
     background-color: $g4-onyx;
   }
+  .qeditor--empty {
+    margin-top: 0;
+    height: calc(100% - #{$query-builder--column-heading-height});
+    position: absolute;
+    top: $query-builder--column-heading-height;
+    left: 0;
+    background-color: transparent;
+  }
 }
 .query-builder--column:nth-of-type(1) { left: 0; }
 .query-builder--column:nth-of-type(2) { left: 25%; }
diff --git a/ui/src/style/pages/data-explorer/query-editor.scss b/ui/src/style/pages/data-explorer/query-editor.scss
index a7bf6b0f8..b7f1bf6ca 100644
--- a/ui/src/style/pages/data-explorer/query-editor.scss
+++ b/ui/src/style/pages/data-explorer/query-editor.scss
@@ -182,11 +182,17 @@
 .qeditor--empty {
   text-align: center;
   color: $g10-wolf;
-  display: inline-block;
   width: 100%;
-  padding: 18px 0;
-  height: $query-editor-height;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: calc(100% - 32px);
   background-color: transparent;
+  background-color: $g3-castle;
+  border-radius: 0 $radius $radius 0;
+  margin-top: 16px;
 }
 
 // Hidden dropdowns