From ee05ea8d605069535925705063a1643699a1546a Mon Sep 17 00:00:00 2001
From: Trent White <trent@grafana.com>
Date: Wed, 3 Jan 2018 14:23:14 -0500
Subject: [PATCH] new add alert notification channel icon

---
 .../alerting/partials/notifications_list.html |  2 +-
 .../icon_add_notification_channel.svg         | 31 +++++++
 .../icon_add_notification_channel.svg         | 29 ++++++
 public/sass/base/_icons.scss                  | 90 ++++++++++---------
 4 files changed, 108 insertions(+), 44 deletions(-)
 create mode 100644 public/img/icons_dark_theme/icon_add_notification_channel.svg
 create mode 100644 public/img/icons_light_theme/icon_add_notification_channel.svg

diff --git a/public/app/features/alerting/partials/notifications_list.html b/public/app/features/alerting/partials/notifications_list.html
index df453366f6c..246cb45b4db 100644
--- a/public/app/features/alerting/partials/notifications_list.html
+++ b/public/app/features/alerting/partials/notifications_list.html
@@ -48,7 +48,7 @@
   <div ng-if="ctrl.notifications.length === 0">
     <empty-list-cta model="{
       title: 'There are no notification channels defined yet',
-      buttonIcon: 'gicon gicon-alert-notification-channel',
+      buttonIcon: 'gicon gicon-add-alert-notification-channel',
       buttonLink: 'alerting/notification/new',
       buttonTitle: 'Add channel',
       proTip: 'You can include images in your alert notifications.',
