Make builder queries vertically centered (again)

ui/src/data_explorer/components/RawQueryEditor.js

@@ -1,4 +1,5 @@
 import React, {PropTypes} from 'react'
+import classNames from 'classnames'
 
 const ENTER = 13
 const ESCAPE = 27
@@ -57,7 +58,9 @@ const RawQueryEditor = React.createClass({
           onBlur={this.handleUpdate}
           ref={(editor) => this.editor = editor}
           value={value}
-          placeholder="Blank query"
+          placeholder="Enter a query..."
+          autoComplete="off"
+          spellCheck="false"
         />
         {this.renderStatus(rawStatus)}
       </div>
@@ -69,7 +72,12 @@ const RawQueryEditor = React.createClass({
       return null
     }
 
-    return <div>{rawStatus.error || rawStatus.warn || rawStatus.success}</div>
+    return (
+      <div className={classNames("raw-text--status", {"raw-text--error": rawStatus.error, "raw-text--success": rawStatus.success, "raw-text--warning": rawStatus.warn})}>
+        <span className={classNames("icon", {stop: rawStatus.error, checkmark: rawStatus.success, "alert-triangle": rawStatus.warn})}></span>
+        {rawStatus.error || rawStatus.warn || rawStatus.success}
+      </div>
+    )
   },
 })
 

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

@@ -165,7 +165,8 @@ $query-builder--column-heading-height: 50px;
   position: relative;
 
   pre {
-    display: block;
+    display: flex;
+    align-items: center;
     padding: 7px;
     border: 2px solid $query-editor-tab-inactive;
     background-color: $query-editor-tab-inactive;