Styling new panel tab menu

Using full text names “Query Builder” and “Raw Text” to be as clear as
possible to users

ui/src/chronograf/components/Panel.js

@@ -159,10 +159,10 @@ const Panel = React.createClass({
 
   onChoose(item) {
     switch (item.text) {
-      case 'Builder':
+      case 'Query Builder':
         this.handleAddQuery();
         break;
-      case 'Raw':
+      case 'Raw Text':
         this.handleAddRawQuery();
         break;
     }
@@ -170,7 +170,7 @@ const Panel = React.createClass({
 
   renderAddQuery() {
     return (
-      <SimpleDropdown onChoose={this.onChoose} items={[{text: 'Builder'}, {text: 'Raw'}]} className="editor-chooser">
+      <SimpleDropdown onChoose={this.onChoose} items={[{text: 'Query Builder'}, {text: 'Raw Text'}]} className="panel--tab-new">
         <span className="icon plus"></span>
       </SimpleDropdown>
     );

ui/src/style/chronograf/components/_Panel.scss

@@ -105,12 +105,6 @@
     color: $g15-platinum;
   }
 
-  > span.icon.plus {
-    font-size: 12px;
-    position: relative;
-    top: -1px;
-  }
-
   &-delete {
     margin: 0 -4px 0 1px;
     width: 16px;
@@ -148,6 +142,24 @@
     }
   }
 }
+.panel--tab-new {
+  > .dropdown-toggle {
+    height: 28px !important;
+    border-radius: $radius $radius 0 0;
+
+    > .icon {
+      margin: 0;
+      font-size: 12px;
+      position: relative;
+      top: -1px;
+    }
+  }
+  > .dropdown-menu {
+    width: 90px !important;
+    min-width: 90px !important;
+    max-width: 90px !important;
+  }
+}
 .panel--tab-label {
   display: inline-block;
   font-size: 12px;