From 7ddee2ddbbac9f0cf3bf7982d97499910240410d Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 13 Dec 2016 16:55:33 -0800
Subject: [PATCH] Styling new panel tab menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Using full text names “Query Builder” and “Raw Text” to be as clear as
possible to users
---
 ui/src/chronograf/components/Panel.js         |  6 ++---
 .../style/chronograf/components/_Panel.scss   | 24 ++++++++++++++-----
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/ui/src/chronograf/components/Panel.js b/ui/src/chronograf/components/Panel.js
index 8796021d6e..94b83fb9c9 100644
--- a/ui/src/chronograf/components/Panel.js
+++ b/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>
     );
diff --git a/ui/src/style/chronograf/components/_Panel.scss b/ui/src/style/chronograf/components/_Panel.scss
index be552b5b9c..ea7b4eab3c 100644
--- a/ui/src/style/chronograf/components/_Panel.scss
+++ b/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;