triggers panel: redesign, unify with Alert List panel

src/sass/_panel-triggers.scss

@@ -1,25 +1,37 @@
-.triggers-panel-wrapper {
-  .panel-content {
-    padding: 0;
-  }
-  .panel-title-container {
-    padding-bottom: 4px;
-  }
-}
-
 .triggers-panel-scroll {
   overflow: auto;
 }
 
 .triggers-panel-container {
-  padding-top: 2.2em;
   position: relative;
+
+  .zabbix-hostname {
+    color: $gray-2;
+    margin-left: 1rem;
+    font-weight: bold;
+  }
+
+  .alert-list-info.alert-list-info-left {
+    color: $gray-3;
+  }
+
+  .trigger-info-block {
+    display: inline;
+    i {
+      margin-right: 0.4rem;
+    }
+    i,
+    a {
+      color: $gray-2;
+    }
+  }
 }
 
 .triggers-panel-footer {
   text-align: center;
   font-size: 90%;
   line-height: 2px;
+  padding-top: 4px;
 
   ul {
     position: relative;
@@ -47,89 +59,6 @@
   }
 }
 
-.triggers-panel-table {
-  width: 100%;
-  border-collapse: collapse;
-
-  th {
-    padding: 0;
-
-    &:first-child {
-      .triggers-panel-table-header-inner {
-        padding-left: 15px;
-      }
-    }
-  }
-
-  td {
-    padding: 0.45em 0 0.45em 1.1em;
-    border-bottom: 2px solid $body-bg;
-    border-right: 2px solid $body-bg;
-
-    &:first-child {
-      padding-left: 15px;
-    }
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .zbx-field-colored {
-    color: $gray-6;
-  }
-
-  .zbx-description-icon {
-    float: right;
-    padding-right: 8px;
-    color: $gray-6;
-  }
-
-  // .zbx-field-info {
-  //   width: 7%;
-  // }
-
-  // .zbx-field-host {
-  //   width: 15%;
-  // }
-
-  // .zbx-field-status {
-  //   width: 9rem;
-  // }
-
-  // .zbx-field-severity {
-  //   width: 7%;
-  // }
-
-  // .zbx-field-lastchange {
-  //   width: 15%;
-  // }
-}
-
-.triggers-panel-header-bg {
-  background: $grafanaListAccent;
-  border-top: 2px solid $body-bg;
-  border-bottom: 2px solid $body-bg;
-  height: 2.0em;
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-}
-
-.triggers-panel-table-header-inner {
-  padding: 0.45em 0 0.45em 1.1em;
-  text-align: left;
-  color: $blue;
-  position: absolute;
-  top: 0;
-}
-
-.triggers-panel-width-hack {
-  visibility: hidden;
-  height: 0px;
-  line-height: 0px;
-}
-
 .ack-tooltip {
   .drop-content {
     // Rewrite tooltip width

src/sass/_variables.dark.scss

@@ -2,17 +2,18 @@
 // -------------------------
 $black:            #000;
 $dark-1:           #141414;
-$dark-2:           #1f1d1d;
-$dark-3:           #292929;
+$dark-2:           #1f1f20;
+$dark-3:           #262628;
 $dark-4:           #333333;
 $dark-5:           #444444;
 $gray-1:           #555555;
-$gray-2:           #7B7B7B;
+$gray-2:           #8e8e8e;
 $gray-3:           #b3b3b3;
 $gray-4:           #D8D9DA;
 $gray-5:           #ECECEC;
 $gray-6:           #f4f5f8;
 $gray-7:           #fbfbfb;
+$gray-blue:				 #292a2d;
 
 $white:            #fff;
 

src/sass/_variables.light.scss

@@ -1,18 +1,18 @@
 // Grays
 // -------------------------
 $black:            #000;
-$dark-1:           #141414;
-$dark-2:           #1f1d1d;
-$dark-3:           #292929;
-$dark-4:           #373737;
-$dark-5:           #444444;
-$gray-1:           #555555;
-$gray-2:           #7B7B7B;
-$gray-3:           #b3b3b3;
-$gray-4:           #D8D9DA;
-$gray-5:           #ECECEC;
-$gray-6:           #f4f5f8;
-$gray-7:           #fbfbfb;
+$dark-1:           #13161d;
+$dark-2:           #1e2028;
+$dark-3:           #303133;
+$dark-4:           #35373f;
+$dark-5:           #41444b;
+$gray-1:           #52545c;
+$gray-2:           #767980;
+$gray-3:           #acb6bf;
+$gray-4:           #c7d0d9;
+$gray-5:           #dde4ed;
+$gray-6:           #e9edf2;
+$gray-7:           #f7f8fa;
 
 $white:            #fff;