made unknown color theme aware and sync with graph color, some minor cleanup

public/app/core/logs_model.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { TimeSeries } from 'app/core/core';
-import colors from 'app/core/utils/colors';
+import colors, { getThemeColor } from 'app/core/utils/colors';
 
 export enum LogLevel {
   crit = 'critical',
@@ -22,7 +22,7 @@ export const LogLevelColor = {
   [LogLevel.info]: colors[0],
   [LogLevel.debug]: colors[5],
   [LogLevel.trace]: colors[2],
-  [LogLevel.unkown]: '#ddd',
+  [LogLevel.unkown]: getThemeColor('#8e8e8e', '#dde4ed'),
 };
 
 export interface LogSearchMatch {

public/app/core/utils/colors.ts

@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import tinycolor from 'tinycolor2';
+import config from 'app/core/config';
 
 export const PALETTE_ROWS = 4;
 export const PALETTE_COLUMNS = 14;
@@ -90,5 +91,9 @@ export function hslToHex(color) {
   return tinycolor(color).toHexString();
 }
 
+export function getThemeColor(dark: string, light: string): string {
+  return config.bootData.user.lightTheme ? light : dark;
+}
+
 export let sortedColors = sortColorsByHue(colors);
 export default colors;

public/sass/_variables.dark.scss

@@ -350,3 +350,6 @@ $diff-json-icon: $gray-7;
 
 //Submenu
 $variable-option-bg: $blue-dark;
+
+// logs
+$logs-color-unkown: $gray-2;

public/sass/_variables.light.scss

@@ -359,3 +359,6 @@ $diff-json-icon: $gray-4;
 
 //Submenu
 $variable-option-bg: $blue-light;
+
+// logs
+$logs-color-unkown: $gray-5;

public/sass/components/_panel_logs.scss

@@ -54,7 +54,6 @@ $column-horizontal-spacing: 10px;
   font-size: 12px;
   display: table;
   table-layout: fixed;
-  margin: 0 -(nth($panel-padding, 2));
 }
 
 .logs-row {
@@ -66,14 +65,6 @@ $column-horizontal-spacing: 10px;
     vertical-align: middle;
     border-top: 1px solid transparent;
     border-bottom: 1px solid transparent;
-
-    &:first-child {
-      padding-left: $column-horizontal-spacing - 2px;
-    }
-
-    &:last-child {
-      padding-left: $column-horizontal-spacing;
-    }
   }
 
   &:hover {
@@ -111,7 +102,6 @@ $column-horizontal-spacing: 10px;
 
 .logs-row__level {
   position: relative;
-  // width: 12px;
 
   &::after {
     content: '';
@@ -120,7 +110,7 @@ $column-horizontal-spacing: 10px;
     top: 1px;
     bottom: 1px;
     width: 3px;
-    background-color: $gray-2;
+    background-color: $logs-color-unkown;
   }
 
   &--critical,