Change style of Source Indicator such that it does not look like a button

ui/src/shared/components/SourceIndicator.js

@@ -1,4 +1,5 @@
 import React, {PropTypes} from 'react'
+import ReactTooltip from 'react-tooltip'
 
 const SourceIndicator = React.createClass({
   propTypes: {
@@ -10,13 +11,14 @@ const SourceIndicator = React.createClass({
     if (!sourceName) {
       return null
     }
+    const sourceNameTooltip = `Connected to <code>${sourceName}</code>`
     return (
-      <div className="source-indicator">
+      <div className="source-indicator" data-for="source-indicator-tooltip" data-tip={sourceNameTooltip}>
         <span className="icon server2"></span>
-        {sourceName}
+        <ReactTooltip id="source-indicator-tooltip" effect="solid" html={true} offset={{top: 2}} place="bottom" class="influx-tooltip place-bottom" />
       </div>
     )
   },
 })
 
-export default SourceIndicator
+export default SourceIndicator

ui/src/style/components/source-indicator.scss

@@ -5,23 +5,17 @@
 .source-indicator {
   @include no-user-select();
   display: inline-block;
-  padding: 0 9px;
+  padding: 0 4px;
   border: 0;
-  background-color: $g5-pepper;
   height: 30px;
   line-height: 30px;
   color: $g13-mist;
   font-weight: 700;
   font-size: 12px;
-  border-radius: 3px;
-  margin-right: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 
   > .icon {
     display: inline-block;
     font-size: 16px;
-    margin: 0 4px 0 -2px;
+    margin: 0 4px;
   }
 }