[HOLD] margin-left is not provided to green dot

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Open the app
2. Open any report with pending pay amount (To ensure green dot is visible)
3. Pin that report
4. Add any text in the report to ensure pencil icon is visible
5. Observe margin between icons

Expected Result:

App should display icons with equal margin between them

Actual Result:

App does not add margin-left: 8px to green dot due to which pencil icon is displayed next with green dot with no space

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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: 1.2.97-2
Reproducible in staging?: y
Reproducible in production?: y
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:

margin.left.not.provided.to.green.dot.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1681126430133169

View all open jobs on GitHub

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

@muttmuure Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[muttmuure]

I don't have access to GBR, asking about this here and will add to SO https://expensify.slack.com/archives/C01GTK53T8Q/p1681470733246659

[muttmuure]

GBR is live for requests, so I just need to add a request and then I can test

[Prince-Mendiratta]

Proposal

Posting proposal early as per new guidelines

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

In this issue, we can see that the green dot indicator does not have a left margin and when the draft pencil is rendered next to it, it there is no space between them, looking weird.

What is the root cause of that problem?

In the LHN, there are three possible icons:

• Pencil Icon (for draft)
• Pin Icon (for pinned chat)
• Green / Red Dot (Pending IOU / error indicator)

The first 2 have a left margin of 8px while the indicator does not.

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

We need to wrap the indicator in a View that has a left margin of 8px. This can be done via the style styles.ml2.

Optional Improvement
Once all the three icons are rendered, it leads to a margin of 24px! This can lead to a good amount of text being hidden in the preview. We could add an additional condition such that if all 3 icons are displayed, we can set the left margin of the pencil icon to be 0px or 4px only.

[PrashantMangukiya]

Proposal

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

Margin-left is not provided to green dot.

What is the root cause of that problem?

We are rendering green dot via line 227 here

App/src/components/LHNOptionsList/OptionRowLHN.js

Line 227 in 5bad1bb

{optionItem.hasOutstandingIOU && !optionItem.isIOUReportOwner && <Icon src={Expensicons.DotIndicator} fill={colors.green} />}

There is not left margin added to green dot, so this is the root cause of the problem.

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

We have to change code at line 227 as shown below:

// OLD Code
// {optionItem.hasOutstandingIOU && !optionItem.isIOUReportOwner && <Icon src={Expensicons.DotIndicator} fill={colors.green} />} 

// Updated Code
{optionItem.hasOutstandingIOU && !optionItem.isIOUReportOwner && (
    <Icon additionalStyles={[styles.ml2]} src={Expensicons.DotIndicator} fill={colors.green} />
)} 
</View>

This will solve the issue as shown in results video.

What alternative solutions did you explore? (Optional)

None

Results

Web.mov

[aman-atg]

I think this can be handled here

[dukenv0307]

Proposal

We updated CONTRIBUTING.md to allow posting proposals before help wanted label this PR and this PR is merged

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

Margin-left is not provided to green dot.

What is the root cause of that problem?

Green dot icon has no wrap View with style: styles.ml2 same as pencil icon or pin icon.

App/src/components/LHNOptionsList/OptionRowLHN.js

Line 221 in 7fc6dfc

style={styles.ml2}

App/src/components/LHNOptionsList/OptionRowLHN.js

Line 230 in 7fc6dfc

style={styles.ml2}

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

Wrap gren dot icon by View with style styles.ml2.

What alternative solutions did you explore? (Optional)

NA

Result
https://user-images.githubusercontent.com/129500732/231042914-862a013f-2643-42a4-acdf-43621ba78bcc.webm

[MelvinBot]

@muttmuure Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[MelvinBot]

@muttmuure this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[aimane-chnaif]

I think this can be handled here

Agree

[MelvinBot]

@muttmuure Still overdue 6 days?! Let's take care of this!

[muttmuure]

I think we can hold this one and see if the other issue resolves this one

[muttmuure]

Still held

[aimane-chnaif]

Now that #18242 is merged, we can remove hold and re-test.

[muttmuure]

Looks like we decided to just replace the pin entirely. Looks good to me so going to close.

[dhanashree-sawant]

Hi @muttmuure, the particular issue is about lack of margin left on green dot. you can see that issue still exists by seeing the gap between red and green dot in this comment in #18242 PR. The issue is still not solved. I have also cross checked on latest staging build.