From 2479ad262ea47643fec6c904b9486c9528d5efc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 5 May 2017 09:16:28 +0200
Subject: [PATCH] ux: updated look of info box

---
 public/app/features/templating/partials/editor.html | 2 +-
 public/app/partials/metrics.html                    | 1 +
 public/sass/components/_infobox.scss                | 8 +++++---
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html
index 59e304278f7..d974b7d4e3d 100644
--- a/public/app/features/templating/partials/editor.html
+++ b/public/app/features/templating/partials/editor.html
@@ -72,7 +72,7 @@
 
     <div ng-show="mode === 'help'">
 			<div class="grafana-info-box col-lg-8">
-				<h3 class="page-heading">What does templating do?</h3>
+				<h5>What does templating do?</h5>
 				<p>Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application
 				and sensor name in you metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of
 				the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard.
diff --git a/public/app/partials/metrics.html b/public/app/partials/metrics.html
index 1cd6718e27b..39c471eabd1 100644
--- a/public/app/partials/metrics.html
+++ b/public/app/partials/metrics.html
@@ -17,3 +17,4 @@
   </rebuild-on-change>
 </div>
 
+<div class="clearfix"></div>
diff --git a/public/sass/components/_infobox.scss b/public/sass/components/_infobox.scss
index e6d42597c75..a6951ee9c51 100644
--- a/public/sass/components/_infobox.scss
+++ b/public/sass/components/_infobox.scss
@@ -10,9 +10,11 @@
 
 .grafana-info-box {
   position: relative;
-  padding: 5px 20px;
-  background-color: $tight-form-bg;
-  border: 1px solid $tight-form-border;
+  background: $card-background;
+  box-shadow: $card-shadow;
+  padding: 1rem;
+  border-radius: 4px;
+
   h5 {
     margin-top: 5px;
   }