Use carets in measurement list

Stronger affordance

ui/src/data_explorer/components/MeasurementList.js

@@ -125,13 +125,10 @@ const MeasurementList = React.createClass({
           const numTagsActive = Object.keys(this.props.query.tags).length
           return (
             <div key={measurement}>
-              <div
-                className={classNames('query-builder--list-item', {active: isActive})}
-                onClick={isActive ? _.wrap(null, this.props.onChooseMeasurement) : _.wrap(measurement, this.props.onChooseMeasurement)}
-              >
-                <span>
-                  <div className="query-builder--checkbox"></div>
-                  {measurement}
+              <div className={classNames('query-builder--list-item', {active: isActive})}>
+                <div className="query-builder--caret icon caret-right"></div>
+                <span style={{flex: '1 0 0'}} onClick={isActive ? _.wrap(null, this.props.onChooseMeasurement) : _.wrap(measurement, this.props.onChooseMeasurement)}>
+                  {measurement} — 7
                 </span>
                 {(isActive && numTagsActive >= 1)
                   ? <div className={classNames('flip-toggle', {flipped: this.props.query.areTagsAccepted})} onClick={this.handleAcceptReject}>

ui/src/data_explorer/components/TagList.js

@@ -99,7 +99,7 @@ const TagList = React.createClass({
     const {query} = this.props
 
     return (
-      <div style={{paddingLeft: '20px', backgroundColor: '#31313d'}}>
+      <div className="query-builder--sub-list">
         {_.map(this.state.tags, (tagValues, tagKey) => {
           return (
             <TagListItem