[Wave 8] [Ideal Nav] Update Account Settings pages to use the new card styles #32952
Comments
trjExpensify
added
Weekly
|
Triggered auto assignment to @dannymcclain ( |
|
Just for supreme clarity, that would be these pages, correct? Account
General
|
|
Yah mon, those ones! |
|
Also if we need to rejig some of the animations for these (or get new ones) we totally can. I'm guessing now that the cards are going to be a bit wider for things like Preferences, we might need to adjust that animation so the arms are way longer? |
|
Not overdue Melvin—just haven't gotten to it yet! |
|
Sorry Melv, I think I can get to this soon! |
|
Skelly is looking pretty good on the latest adhoc build of the ideal nav branch, but it's not on prod yet Melv so this is still technically held. |
|
Woo, looking forward to this! @dannymcclain did you by chance land on the final mocks for this page? Asking because wow the v1 we did for ideal nav is really starting to show it's age. The "card" style looks so so much better. |
|
@JmillsExpensify I've started working on them here, but haven't gotten to all of them or finished polishing quite yet. |
|
Oh heck yeah brother, these are looking good already! |
|
@shawnborton one thing I'd like to talk to you and @dubielzyk-expensify about is how our edge to edge option rows work with these new cards. In the past, we've used 20px of left/right padding for everything so them going edge-to-edge wasn't ever an issue. But now, with varying padding based on viewport (20px mobile, 32px desktop), do they get increased padding on desktop? Or do they stay the same across all viewport sizes?
TBH them staying the same across viewports ☝️ doesn't look pad with the way they're currently styled. I think the issue that arises is more with the push-to-page inputs, which definitely stand out as being not-aligned when they keep their 20px of padding the same on desktop.
Feel free to take this convo to Slack or a video chat if that makes more sense. I'm just a little stumped as to how to handle these. |
|
I would think we just add an extra 12px of padding to each horizontal side if these components are within a card wrapper and on desktop. Can you share a quick mock of what that might look like? Basically so we can achieve edge-to-edge bleed, but still make it seem like they are aligned perfectly with the text content above them. |
|
Ok that would look like this. I think this is probably the best approach until we revisit the edge-to-edge-ness of all these components 😈
|
|
Nice, I agree - let's go with that for now until we revisit all of these. Can't wait until they all look more like the subnav 😈 |
|
Yeah. Let's get to these option row components soon 😅 |
|
More updates posted in Slack. Getting close I think. |
|
ALRIGHTY. Final mocks here: https://www.figma.com/file/Xv3yHJooZcxRGkXbAcTZD5/%23ideal-nav-(Ideal-Nav)?type=design&node-id=3125-183278&mode=design&t=XvlzBlUtMgk1sjil-11 We may need to tweak some animations, but personally I think we should start moving forward with implementation and deal with any animation problems as they arise.
|
JmillsExpensify
changed the title
|
Went ahead and removed the hold since we're going to start prioritizing this. |
|
In touch with SWM and they might get someone to work on this tomorrow using the ideal-nav as a base if it wont be merged to main yet Just for ease of tracking I propose we split the implementation up to issue per the screen and then we start with the profile page implementation while other pages will be on hold for it (since lots of the card design will be shared). Once that one page is done and merged, SWM can quickly follow up with the remainder of the pages in parallel. Thoughts? |
|
Agree with going page by page. |
|
Yeah, let's have a PR per page 👍 |
|
Obviously noting that there might be a bit of time inbetween where we have some pages designed a little different, but I think that's okay to avoid a jumbo PR for all of them. 👍 |
|
Yep, I think thats fine and should be resolved in matter of days |
|
Yeah, sounds good to me. Updated the OP, now we're ready to rock! |
|
I will create the issues for this tomorrow and add it to the project |
|
Hey, I'm from Software Mansion, and I will be responsible for this issue. Can we consider Figma as the primary source of truth for design changes? If there are any modifications to the design, we should update them in Figma. This approach will simplify our work and eliminate confusion. Thanks! |
|
Hi! I'm Filip from Software Mansion and I will work on this issue too! |
Yeah I think that is the best approach! I will create the separate issues for each page for y'all today |
|
Thanks @mountiny! Could you also create a separate issue for handling the icon in the |
|
@kosmydel Issues created, first starting with these two:
And the rest is on hold for those two just so we can then reuse the patterns established from them:
|
hayata-suenaga
changed the title
|
All PRs merged now 🎉 |
|
Going to close this overall tracker as we have the individual issues for payments etc. |
Coming from this convo.
The account settings pages have been moved to the main pane as part of the ideal nav skeleton project, but we didn't update them to the card style design to decouple the implementation from the navigational change. With the feature branch on the cusp of being merged, we're ready to address these changes.
@dannymcclain has gone ahead and redesigned them, so the solution mocks can be found here.
As per @mountiny's suggestion, we'll take this page by page instead of one giant PR for them all. Starting with the profile page which will add the card style to rinse/repeat for the others.
CC: @shawnborton @dannymcclain @JmillsExpensify
The text was updated successfully, but these errors were encountered: