From e806c848dfdcb80be79e27ae75399d260b257bf9 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Tue, 31 Jul 2018 15:11:49 +0100
Subject: [PATCH 1/5] Make header semitransparent.

---
 client/app/styles/_base.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index 330c244b2..9edf5d71a 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -208,6 +208,7 @@ a {
 }
 
 .header {
+  background-color: transparentize($color-purple-25, 0.1);
   z-index: $layer-front;
   padding: 15px 10px 0;
   pointer-events: none;
@@ -334,7 +335,6 @@ a {
   .topologies-item-main,
   .topologies-sub-item {
     pointer-events: all;
-
     color: $text-secondary-color;
     @extend .btn-opacity;
     cursor: pointer;

From 9f9123e171697b9ab9dfb42087576c46d98fe4f1 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Thu, 2 Aug 2018 11:09:18 +0200
Subject: [PATCH 2/5] Decrease filters background opacity + made selected items
 more purple.

---
 client/app/styles/_base.scss      | 2 ++
 client/app/styles/_variables.scss | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index 9edf5d71a..e03ff58d6 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -1371,9 +1371,11 @@ a {
 
 .status {
   padding: 2px 12px;
+  background-color: $body-background-color;
   border-radius: $border-radius-soft;
   color: $text-secondary-color;
   display: inline-block;
+  opacity: 0.9;
 
   &-icon {
     font-size: $font-size-normal;
diff --git a/client/app/styles/_variables.scss b/client/app/styles/_variables.scss
index 9ec1efc26..79697a188 100644
--- a/client/app/styles/_variables.scss
+++ b/client/app/styles/_variables.scss
@@ -4,7 +4,7 @@ $base-ease: ease-in-out;
 
 $background-color: $color-gray-50;
 $background-lighter-color: $color-white;
-$background-darker-color: transparentize($color-gray-200, 0.5);
+$background-darker-color: $color-purple-100;
 $background-darker-secondary-color: $color-gray-50;
 $background-dark-color: $color-purple-900;
 $text-color: $color-purple-800;
@@ -32,7 +32,7 @@ $edge-opacity-blurred: 0.2;
 $edge-opacity: 0.5;
 $edge-color: $color-purple-500;
 
-$btn-opacity-default: 0.7;
+$btn-opacity-default: 0.9;
 $btn-opacity-hover: 1;
 $btn-opacity-selected: 0.9;
 $btn-opacity-disabled: 0.25;

From c0a359b31f48a9d8717e0d27a12fb16048c25a6e Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Thu, 2 Aug 2018 11:14:04 +0200
Subject: [PATCH 3/5] Increase z-index value of NodeDetails panel by one.

---
 client/app/styles/_base.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index e03ff58d6..f5fed5e47 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -671,7 +671,7 @@ a {
   &-wrapper {
     position: fixed;
     display: flex;
-    z-index: $layer-front;
+    z-index: $layer-toolbar;
     right: $details-window-padding-left;
     top: 100px;
     bottom: 48px;

From 1317bf6ddbb0258936edff2146f2ae6c9a82142b Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Thu, 2 Aug 2018 15:44:31 +0200
Subject: [PATCH 4/5] Decreased the header overlay transparency to 80%.

---
 client/app/styles/_base.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index f5fed5e47..27a43d13e 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -208,10 +208,9 @@ a {
 }
 
 .header {
-  background-color: transparentize($color-purple-25, 0.1);
+  background-color: transparentize($color-purple-25, 0.2);
   z-index: $layer-front;
   padding: 15px 10px 0;
-  pointer-events: none;
   position: relative;
   width: 100%;
 

From e1b1837fd68c91dd166875379c781bc75e696ea7 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Thu, 2 Aug 2018 15:51:42 +0200
Subject: [PATCH 5/5] Fixed the background color when nodes in focus.

---
 client/app/scripts/charts/nodes-chart-elements.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/app/scripts/charts/nodes-chart-elements.js b/client/app/scripts/charts/nodes-chart-elements.js
index e62fd1ab3..003a0c16f 100644
--- a/client/app/scripts/charts/nodes-chart-elements.js
+++ b/client/app/scripts/charts/nodes-chart-elements.js
@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { fromJS, Map as makeMap, List as makeList } from 'immutable';
+import theme from 'weaveworks-ui-components/lib/theme';
 
 import NodeContainer from './node-container';
 import EdgeContainer from './edge-container';
@@ -199,7 +200,7 @@ class NodesChartElements extends React.Component {
         className={className}
         key="nodes-chart-overlay"
         transform={`scale(${scale})`}
-        fill="#fff"
+        fill={theme.colors.purple25}
         x={-1}
         y={-1}
         width={2}