From bb6abb2e9ecc5502d6f62702e9fbbf13316ac246 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Mon, 24 Dec 2018 20:03:26 +0300
Subject: [PATCH] problems panel: styles tweaks

---
 .../components/ProblemTimeline.tsx            |  6 +-
 src/sass/_panel-problems.scss                 | 58 ++++++++++++++-----
 src/sass/_variables.dark.scss                 |  7 ++-
 src/sass/_variables.light.scss                |  7 ++-
 4 files changed, 57 insertions(+), 21 deletions(-)

diff --git a/src/panel-triggers/components/ProblemTimeline.tsx b/src/panel-triggers/components/ProblemTimeline.tsx
index 36d29fd..77a39b4 100644
--- a/src/panel-triggers/components/ProblemTimeline.tsx
+++ b/src/panel-triggers/components/ProblemTimeline.tsx
@@ -5,7 +5,7 @@ import { GFTimeRange, ZBXEvent } from 'panel-triggers/types';
 
 const DEFAULT_OK_COLOR = 'rgb(56, 189, 113)';
 const DEFAULT_PROBLEM_COLOR = 'rgb(215, 0, 0)';
-const EVENT_POINT_SIZE = 20;
+const EVENT_POINT_SIZE = 16;
 const INNER_POINT_SIZE = 0.6;
 const HIGHLIGHTED_POINT_SIZE = 1.1;
 const EVENT_REGION_HEIGHT = Math.round(EVENT_POINT_SIZE * 0.6);
@@ -118,7 +118,7 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
 
     const { timeRange, eventPointSize, eventRegionHeight, problemColor, okColor } = this.props;
     const events = this.sortEvents();
-    const boxWidth = this.state.width;
+    const boxWidth = this.state.width + eventPointSize;
     const boxHeight = eventPointSize * 2;
     const width = boxWidth - eventPointSize;
     const padding = Math.round(eventPointSize / 2);
@@ -126,7 +126,7 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
     const timelineYpos = Math.round(boxHeight / 2);
 
     return (
-      <div className="event-timeline" ref={this.setRootRef}>
+      <div className="event-timeline" ref={this.setRootRef} style={{ transform: `translate(${-padding}px, 0)`}}>
         <TimelineInfoContainer className="timeline-info-container"
           event={this.state.highlightedEvent}
           eventInfo={this.state.eventInfo}
diff --git a/src/sass/_panel-problems.scss b/src/sass/_panel-problems.scss
index 03f382b..4de4cc9 100644
--- a/src/sass/_panel-problems.scss
+++ b/src/sass/_panel-problems.scss
@@ -18,7 +18,7 @@
     .rt-tr-group {
       flex: 0 0 auto;
       border-bottom: solid 1px $problems-border-color;
-      border-left: solid 2px rgba(0, 0, 0, 0);
+      border-left: solid 2px transparent;
 
       &:last-child {
         border-bottom: solid 1px $problems-border-color;
@@ -26,6 +26,19 @@
 
       &:hover {
         border-left: solid 2px rgba($blue, 0.5);
+
+        .rt-tr.-even {
+          margin-left: 0;
+          background: $problems-table-row-hovered;
+
+          .rt-td:first-child {
+            margin-left: 0;
+          }
+        }
+
+        .problem-details-container {
+          border-left-color: rgba($blue, 0.5);
+        }
       }
 
       .rt-tr {
@@ -34,14 +47,16 @@
         }
 
         &:hover {
-          background: lighten($problems-table-stripe, 2%);
+          background: $problems-table-row-hovered;
           box-shadow: 0px 0px 5px rgba($blue, 0.5);
           z-index: 1;
         }
         &.-even {
-          background: lighten($problems-table-stripe, 1%);
-          &:hover {
-            background: lighten($problems-table-stripe, 4%);
+          background: $problems-table-stripe;
+
+          margin-left: -2px;
+          .rt-td:first-child {
+            margin-left: 2px;
           }
         }
       }
@@ -93,6 +108,8 @@
         width: 100%;
         height: 100%;
         padding: 0.45em 0 0.45em 1.1em;
+        color: $white;
+        font-weight: 500;
       }
     }
 
@@ -124,7 +141,7 @@
       }
       &.custom-expander:hover {
         // background-position: right top;
-        background-color: lighten($problems-table-stripe, 8%);
+        background-color: $problem-expander-highlighted;
         i {
           color: $blue;
         }
@@ -160,12 +177,17 @@
       display: flex;
       background-color: $problem-details-background;
       border: 1px solid $problems-border-color;
+      border-left: 2px solid $problem-details-background;
+      margin-left: -2px;
       border-bottom-width: 0px;
 
       max-height: 0;
       opacity: 0;
       overflow: hidden;
-      transition: all 0.3s ease-out;
+      // transition: all 0.3s ease-out;
+      transition-duration: 0.3s;
+      transition-timing-function: ease-out;
+      transition-property: opacity, max-height;
 
       &.show {
         max-height: 20rem;
@@ -245,10 +267,10 @@
             }
           }
           &.fired {
-            box-shadow: 0px 0px 10px rgba($orange, 0.1);
+            box-shadow: 0px 0px 10px rgba($problem-statusbar-fired, 0.1);
             .fa-icon-container {
-              color: $orange;
-              text-shadow: 0px 0px 10px rgba($orange, 0.5);
+              color: $problem-statusbar-fired;
+              text-shadow: 0px 0px 10px rgba($problem-statusbar-fired, 0.5);
               // animation: fade-in 1s ease-out;
             }
           }
