From 56c32963d6820cd5c96dcfc2eac00c5c40639744 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Sat, 6 Oct 2018 12:09:30 -0700
Subject: [PATCH] ux: minor update to look of stackdriver query help

(cherry picked from commit 3fa83d2755ec44ad48cccd9c2bfc91d2280f3dd8)
---
 public/app/features/teams/TeamList.tsx        |  2 +-
 .../__snapshots__/TeamList.test.tsx.snap      |  5 +--
 .../stackdriver/partials/query.editor.html    | 36 ++++++++++++-------
 public/sass/_variables.dark.scss              |  4 +--
 4 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/public/app/features/teams/TeamList.tsx b/public/app/features/teams/TeamList.tsx
index 985d73d9a52..7b153746f9f 100644
--- a/public/app/features/teams/TeamList.tsx
+++ b/public/app/features/teams/TeamList.tsx
@@ -103,7 +103,7 @@ export class TeamList extends PureComponent<Props, any> {
           <div className="page-action-bar__spacer" />
 
           <a className="btn btn-success" href="org/teams/new">
-            <i className="fa fa-plus" /> New team
+            New team
           </a>
         </div>
 
diff --git a/public/app/features/teams/__snapshots__/TeamList.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamList.test.tsx.snap
index 45d0f78126e..7cf5951dba3 100644
--- a/public/app/features/teams/__snapshots__/TeamList.test.tsx.snap
+++ b/public/app/features/teams/__snapshots__/TeamList.test.tsx.snap
@@ -62,10 +62,7 @@ exports[`Render should render teams table 1`] = `
         className="btn btn-success"
         href="org/teams/new"
       >
-        <i
-          className="fa fa-plus"
-        />
-         New team
+        New team
       </a>
     </div>
     <div
diff --git a/public/app/plugins/datasource/stackdriver/partials/query.editor.html b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
index 95793b6e7b1..7cc93e9d1a8 100755
--- a/public/app/plugins/datasource/stackdriver/partials/query.editor.html
+++ b/public/app/plugins/datasource/stackdriver/partials/query.editor.html
@@ -40,21 +40,33 @@
   <div class="gf-form" ng-show="ctrl.showLastQuery">
     <pre class="gf-form-pre">{{ctrl.lastQueryMeta.rawQueryString}}</pre>
   </div>
-  <div class="gf-form grafana-info-box" style="padding: 0" ng-show="ctrl.showHelp">
-<pre class="gf-form-pre alert alert-info"  style="margin-right: 0"><h5>Alias Patterns</h5>Format the legend keys any way you want by using alias patterns.
+  <div class="grafana-info-box m-t-2 markdown-html" ng-show="ctrl.showHelp">
+    <h5>Alias Patterns</h5>
 
-<label>Example: </label><code ng-non-bindable>{{metric.name}} - {{metric.label.instance_name}}</code>
+    Format the legend keys any way you want by using alias patterns.<br /> <br />
 
-<label>Result: </label><code ng-non-bindable>cpu/usage_time - server1-europe-west-1</code>
+    Example: <code ng-non-bindable>{{metric.name}} - {{metric.label.instance_name}}</code><br />
+    Result: &nbsp;&nbsp;<code ng-non-bindable>cpu/usage_time - server1-europe-west-1</code><br /><br />
 
-<label>Patterns:</label>
-<code ng-non-bindable>{{metric.type}}</code> = metric type e.g. compute.googleapis.com/instance/cpu/usage_time
-<code ng-non-bindable>{{metric.name}}</code> = name part of metric e.g. instance/cpu/usage_time
-<code ng-non-bindable>{{metric.service}}</code> = service part of metric e.g. compute
-
-<code ng-non-bindable>{{metric.label.label_name}}</code> = Metric label metadata e.g. metric.label.instance_name
-<code ng-non-bindable>{{resource.label.label_name}}</code> = Resource label metadata e.g. resource.label.zone
-</pre>
+    <strong>Patterns</strong><br />
+    <ul>
+      <li>
+        <code ng-non-bindable>{{metric.type}}</code> = metric type e.g. compute.googleapis.com/instance/cpu/usage_time
+      </li>
+      <li>
+        <code ng-non-bindable>{{metric.name}}</code> = name part of metric e.g. instance/cpu/usage_time
+      </li>
+      <li>
+        <code ng-non-bindable>{{metric.service}}</code> = service part of metric e.g. compute
+      </li>
+      <li>
+        <code ng-non-bindable>{{metric.label.label_name}}</code> = Metric label metadata e.g.
+        metric.label.instance_name
+      </li>
+      <li>
+        <code ng-non-bindable>{{resource.label.label_name}}</code> = Resource label metadata e.g. resource.label.zone
+      </li>
+    </ul>
   </div>
   <div class="gf-form" ng-show="ctrl.lastQueryError">
     <pre class="gf-form-pre alert alert-error">{{ctrl.lastQueryError}}</pre>
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 01590ace585..ae52fbc5ab5 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -115,8 +115,8 @@ $tight-form-func-bg: #333334;
 $tight-form-func-highlight-bg: #444445;
 
 $modal-backdrop-bg: #353c42;
-$code-tag-bg: $gray-1;
-$code-tag-border: lighten($code-tag-bg, 2%);
+$code-tag-bg: $dark-1;
+$code-tag-border: $dark-4;
 
 // cards
 $card-background: linear-gradient(135deg, #2f2f32, #262628);