Enhance hover effect on console Clear button #2592

[Harshit-7373]

Fixes #2592

Changes:

1. Updated the colour of the hover effect for the Clear button in the console in _console.scss file.
2. The colour is mentioned in the theme file for all the 3 (Light , Dark and High contrast themes).

For Light Mode :

For Dark Mode :

For High-Contrast Mode :

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[Harshit-7373]

@raclim , it was discussed in the comment section of the issue that changing only the text color is the best option.

If you want, I can add a smooth transition similar to how it works for different features in the p5.js web editor. Please share your thoughts on this.

[raclim]

I think this looks good with the light and dark themes, but we probably want to use $p5-contrast-yellow instead for the contrast theme. Because we want to adjust the color based on theme, we probably also want to keep using the getThemifyVariable() function as well. Could you adjust this line to get the color based on theming?

Besides this, I think this overall is a step in the right direction!

[raclim]

I might also remove the extra comment as well, since it's mostly self-explanatory.

[Harshit-7373]

@raclim I have deleted those Self Explanatory Comments in the updated commit. The updated commit solved the requested change.

[Harshit-7373]

I also found that there is no (p5-contrast-yellow) in the themes section mentioned in the SCSS variables file. There is only (p5-yellow) present, and I made the changes based on that.

[Harshit-7373]

@raclim I have updated the requested Changes. Please Check them once.

Here is an image , That shows that the required changes are shown correctly.