Solid pink buttons need a hover effect

[lindapaiste]

Increasing Access

All buttons should have a visible change when hovered so that the user knows that it's hovered.

Feature enhancement details

Gray buttons go to pink when hovered but pink buttons stay pink. We should make it a slightly darker shade of pink to show that it is hovered.

The solid pink button is the secondary kind of the Button component. It is used in the CookieConsent dialog and potentially in other places in the future.

In the theme.js file we would change the hover colors for the secondary button style to be something different. Right now we have the same colors for default and hover but there's a colors.p5jsActivePink that we can use. We don't seem to have an equivalent variation of the yellow color for the contrast theme so we would need to define one.

p5.js-web-editor/client/theme.js

Lines 102 to 112 in e77bc6a

	secondary: {
	default: {
	foreground: grays.lightest,
	background: colors.p5jsPink,
	border: colors.p5jsPink
	},
	hover: {
	foreground: grays.lightest,
	background: colors.p5jsPink,
	border: colors.p5jsPink
	},

This issue is intended for @haarsh157 but I can't assign it unless they comment 😝

[mrkirthi-24]

Hi @lindapaiste I would like to work on this issue

[KartikChawla09]

Hey @lindapaiste , I have a few options in mind for an equivalent variation of the yellow color. I suggest using #fff001 for the hover state. Additionally, I would like to address the issue and work on resolving it!

[RohitPaul0007]

hey I like to solve the issue if you assign me the same. @lindapaiste

[haarsh157]

@lindapaiste Hey there! I would like to work on this issue.
Additionally, I'd like to suggest implementing hover transitions in the web editor. What do you think??

[lindapaiste]

@lindapaiste Hey there! I would like to work on this issue.

Great, I just assigned it to you.

Additionally, I'd like to suggest implementing hover transitions in the web editor. What do you think??

I’m on board in principle but we need to find something that looks nice. I tried a simple transition: all 200ms on the button to see what it looks like and I thought it was kinda eye-bleedy. Transitioning probably looks a lot better when the change is subtle but going from gray to pink is a major shift. There might be other types of buttons in the app that are easier to transition nicely.