[Bug]: style - button hover background colors

[MatissJanis]

Verified issue does not already exist?

• I have searched and found no existing issue

What happened?

Somewhere along the way to darkmode we have lost hover colors for most buttons in light mode. We should bring them back (maybe not the exact colors as before if they violate the color paletter, but still something)

We are missing hover color for the primary color buttons. For example: rule creation.

What error did you receive?

No response

Where are you hosting Actual?

None

What browsers are you seeing the problem on?

No response

Operating System

None

[carkom]

Can you provide an example?

[MatissJanis]

Just checked v23.7.0. Seems the problem is there too. So it doesn't seem to be a regression after all. Just something we've never had I guess. Weird either way.

Button	Hovered

[carkom]

Good news is that it's really easy to change. It's already assigned in "Button.tsx"

const backgroundColorHover = {
normal: theme.buttonNormalBackgroundHover,
primary: theme.buttonPrimaryBackgroundHover,
bare: theme.buttonBareBackgroundHover,
menu: theme.buttonMenuBackgroundHover,
menuSelected: theme.buttonMenuSelectedBackgroundHover,
link: theme.buttonBareBackground,
};

Only change happens in "light.ts" where background and backgroundhover are the same.

export const buttonPrimaryText = colorPalette.white;
export const buttonPrimaryTextHover = buttonPrimaryText;
export const buttonPrimaryBackground = colorPalette.purple500;
export const buttonPrimaryBackgroundHover = buttonPrimaryBackground;
export const buttonPrimaryBorder = buttonPrimaryBackground;

[Ife-Ody]

Is anyone already working on this? I am looking to make some contributions because I love the vision

[carkom]

Not that I'm aware of. Feel free. Please tag me for review.

[Ife-Ody]

finally working on this today

[Ife-Ody]

The fix was easy. I just picked a shade lighter in the light mode and a shade darker in the dark mode

Good news is that it's really easy to change. It's already assigned in "Button.tsx"

const backgroundColorHover = { normal: theme.buttonNormalBackgroundHover, primary: theme.buttonPrimaryBackgroundHover, bare: theme.buttonBareBackgroundHover, menu: theme.buttonMenuBackgroundHover, menuSelected: theme.buttonMenuSelectedBackgroundHover, link: theme.buttonBareBackground, };

Only change happens in "light.ts" where background and backgroundhover are the same.

export const buttonPrimaryText = colorPalette.white; export const buttonPrimaryTextHover = buttonPrimaryText; export const buttonPrimaryBackground = colorPalette.purple500; export const buttonPrimaryBackgroundHover = buttonPrimaryBackground; export const buttonPrimaryBorder = buttonPrimaryBackground;

[carkom]

Great! Yea, we implemented the code like that to make color changes really easy. Go ahead and create a PR with your changes. Cheers!

[carkom]

fixed by #2123