From 1cbd88fc14729cc4c4a1205133a5c2f2ecb955b4 Mon Sep 17 00:00:00 2001
From: Trent White <trent@grafana.com>
Date: Wed, 13 Dec 2017 18:17:56 -0500
Subject: [PATCH] dashboard settings icons

---
 .../features/dashboard/settings/settings.ts   | 10 ++++-----
 public/img/icons_dark_theme/icon_json.svg     | 20 +++++++++++++++++
 public/img/icons_light_theme/icon_json.svg    | 22 +++++++++++++++++++
 public/sass/base/_icons.scss                  |  4 ++++
 4 files changed, 51 insertions(+), 5 deletions(-)
 create mode 100644 public/img/icons_dark_theme/icon_json.svg
 create mode 100644 public/img/icons_light_theme/icon_json.svg

diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts
index 87ac91d568b..c2cfb31b806 100644
--- a/public/app/features/dashboard/settings/settings.ts
+++ b/public/app/features/dashboard/settings/settings.ts
@@ -36,10 +36,10 @@ export class SettingsCtrl {
   buildSectionList() {
     this.sections = [];
     if (this.dashboard.meta.canEdit) {
-      this.sections.push({ title: 'General', id: 'settings', icon: 'fa fa-fw fa-sliders' });
-      this.sections.push({ title: 'Annotations', id: 'annotations', icon: 'fa fa-fw fa-comment-o' });
-      this.sections.push({ title: 'Variables', id: 'templating', icon: 'fa fa-fw fa-dollar' });
-      this.sections.push({ title: 'Links', id: 'links', icon: 'fa fa-fw fa-external-link' });
+      this.sections.push({ title: 'General', id: 'settings', icon: 'gicon gicon-preferences' });
+      this.sections.push({ title: 'Annotations', id: 'annotations', icon: 'gicon gicon-annotationp' });
+      this.sections.push({ title: 'Variables', id: 'templating', icon: 'gicon gicon-variable' });
+      this.sections.push({ title: 'Links', id: 'links', icon: 'gicon gicon-link' });
 
       if (this.dashboard.id) {
         this.sections.push({ title: 'Versions', id: 'versions', icon: 'fa fa-fw fa-history' });
@@ -51,7 +51,7 @@ export class SettingsCtrl {
       this.viewId = 'make_editable';
     }
 
-    this.sections.push({ title: 'View JSON', id: 'view_json', icon: 'fa fa-fw fa-code' });
+    this.sections.push({ title: 'View JSON', id: 'view_json', icon: 'gicon gicon-json' });
 
     const params = this.$location.search();
     const url = this.$location.path();
diff --git a/public/img/icons_dark_theme/icon_json.svg b/public/img/icons_dark_theme/icon_json.svg
new file mode 100644
index 00000000000..13b22046a80
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_json.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="64px" height="64px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E3E3E3;}
+</style>
+<g>
+	<path class="st0" d="M17.1,50.5c-0.8,0-1.7-0.3-2.3-1L0,34.8l14-14c1.3-1.3,3.4-1.3,4.6,0c1.3,1.3,1.3,3.4,0,4.6l-9.3,9.3
+		l10.2,10.2c1.3,1.3,1.3,3.4,0,4.6C18.8,50.2,17.9,50.5,17.1,50.5z"/>
+</g>
+<g>
+	<path class="st0" d="M47.7,50.5c-0.8,0-1.7-0.3-2.3-1c-1.3-1.3-1.3-3.4,0-4.6l9.3-9.3L44.5,25.4c-1.3-1.3-1.3-3.4,0-4.6
+		c1.3-1.3,3.4-1.3,4.6,0L64,35.6l-14,14C49.4,50.2,48.6,50.5,47.7,50.5z"/>
+</g>
+<g>
+	<path class="st0" d="M25.5,54c-0.4,0-0.9-0.1-1.3-0.3c-1.8-0.7-2.7-2.8-2-4.6l13.4-33.8c0.7-1.8,2.8-2.7,4.6-2
+		c1.8,0.7,2.7,2.8,2,4.6L28.8,51.7C28.2,53.1,26.9,54,25.5,54z"/>
+</g>
+</svg>
diff --git a/public/img/icons_light_theme/icon_json.svg b/public/img/icons_light_theme/icon_json.svg
new file mode 100644
index 00000000000..8a467bb86e0
--- /dev/null
+++ b/public/img/icons_light_theme/icon_json.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="64px" height="64px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#555555;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M18.8,49.8c-0.7,0-1.3-0.3-1.8-0.8L0,32l16-16c1-1,2.7-1,3.7,0c1,1,1,2.7,0,3.7L7.3,32l13.3,13.3
+			c1,1,1,2.7,0,3.7C20.1,49.5,19.5,49.8,18.8,49.8z"/>
+	</g>
+	<g>
+		<path class="st0" d="M46.2,49.8c-0.7,0-1.3-0.3-1.8-0.8c-1-1-1-2.7,0-3.7l12.3-12.3L43.3,19.7c-1-1-1-2.7,0-3.7c1-1,2.7-1,3.7,0
+			l17,17L48,49C47.5,49.5,46.9,49.8,46.2,49.8z"/>
+	</g>
+	<g>
+		<path class="st0" d="M24.7,53.7c-0.3,0-0.6-0.1-1-0.2c-1.3-0.5-2-2-1.5-3.4l14.9-37.6c0.5-1.3,2-2,3.4-1.5c1.3,0.5,2,2,1.5,3.4
+			L27.1,52C26.7,53.1,25.7,53.7,24.7,53.7z"/>
+	</g>
+</g>
+</svg>
diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss
index c460d557e02..7b5f4d0e1ca 100644
--- a/public/sass/base/_icons.scss
+++ b/public/sass/base/_icons.scss
@@ -116,6 +116,10 @@
   background-image: url('../img/icons_#{$theme-name}_theme/icon_home.svg');
 }
 
+.gicon-json {
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_json.svg');
+}
+
 .gicon-link {
   background-image: url('../img/icons_#{$theme-name}_theme/icon_link.svg');
 }