-
-
Notifications
You must be signed in to change notification settings - Fork 960
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: Menus blend in with other elements #2779
Comments
I think its mostly due to the searchbar background color being very similar to the popup menu color in dark mode, less about the shadow. That being said, some sort of technique could be applied to differentiate better |
There are other places where this can happen. I discovered it while working on a popup menu inside a modal. The dark theme needs to do something around the menus to help give them a border between them and the things behind them. |
It actually doesn't look too terrible with a white border around in dark mode. Maybe something to consider |
Those tooltips in darkmode used to be a different color, but it was getting to be such a middle of the road color that it was really hard to have good contrast with non-white text. We should do something to fix that color being the exact same as may backgrounds, but imo its better than it used to. |
…ibility and accessibility (actualbudget#2779) Changed: - /packages/desktop-client/stc/style/style.ts - /packages/desktop-client/src/components/tooltips.tsx Updated to include a border: - color: theme.menuItemBackgroundHover - Used this color since its clean and maches the overall theming regardless of color palette - width: 2px - Not too thin, not too thick - style: solid - So it actually displays
@psybers Have a look at these screenshots I pulled from the electron app. Let me know what you think: I'm not convinced on the color of the border in light-mode, but it is visible for sure in my opinion. The first one uses |
@VoltaicGRiD Dark mode looks good. Do we even need to change the light mode ones? I think they worked as is. |
I feel like adding borders would feel out of place since none of the other pop ups use borders. I second that the light theme has no issues as is and should't be changed. |
@youngcw I'm definitely not against adding borders. I am all for accessibility and I feel like it adds that without detracting from the overall appearance or making it look "ugly" as one might say. Since they use themed variables, I was simply trying to find one that I could just apply globally to the tooltip windows, so in this case, I don't think either is necessarily a bad choice, especially considering they are mostly just a CSS styling choice. @psybers Not necessarily, I do like that it stands out more, but I don't think its a requirement for the light theme. Might not be bad to find a middle-ground. I'll play with some colors, |
Alright, added a section to the themes for each theme that I think, in my non-designer non-frontend experience looks and feels quite nice: Definitely no need for them all to be identical to the background color. Especially on dark themes like Midnight. And just to be clear, this applies to all "tooltip" type objects, including the notes on the budget page. |
…ibility and accessibility (actualbudget#2779) Changed: - /packages/desktop-client/stc/style/style.ts - /packages/desktop-client/src/components/tooltips.tsx Updated to include a border: - color: theme.menuItemBackgroundHover - Used this color since its clean and maches the overall theming regardless of color palette - width: 2px - Not too thin, not too thick - style: solid - So it actually displays Changed color of tooltip to be more "vocal" against the background on all themes Uses `theme.menuItemTextHeader` color now Added whole style for 'tooltipXYZ' for each theme to add definition to colors (actualbudget#2779)
@VoltaicGRiD Making progress! I wonder if the color should match the border in between each row in the spreadsheet? It should still give a defined border, but would match the existing themes a bit more. |
I don't hate it, but I think that they'd have to all match as themes, so (Light doesn't change here, since it already fits that criteria) If we just take the color from the table, I had to adjust the color of the background otherwise they were identical. |
I don't know that these are perfect (to me), but they definitely feel closer than the prior screenshots for me. I think the issue with the prior ones was there was too much contrast between the border and the menu background. These, there is still contrast but it is more subtle. With the prior ones, the border actually has more salience than the menu itself, which is probably backward. With the new versions that problem seems fixed. |
What a fantastic word
I'll go ahead and commit these for now, I might add some custom shades that fit that 50% for me (gray750 instead of gray800). I think that'll be the solution that pleases everyone. Unless you had a better suggestion of course. |
…ibility and accessibility (actualbudget#2779) Changed: - /packages/desktop-client/stc/style/style.ts - /packages/desktop-client/src/components/tooltips.tsx Updated to include a border: - color: theme.menuItemBackgroundHover - Used this color since its clean and maches the overall theming regardless of color palette - width: 2px - Not too thin, not too thick - style: solid - So it actually displays Changed color of tooltip to be more "vocal" against the background on all themes Uses `theme.menuItemTextHeader` color now Added whole style for 'tooltipXYZ' for each theme to add definition to colors (actualbudget#2779)
@VoltaicGRiD If you have not already done so, I would recommend opening a pull request for these changes so we can work toward merging them later. |
…ibility and accessibility (actualbudget#2779) Changed: - /packages/desktop-client/stc/style/style.ts - /packages/desktop-client/src/components/tooltips.tsx Updated to include a border: - color: theme.menuItemBackgroundHover - Used this color since its clean and maches the overall theming regardless of color palette - width: 2px - Not too thin, not too thick - style: solid - So it actually displays Changed color of tooltip to be more "vocal" against the background on all themes Uses `theme.menuItemTextHeader` color now Added whole style for 'tooltipXYZ' for each theme to add definition to colors (actualbudget#2779)
# This is the 1st commit message: Avoid using underlines for emphasis (actualbudget#2765) * Avoid using underlines for emphasis * add release note # This is the commit message actualbudget#2: Updated tooltip / floating menu style to add a border for ease-of-visibility and accessibility (actualbudget#2779) Changed: - /packages/desktop-client/stc/style/style.ts - /packages/desktop-client/src/components/tooltips.tsx Updated to include a border: - color: theme.menuItemBackgroundHover - Used this color since its clean and maches the overall theming regardless of color palette - width: 2px - Not too thin, not too thick - style: solid - So it actually displays Changed color of tooltip to be more "vocal" against the background on all themes Uses `theme.menuItemTextHeader` color now Added whole style for 'tooltipXYZ' for each theme to add definition to colors (actualbudget#2779)
Related: #2815 |
Verified issue does not already exist?
What happened?
The popup menus have no border, which means they tend to blend in with other elements behind them making them less obviously a menu:
Simply open any menu and you can observe it. This affects the dark theme, though technically the other themes also have the problem. But in those other themes, the shadow added to the menu is enough to make it have somewhat of a border.
Where are you hosting Actual?
Docker
What browsers are you seeing the problem on?
Chrome, Desktop App (Electron)
Operating System
Mac OSX
The text was updated successfully, but these errors were encountered: