github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-05-05 22:52:20 -05:00
Code Issues 1.5k Packages Projects Releases 54 Wiki Activity

[Bug]: style - button hover background colors #760

New Issue
Closed
opened 2026-02-28 19:17:53 -06:00 by GiteaMirror · 9 comments
GiteaMirror commented 2026-02-28 19:17:53 -06:00
Owner
Copy Link

Originally created by @MatissJanis on GitHub (Nov 25, 2023).

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

Originally created by @MatissJanis on GitHub (Nov 25, 2023). ### 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
GiteaMirror added the user interfacegood first issuebug labels 2026-02-28 19:17:54 -06:00
GiteaMirror commented 2026-02-28 19:17:55 -06:00
Author
Owner
Copy Link

@carkom commented on GitHub (Nov 26, 2023):

Can you provide an example?

@carkom commented on GitHub (Nov 26, 2023): Can you provide an example?
GiteaMirror commented 2026-02-28 19:17:55 -06:00
Author
Owner
Copy Link

@MatissJanis commented on GitHub (Nov 26, 2023):

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
Screenshot 2023-11-26 at 15 41 52 Screenshot 2023-11-26 at 15 41 52
@MatissJanis commented on GitHub (Nov 26, 2023): 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 | |--------| --- | | <img width="158" alt="Screenshot 2023-11-26 at 15 41 52" src="https://github.com/actualbudget/actual/assets/886567/61bd3dfd-80fa-4c24-b757-87724d4437a9"> | <img width="158" alt="Screenshot 2023-11-26 at 15 41 52" src="https://github.com/actualbudget/actual/assets/886567/61bd3dfd-80fa-4c24-b757-87724d4437a9"> |
GiteaMirror commented 2026-02-28 19:17:56 -06:00
Author
Owner
Copy Link

@carkom commented on GitHub (Nov 26, 2023):

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 commented on GitHub (Nov 26, 2023): 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;_
GiteaMirror commented 2026-02-28 19:17:56 -06:00
Author
Owner
Copy Link

@Ife-Ody commented on GitHub (Dec 16, 2023):

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

@Ife-Ody commented on GitHub (Dec 16, 2023): Is anyone already working on this? I am looking to make some contributions because I love the vision
GiteaMirror commented 2026-02-28 19:17:57 -06:00
Author
Owner
Copy Link

@carkom commented on GitHub (Dec 16, 2023):

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

@carkom commented on GitHub (Dec 16, 2023): Not that I'm aware of. Feel free. Please tag me for review.
GiteaMirror commented 2026-02-28 19:17:57 -06:00
Author
Owner
Copy Link

@Ife-Ody commented on GitHub (Dec 23, 2023):

finally working on this today

@Ife-Ody commented on GitHub (Dec 23, 2023): finally working on this today
GiteaMirror commented 2026-02-28 19:17:57 -06:00
Author
Owner
Copy Link

@Ife-Ody commented on GitHub (Dec 23, 2023):

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;

@Ife-Ody commented on GitHub (Dec 23, 2023): 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;_
GiteaMirror commented 2026-02-28 19:17:58 -06:00
Author
Owner
Copy Link

@carkom commented on GitHub (Dec 23, 2023):

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 commented on GitHub (Dec 23, 2023): Great! Yea, we implemented the code like that to make color changes really easy. Go ahead and create a PR with your changes. Cheers!
GiteaMirror commented 2026-02-28 19:17:58 -06:00
Author
Owner
Copy Link

@carkom commented on GitHub (Dec 24, 2023):

fixed by #2123

@carkom commented on GitHub (Dec 24, 2023): fixed by #2123
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
AI generated
API
bank sync
budgeting
bug
can’t replicate
dependencies
docker
documentation
electron
experimental feature
feature
feedback
goal templates
good first issue
help wanted
importers
maintenance
needs info
needs testing
needs triage
needs votes
openid
payees
pull-request
Mirrored from GitHub Pull Request
 regression
reports
responsive
rules
schedules
server
✨ merged
split transactions
tech debt
theme
transaction import
transaction reconciliation
transactions
translations
upstream
user interface
✅ approved
wontfix
No Label bug good first issue user interface
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#760
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?