actual
actual copied to clipboard
actualbudget
[Bug]: style - button hover background colors
Verified issue does not already exist?
- [X] 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
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 |
|---|---|
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;
Is anyone already working on this? I am looking to make some contributions because I love the vision
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;
Great! Yea, we implemented the code like that to make color changes really easy. Go ahead and create a PR with your changes. Cheers!