[HOLD for payment 2024-02-19] [Wave8] [Ideal Nav] Page header design follow up

[mountiny]

Coming from here

Here's the plan:

• Leave the normal page header component as it currently is in production
  • 👉 This will require some follow-up work after ideal nav is merged to revert RHP and "normal" page headers from 80px (introduced in the PR) to what it was before (73px I believe)
• Introduce a new style of page header that includes an illustration
  • These are 80px tall and use h2s for the font style
  • These are the "center pane" headers we see in the Account Settings pages, for example
• Don't worry about the difference of page header heights in the desktop account settings pages (and all pages that have a nav on the left hand side—which uses standard page headers—and a center pane—which use the new illustration + h2 style headers)

Issue Owner

Current Issue Owner: @stephanieelliott

[melvin-bot]

Triggered auto assignment to @stephanieelliott (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[mountiny]

@dannymcclain @kosmydel @filip-solecki

[kosmydel]

Hey, thanks for creating this issue. I will work on this!

[mountiny]

@kosmydel Thank you! Are you able to address this one today?

[kosmydel]

Sure. I can switch my priorities.

[shubham1206agra]

I believe it should be 72px as every size is a multiple of 4.

[kosmydel]

This value is taken from the designs. But I also was a bit surprised with this value.

[shubham1206agra]

@Expensify/design Can you please confirm the value here?

[shawnborton]

I have a feeling it was 73px to account for a potential 1px border that happens. That being said, happy to use 72px since we rarely have the border here (and typically it's only on a chat header).

That being said, can we confirm what this value was before the ideal nav PR? I think we should just revert it to what it was previously.

[shubham1206agra]

I am seeing 65px on staging.

[shawnborton]

Can you share a screenshot of that please?

[shubham1206agra]

Here you go

[shawnborton]

Interesting... could have sworn that would have been 72/73.

[dannymcclain]

Yeah I was thinking that the "correct" height was 72px but we made it 73px in Figma to account for the border.

But since we're not really using borders on headers anymore (until scroll—is that still a thing?) I think we should just pick a number and standardize.

My vote would be for either 64px if we want to keep it super close to what it is in staging or 72px if we want to give it a teeny tiny bit extra room (this will match Figma more closely). Both are nice base-4 numbers that feel good.

Once we decide, I think the @Expensify/design team should make sure this component is updated in Figma (it could probably use a little love anyways since a lot has changed with these headers since the component was first created).

[shawnborton]

I think we should do 72px personally, it does feel like it gives it a teeny more breathing room.

[dannymcclain]

That sounds perfectly great to me. Can it be decided? :gavel:?

[shawnborton]

Decided! 72 it is.

[shubham1206agra]

@kosmydel Please update the height as stated above.

[hayata-suenaga]

@kosmydel do you think you can handle this issue together?

[kosmydel]

@kosmydel Please update the height as stated above.

I'm OOO, I will fix it tomorrow.

@kosmydel do you think you can handle this issue together?

Sure, I can have a look at this tomorrow.

[stephanieelliott]

Looks like the PR was updated and is on staging now!

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.39-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [Update Account Settings] Header: icons, height, and font changes #35564

If no regressions arise, payment will be issued on 2024-02-19. 🎊

For reference, here are some details about the assignees on this issue:

• @kosmydel does not require payment (Contractor)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@kosmydel] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@stephanieelliott] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[mountiny]

$500 to @shubham1206agra for testing and review

No regression test required for this I think

[melvin-bot]

Payment Summary

Upwork Job

• ROLE: @shubham1206agra to pay $500 via Upwork
• Contributor: @kosmydel is from an agency-contributor and not due payment

BugZero Checklist (@stephanieelliott)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants//hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[stephanieelliott]

@shubham1206agra I extended the offer to you in Upwork, please accept when you get a chance: https://www.upwork.com/jobs/~018b9bc79836e2ae70

[shubham1206agra]

@stephanieelliott Accepted

[stephanieelliott]

Thanks @shubham1206agra, all paid!