SASS refactor

src/datasource-zabbix/css/query-editor.css

@@ -1,7 +0,0 @@
-.zbx-regex {
-  color: #CCA300;
-}
-
-.zbx-variable {
-  color: #33B5E5;
-}

src/datasource-zabbix/module.js

@@ -1,7 +1,13 @@
+import {loadPluginCss} from 'app/plugins/sdk';
 import {ZabbixAPIDatasource} from './datasource';
 import {ZabbixQueryController} from './query.controller';
 import {ZabbixDSConfigController} from './config.controller';
 
+loadPluginCss({
+  dark: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.dark.css',
+  light: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.light.css'
+});
+
 class ZabbixQueryOptionsController {}
 ZabbixQueryOptionsController.templateUrl = 'datasource-zabbix/partials/query.options.html';
 

src/datasource-zabbix/query.controller.js

@@ -8,8 +8,6 @@ import * as migrations from './migrations';
 import './add-metric-function.directive';
 import './metric-function-editor.directive';
 
-import './css/query-editor.css!';
-
 export class ZabbixQueryController extends QueryCtrl {
 
   // ZabbixQueryCtrl constructor

src/panel-triggers/module.js

@@ -13,6 +13,7 @@
 
 import {TriggerPanelCtrl} from './triggers_panel_ctrl';
 import {loadPluginCss} from 'app/plugins/sdk';
+import './datasource-selector.directive';
 import './ack-tooltip.directive';
 
 loadPluginCss({

src/panel-triggers/options_tab.js

@@ -11,11 +11,6 @@
  * Licensed under the Apache License, Version 2.0
  */
 
-import _ from 'lodash';
-import './datasource-selector.directive';
-
-import '../datasource-zabbix/css/query-editor.css!';
-
 class TriggerPanelOptionsCtrl {
 
   /** @ngInject */

src/panel-triggers/triggers_tab.js

@@ -1,7 +1,5 @@
 import _ from 'lodash';
 import * as utils from '../datasource-zabbix/utils';
-import './datasource-selector.directive';
-import '../datasource-zabbix/css/query-editor.css!';
 import {DEFAULT_TARGET} from './triggers_panel_ctrl';
 
 class TriggersTabCtrl {

src/sass/_query_editor.scss

@@ -0,0 +1,7 @@
+.zbx-regex {
+  color: $regex;
+}
+
+.zbx-variable {
+  color: $variable;
+}

src/sass/_variables.dark.scss

@@ -19,15 +19,16 @@ $white:            #fff;
 
 // Accent colors
 // -------------------------
-$blue:                  #33B5E5;
-$blue-dark:             #005f81;
-$green:                 #609000;
-$red:                   #CC3900;
-$yellow:                #ECBB13;
-$orange:                #eb7b18;
-$pink:                  #FF4444;
-$purple:                #9933CC;
-$variable:              #32D1DF;
+$blue:             #33b5e5;
+$bluedark:         #005f81;
+$green:            #299c46;
+$red:              #d44a3a;
+$yellow:           #ecbb13;
+$pink:             #ff4444;
+$purple:           #9933cc;
+$orange:           #eb7b18;
+$variable:         #32d1df;
+$regex:            #d69e2e;
 
 $body-bg:               rgb(20,20,20);
 $body-color:            $gray-4;

src/sass/_variables.light.scss

@@ -18,15 +18,16 @@ $white:            #fff;
 
 // Accent colors
 // -------------------------
-$blue:                  #2AB2E4;
-$blue-dark:             #3CAAD6;
-$green:                 #28B62C;
-$red:                   #FF4136;
-$yellow:                #FF851B;
-$orange:                #Ff7941;
-$pink:                  #E671B8;
-$purple:                #9954BB;
-$variable:              #2AB2E4;
+$blue:             #1ca4d6;
+$blue-dark:        #3caad6;
+$green:            #3aa655;
+$red:              #d44939;
+$yellow:           #ff851b;
+$orange:           #ff7941;
+$pink:             #e671b8;
+$purple:           #9954bb;
+$variable:           $blue;
+$regex:            #aa7b1d;
 
 $body-bg :              $white;
 $body-color:            $gray-1;

src/sass/grafana-zabbix.scss

@@ -1,2 +1,3 @@
 @import 'variables';
 @import 'panel-triggers';
+@import 'query_editor';

src/test-setup/jest-setup.js

@@ -41,10 +41,6 @@ jest.mock('app/core/table_model', () => {
   return {};
 }, {virtual: true});
 
-jest.mock('./css/query-editor.css!', () => {
-  return "";
-}, {virtual: true});
-
 jest.mock('jquery', () => 'module not found', {virtual: true});
 
 // Required for loading angularjs