Small adjustment to colors for readability

jsaq007 · Dec 5, 2023 · 393d2ec · 393d2ec
1 parent 3901bcf
commit 393d2ec
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 19 deletions.
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
@@ -193,7 +193,8 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       });
       const groupByButton = new qx.ui.form.MenuButton(this.tr("Group"), "@FontAwesome5Solid/chevron-down/10", groupByMenu);
       groupByButton.set({
-        appearance: "form-button-outlined"
+        appearance: "form-button-outlined",
+        marginRight: 14
       });
       osparc.utils.Utils.setIdToWidget(groupByButton, "groupByButton");
 

diff --git a/services/static-webserver/client/source/class/osparc/theme/Appearance.js b/services/static-webserver/client/source/class/osparc/theme/Appearance.js
@@ -279,7 +279,7 @@ qx.Theme.define("osparc.theme.Appearance", {
       alias: "window", // redirect kids to window/kid
       style: function(states) {
         return {
-          backgroundColor: states.selected ? "node-selected-background" : "background-selected-dark",
+          backgroundColor: states.selected ? "node-selected-background" : "background-card-overlay",
           decorator: states.maximized ? "window-small-cap-maximized" : "window-small-cap"
         };
       }

diff --git a/services/static-webserver/client/source/class/osparc/theme/ColorDark.js b/services/static-webserver/client/source/class/osparc/theme/ColorDark.js
@@ -35,7 +35,7 @@ qx.Theme.define("osparc.theme.ColorDark", {
     "primary-background-color": "rgba(0, 20, 46, 1)",
     "navigation_bar_background_color": "rgba(1, 18, 26, 0.8)",
     "modal-backdrop": "rgba(8, 9, 13, 1)",
-    "fab_text": "rgba(216, 216, 216, 1)",
+    "fab_text": "contrasted-text-dark",
     "fab_background": "rgba(47, 50, 69, 1)",
     "input_background": "#213248",
     "window-popup-background": "rgba(66, 66, 66, 1)",
@@ -54,10 +54,10 @@ qx.Theme.define("osparc.theme.ColorDark", {
     "link": "rgba(10, 182, 255, 1)",
 
     // button
-    "default-button-text": "rgba(255, 255, 255, 1)",
-    "default-button-text-outline": "rgba(229, 229, 229, 1)",
-    "default-button-text-action": "rgba(229, 229, 229, 1)",
-    "default-button-text-disabled": "rgba(113, 157, 181, 1)",
+    "default-button-text": "contrasted-text-light",
+    "default-button-text-outline": "contrasted-text-dark",
+    "default-button-text-action": "contrasted-text-dark",
+    "default-button-text-disabled": "text-disabled",
     "default-button": "rgba(10, 182, 255, 1)",
     "default-button-hover": "rgba(4, 73, 102, 1)",
     "default-button-hover-background": "rgba(4, 73, 102, 0.04)",
@@ -93,9 +93,9 @@ qx.Theme.define("osparc.theme.ColorDark", {
     "invalid": "error",
 
     // backgrounds
-    "background-selected":  "default-button-focus",
+    "background-selected": "success_bg",
     "background-selected-disabled":  "default-button-text-disabled",
-    "background-selected-dark":  "background-main-3",
+    "background-selected-dark":  "success_bg",
     "background-disabled": "background-main",
     "background-disabled-checked":  "background-main-1",
     "background-pane": "background-main",

diff --git a/services/static-webserver/client/source/class/osparc/theme/ColorLight.js b/services/static-webserver/client/source/class/osparc/theme/ColorLight.js
@@ -36,7 +36,7 @@ qx.Theme.define("osparc.theme.ColorLight", {
     "primary-background-color": "rgba(255, 255, 255, 1)",
     "navigation_bar_background_color": "rgba(229, 229, 229, 0.8)",
     "modal-backdrop": "rgba(247, 248, 252, 0.4)",
-    "fab_text": "rgba(216, 216, 216, 1)",
+    "fab_text": "contrasted-text-dark",
     "fab_background": "rgba(230, 235, 255, 1)",
     "input_background": "rgba(209, 214, 218, 1)",
     "window-popup-background": "rgba(255,255,255, 1)",
@@ -46,7 +46,7 @@ qx.Theme.define("osparc.theme.ColorLight", {
 
     // text
     "text": "rgba(40, 40, 40, 1)",
-    "text-disabled": "rgba(100, 120, 140, 1)",
+    "text-disabled": "rgba(113, 157, 181, 1)",
     "text-selected": "rgba(10, 182, 255, 1)",
     "text-placeholder": "rgba(90, 100, 110, 1)",
     "text-darker": "rgba(20, 20, 20, 1)",
@@ -55,10 +55,10 @@ qx.Theme.define("osparc.theme.ColorLight", {
     "link": "rgba(10, 182, 255, 1)",
 
     // button
-    "default-button-text": "text",
-    "default-button-text-outline": "text",
-    "default-button-text-action": "text-selected",
-    "default-button-text-disabled": "rgba(113, 157, 181, 1)",
+    "default-button-text": "contrasted-text-light",
+    "default-button-text-outline": "contrasted-text-dark",
+    "default-button-text-action": "contrasted-text-dark",
+    "default-button-text-disabled": "text-disabled",
     "default-button": "rgba(10, 182, 255, 1)",
     "default-button-hover": "rgba(4, 73, 102, 1)",
     "default-button-hover-background": "rgba(4, 73, 102, 0.04)",
@@ -94,9 +94,9 @@ qx.Theme.define("osparc.theme.ColorLight", {
     "invalid": "error",
 
     // backgrounds
-    "background-selected":  "background-main-4",
-    "background-selected-disabled":  "background-main-1",
-    "background-selected-dark":  "background-main-3",
+    "background-selected": "success_bg",
+    "background-selected-disabled":  "default-button-text-disabled",
+    "background-selected-dark":  "success_bg",
     "background-disabled": "background-main",
     "background-disabled-checked":  "background-main-1",
     "background-pane": "background-main",
@@ -181,7 +181,7 @@ qx.Theme.define("osparc.theme.ColorLight", {
     "workbench-edge-api-active": "#444444",
     "workbench-start-hint": "#AFAFAF",
 
-    "node-selected-background": "background-main-4",
+    "node-selected-background": "success_bg",
     "node-title-text": "#232323",
     "node-port-text": "#454545",