🎨 [Frontend] (Too) light buttons (#8274)

odeimaiz · web-flow · commit 0eaea5035f78 · 2025-08-29T08:32:31.000+02:00
diff --git a/services/static-webserver/client/source/class/osparc/jobs/RunsTable.js b/services/static-webserver/client/source/class/osparc/jobs/RunsTable.js
@@ -44,7 +44,6 @@ qx.Class.define("osparc.jobs.RunsTable", {
 
     Object.values(this.self().COLS).forEach(col => columnModel.setColumnWidth(col.column, col.width));
 
-    const iconPathStop = "osparc/icons/circle-xmark-text.svg";
     const shouldShowCancel = cellInfo => {
       if (cellInfo && cellInfo.rowData && cellInfo.rowData["state"]) {
         return [
@@ -53,10 +52,10 @@ qx.Class.define("osparc.jobs.RunsTable", {
       }
       return false;
     }
+    const iconPathStop = osparc.ui.switch.ThemeSwitcher.isLight() ? "osparc/icons/circle-xmark-black.svg" : "osparc/icons/circle-xmark-white.svg";
     const fontButtonRendererStop = new osparc.ui.table.cellrenderer.ImageButtonRenderer("cancel", iconPathStop, shouldShowCancel);
     columnModel.setDataCellRenderer(this.self().COLS.ACTION_CANCEL.column, fontButtonRendererStop);
 
-    const iconPathInfo = "osparc/icons/circle-info-text.svg";
     const jobsStore =osparc.store.Jobs.getInstance();
     const shouldShowInfo = cellInfo => {
       if (cellInfo && cellInfo.rowData && cellInfo.rowData["collectionRunId"]) {
@@ -68,6 +67,7 @@ qx.Class.define("osparc.jobs.RunsTable", {
       }
       return false;
     }
+    const iconPathInfo = osparc.ui.switch.ThemeSwitcher.isLight() ? "osparc/icons/circle-info-black.svg" : "osparc/icons/circle-info-white.svg";
     const fontButtonRendererInfo = new osparc.ui.table.cellrenderer.ImageButtonRenderer("info", iconPathInfo, shouldShowInfo);
     columnModel.setDataCellRenderer(this.self().COLS.ACTION_INFO.column, fontButtonRendererInfo);
 
@@ -166,8 +166,9 @@ qx.Class.define("osparc.jobs.RunsTable", {
       this.addListener("cellTap", e => {
         const rowIdx = e.getRow();
         const target = e.getOriginalTarget();
-        if (target.closest(".qx-material-button") && (target.tagName === "IMG" || target.tagName === "DIV")) {
-          const action = target.closest(".qx-material-button").getAttribute("data-action");
+        const closestItems = osparc.ui.table.cellrenderer.ImageButtonRenderer.getClosestItems(target);
+        if (closestItems && (target.tagName === "IMG" || target.tagName === "DIV")) {
+          const action = closestItems.getAttribute("data-action");
           if (action) {
             this.__handleButtonClick(action, rowIdx);
           }
diff --git a/services/static-webserver/client/source/class/osparc/jobs/SubRunsTable.js b/services/static-webserver/client/source/class/osparc/jobs/SubRunsTable.js
@@ -37,11 +37,11 @@ qx.Class.define("osparc.jobs.SubRunsTable", {
 
     Object.values(this.self().COLS).forEach(col => columnModel.setColumnWidth(col.column, col.width));
 
-    const iconPathInfo = "osparc/icons/circle-info-text.svg";
+    const iconPathInfo = osparc.ui.switch.ThemeSwitcher.isLight() ? "osparc/icons/circle-info-black.svg" : "osparc/icons/circle-info-white.svg";
     const fontButtonRendererInfo = new osparc.ui.table.cellrenderer.ImageButtonRenderer("info", iconPathInfo);
     columnModel.setDataCellRenderer(this.self().COLS.INFO.column, fontButtonRendererInfo);
 
-    const iconPathLogs = "osparc/icons/file-download-text.svg";
+    const iconPathLogs = osparc.ui.switch.ThemeSwitcher.isLight() ? "osparc/icons/file-download-black.svg" : "osparc/icons/file-download-white.svg";
     const fontButtonRendererLogs = new osparc.ui.table.cellrenderer.ImageButtonRenderer("logs", iconPathLogs);
     columnModel.setDataCellRenderer(this.self().COLS.LOGS.column, fontButtonRendererLogs);
 
@@ -136,8 +136,9 @@ qx.Class.define("osparc.jobs.SubRunsTable", {
       this.addListener("cellTap", e => {
         const row = e.getRow();
         const target = e.getOriginalTarget();
-        if (target.closest(".qx-material-button") && (target.tagName === "IMG" || target.tagName === "DIV")) {
-          const action = target.closest(".qx-material-button").getAttribute("data-action");
+        const closestItems = osparc.ui.table.cellrenderer.ImageButtonRenderer.getClosestItems(target);
+        if (closestItems && (target.tagName === "IMG" || target.tagName === "DIV")) {
+          const action = closestItems.getAttribute("data-action");
           if (action) {
             this.__handleButtonClick(action, row);
           }
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", {
     "navigation_bar_background_color": "rgba(1, 18, 26, 0.8)",
     "fab_text": "contrasted-text-dark",
     "fab-background": "rgba(255, 255, 255, 0.2)",
-    "input_background": "#213248",
+    "input_background": "rgb(33, 50, 72)",
     "input_background_disable": "rgba(113, 157, 181, 0.25)",
     "hint-background": "rgba(82, 82, 82, 1)",
     "transparent_overlay": "rgba(1, 18, 26, 0.1)",
diff --git a/services/static-webserver/client/source/class/osparc/theme/ColorLight.js b/services/static-webserver/client/source/class/osparc/theme/ColorLight.js
@@ -34,7 +34,7 @@ qx.Theme.define("osparc.theme.ColorLight", {
 
     "navigation_bar_background_color": "rgba(229, 229, 229, 0.8)",
     "fab_text": "contrasted-text-dark",
-    "fab-background": "rgba(255, 255, 255, 0.2)",
+    "fab-background": "rgba(0, 0, 0, 0.2)",
     "input_background": "rgba(209, 214, 218, 1)",
     "input_background_disable": "rgba(113, 157, 181, 0.04)",
     "hint-background": "rgba(201, 201, 201, 1)",
diff --git a/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js b/services/static-webserver/client/source/class/osparc/ui/basic/SVGImage.js
@@ -68,7 +68,7 @@ qx.Class.define("osparc.ui.basic.SVGImage", {
           filter = "invert(66%) sepia(24%) saturate(5763%) hue-rotate(188deg) brightness(101%) contrast(101%)";
           break;
         case "text": // light or dark
-          if (qx.theme.manager.Meta.getInstance().getTheme().basename === "ThemeLight") {
+          if (osparc.ui.switch.ThemeSwitcher.isLight()) {
             // ThemeLight #282828
             filter = "invert(10%) sepia(4%) saturate(19%) hue-rotate(354deg) brightness(102%) contrast(86%)";
           } else {
diff --git a/services/static-webserver/client/source/class/osparc/ui/switch/ThemeSwitcher.js b/services/static-webserver/client/source/class/osparc/ui/switch/ThemeSwitcher.js
@@ -13,6 +13,11 @@ qx.Class.define("osparc.ui.switch.ThemeSwitcher", {
   type: "static",
 
   statics: {
+    isLight: function() {
+      const currentTheme = qx.theme.manager.Meta.getInstance().getTheme();
+      return currentTheme.basename === "ThemeLight";
+    },
+
     getValidThemes: function() {
       return Object.values(qx.Theme.getAll()).filter(theme => theme.type === "meta");
     },
diff --git a/services/static-webserver/client/source/class/osparc/ui/table/cellrenderer/ButtonRenderer.js b/services/static-webserver/client/source/class/osparc/ui/table/cellrenderer/ButtonRenderer.js
@@ -38,6 +38,10 @@ qx.Class.define("osparc.ui.table.cellrenderer.ButtonRenderer", {
     }
   },
 
+  statics: {
+    BUTTON_CLASS: "qx-material-button",
+  },
+
   members: {
     // Override
     _getContentHtml: function(cellInfo) {
@@ -46,7 +50,7 @@ qx.Class.define("osparc.ui.table.cellrenderer.ButtonRenderer", {
 
       // Return the button with the image
       return `
-        <div class="qx-material-button"
+        <div class="${this.self().BUTTON_CLASS}"
           data-action="${clickAction}" data-row="${cellInfo.row}"
           style="cursor:pointer; padding:2px 2px; width:26px; height:18px; display:flex; align-items:center; justify-content:center;"
         >
diff --git a/services/static-webserver/client/source/class/osparc/ui/table/cellrenderer/ImageButtonRenderer.js b/services/static-webserver/client/source/class/osparc/ui/table/cellrenderer/ImageButtonRenderer.js
@@ -36,6 +36,12 @@ qx.Class.define("osparc.ui.table.cellrenderer.ImageButtonRenderer", {
     },
   },
 
+  statics: {
+    getClosestItems: function(target, className = osparc.ui.table.cellrenderer.ButtonRenderer.BUTTON_CLASS) {
+      return target.closest("."+className)
+    },
+  },
+
   members: {
     __imageCache: null,
     __shouldShowFn: null,
diff --git a/services/static-webserver/client/source/class/osparc/widget/logger/LoggerModel.js b/services/static-webserver/client/source/class/osparc/widget/logger/LoggerModel.js
@@ -89,7 +89,7 @@ qx.Class.define("osparc.widget.logger.LoggerModel", {
           iconSource = "osparc/icons/circle-exclamation-solid.svg";
           break;
         case logLevels.ERROR:
-          iconSource = "osparc/icons/circle-xmark-solid.svg";
+          iconSource = "osparc/icons/circle-xmark-red.svg";
           break;
       }
       return iconSource;
diff --git a/services/static-webserver/client/source/resource/osparc/icons/circle-info-black.svg b/services/static-webserver/client/source/resource/osparc/icons/circle-info-black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#272727"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>
diff --git a/services/static-webserver/client/source/resource/osparc/icons/circle-info-white.svg b/services/static-webserver/client/source/resource/osparc/icons/circle-info-white.svg
diff --git a/services/static-webserver/client/source/resource/osparc/icons/circle-xmark-black.svg b/services/static-webserver/client/source/resource/osparc/icons/circle-xmark-black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#272727"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"/></svg>
diff --git a/services/static-webserver/client/source/resource/osparc/icons/circle-xmark-red.svg b/services/static-webserver/client/source/resource/osparc/icons/circle-xmark-red.svg
diff --git a/services/static-webserver/client/source/resource/osparc/icons/circle-xmark-white.svg b/services/static-webserver/client/source/resource/osparc/icons/circle-xmark-white.svg
diff --git a/services/static-webserver/client/source/resource/osparc/icons/file-download-black.svg b/services/static-webserver/client/source/resource/osparc/icons/file-download-black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="#272727"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm76.5 211.4l-96.4 95.7c-6.7 6.6-17.4 6.6-24 0l-96.4-95.7C73.4 337.3 80.5 320 94.8 320H160v-80c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v80h65.2c14.3 0 21.4 17.3 11.3 27.4zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z"/></svg>
diff --git a/services/static-webserver/client/source/resource/osparc/icons/file-download-white.svg b/services/static-webserver/client/source/resource/osparc/icons/file-download-white.svg

Original file line number	Diff line number	Diff line change
`@@ -89,7 +89,7 @@ qx.Class.define("osparc.widget.logger.LoggerModel", {`
`89`	`89`	`iconSource = "osparc/icons/circle-exclamation-solid.svg";`
`90`	`90`	`break;`
`91`	`91`	`case logLevels.ERROR:`
`92`		`- iconSource = "osparc/icons/circle-xmark-solid.svg";`
	`92`	`+ iconSource = "osparc/icons/circle-xmark-red.svg";`
`93`	`93`	`break;`
`94`	`94`	`}`
`95`	`95`	`return iconSource;`