Comments (15)
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
from actual.
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.
from actual.
It actually doesn't look too terrible with a white border around in dark mode. Maybe something to consider
from actual.
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.
from actual.
@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.
Alternatively, I found another color that is far more "vocal" but doesn't look quite as clean:
The first one uses menuItemBackgroundHover
The second one uses menuItemTextHeader
from actual.
@VoltaicGRiD Dark mode looks good. Do we even need to change the light mode ones? I think they worked as is.
from actual.
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.
from actual.
@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,
from actual.
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.
from actual.
@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.
from actual.
@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.
from actual.
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.
from actual.
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
salience
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.
from actual.
@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.
from actual.
Related: #2815
from actual.
Related Issues (20)
- [Feature] Support base URI incl. path HOT 1
- [Feature] Ability to add tags to budget categories and groups HOT 1
- [Feature] Linked Loan Accounts HOT 1
- [Bug]: Group budget roll-up not right HOT 2
- [Bug]: Amount size issues in updated mobile view
- Automatically enter remaining amount in split HOT 1
- [Duplicated] [Feature] Category Group selectable in Category Autocomplete to filter HOT 4
- [Bug]: To Budget tooltip shows without delay
- [Bug]: Deduplication not handling gocardless inconsistencies after #2770 HOT 5
- [Bug]: Rollover overspending indicators pushed off screen in mobile view HOT 1
- [Bug]: Unable to download my finances HOT 1
- [Bug]: Bank supported by GoCardLess but not showing in Actual HOT 1
- Can't input negatives in the iOS PWA HOT 1
- [Bug]: focus ring gets "stuck" on last column of /accounts/budgeted screen. HOT 1
- [Bug]: large tooltips - pushing page down
- [Bug]: transactions table - select all not selecting schedules HOT 5
- [Bug]: Stuck on "Initializing the connection to the local database..." Fresh Docker install HOT 4
- [Bug]: CSV Manual import ignores "Reconcile Transaction" option HOT 1
- [Feature] Expose an API "getBudgets" HOT 1
- [Bug]: Desktop Client no longer able to export budget files HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from actual.