[HOLD for payment 2023-09-21] [$1000] Inconsistency bug: No margin between text and green dot (pin icon has 8px margin between text and icon) #25929

m-natarajan · 2023-08-25T12:59:57Z

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:

Open the app
Create group with many users and send long text
Pin the group
Create task with long title, assign the task to yourself and confirm the task
Complete the task and reopen to display green dot with large text besides it
Inspect and check margin left to pin, it is 8px making it look nice when there is large text
Inspect and check green dot, observe there is no margin left making the text look very close to green dot for large text

Expected Result:

App should keep consistent margin between text and icons in LHN

Actual Result:

Pin icon has 8px margin between text and icon but green dot has no margin making large text look way close to green dot then to pin icon

Workaround:

Unknown

Platforms:

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

Version Number: 1.3.57-3
Reproducible in staging?: Yes
Reproducible in production?: Yes
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

no.margin.left.to.green.dot.mp4

Recording.394.mp4

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01a3a01bd666eb498c
Upwork Job ID: 1696162910094422016
Last Price Increase: 2023-08-28
Automatic offers:

dukenv0307 | Contributor | 26560658
Dhanashree-Sawant | Reporter | 26560662

dukenv0307 · 2023-08-25T12:59:58Z

Proposal

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

Inconsistency bug: No margin between text and green dot (pin icon has 8px margin between text and icon)

What is the root cause of that problem?

We only add a margin-left for pin icon and draft icon. So when dot icon shows, we don't have a space between icon and text

App/src/components/LHNOptionsList/OptionRowLHN.js

Line 243 in 5a373bf

style={styles.ml2}

App/src/components/LHNOptionsList/OptionRowLHN.js

Line 251 in 5a373bf

style={styles.ml2}

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

We should add a margin-left for dot icon to be consistent with pin and draft icon

<View
    style={styles.ml2}
>
    <Icon
        src={Expensicons.DotIndicator}
        fill={themeColors.success}
    />
</View>

What alternative solutions did you explore? (Optional)

ahmedGaber93 · 2023-08-25T12:59:58Z

Proposal

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

Inconsistency bug: No margin between text and green dot (pin icon has 8px margin between text and icon)

What is the root cause of that problem?

No margin left styles.ml2 is applied to green dot icon like the other icons

App/src/components/LHNOptionsList/OptionRowLHN.js

Lines 235 to 256 in 9fb420e

    
           {shouldShowGreenDotIndicator && ( 
        
               <Icon 
        
                   src={Expensicons.DotIndicator} 
        
                   fill={themeColors.success} 
        
               /> 
        
           )} 
        
           {optionItem.hasDraftComment && optionItem.isAllowedToComment && ( 
        
               <View 
        
                   style={styles.ml2} 
        
                   accessibilityLabel={translate('sidebarScreen.draftedMessage')} 
        
               > 
        
                   <Icon src={Expensicons.Pencil} /> 
        
               </View> 
        
           )} 
        
           {!shouldShowGreenDotIndicator && optionItem.isPinned && ( 
        
               <View 
        
                   style={styles.ml2} 
        
                   accessibilityLabel={translate('sidebarScreen.chatPinned')} 
        
               > 
        
                   <Icon src={Expensicons.Pin} /> 
        
               </View> 
        
           )}

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

We need to wrap the green dot icon with View has style styles.ml2 like other icons.

What alternative solutions did you explore? (Optional)

N/A

c3024 · 2023-08-25T12:59:58Z

Proposal

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

Green indicator appears closer to the text in LHN than pin

What is the root cause of that problem?

We have a View with ml2 wrapped around pin here

App/src/components/LHNOptionsList/OptionRowLHN.js

Lines 250 to 255 in c43491a

    
           <View 
        
               style={styles.ml2} 
        
               accessibilityLabel={translate('sidebarScreen.chatPinned')} 
        
           > 
        
               <Icon src={Expensicons.Pin} /> 
        
           </View>

and there is no such view wrapped around green indicator here

App/src/components/LHNOptionsList/OptionRowLHN.js

Lines 235 to 240 in c43491a

    
           {shouldShowGreenDotIndicator && ( 
        
               <Icon 
        
                   src={Expensicons.DotIndicator} 
        
                   fill={themeColors.success} 
        
               /> 
        
           )}

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

