[Bug] When a component's status is inactive/Execution blocked the tooltip isn't visible properly in both light & dark theme

[msmygit]

Bug Description

Hi, When a component's status is inactive/Execution blocked the tooltip isn't visible properly in both light & dark theme

https://github.com/langflow-ai/langflow/blob/main/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx#L205

This was found in the cloud hosted version as of this afternoon.

Reproduction

I don't know how to get a component to an inactive/execution blocked state, but one of my flow (with Combine Text component) was in that state.

Expected behavior

When mouse overing the 🚫 sign on the component, it needs to display the Execution blocked clearly in both light as well as in dark theme modes.

Who can help?

@anovazzi1 @Cristhianzl @lucaseduoli @igorrCarvalho

Operating System

macOS Sonoma 14.7

Langflow Version

DS LF as of 04-Dec-2024 1330 US ET

Python Version

None

Screenshot

See above in description

Flow File

my_testing.json

[dosubot[bot]]

To address the issue of the tooltip not being visible properly in both light and dark themes when a component's status is "inactive" or "Execution blocked," you can follow these steps:

1. Ensure Correct Tooltip Content: Verify that the tooltip content for the "Execution blocked" status is correctly set. This might involve checking the logic in the getTooltipContent function or wherever the tooltip content is determined.

2. Use CSS Variables for Styling: Make sure that the tooltip's background and text colors are set using CSS variables that adapt to both light and dark themes. For example, you can use:

   .tooltip {
      background-color: var(--tooltip);
      color: var(--tooltip-foreground);
      border-radius: var(--radius);
      padding: 0.5rem;
      box-shadow: 0 2px 4px var(--round-btn-shadow);
   }

   These variables should be defined for both themes to ensure proper visibility ^[1].

3. Check Theme Definitions: Ensure that the CSS variables --tooltip and --tooltip-foreground are correctly defined for both light and dark themes. For instance:

   • Light theme: --tooltip: hsl(0, 0%, 0%); --tooltip-foreground: hsl(0, 0%, 100%);
   • Dark theme: --tooltip: hsl(0, 0%, 100%); --tooltip-foreground: hsl(0, 0%, 0%); ^[2].

By ensuring that these CSS variables are correctly set and used, the tooltip should be visible and styled appropriately in both themes.

To continue talking to Dosu, mention @dosu.