Dedupe and polish Tooltip styles

Signed-off-by: Jared Scheib <jared.scheib@gmail.com>

ui/src/shared/components/GraphTips.js

@@ -4,7 +4,7 @@ import ReactTooltip from 'react-tooltip'
 const GraphTips = React.createClass({
   render() {
     const graphTipsText =
-      '<p><b>Graph Tips:</b><br/><br/><code>Click + Drag</code> Zoom in (X or Y)</p><p><code>Shift + Click</code> Pan Graph Window</p><p><code>Double Click</code> Reset Graph Window</p>'
+      '<h1>Graph Tips:</h1><p><code>Click + Drag</code> Zoom in (X or Y)</p><p><code>Shift + Click</code> Pan Graph Window</p><p><code>Double Click</code> Reset Graph Window</p>'
     return (
       <div
         className="graph-tips"

ui/src/shared/components/SourceIndicator.js

@@ -1,5 +1,7 @@
 import React, {PropTypes} from 'react'
 import _ from 'lodash'
+import uuid from 'node-uuid'
+
 import ReactTooltip from 'react-tooltip'
 
 const SourceIndicator = ({sourceOverride}, {source: {name, url}}) => {
@@ -13,16 +15,18 @@ const SourceIndicator = ({sourceOverride}, {source: {name, url}}) => {
   if (!sourceName) {
     return null
   }
-  const sourceNameTooltip = `Connected to <code>${sourceName} @ ${sourceUrl}</code>`
+  const sourceNameTooltip = `<h1>Connected to Source:</h1><p><code>${sourceName} @ ${sourceUrl}</code></p>`
+  const uuidTooltip = uuid.v4()
+
   return (
     <div
       className="source-indicator"
-      data-for="source-indicator-tooltip"
+      data-for={uuidTooltip}
       data-tip={sourceNameTooltip}
     >
       <span className="icon server2" />
       <ReactTooltip
-        id="source-indicator-tooltip"
+        id={uuidTooltip}
         effect="solid"
         html={true}
         offset={{top: 2}}

ui/src/style/components/react-tooltips.scss

@@ -33,6 +33,15 @@ $tooltip-code-color: $c-potassium;
   text-transform: none !important;
   cursor: default;
 
+  h1 {
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0 0 6px 0;
+    line-height: 1.125em;
+    letter-spacing: 0;
+    font-family: $default-font;
+  }
+
   p {
     margin: 0;
     width: 100%;
@@ -70,7 +79,6 @@ $tooltip-code-color: $c-potassium;
     border-color: transparent transparent $tooltip-accent transparent !important;
   }
 
-
   /* Kapacitor Style Tooltip */
   &.kapacitor-tooltip {
     border-color: $c-rainforest !important;
@@ -90,14 +98,13 @@ $tooltip-code-color: $c-potassium;
 
 .influx-tooltip__hover {
   @extend .influx-tooltip;
-  pointer-events: auto!important;
+  pointer-events: auto !important;
   &:hover {
-    visibility: visible!important;
-    opacity: 1!important;
+    visibility: visible !important;
+    opacity: 1 !important;
   }
 }
 
-
 /*
     Question Mark Tooltip
     ----------------------------------------------
@@ -121,8 +128,7 @@ $qmark-tooltip-size: 15px;
   background-color: $g10-wolf;
   color: $g0-obsidian;
   margin: 0 5px;
-  transition:
-    background-color 0.25s ease;
+  transition: background-color 0.25s ease;
 }
 .question-mark-tooltip:hover {
   cursor: default;

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

@@ -18,4 +18,4 @@
     font-size: 16px;
     margin: 0 4px;
   }
-}
+}