Merge pull request #13550 from grafana/stackdriver-query-help-css

ux: minor update to look of stackdriver query help

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>
 

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

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>

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);