Assorted changes (see desc)

- Explorer is darker
- Group by Time styles were all over the place, moving to own file in
chronograf components css
- Removing _sizes.scss (only had 1 variable in it)

ui/src/chronograf/components/FieldList.js

@@ -74,9 +74,11 @@ const FieldList = React.createClass({
       <div>
         {
           hasAggregates ?
-            <div className="query-editor__list-header group-by-time">
-              <div className="group-by-time-dropdown-label">Group by Time:</div>
-              <GroupByTimeDropdown isOpen={!hasGroupByTime} selected={query.groupBy.time} onChooseGroupByTime={this.handleGroupByTime} />
+            <div className="query-editor__list-header">
+              <div className="group-by-time">
+                <p>Group by Time</p>
+                <GroupByTimeDropdown isOpen={!hasGroupByTime} selected={query.groupBy.time} onChooseGroupByTime={this.handleGroupByTime} />
+              </div>
             </div>
             : null
         }

ui/src/chronograf/components/GroupByTimeDropdown.js

@@ -24,8 +24,7 @@ const GroupByTimeDropdown = React.createClass({
         <ul className={classNames("dropdown-menu", {show: isOpen})} aria-labelledby="group-by-dropdown">
           {groupByTimeOptions.map((groupBy) => {
             return (
-              <li className="dropdown-option"
-                key={groupBy.menuOption}>
+              <li key={groupBy.menuOption}>
                 <a href="#" onClick={() => onChooseGroupByTime(groupBy)}>
                   {groupBy.menuOption}
                 </a>

ui/src/style/chronograf/base/_sizes.scss

@@ -1 +0,0 @@
-$group-by-time-dropdown-width: 7em;

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

@@ -1,3 +1,4 @@
+
 .explorer {
   display: block;
   background-color: $g3-castle;
@@ -11,7 +12,7 @@
 
   // For when an explorer item is open
   &.active {
-    background-color: $g5-pepper;
+    background-color: $g4-onyx;
     .explorer__header {
       &-name {
         color: $g20-white;
@@ -71,13 +72,13 @@
 // Tabs
 .explorer__tabs {
   display: flex;
-  background-color: $g5-pepper;
+  background-color: $g4-onyx;
   padding: 0 11px;
 }
 .explorer__tab {
   white-space: nowrap;
   color: $g11-sidewalk;
-  background: $g6-smoke;
+  background: $g5-pepper;
   height: 28px;
   font-size: 12px;
   font-weight: 600;
@@ -92,10 +93,10 @@
 
   &:hover {
     color: $g18-cloud;
-    background-color: $g7-graphite;
+    background-color: $g6-smoke;
   }
   &.active {
-    background: $g7-graphite;
+    background: $g6-smoke;
     color: $g15-platinum;
   }
 

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

@@ -10,9 +10,6 @@
   margin: 0 16px 0 0;
   border-radius: 0 3px 3px 0;
 }
-.group-by-time-dropdown .dropdown-toggle {
-  width: $group-by-time-dropdown-width;
-}
 .source-indicator {
   padding: 0 9px;
   border: 0;

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

@@ -5,7 +5,7 @@ $query-editor-height: 300px;
 
 .query-editor {
   padding: 6px;
-  background-color: $g7-graphite;
+  background-color: $g6-smoke;
   border-radius: 0 0 $radius $radius;
 }
 .query-editor__code {
@@ -19,7 +19,7 @@ $query-editor-height: 300px;
     font-weight: 600;
     color: $c-comet;
     border-radius: $radius-small $radius-small 0 0;
-    border-bottom: 2px solid $g6-smoke;
+    border-bottom: 2px solid $query-editor-tab-active;
     margin-bottom: 0;
     overflow: auto;
     min-height: 3.25em;
@@ -94,13 +94,13 @@ $query-editor-height: 300px;
     list-style-type: none;
     margin: 0;
     font-size: 12px;
-    padding: 4px 9.5px 4px 19px;
+    padding: 4px 9px 4px 18px;
     transition:
       color 0.25s ease,
       background-color 0.25s ease;
 
     &:hover {
-      background-color: $g5-pepper;
+      background-color: $g4-onyx;
       color: $g17-whisper;
       cursor: pointer;
     }
@@ -108,7 +108,7 @@ $query-editor-height: 300px;
   &-radio {
     &.active {
       color: $g20-white;
-      background-color: $g5-pepper;
+      background-color: $g4-onyx;
       font-weight: 600;
     }
   }
@@ -139,26 +139,6 @@ $query-editor-height: 300px;
     }
 
     .dropdown {
-      .btn.dropdown-toggle {
-        text-align: left;
-        background-color: $g5-pepper;
-        border-color: $g5-pepper;
-        color: $g13-mist !important;
-
-        &:hover {
-          background-color: $g6-smoke;
-          border-color: $g6-smoke;
-          color: $g20-white !important;
-        }
-        &:active,
-        &:active:hover,
-        &:active:focus,
-        &.active {
-          color: $g20-white !important;
-          background-color: $g7-graphite;
-          border-color: $g6-smoke;
-        }
-      }
       .dropdown-menu {
         width: 100%;
         min-width: 100%;
@@ -347,87 +327,6 @@ $query-editor-height: 300px;
   }
 }
 
-// Warning for converting to raw query
-.query-editor__warning {
-  opacity: 0;
-  transition: opacity 0.35s ease;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(56,56,70,0.8);
-  z-index: 999;
-  border-radius: $radius-small $radius-small 0 0;
-  border-bottom: 2px solid $g6-smoke;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &:hover {
-    opacity: 1;
-  }
-}
-
-.field {
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  &.active {
-    background-color: gainsboro !important;
-  }
-}
-
-.group-by-time {
-  display: flex;
-  align-items: baseline;
-}
-
-.group-by-time-dropdown {
-  width: $group-by-time-dropdown-width;
-
-  .caret {
-    position: absolute;
-    top: calc(50% + 1px);
-    right: 13px;
-    transform: translateY(-50%);
-  }
-
-  .dropdown-toggle {
-    text-align: left;
-    width: 100%;
-    background-color: $g5-pepper;
-    border-color: $g5-pepper;
-    color: $g13-mist !important;
-
-    &:hover {
-      color: $g20-white !important;
-      background-color: $g7-graphite;
-      border-color: $g6-smoke;
-    }
-    &:active,
-    &:active:hover,
-    &:active:focus,
-    &.active {
-      color: $g20-white !important;
-      background-color: $g7-graphite;
-      border-color: $g6-smoke;
-    }
-  }
-
-  .dropdown-menu {
-    width: $group-by-time-dropdown-width;
-    min-width: 2em; // Override bootstrap min-width
-  }
-}
-
-.group-by-time-dropdown-label {
-  color: $g13-mist;
-  margin-right: 4px;
-}
-
 .query-editor-empty-state {
   color: $g17-whisper;
 

ui/src/style/chronograf/main.scss

@@ -1,5 +1,4 @@
 @import 'base/reset';
-@import 'base/sizes';
 
 @import 'layout/main';
 
@@ -7,6 +6,7 @@
 @import 'components/PanelBuilder';
 @import 'components/Explorer';
 @import 'components/MultiSelectDropdown';
+@import 'components/GroupByTimeDropdown';
 @import 'components/TagList';
 @import 'components/Resizer';
 @import 'components/Header';