From 8aa41afa3f252f72e39f54e0eca20b40f297696b Mon Sep 17 00:00:00 2001
From: Alex Paxton <thealexpaxton@gmail.com>
Date: Tue, 3 Oct 2017 12:55:29 -0700
Subject: [PATCH] Dedupe and polish Tooltip styles

Signed-off-by: Jared Scheib <jared.scheib@gmail.com>
---
 ui/src/shared/components/GraphTips.js         |  2 +-
 ui/src/shared/components/SourceIndicator.js   | 10 +++++++---
 ui/src/style/components/react-tooltips.scss   | 20 ++++++++++++-------
 ui/src/style/components/source-indicator.scss |  2 +-
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/ui/src/shared/components/GraphTips.js b/ui/src/shared/components/GraphTips.js
index 5ff4d3e63..edf0193b7 100644
--- a/ui/src/shared/components/GraphTips.js
+++ b/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"
diff --git a/ui/src/shared/components/SourceIndicator.js b/ui/src/shared/components/SourceIndicator.js
index 926387192..aed0eaa5b 100644
--- a/ui/src/shared/components/SourceIndicator.js
+++ b/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}}
diff --git a/ui/src/style/components/react-tooltips.scss b/ui/src/style/components/react-tooltips.scss
index df2227227..bc7572423 100644
--- a/ui/src/style/components/react-tooltips.scss
+++ b/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;
diff --git a/ui/src/style/components/source-indicator.scss b/ui/src/style/components/source-indicator.scss
index a4e04c78d..60099d3b3 100644
--- a/ui/src/style/components/source-indicator.scss
+++ b/ui/src/style/components/source-indicator.scss
@@ -18,4 +18,4 @@
     font-size: 16px;
     margin: 0 4px;
   }
-}
\ No newline at end of file
+}