Adding cluster menu colors

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/cluster-manager/clusters-menu.scss

@@ -5,7 +5,8 @@
   position: relative;
   text-align: center;
   padding: $spacing;
-  background: var(--clusters-menu-bgc);
+  background: $clusterMenuBackground;
+  border-right: 1px solid $clusterMenuBorderColor;
 
   .is-mac & {
     padding-top: $spacing * 2;
@@ -47,11 +48,9 @@
     .Icon {
       border-radius: $radius;
       padding: $padding / 3;
-      color: var(--clusters-menu-bgc) !important;
-      background: white !important;
-      font-weight: bold;
+      color: $addClusterIconColor;
+      background: #ffffff55;
       cursor: pointer;
-      opacity: 0.4;
 
       &.active {
         opacity: 1;
@@ -59,7 +58,7 @@
 
       &:hover {
         box-shadow: none;
-        opacity: .75;
+        background: #ffffff;
       }
     }
 

src/renderer/themes/kontena-dark.json

@@ -90,6 +90,9 @@
     "drawerSubtitleBackground": "#373a3e",
     "drawerItemNameColor": "#87909c",
     "drawerItemValueColor": "#a0a0a0",
+    "clusterMenuBackground": "#252729",
+    "clusterMenuBorderColor": "#252729",
+    "addClusterIconColor": "#252729",
     "boxShadow": "#0000003a",
     "iconActiveColor": "#ffffff",
     "iconActiveBackground": "#ffffff22",

src/renderer/themes/kontena-light.json

@@ -26,7 +26,7 @@
     "sidebarBackground": "#e8e8e8",
     "buttonPrimaryBackground": "#3d90ce",
     "buttonDefaultBackground": "#414448",
-    "buttonAccentBackground": "#3b4148",
+    "buttonAccentBackground": "#e85555",
     "buttonDisabledBackground": "#808080",
     "tableBgcStripe": "#f8f8f8",
     "tableBgcSelected": "#f4f5f5",
@@ -91,6 +91,9 @@
     "drawerSubtitleBackground": "#f1f1f1",
     "drawerItemNameColor": "#727272",
     "drawerItemValueColor": "#555555",
+    "clusterMenuBackground": "#e8e8e8",
+    "clusterMenuBorderColor": "#c9cfd3",
+    "addClusterIconColor": "#8d8d8d",
     "boxShadow": "#0000003a",
     "iconActiveColor": "#ffffff",
     "iconActiveBackground": "#a6a6a694",

src/renderer/themes/theme-vars.scss

@@ -110,6 +110,11 @@ $chartStripesColor: var(--chartStripesColor);
 $chartCapacityColor: var(--chartCapacityColor);
 $pieChartDefaultColor: var(--pieChartDefaultColor);
 
+// Cluster Menu
+$clusterMenuBackground: var(--clusterMenuBackground);
+$clusterMenuBorderColor: var(--clusterMenuBorderColor);
+$addClusterIconColor: var(--addClusterIconColor);
+
 // Misc
 $boxShadow: var(--boxShadow);
 $iconActiveColor: var(--iconActiveColor);