Insufficient hover effect on console Clear button

[avengsum]

p5.js version

v1.8.0

What is your operating system?

Windows

Web browser and version

119.0.6045.124

Actual Behavior

while hovering the cursor over the Clear button the background color is not visible properly

Expected Behavior

we should increase its intensity so that we can see properly

Steps to reproduce

Steps:

1. Go to p5.js editor
2. Try to hover over the clear button

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[mhsh312]

are you saying the hover shadow should be bigger?

[Garima3110]

are you saying the hover shadow should be bigger?

well, i think @avengsum is referring to using a darker color for the hover effect so that it is visible clearly.

[lindapaiste]

Let's discuss what we think it should look like when hovered!

The current effect is that the text color gets a little darker. There is no change to the background color. That is similar to the chevron open/close icon button next to it, but the color change is much more noticeable on the icon because the lines are thicker.

We could make the text bold when hovered. That might be weird because there's a little bit of movement due to bold text being larger/wider. But it definitely makes the hover very noticeable.

We could change the text color to the primary color (pink) like we do on menu items. This is not particularly readable but it shows that you are interacting with something clickable.

A bolder move would be to make the whole background pink on hover. Similar to the button for the sidebar files. This involves some tweaks to the border-radius, padding, etc.

If we do this, then I think we would want a stronger effect on the chevron open/close button that is next to it as well. So this could involve a lot of changes.

The CSS I'm playing with in dev tools for that mockup is

.light .preview-console__clear:hover {
    background: #ed225d;
    color: white;
    padding: 2px 6px;
    border-radius: 2px;
    margin-right: 4px;
}