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.

are you saying the hover shadow should be bigger?

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.

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;
}

I think what we should do is:
-Make the text #ed225d on hover
-Also add a #ed225d solid shadow to it so that it increases visibility (kinda like bold) but it doesn't look jarring like when making it bold as shadow doesn't move the text like bold does.

That way we are following the theme of p5 and making sure readable.

Code:

.light .preview-console__clear:hover {
    color: #ed225d;
    text-shadow: 0.25px -0.25px 0px #ed225d, 0.25px 0.25px 0px #ed225d, -0.25px 0.25px 0px #ed225d, 0.25px -0.25px 0px #ed225d;
}

Output:

If not, I think changing the color to pink and making the text bold is the best option.

I will suggest changing of the text color rather than making it whole background colored .

Well, I think the second option what @lindapaiste proposed ie. just changing the text color will work fine.

I agree with you @PiyushChandra17 because @lindapaiste had previously said that if we make the text bolder then the size feels it is increasing so the text bold thing don't work for us for this time so the background color change would be the great option to do.