[WAITING ON PR MERGE] Desktop - Margin above Request Money chat report header

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open the Desktop App and Login
2. Navigate to any money request chat

Expected Result:

The chat header should not contain a top margin

Actual Result:

The chat header contains a top margin

Workaround:

UNknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: n/a
**Reproducible in staging?:**n/a
Reproducible in production?: v1.3.31-3 (desktop)
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by: Sibtain Ali
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1687147774347499

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b8eeb668f4618a9e
• Upwork Job ID: 1682845000617562112
• Last Price Increase: 2023-07-22

[melvin-bot]

Triggered auto assignment to @jliexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[Pujan92]

Please re-state the problem that we are trying to solve in this issue.

Header background color differs for IOU report in desktop.

What is the root cause of that problem?

HeaderGap is applied to ScreenWrapper component and there we don't have any info about the report type. This issue exists for desktop and for moneyRequest report where header bg is not the same as chat report type.

What changes do you think we should make in order to solve the problem?

We need to pass an extra prop called headerGapBackground for ScreenWrapper from ReportScreen here and pass the respective green color when the report type is iou.

App/src/pages/home/ReportScreen.js

Line 250 in 6728589

<ScreenWrapper style={screenWrapperStyle}>

This prop we need to maintain and pass to HeaderGap component from Screenwrapper to apply dynamic bg color.

App/src/components/ScreenWrapper/index.js

Line 134 in 6728589

<HeaderGap />

Ref - #19433 (comment)

[dhairyasenjaliya]

I believe this was intentionally added and kept that way since we are aligning with LHN cc @shawnborton

[jliexpensify]

I can't repro this on v1.3.32-5 even after logging out/in again:

@allroundexperts what version are you on?

It also seems odd that this is intentional, it's a bit jarring - but I'll wait for @shawnborton to weigh in before I close this GH.

[allroundexperts]

I can't repro this on v1.3.32-5 even after logging out/in again:

@allroundexperts what version are you on?

It also seems odd that this is intentional, it's a bit jarring - but I'll wait for @shawnborton to weigh in before I close this GH.

@jliexpensify I tested it by running the desktop app locally on dev on Mac.

[jliexpensify]

Oh, so my mistake: I didn't realise this was the Desktop version! I re-downloaded it (I've not been using Desktop) and can see it on v1.3.31-3:

@shawnborton - before I apply the External label, can you confirm if this is intentional?

[shawnborton]

I agree that the top space is intentional, but it should match the color below it. That being said, we're redoing all of the headers for money requests/tasks/etc, so I think we could probably close this since changes are coming.

Also, I could have sworn we reported this one like weeks ago as well? cc @JmillsExpensify @trjExpensify @grgia @thienlnam @jasperhuangg

[thienlnam]

Yes, this was implemented in the way as the task header so they have the same problem - though this problem shouldn't occur anymore once #20844 we add this, so let's just wait for this to be done instead of trying to solve this

[jliexpensify]

Still on hold

[jliexpensify]

Still on HOLD

[thienlnam]

Linked PR was merged!

[jliexpensify]

Ah, looks like the issue is gone on Desktop!

[jliexpensify]

@allroundexperts since you qualify for a reporting bonus, do you want to be paid via New.Dot?

[allroundexperts]

Yes. I'll send a request. Thanks @jliexpensify!

[Pujan92]

@jliexpensify the issue is for money request report which still exists due to diff background color.

[jliexpensify]

@Pujan92 looks like you're on Dev, and I'm on Production Desktop. @thienlnam do you mind having a look at this issue?

[grgia]

This will be fixed in #22484 / #22562

[melvin-bot]

@jliexpensify this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

[jliexpensify]

Nice, thanks @grgia !

[melvin-bot]

@jliexpensify this issue is now 4 weeks old and preventing us from maintaining WAQ. This should now be your highest priority. Please post below what your plan is to get a PR in review ASAP. Thanks!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01b8eeb668f4618a9e

[melvin-bot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @abdulrahuman5196 (Internal)

[jliexpensify]

Looks like these were deployed to prod over the weekend, will re-test now.

[jliexpensify]

I'm on v1.3.43-7 for the Mac Desktop app and can't see it anymore: