Mobile pages standardized (Colors/UI) #1874
Conversation
✅ Deploy Preview for actualbudget ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Bundle Stats — desktop-clientHey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
Changeset
View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger
Smaller No assets were smaller Unchanged
|
Bundle Stats — loot-coreHey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
Changeset No files were changed View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger No assets were bigger Smaller No assets were smaller Unchanged
|
|
There's been talks about why the headers and footers are the colours they are, but I do agree they should all be unified. (I am not a maintainer, just a user giving their opinion) |
|
I think the budget/account page header bars should at least be purple instead of grey. The other changes are fine with me. |
|
Thanks both. @youngcw, I'm happy to use any color. Nice thing is that just one theme color is used for all header colors so it's an easy fix. |
|
There seem to be some UI regression aside from color changes. The fonts got bigger and the buttons in the account details page header are now more compact. |
Yes, the PR message does mention that I changed "size/color/background" to make them all the same. Sorry if the title is a bit misleading, I've changed it to be more accurate. The larger font is only for 2 pages, to match other pages that were already that size. Is this an undesirable font size change? I couldn't tell if you disliked the change or if you were just pointing it out as an FYI. I don't see the button compaction on my local, can you share SS? |
|
I just took a look at the VRT screenshots in the PR itself. I think I prefer the original font size since that will allow to show more characters before being truncated with an ellipsis. Also, if we are going to remove the padding on the mobile transaction page, I think it would make send to move the "Back" button closer to the edge to match what is in the account details page to achieve a more unified feel. But that's just my opinion. |
carkom
changed the title
|
I've adjusted colors and fonts/buttons. Can you both have a look? Cheers! |
|
This may be a good place to fix this issue. The last account on the mobile account page is missing its shadow. I only noticed it recently since usually that account is off screen. If you would rather I can make a bug report for it. The colors look much nicer now |
I think I'd rather leave it for another PR. Can you submit an issue for it?
Cheers, thanks! |
|
Nice! Personally I like the single color on all the headers. My only comment is that the shade of purple doesn't seem to blend well when switching to dark mode, but that could be addressed on a separate PR. Looks like the back button arrow got smaller too. I'm wondering if we could keep the same back button color as before as that seemed to have been inspired by the iOS back button design. |
Back button size changed The contrast is not readable when using that blue color for text. with the current background. We'd have to choose a new (much lighter) background color. Thoughts? |
trafico-bot
bot
added
✨ Merged
* Mobile Color Consistency * VRT updates * color updates * notes * Sync Text * Adjust header font smaller * color and format adjustments * tidying header buttons * color and button adjustments * Header Text color * VRT updates * back button changes * VRT changes * adjust buttons * lint fix * darkTheme header background * VRT updates * VRT updates
I saw a need to make the mobile view feel a bit more unified. I made all the headers the same size/color/background and all the pages to look/feel the same. This also helps to move dark theme forward since there were plenty of hardcoded 'white' background colors.