@@ -269,6 +291,10 @@
           border: 1px solid darken($action-button-color, 6%);
           border-radius: 1px;
 
+          span {
+            color: $action-button-text-color;
+          }
+
           &:hover {
             background-color: darken($action-button-color, 4%);
           }
@@ -286,8 +312,8 @@
       }
 
       .problem-ack-container {
-        padding: 0.8rem 0;
-        border-top: 2px solid $dark-4;
+        padding: 1.2rem 0;
+        // border-top: 2px solid $dark-4;
         overflow: auto;
       }
 
@@ -343,7 +369,7 @@
       .event-timeline {
         position: relative;
         margin-bottom: 0.6rem;
-        padding-top: 1.6rem;
+        padding-top: 2rem;
         // margin-top: auto;
 
         .timeline-info-container {
@@ -377,7 +403,7 @@
           &:hover,
           &.highlighted {
             // opacity: 1;
-            stroke: $zbx-text-highlighted;
+            stroke: $problem-event-highlighted;
             filter: url(#glowShadow);
           }
         }
@@ -390,12 +416,12 @@
           &:hover,
           &.highlighted {
             circle.point-border {
-              stroke: $zbx-text-highlighted;
+              stroke: $problem-event-highlighted;
               stroke-width: 1;
               filter: url(#glowShadow);
             }
             .point-core {
-              fill: $zbx-text-highlighted;
+              fill: $problem-event-highlighted;
             }
           }
         }
diff --git a/src/sass/_variables.dark.scss b/src/sass/_variables.dark.scss
index 6ec5c93..1d4d8cd 100644
--- a/src/sass/_variables.dark.scss
+++ b/src/sass/_variables.dark.scss
@@ -2,9 +2,14 @@ $regex: #d69e2e;
 
 $zbx-tag-color: $gray-5;
 $zbx-text-highlighted: $white;
+$action-button-color: $blue-dark;
+$action-button-text-color: $gray-4;
 $problems-border-color: $dark-1;
 $problems-table-stripe: $dark-3;
+$problems-table-row-hovered: darken($problems-table-stripe, 2%);
 $problem-details-background: $dark-3;
 $problem-statusbar-background: $dark-2;
 $problem-statusbar-muted: $dark-3;
-$action-button-color: #103e66;
+$problem-statusbar-fired: $orange;
+$problem-event-highlighted: $white;
+$problem-expander-highlighted: lighten($problems-table-stripe, 8%);
diff --git a/src/sass/_variables.light.scss b/src/sass/_variables.light.scss
index 270f937..21b808a 100644
--- a/src/sass/_variables.light.scss
+++ b/src/sass/_variables.light.scss
@@ -2,9 +2,14 @@ $regex: #d69e2e;
 
 $zbx-tag-color: $gray-6;
 $zbx-text-highlighted: $black;
+$action-button-color: #497dc0;
+$action-button-text-color: $gray-6;
 $problems-border-color: $dark-1;
 $problems-table-stripe: $gray-6;
+$problems-table-row-hovered: $gray-4;
 $problem-details-background: $gray-6;
 $problem-statusbar-background: $gray-4;
 $problem-statusbar-muted: $gray-5;
-$action-button-color: #103e66;
+$problem-statusbar-fired: #ca4c17;
+$problem-event-highlighted: $white;
+$problem-expander-highlighted: darken($problems-table-stripe, 20%);