Wrap the green indicator with a View with styles.ml2`

What alternative solutions did you explore? (Optional)

melvin-bot · 2023-08-25T13:00:02Z

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

melvin-bot · 2023-08-25T13:00:04Z

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

AmjedNazzal · 2023-08-25T13:00:10Z

Proposal

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

Inconsistency bug: No margin between text and green dot (pin icon has 8px margin between text and icon)

What is the root cause of that problem?

The green dot is not contained in a View and not given ml2 like other icons in LHN.

App/src/components/LHNOptionsList/OptionRowLHN.js

Lines 235 to 239 in 9a0dd42

    
           {shouldShowGreenDotIndicator && ( 
        
               <Icon 
        
                   src={Expensicons.DotIndicator} 
        
                   fill={themeColors.success} 
        
               />

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

We need to contain the green dot in a view and give it ml2.

{shouldShowGreenDotIndicator && (
    <View style={styles.ml2}>
    <Icon
        src={Expensicons.DotIndicator}
        fill={themeColors.success}
    />
    </View>
)}

Result

Screen.Recording.2023-08-23.at.3.55.04.PM.mov

hungvu193 · 2023-08-26T15:43:06Z

Proposal

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

Inconsistency bug: No margin between text and green dot (pin icon has 8px margin between text and icon)

What is the root cause of that problem?

Other icons have margin left, meanwhile the green dot doesn't which caused the issue:

App/src/components/LHNOptionsList/OptionRowLHN.js

Lines 258 to 262 in c169952

    
           {shouldShowGreenDotIndicator && ( 
        
               <Icon 
        
                   src={Expensicons.DotIndicator} 
        
                   fill={themeColors.success} 
        
               />

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

I feel like that's ok to not have margin if that's the first icon because we already have spacing from the text, so we should remove margin from the icon if it's the first one.

    {optionItem.hasDraftComment && optionItem.isAllowedToComment && (
        <View
          // remove margin if it appears as the first icon
            style={shouldShowGreenDotIndicator ? styles.ml2 : {}}
            accessibilityLabel={translate('sidebarScreen.draftedMessage')}
        >
            <Icon src={Expensicons.Pencil} />
        </View>
    )}
    {!shouldShowGreenDotIndicator && optionItem.isPinned && (
        <View
            // remove margin if it appears as the first icon
            style={optionItem.hasDraftComment && optionItem.isAllowedToComment ? styles.ml2 : {}}
            accessibilityLabel={translate('sidebarScreen.chatPinned')}
        >
            <Icon src={Expensicons.Pin} />
        </View>
    )}

What alternative solutions did you explore? (Optional)

N/A

melvin-bot · 2023-08-27T15:17:17Z

📣 @JSExpert1121! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

melvin-bot · 2023-08-28T14:08:48Z

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

melvin-bot · 2023-08-28T14:08:51Z

Current assignee @NicMendonca is eligible for the External assigner, not assigning anyone new.

melvin-bot · 2023-08-28T14:08:57Z

Triggered auto assignment to Contributor-plus team member for initial proposal review - @robertKozik (External)

melvin-bot · 2023-08-28T14:57:00Z

📣 @ligh128! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

ligh128 · 2023-08-28T14:58:33Z

Proposal
To resolve the issue in React Native where the pin icon has an 8px margin between the text and the icon, while the green dot has no margin, causing large text to appear closer to the green dot than the pin icon, you can follow these steps:

Identify the components responsible for rendering the pin icon and the green dot. Determine if they are separate components or part of a larger component.
Adjust the styling of the pin icon component to include a margin between the text and the icon. You can use the margin or marginRight CSS property to add the desired spacing.
Replace PinIcon with the appropriate component or icon element in your code.
Similarly, modify the styling of the green dot component to add the desired margin. Ensure that the margin value matches the margin used for the pin icon.
Replace GreenDot with the appropriate component or element in your code.
Save the changes and recompile your React Native application. The pin icon and green dot should now have consistent margins, ensuring that large text appears evenly spaced between them.

By adjusting the margins of the pin icon and the green dot components, you can achieve a consistent visual appearance and ensure that the large text is appropriately spaced between the two elements.

NicMendonca · 2023-08-28T15:11:24Z

@robertKozik lots of proposals here! 😄

NicMendonca · 2023-08-31T16:59:57Z

@robertKozik bump!

robertKozik · 2023-08-31T17:30:54Z

On it! 👀 will update today!

robertKozik · 2023-08-31T17:45:51Z

Sorry for the delay 🙇🏼‍♂️

As I review all the proposals, I can see that each of you has accurately identified the root cause. Furthermore, your proposed solutions align one-to-one.
I will recommend selecting the contributor who was the first to submit their proposal. Even though three proposals were posted in the same minute (😮), we need to find a way to make a decision.

I would suggest to hire @dukenv0307
contributor: @dukenv0307
proposal: Proposal

🎀 👀 🎀 C+ reviewed

melvin-bot · 2023-08-31T17:45:57Z

Triggered auto assignment to @madmax330, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

melvin-bot · 2023-09-08T08:53:53Z

📣 @dhanashree-sawant 🎉 An offer has been automatically sent to your Upwork account for the Reporter role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

madmax330 · 2023-09-08T08:54:21Z

Not overdue

dhanashree-sawant · 2023-09-08T09:02:20Z

Hi @NicMendonca , the following issue was raised on 25th of August but melvin bot has provided me with 50$ offer, can you check once you are available?

dukenv0307 · 2023-09-08T09:38:17Z

@robertKozik The PR is ready to review.

melvin-bot · 2023-09-13T08:15:11Z

🎯 ⚡️ Woah @robertKozik / @dukenv0307, great job pushing this forwards! ⚡️

The pull request got merged within 3 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉

when @dukenv0307 got assigned: 2023-09-08 08:53:49 Z
when the PR got merged: 2023-09-13 08:15:10 UTC

On to the next one 🚀

melvin-bot · 2023-09-14T10:22:49Z

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

melvin-bot · 2023-09-14T10:22:52Z

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

Add margin left to green dot icon #27008

If no regressions arise, payment will be issued on 2023-09-21. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

External issue reporter
Contributor that fixed the issue
Contributor+ that helped on the issue and/or PR

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

@robertKozik does not require payment (Contractor)
@dukenv0307 requires payment offer (Contributor)
@dhanashree-sawant requires payment offer (Reporter)

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

Merged PR within 3 business days of assignment - 50% bonus
Merged PR more than 9 business days after assignment - 50% penalty

melvin-bot · 2023-09-14T10:22:54Z

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

[@robertKozik] The PR that introduced the bug has been identified. Link to the PR:
[@robertKozik] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
[@robertKozik] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
[@robertKozik] Determine if we should create a regression test for this bug.
[@robertKozik] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[@NicMendonca] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

NicMendonca · 2023-09-21T17:54:48Z

@dhanashree-sawant sent you modified offer!

NicMendonca · 2023-09-21T17:55:55Z

reporter: @dhanashree-sawant - $250
contributor: @dukenv0307 - $1,500
c+: @robertKozik - contractor - no payment

NicMendonca · 2023-09-21T20:51:13Z

@dukenv0307 you've been paid!

dhanashree-sawant · 2023-09-22T05:42:38Z

Thanks @NicMendonca, I have accepted the offer

NicMendonca · 2023-09-22T12:10:54Z

everyone has been paid 🎉

@robertKozik bump on the BZ checklist!

NicMendonca · 2023-09-25T13:21:53Z

@robertKozik bumped ya in slack!

robertKozik · 2023-09-25T13:38:36Z

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed: It was uncaught inconsistency - cannot pinpoint exact PR which introduce it.

[@robertKozik] The PR that introduced the bug has been identified. Link to the PR: N/A

[@robertKozik] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: N/A

[@robertKozik] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A

[@robertKozik] Determine if we should create a regression test for this bug. I don't think it's suitable for this issue. It's purely visual inconsistency.

[@robertKozik] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again. N/A

m-natarajan added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Aug 25, 2023

melvin-bot bot assigned NicMendonca Aug 25, 2023

melvin-bot bot added the Overdue label Aug 27, 2023

NicMendonca added the External Added to denote the issue can be worked on by a contributor label Aug 28, 2023

melvin-bot bot changed the title ~~Inconsistency bug: No margin between text and green dot (pin icon has 8px margin between text and icon)~~ [$1000] Inconsistency bug: No margin between text and green dot (pin icon has 8px margin between text and icon) Aug 28, 2023

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Aug 28, 2023

melvin-bot bot assigned robertKozik Aug 28, 2023

melvin-bot bot added Overdue and removed Overdue labels Aug 28, 2023

melvin-bot bot removed the Overdue label Aug 31, 2023

melvin-bot bot assigned madmax330 Aug 31, 2023

melvin-bot bot removed the Overdue label Sep 8, 2023

dukenv0307 mentioned this issue Sep 8, 2023

Add margin left to green dot icon #27008

Merged

59 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Sep 8, 2023

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Sep 14, 2023

melvin-bot bot removed the Reviewing Has a PR in review label Sep 14, 2023

melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Sep 21, 2023

melvin-bot bot added the Overdue label Sep 25, 2023

melvin-bot bot removed the Overdue label Sep 25, 2023

NicMendonca closed this as completed Sep 26, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HOLD for payment 2023-09-21] [$1000] Inconsistency bug: No margin between text and green dot (pin icon has 8px margin between text and icon) #25929

[HOLD for payment 2023-09-21] [$1000] Inconsistency bug: No margin between text and green dot (pin icon has 8px margin between text and icon) #25929

m-natarajan commented Aug 25, 2023 •

edited by melvin-bot bot

Loading

dukenv0307 commented Aug 25, 2023

ahmedGaber93 commented Aug 25, 2023

c3024 commented Aug 25, 2023

melvin-bot bot commented Aug 25, 2023

melvin-bot bot commented Aug 25, 2023 •

edited by NicMendonca

Loading

AmjedNazzal commented Aug 25, 2023

hungvu193 commented Aug 26, 2023

melvin-bot bot commented Aug 27, 2023

melvin-bot bot commented Aug 28, 2023

melvin-bot bot commented Aug 28, 2023

melvin-bot bot commented Aug 28, 2023

melvin-bot bot commented Aug 28, 2023

ligh128 commented Aug 28, 2023

NicMendonca commented Aug 28, 2023

NicMendonca commented Aug 31, 2023

robertKozik commented Aug 31, 2023

robertKozik commented Aug 31, 2023

melvin-bot bot commented Aug 31, 2023

melvin-bot bot commented Sep 8, 2023

madmax330 commented Sep 8, 2023

dhanashree-sawant commented Sep 8, 2023

dukenv0307 commented Sep 8, 2023

melvin-bot bot commented Sep 13, 2023

melvin-bot bot commented Sep 14, 2023

melvin-bot bot commented Sep 14, 2023

melvin-bot bot commented Sep 14, 2023

NicMendonca commented Sep 21, 2023

NicMendonca commented Sep 21, 2023

NicMendonca commented Sep 21, 2023

dhanashree-sawant commented Sep 22, 2023

NicMendonca commented Sep 22, 2023

NicMendonca commented Sep 25, 2023

robertKozik commented Sep 25, 2023

[HOLD for payment 2023-09-21] [$1000] Inconsistency bug: No margin between text and green dot (pin icon has 8px margin between text and icon) #25929

[HOLD for payment 2023-09-21] [$1000] Inconsistency bug: No margin between text and green dot (pin icon has 8px margin between text and icon) #25929

Comments

m-natarajan commented Aug 25, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

dukenv0307 commented Aug 25, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

ahmedGaber93 commented Aug 25, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

c3024 commented Aug 25, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

melvin-bot bot commented Aug 25, 2023

melvin-bot bot commented Aug 25, 2023 • edited by NicMendonca Loading

Bug0 Triage Checklist (Main S/O)

AmjedNazzal commented Aug 25, 2023

Proposal

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

What is the root cause of that problem?

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

Result

hungvu193 commented Aug 26, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

melvin-bot bot commented Aug 27, 2023

melvin-bot bot commented Aug 28, 2023

melvin-bot bot commented Aug 28, 2023

melvin-bot bot commented Aug 28, 2023

melvin-bot bot commented Aug 28, 2023

ligh128 commented Aug 28, 2023

NicMendonca commented Aug 28, 2023

NicMendonca commented Aug 31, 2023

robertKozik commented Aug 31, 2023

robertKozik commented Aug 31, 2023

melvin-bot bot commented Aug 31, 2023

melvin-bot bot commented Sep 8, 2023

madmax330 commented Sep 8, 2023

dhanashree-sawant commented Sep 8, 2023

dukenv0307 commented Sep 8, 2023

melvin-bot bot commented Sep 13, 2023

melvin-bot bot commented Sep 14, 2023

melvin-bot bot commented Sep 14, 2023

melvin-bot bot commented Sep 14, 2023

NicMendonca commented Sep 21, 2023

NicMendonca commented Sep 21, 2023

NicMendonca commented Sep 21, 2023

dhanashree-sawant commented Sep 22, 2023

NicMendonca commented Sep 22, 2023

NicMendonca commented Sep 25, 2023

robertKozik commented Sep 25, 2023

m-natarajan commented Aug 25, 2023 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Aug 25, 2023 •

edited by NicMendonca

Loading