🎨 [Frontend] (Too) light buttons

[odeimaiz]

What do these changes do?

This PR addresses theme-related UI improvements to make buttons more visible and distinguishable in the light theme. Also, in the case of the buttons in the Activity Overview, the changes ensure buttons don't appear disabled or too faint by adjusting colors and icons.

Before:

After:

Related issue/s

• closes https://github.com/ITISFoundation/private-issues/issues/281

How to test

Dev-ops

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[mergify]

🧪 CI Insights

Here's what we observed from your CI run for 188a701.

🟢 All jobs passed!

But CI Insights is watching 👀

[Copilot]

Pull Request Overview

This PR addresses theme-related UI improvements to make buttons more visible and distinguishable in the light theme. The changes ensure buttons don't appear disabled or too faint by adjusting colors and icons.

• Updates button background colors for better contrast in light theme
• Replaces generic text-colored icons with theme-specific black/white variants
• Refactors button click detection to use centralized static methods
• Adds utility method to detect the current theme

Reviewed Changes

Copilot reviewed 9 out of 16 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
LoggerModel.js	Changes error icon to use red variant instead of generic
ImageButtonRenderer.js	Adds static helper method for finding closest button elements
ButtonRenderer.js	Introduces BUTTON_CLASS constant and uses it in template
ThemeSwitcher.js	Adds isLight() utility method for theme detection
SVGImage.js	Uses new theme detection utility instead of direct theme check
ColorLight.js	Changes fab-background from white to black with transparency
ColorDark.js	Converts input_background from hex to rgb format
SubRunsTable.js	Uses theme-specific icons and new button detection method
RunsTable.js	Uses theme-specific icons and new button detection method

Comments suppressed due to low confidence (1)

services/static-webserver/client/source/class/osparc/jobs/RunsTable.js:1

• The theme-based icon selection logic is duplicated here as well. Consider extracting this into a helper function that takes the base icon name and returns the appropriate theme-specific path.

/* ************************************************************************

[odeimaiz]

@Mergifyio queue

[mergify]

queue

🛑 Configuration not compatible with a branch protection setting

The branch protection setting Require branches to be up to date before merging is not compatible with max_parallel_checks>1, queue_conditions != merge_conditions and must be unset.

[pcrespov]

😎

[sanderegg]

thanks