From a8e6b241d67ce98f6505f00a13864580358f0ce1 Mon Sep 17 00:00:00 2001
From: Marcus Efraimsson <marcus.efraimsson@gmail.com>
Date: Thu, 15 Nov 2018 17:07:42 +0100
Subject: [PATCH] changed time region color modes

---
 .../panel_tests_graph_time_regions.json       |  2 +-
 .../panel/graph/time_region_manager.ts        | 34 +++++++------------
 2 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/devenv/dev-dashboards/panel_tests_graph_time_regions.json b/devenv/dev-dashboards/panel_tests_graph_time_regions.json
index 52818ca7aa1..8d0bae1221c 100644
--- a/devenv/dev-dashboards/panel_tests_graph_time_regions.json
+++ b/devenv/dev-dashboards/panel_tests_graph_time_regions.json
@@ -63,7 +63,7 @@
       "timeFrom": null,
       "timeRegions": [
         {
-          "colorMode": "background6",
+          "colorMode": "gray",
           "fill": true,
           "fillColor": "rgba(255, 255, 255, 0.03)",
           "from": "08:30",
diff --git a/public/app/plugins/panel/graph/time_region_manager.ts b/public/app/plugins/panel/graph/time_region_manager.ts
index b8ab9a856be..95987e40dbe 100644
--- a/public/app/plugins/panel/graph/time_region_manager.ts
+++ b/public/app/plugins/panel/graph/time_region_manager.ts
@@ -4,37 +4,29 @@ import moment from 'moment';
 import config from 'app/core/config';
 
 export const colorModes = {
-  custom: { title: 'Custom' },
+  gray: {
+    themeDependent: true,
+    title: 'Gray',
+    darkColor: { fill: 'rgba(255, 255, 255, 0.09)', line: 'rgba(255, 255, 255, 0.2)' },
+    lightColor: { fill: 'rgba(0, 0, 0, 0.09)', line: 'rgba(0, 0, 0, 0.2)' },
+  },
   red: {
     title: 'Red',
     color: { fill: 'rgba(234, 112, 112, 0.12)', line: 'rgba(237, 46, 24, 0.60)' },
   },
-  yellow: {
-    title: 'Yellow',
-    color: { fill: 'rgba(235, 138, 14, 0.12)', line: 'rgba(247, 149, 32, 0.60)' },
-  },
   green: {
     title: 'Green',
     color: { fill: 'rgba(11, 237, 50, 0.090)', line: 'rgba(6,163,69, 0.60)' },
   },
-  background3: {
-    themeDependent: true,
-    title: 'Background (3%)',
-    darkColor: { fill: 'rgba(255, 255, 255, 0.03)', line: 'rgba(255, 255, 255, 0.1)' },
-    lightColor: { fill: 'rgba(0, 0, 0, 0.03)', line: 'rgba(0, 0, 0, 0.1)' },
+  blue: {
+    title: 'Blue',
+    color: { fill: 'rgba(11, 125, 238, 0.12)', line: 'rgba(11, 125, 238, 0.60)' },
   },
-  background6: {
-    themeDependent: true,
-    title: 'Background (6%)',
-    darkColor: { fill: 'rgba(255, 255, 255, 0.06)', line: 'rgba(255, 255, 255, 0.15)' },
-    lightColor: { fill: 'rgba(0, 0, 0, 0.06)', line: 'rgba(0, 0, 0, 0.15)' },
-  },
-  background9: {
-    themeDependent: true,
-    title: 'Background (9%)',
-    darkColor: { fill: 'rgba(255, 255, 255, 0.09)', line: 'rgba(255, 255, 255, 0.2)' },
-    lightColor: { fill: 'rgba(0, 0, 0, 0.09)', line: 'rgba(0, 0, 0, 0.2)' },
+  yellow: {
+    title: 'Yellow',
+    color: { fill: 'rgba(235, 138, 14, 0.12)', line: 'rgba(247, 149, 32, 0.60)' },
   },
+  custom: { title: 'Custom' },
 };
 
 export function getColorModes() {