diff --git a/public/img/icons_dark_theme/icon_add_notification_channel.svg b/public/img/icons_dark_theme/icon_add_notification_channel.svg
new file mode 100644
index 00000000000..a8dc4b98680
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_add_notification_channel.svg
@@ -0,0 +1,31 @@
+<?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.0" 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:none;}
+	.st1{fill:#E2E1E1;}
+	.st2{fill:url(#SVGID_1_);}
+</style>
+<g>
+	<circle class="st0" cx="27.9" cy="30.3" r="5"/>
+	<path class="st1" d="M40.2,35.4c0-0.4,0-0.7,0.1-1.1L38.1,33c0.2-0.9,0.4-1.8,0.4-2.7c0-4.9-3.3-9-7.8-10.2v-6.5
+		c2.3-1,3.9-3.3,3.9-6c0-3.7-3-6.6-6.6-6.6s-6.6,3-6.6,6.6c0,2.7,1.6,5,3.9,6v6.5c-4.5,1.2-7.8,5.3-7.8,10.2c0,0.9,0.1,1.8,0.4,2.7
+		l-7,4c-1.1-0.8-2.4-1.2-3.8-1.2c-3.7,0-6.6,3-6.6,6.6c0,3.7,3,6.6,6.6,6.6c3.7,0,6.6-3,6.6-6.6c0-0.2,0-0.4,0-0.6l7-4
+		c1.9,1.9,4.5,3.1,7.4,3.1c2.9,0,5.5-1.2,7.4-3.1l3.1,1.8h1.8V35.4z M27.9,35.4c-2.8,0-5-2.3-5-5c0-2.8,2.3-5,5-5s5,2.3,5,5
+		C32.9,33.1,30.7,35.4,27.9,35.4z"/>
+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="49.4849" y1="81.0149" x2="49.4849" y2="24.4953">
+		<stop  offset="0" style="stop-color:#FBEE41"/>
+		<stop  offset="4.010540e-02" style="stop-color:#FDE526"/>
+		<stop  offset="0.1171" style="stop-color:#FCD218"/>
+		<stop  offset="0.1964" style="stop-color:#FCC812"/>
+		<stop  offset="0.2809" style="stop-color:#FCC612"/>
+		<stop  offset="0.6685" style="stop-color:#F18F40"/>
+		<stop  offset="0.8876" style="stop-color:#EC683B"/>
+		<stop  offset="1" style="stop-color:#E63F39"/>
+	</linearGradient>
+	<path class="st2" d="M63,44.1h-4.8h-0.4h-2.5h-1.1v-5.6v-3.1c0-0.4-0.3-0.8-0.8-0.8h-7.9c-0.4,0-0.8,0.3-0.8,0.8v1.4v7.3h-2.2H36
+		c-0.4,0-0.8,0.3-0.8,0.8v7.9c0,0.4,0.3,0.8,0.8,0.8h8.7v3v1.2v4.4c0,0.4,0.3,0.8,0.8,0.8h7.9c0.4,0,0.8-0.3,0.8-0.8v-8.7h8.7
+		c0.4,0,0.8-0.3,0.8-0.8v-7.9C63.8,44.4,63.5,44.1,63,44.1z"/>
+</g>
+</svg>
diff --git a/public/img/icons_light_theme/icon_add_notification_channel.svg b/public/img/icons_light_theme/icon_add_notification_channel.svg
new file mode 100644
index 00000000000..9059310dcdf
--- /dev/null
+++ b/public/img/icons_light_theme/icon_add_notification_channel.svg
@@ -0,0 +1,29 @@
+<?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.0" 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:none;}
+	.st1{fill:#555555;}
+	.st2{fill:url(#SVGID_1_);}
+</style>
+<circle class="st0" cx="27.9" cy="30.3" r="5"/>
+<path class="st1" d="M40.2,35.4c0-0.4,0-0.7,0.1-1.1L38.1,33c0.2-0.9,0.4-1.8,0.4-2.7c0-4.9-3.3-9-7.8-10.2v-6.5
+	c2.3-1,3.9-3.3,3.9-6c0-3.7-3-6.6-6.6-6.6s-6.6,3-6.6,6.6c0,2.7,1.6,5,3.9,6v6.5c-4.5,1.2-7.8,5.3-7.8,10.2c0,0.9,0.1,1.8,0.4,2.7
+	l-7,4c-1.1-0.8-2.4-1.2-3.8-1.2c-3.7,0-6.6,3-6.6,6.6c0,3.7,3,6.6,6.6,6.6c3.7,0,6.6-3,6.6-6.6c0-0.2,0-0.4,0-0.6l7-4
+	c1.9,1.9,4.5,3.1,7.4,3.1c2.9,0,5.5-1.2,7.4-3.1l3.1,1.8h1.8V35.4z M27.9,35.4c-2.8,0-5-2.3-5-5c0-2.8,2.3-5,5-5s5,2.3,5,5
+	C32.9,33.1,30.7,35.4,27.9,35.4z"/>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="49.4849" y1="81.0149" x2="49.4849" y2="24.4953">
+	<stop  offset="0" style="stop-color:#FBEE41"/>
+	<stop  offset="4.010540e-02" style="stop-color:#FDE526"/>
+	<stop  offset="0.1171" style="stop-color:#FCD218"/>
+	<stop  offset="0.1964" style="stop-color:#FCC812"/>
+	<stop  offset="0.2809" style="stop-color:#FCC612"/>
+	<stop  offset="0.6685" style="stop-color:#F18F40"/>
+	<stop  offset="0.8876" style="stop-color:#EC683B"/>
+	<stop  offset="1" style="stop-color:#E63F39"/>
+</linearGradient>
+<path class="st2" d="M63,44.1h-4.8h-0.4h-2.5h-1.1v-5.6v-3.1c0-0.4-0.3-0.8-0.8-0.8h-7.9c-0.4,0-0.8,0.3-0.8,0.8v1.4v7.3h-2.2H36
+	c-0.4,0-0.8,0.3-0.8,0.8v7.9c0,0.4,0.3,0.8,0.8,0.8h8.7v3v1.2v4.4c0,0.4,0.3,0.8,0.8,0.8h7.9c0.4,0,0.8-0.3,0.8-0.8v-8.7h8.7
+	c0.4,0,0.8-0.3,0.8-0.8v-7.9C63.8,44.4,63.5,44.1,63,44.1z"/>
+</svg>
diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss
index f8bc0f08076..5925ab4a9ce 100644
--- a/public/sass/base/_icons.scss
+++ b/public/sass/base/_icons.scss
@@ -17,172 +17,176 @@
 }
 
 .gicon-add-annotation {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_add_annotation.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_add_annotation.svg');
 }
 
 .gicon-add-annotation-alt {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_add_annotation_alt.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_add_annotation_alt.svg');
 }
 
 .gicon-add-datasources {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_add_data_sources.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_add_data_sources.svg');
 }
 
 .gicon-add-user {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_add_user.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_add_user.svg');
 }
 
 .gicon-add-team {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_add_team.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_add_team.svg');
 }
 
 .gicon-add-panel {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_add_panel.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_add_panel.svg');
 }
 
 .gicon-add-link {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_add_link.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_add_link.svg');
 }
 
 .gicon-add-variable {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_add_variable.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_add_variable.svg');
+}
+
+.gicon-add-alert-notification-channel {
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_add_notification_channel.svg');
 }
 
 .gicon-alert {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_alert.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_alert.svg');
 }
 
 .gicon-alert-alt {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_alert_alt.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_alert_alt.svg');
 }
 
 .gicon-alert-rules {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_alert_rules.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_alert_rules.svg');
 }
 
 .gicon-alert-notification-channel {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_notification_channels.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_notification_channels.svg');
 }
 
 .gicon-annotation {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_annotation.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_annotation.svg');
 }
 
 .gicon-annotation-alt {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_annotation_alt.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_annotation_alt.svg');
 }
 
 .gicon-apikeys {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_apikeys.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_apikeys.svg');
 }
 
 .gicon-branding {
-  background-image: url("../img/grafana_icon.svg");
+  background-image: url('../img/grafana_icon.svg');
 }
 
 .gicon-cog {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_cog.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_cog.svg');
 }
 
 .gicon-dashboard {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_dashboard.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard.svg');
 }
 
 .gicon-dashboard-starred {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_dashboard_fav.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard_fav.svg');
 }
 
 .gicon-dashboard-list {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_dashboard_list.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard_list.svg');
 }
 
 .gicon-dashboard-new {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_new_dashboard.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_new_dashboard.svg');
 }
 
 .gicon-dashboard-import {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_import_dashboard.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_import_dashboard.svg');
 }
 
 .gicon-datasources {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_data_sources.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_data_sources.svg');
 }
 
 .gicon-folder-new {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_add_folder.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_add_folder.svg');
 }
 
 .gicon-home {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_home.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_home.svg');
 }
 
 .gicon-json {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_json.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_json.svg');
 }
 
 .gicon-link {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_link.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_link.svg');
 }
 
 .gicon-manage {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_sitemap.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_sitemap.svg');
 }
 
 .gicon-org {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_org.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_org.svg');
 }
 
 .gicon-playlists {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_playlist.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_playlist.svg');
 }
 
 .gicon-plugins {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_plugins.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_plugins.svg');
 }
 
 .gicon-preferences {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_preferences.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_preferences.svg');
 }
 
 .gicon-question {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_question.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_question.svg');
 }
 
 .gicon-shield {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_shield.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_shield.svg');
 }
 
 .gicon-snapshots {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_snapshots.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_snapshots.svg');
 }
 
 .gicon-team {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_team.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_team.svg');
 }
 
 .gicon-user {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_user.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_user.svg');
 }
 
 .gicon-variable {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_variable.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_variable.svg');
 }
 
 .gicon-zoom-out {
-  background-image: url("../img/icons_#{$theme-name}_theme/icon_zoom_out.svg");
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg');
 }
 
 .sidemenu {
   .gicon-dashboard {
-    background-image: url("../img/icons_dark_theme/icon_dashboard.svg");
+    background-image: url('../img/icons_dark_theme/icon_dashboard.svg');
   }
   .gicon-alert {
-    background-image: url("../img/icons_dark_theme/icon_alert.svg");
+    background-image: url('../img/icons_dark_theme/icon_alert.svg');
   }
   .gicon-cog {
-    background-image: url("../img/icons_dark_theme/icon_cog.svg");
+    background-image: url('../img/icons_dark_theme/icon_cog.svg');
   }
   .gicon-question {
-    background-image: url("../img/icons_dark_theme/icon_question.svg");
+    background-image: url('../img/icons_dark_theme/icon_question.svg');
   }
 }