Add styles for custom source indicator

ui/src/shared/components/LayoutCellHeader.js

@@ -15,12 +15,12 @@ const LayoutCellHeader = (
     s => s.links.self === _.get(queries, ['0', 'source'], null)
   )
 
+  const headingClass = `dash-graph--heading ${isEditable
+    ? 'dash-graph--heading-draggable'
+    : ''}`
+
   return (
-    <div
-      className={classnames('dash-graph--heading', {
-        'dash-graph--heading-draggable': isEditable,
-      })}
-    >
+    <div className={headingClass}>
       <span
         className={
           cellNameIsDefault
@@ -29,7 +29,7 @@ const LayoutCellHeader = (
         }
       >
         {querySource && querySource.id !== defaultSource.id
-          ? <span className="dash-graph--custom-time">
+          ? <span className="dash-graph--custom-source">
               {querySource.name}
             </span>
           : null}

ui/src/style/pages/dashboards.scss

@@ -170,6 +170,21 @@ $dash-graph-options-arrow: 8px;
   right: 2px;
 }
 
+.dash-graph--custom-source {
+  font-style: normal;
+  font-family: $code-font;
+  color: $c-pool;
+  background-color: $g2-kevlar;
+  height: 24px;
+  font-size: 10px;
+  line-height: 24px;
+  border-radius: 3px;
+  padding: 0 7px;
+  position: absolute;
+  top: 3px;
+  right: 86px;
+}
+
 .dash-graph-context {
   z-index: 2;
   position: absolute;