workbench-view-navbar

Author: odeimaiz

services/static-webserver/client/source/class/osparc/desktop/SlideshowView.js

@@ -24,7 +24,7 @@ qx.Class.define("osparc.desktop.SlideshowView", {
     this._setLayout(new qx.ui.layout.VBox());
 
     const slideshowToolbar = this.__slideshowToolbar = new osparc.desktop.SlideshowToolbar().set({
-      backgroundColor: "tab_navigation_bar_background_color"
+      backgroundColor: "workbench-view-navbar"
     });
 
     const collapseWithUserMenu = this.__collapseWithUserMenu = new osparc.desktop.CollapseWithUserMenu();

services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js

@@ -315,7 +315,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
       const topBar = tabViewPrimary.getChildControl("bar");
       topBar.set({
         height: this.self().TAB_BUTTON_HEIGHT,
-        backgroundColor: "tab_navigation_bar_background_color"
+        backgroundColor: "workbench-view-navbar"
       });
       this.__addTopBarSpacer(topBar);
 
@@ -385,7 +385,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
       const topBar = tabViewSecondary.getChildControl("bar");
       topBar.set({
         height: this.self().TAB_BUTTON_HEIGHT,
-        backgroundColor: "tab_navigation_bar_background_color"
+        backgroundColor: "workbench-view-navbar"
       });
       this.__addTopBarSpacer(topBar);
 
@@ -420,7 +420,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
       topBar.set({
         height: this.self().TAB_BUTTON_HEIGHT,
         alignY: "top",
-        backgroundColor: "tab_navigation_bar_background_color"
+        backgroundColor: "workbench-view-navbar"
       });
       this.__addTopBarSpacer(topBar);
 
@@ -476,7 +476,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
 
     __addTopBarSpacer: function(tabViewTopBar) {
       const spacer = new qx.ui.core.Widget().set({
-        backgroundColor: "tab_navigation_bar_background_color"
+        backgroundColor: "workbench-view-navbar"
       });
       tabViewTopBar.add(spacer, {
         flex: 1
@@ -485,7 +485,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
 
     __createCollapsibleViewSpacer: function() {
       const spacer = new qx.ui.core.Widget().set({
-        backgroundColor: "tab_navigation_bar_background_color",
+        backgroundColor: "workbench-view-navbar",
         height: this.self().TAB_BUTTON_HEIGHT
       });
       return spacer;

services/static-webserver/client/source/class/osparc/theme/ColorDark.js

@@ -32,7 +32,6 @@ qx.Theme.define("osparc.theme.ColorDark", {
     "background-workspace-card-overlay": "rgb(35, 93, 122)",
 
     "navigation_bar_background_color": "rgba(1, 18, 26, 0.8)",
-    "tab_navigation_bar_background_color": "c00",
     "fab_text": "contrasted-text-dark",
     "fab-background": "rgba(255, 255, 255, 0.2)",
     "input_background": "#213248",
@@ -163,6 +162,7 @@ qx.Theme.define("osparc.theme.ColorDark", {
     "workbench-edge-comp-active": "#777777",
     "workbench-edge-api-active": "#BBBBBB",
     "workbench-start-hint": "#505050",
+    "workbench-view-navbar": "c00",
     "workbench-view-splitter": "#000000",
 
     "node-background": "rgba(113, 157, 181, 0.5)",

services/static-webserver/client/source/class/osparc/theme/ColorLight.js

@@ -32,7 +32,6 @@ qx.Theme.define("osparc.theme.ColorLight", {
     "background-workspace-card-overlay": "rgb(165, 223, 252)",
 
     "navigation_bar_background_color": "rgba(229, 229, 229, 0.8)",
-    "tab_navigation_bar_background_color": "c00",
     "fab_text": "contrasted-text-dark",
     "fab-background": "rgba(255, 255, 255, 0.2)",
     "input_background": "rgba(209, 214, 218, 1)",
@@ -120,7 +119,7 @@ qx.Theme.define("osparc.theme.ColorLight", {
     "border-disabled": "background-main",
 
     // separator
-    "border-separator": "fab-background",
+    "border-separator": "background-main-3",
 
     // tooltip
     "tooltip": "flash_message_bg",
@@ -164,7 +163,8 @@ qx.Theme.define("osparc.theme.ColorLight", {
     "workbench-edge-comp-active": "#888888",
     "workbench-edge-api-active": "#444444",
     "workbench-start-hint": "#AFAFAF",
-    "workbench-view-splitter": "#DDDDDD",
+    "workbench-view-navbar": "c02",
+    "workbench-view-splitter": "background-main-3",
 
     "node-background": "rgba(113, 157, 181, 0.35)",
     "node-selected-background": "strong-main",

services/static-webserver/client/source/class/osparc/workbench/DiskUsageIndicator.js

@@ -172,7 +172,7 @@ qx.Class.define("osparc.workbench.DiskUsageIndicator", {
         toolTipText += this.tr("Data storage: ") + osparc.utils.Utils.bytesToSize(diskVolsUsage.free) + "<br>";
         toolTipText += this.tr("I/O storage: ") + osparc.utils.Utils.bytesToSize(diskHostUsage.free) + "<br>";
       }
-      const bgColor = qx.theme.manager.Color.getInstance().resolve("tab_navigation_bar_background_color");
+      const bgColor = qx.theme.manager.Color.getInstance().resolve("workbench-view-navbar");
       const color2 = qx.theme.manager.Color.getInstance().resolve("progressive-progressbar-background");
       indicator.getContentElement().setStyles({
         "background-color": bgColor,