New Menu too Uniform with Nodes

New menu theme is just blending with the nodes, so when you have entire screen full of nodes, I tend to actually have to ***look*** for my menu. :P There should be contrast from the rest of the UI elements as a control panel / menu.

Additionally, menu has no UX

1. No hover events
2. No click events
3. No tooltips (buttons that can destroy a session should have tool tip explanations of their function, like Refresh, and prossibly confirmation)
4. Mute colors that are not definable so not a good help for color blind, or those with lack of light perception making similar tones blend together.
5. Extension of 4, some font is almost same grey as background, and people like my father (who likes SD) didn't even know the text was there to do batches.

---

*This issue is transferred from: https://github.com/comfyanonymous/ComfyUI/issues/379*

Original issue was created by @WASasquatch at 2023-04-03T18:37:55.000Z

**Original Comments:**

@WASasquatch:

Not only do I lose the menu as looking like a node itself, but when zoomed in with lots of nodes, because it's color is identical to a node, can literally blend right into the nodes because it has no border, or box shadow to emphasize it as a floating element above the node plane. 

@wyrde:

![menu 2023-04-05 18_44_10-Mozilla Firefox](https://user-images.githubusercontent.com/9657443/230227948-e3a32e07-13f1-42a1-8556-0fbafe30e895.png)


the menu's drop shadow is right/bottom, so moving it to the upper left corner makes it more obvious.

I do think the shadows can use a few more pixels width though. Also help for the "active node" glow.

@WASasquatch:

> ![menu 2023-04-05 18_44_10-Mozilla Firefox](https://user-images.githubusercontent.com/9657443/230227948-e3a32e07-13f1-42a1-8556-0fbafe30e895.png)

> 

> the menu's drop shadow is right/bottom, so moving it to the upper left corner makes it more obvious. I do think the shadows can use a few more pixels width though. Also help for the "active node" glow.


Probably should also not be a directional shadow since it is a positional menu you can put anywhere the user wants. But the menu in general should have a differentiating theme from the graph too. It's you main triggering point. Shouldn't have to look for it. Should be obvious. 

@Davemane42:

replacing the the "Queue Prompt" button with a big orange "Generate" would differentiate the menu 

@WASasquatch:

> replacing the the "Queue Prompt" button with a big orange "Generate" would differentiate the menu


Yeah, or just change the color theme of the button in general. I don't know about "generate" cause it is literally a queue button. 

@wyrde:

Being able to toggle it to contrast with the current browser light/dark setting, maybe? eg, dark theme when the browser is light.

@WASasquatch:

> Being able to toggle it to contrast with the current browser light/dark setting, maybe? eg, dark theme when the browser is light.


Ooh, yeah that would be nice. A `prefers-color-scheme` or whatever is called env var to determine colors

@robinjhuang:

@WASasquatch Did you try the new Beta UI? Is this still an issue?

https://github.com/comfyanonymous/ComfyUI/pull/3112

@WASasquatch:

I haven't tried the new beta UI. Hadn't heard about it. O.o


But it is still an issue with original UI. The menu has no bordering and

shares the same color as nodes.

On Wed, Jul 3, 2024, 3:20 PM Robin Huang ***@***.***> wrote:

> @WASasquatch  Did you try the new Beta

> UI? Is this still an issue?

> #3112 

>

> —

> Reply to this email directly, view it on GitHub

> ,

> or unsubscribe

> 

> .

> You are receiving this because you were mentioned.Message ID:

> ***@***.***>

>

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-6452-New-Menu-too-Uniform-with-Nodes-29c6d73d36508120938fe6949219719d) by [Unito](https://www.unito.io)

Start by reviewing the current menu in the frontend and the beta UI referenced in PR #3112. Compare the menu with the node canvas, then define the scope with maintainers before changing it. Done should make the menu visually distinct and improve discoverability, interaction feedback, tooltips, and color contrast.

Written by the indexing model from the issue text.