[HOLD for payment 2023-05-22] [$1000] Workspaces icons and green dot has inconsistent padding #18418

kavimuru · 2023-05-04T16:26:18Z

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
Open settings
Observe padding between workspaces icons and chevron at the right and between green dot and chevron sign

Expected Result:

App should have equal padding between extra icons in settings page

Actual Result:

App have different padding between workspace icons and grater then sign and between green dot and greater then sign

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?

Version Number: 1.3.10
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: Any additional supporting documentation

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01de771465b5c7976d
Upwork Job ID: 1654183140073811968
Last Price Increase: 2023-05-04

MelvinBot · 2023-05-04T16:26:23Z

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

MelvinBot · 2023-05-04T16:26:27Z

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 · 2023-05-04T16:36:34Z

Proposal

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

Space inconsistency between workspace icons and Brick Rock indicator in the settings page

What is the root cause of that problem?

For the brickRoadIndicator we are providing the left: 4 style which seems to overlap its content with the right icon.

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

Instead left style we can provide the paddingLeft with styles.pl1 or marginLeft with styles.ml1 to provide some space on the left that won't overlap with right icon part.

MelvinBot · 2023-05-04T17:56:11Z

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

MelvinBot · 2023-05-04T17:56:14Z

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

MelvinBot · 2023-05-04T17:56:21Z

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

MelvinBot · 2023-05-04T17:56:25Z

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

sethraj14 · 2023-05-04T20:56:24Z

Contributor details
Your Expensify account email: rajdeepseth007@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01b081a1cc1bf19a26

melvin-bot · 2023-05-04T20:56:27Z

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

sethraj14 · 2023-05-04T20:56:56Z

Contributor details
Your Expensify account email: rajdeepseth007@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01b081a1cc1bf19a26

melvin-bot · 2023-05-04T20:56:58Z

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

sobitneupane · 2023-05-05T09:18:21Z

@Pujan92 Thanks for your proposal. We also have Badge in the Settings Page. Is it also aligned with other icons with your proposal?

s-alves10 · 2023-05-05T16:17:03Z

Proposal

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

Workspace icons and green dots have different spacing in settings page.

What is the root cause of that problem?

Please take a look at this code segment. This is the right part of the settings menu.

App/src/components/MenuItem.js

Lines 177 to 225 in 7e957af

    
           <View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone]}> 
        
               {Boolean(props.badgeText) && ( 
        
               <Badge 
        
                   text={props.badgeText} 
        
                   badgeStyles={[styles.alignSelfCenter, (props.brickRoadIndicator ? styles.mr2 : undefined), 
        
                       (props.focused || hovered || pressed) ? styles.hoveredButton : {}, 
        
                   ]} 
        
               /> 
        
               )} 
        
               {/* Since subtitle can be of type number, we should allow 0 to be shown */} 
        
               {(props.subtitle || props.subtitle === 0) && ( 
        
                   <View style={[styles.justifyContentCenter, styles.mr1]}> 
        
                       <Text 
        
                           style={[styles.textLabelSupporting, props.style]} 
        
                       > 
        
                           {props.subtitle} 
        
                       </Text> 
        
                   </View> 
        
               )} 
        
               {!_.isEmpty(props.floatRightAvatars) && ( 
        
                   <View style={[styles.justifyContentCenter, (props.brickRoadIndicator ? styles.mr2 : undefined)]}> 
        
                       <MultipleAvatars 
        
                           isHovered={hovered} 
        
                           isPressed={pressed} 
        
                           icons={props.floatRightAvatars} 
        
                           size={props.avatarSize || fallbackAvatarSize} 
        
                           fallbackIcon={defaultWorkspaceAvatars.WorkspaceBuilding} 
        
                           shouldStackHorizontally={props.shouldStackHorizontally} 
        
                       /> 
        
                   </View> 
        
               )} 
        
               {Boolean(props.brickRoadIndicator) && ( 
        
                   <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.l1]}> 
        
                       <Icon 
        
                           src={Expensicons.DotIndicator} 
        
                           fill={props.brickRoadIndicator === 'error' ? colors.red : colors.green} 
        
                       /> 
        
                   </View> 
        
               )} 
        
               {Boolean(props.shouldShowRightIcon) && ( 
        
                   <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled]}> 
        
                       <Icon 
        
                           src={props.iconRight} 
        
                           fill={StyleUtils.getIconFillColor(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive))} 
        
                       /> 
        
                   </View> 
        
               )} 
        
               {props.shouldShowSelectedState && <SelectCircle isChecked={props.isSelected} />} 
        
           </View>

This part may have badge, subtitle, right avatars(workspace icons), right icon, and selected circle. It controls the spacing with margin-right and left as you can see below.

App/src/components/MenuItem.js

Line 181 in 7e957af

    
           badgeStyles={[styles.alignSelfCenter, (props.brickRoadIndicator ? styles.mr2 : undefined),

App/src/components/MenuItem.js

Line 188 in 7e957af

App/src/components/MenuItem.js

Line 197 in 7e957af

    
           <View style={[styles.justifyContentCenter, (props.brickRoadIndicator ? styles.mr2 : undefined)]}>

App/src/components/MenuItem.js

Line 209 in 7e957af

    
           <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.l1]}>

The main reason for this issue is that the left style(styles.l1) below

App/src/components/MenuItem.js

Line 209 in 7e957af

    
           <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.l1]}>

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

I suggest the use of flex gap instead of margin and left. Since the right icon and selected circle have special spacing, I'd like to split the right part of the menu into 2 sections: one includes badge, subtitle, avatars, and dot; one includes right icon and selected circle. And remove all margins and lefts and add flex-gap to these 2 views. The final code will look like.

<View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone]}>
    <View style={[styles.flexRow, styles.gap1, styles.pointerEventsNone]}>
        {Boolean(props.badgeText) && (
            <Badge
                text={props.badgeText}
                badgeStyles={[styles.alignSelfCenter, (props.focused || hovered || pressed) ? styles.hoveredButton : {}]}
            />
        )}
        {/* Since subtitle can be of type number, we should allow 0 to be shown */}
        {(props.subtitle || props.subtitle === 0) && (
            <View style={[styles.justifyContentCenter]}>
                <Text style={[styles.textLabelSupporting, props.style]}>
                    {props.subtitle}
                </Text>
            </View>
        )}
        {!_.isEmpty(props.floatRightAvatars) && (
            <View style={[styles.justifyContentCenter]}>
                <MultipleAvatars
                    isHovered={hovered}
                    isPressed={pressed}
                    icons={props.floatRightAvatars}
                    size={props.avatarSize || fallbackAvatarSize}
                    fallbackIcon={defaultWorkspaceAvatars.WorkspaceBuilding}
                    shouldStackHorizontally={props.shouldStackHorizontally}
                />
            </View>
        )}
        {Boolean(props.brickRoadIndicator) && (
            <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
                <Icon
                    src={Expensicons.DotIndicator}
                    fill={props.brickRoadIndicator === 'error' ? colors.red : colors.green}
                />
            </View>
        )}
    </View>
    <View style={[styles.flexRow, styles.pointerEventsNone]}>
        {Boolean(props.shouldShowRightIcon) && (
            <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled]}>
                <Icon
                    src={props.iconRight}
                    fill={StyleUtils.getIconFillColor(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive))}
                />
            </View>
        )}
        {props.shouldShowSelectedState && <SelectCircle isChecked={props.isSelected} />}
    </View>
</View>

This is good from the view of layout than using margin and left. And all items(in cases there are multiple items) would have the same spacing as you can see from the screenshot(simulated result).

Result

What alternative solutions did you explore? (Optional)

NA

melvin-bot · 2023-05-05T16:17:06Z

📣 @s-alves10! 📣
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>

s-alves10 · 2023-05-05T16:21:43Z

Contributor details
Your Expensify account email: sangar.work1028@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~017f19ed4dac2577df

melvin-bot · 2023-05-05T16:21:45Z

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

sobitneupane · 2023-05-08T08:05:45Z

Proposal from @Pujan92 looks good to me. Just waiting for his confirmation to verify it will not create any misalignment with badge and other icons possible in a MenuItem.

Pujan92 · 2023-05-08T11:57:25Z

@Pujan92 Thanks for your proposal. We also have Badge in the Settings Page. Is it also aligned with other icons with your proposal?

@sobitneupane sorry for the late reply, alignment of the items ends at the same position but the exact ending point of the content depends on its type where GBR/RBR icon of 20px width leaves some space from all sides.

sobitneupane · 2023-05-08T15:38:40Z

Thanks for the update @Pujan92.

Proposal from @Pujan92 looks good to me.

🎀👀🎀 C+ reviewed

cc: @puneetlath

melvin-bot · 2023-05-08T20:20:27Z

📣 @Pujan92 You have been assigned to this job by @puneetlath!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

Pujan92 · 2023-05-09T13:54:09Z

@sobitneupane @puneetlath PR is ready for review. Thanks!

melvin-bot · 2023-05-09T16:14:33Z

🎯 ⚡️ Woah @sobitneupane / @Pujan92, great job pushing this forwards! ⚡️

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

when @Pujan92 got assigned: 2023-05-08 20:20:27 Z
when the PR got merged: 2023-05-09 16:14:32 UTC

On to the next one 🚀

puneetlath · 2023-05-11T23:12:59Z

This is on staging.

melvin-bot · 2023-05-15T08:00:29Z

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

Fix: Workspaces icons and DotIndicator has inconsistent space with right icon #18639

If no regressions arise, payment will be issued on 2023-05-22. 🎊

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 @dhanashree-sawant
Contributor that fixed the issue @Pujan92
Contributor+ that helped on the issue and/or PR @sobitneupane

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-05-15T08:00:31Z

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:

[@sobitneupane] The PR that introduced the bug has been identified. Link to the PR:
[@sobitneupane] 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:
[@sobitneupane] 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:
[@sobitneupane] Determine if we should create a regression test for this bug.
[@sobitneupane] 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.
[@puneetlath] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

puneetlath · 2023-05-15T18:31:52Z

Sent hiring offers.

@sobitneupane friendly reminder on the checklist. Since this is just a padding issue, I think a regression test isn't needed.

puneetlath · 2023-05-22T14:44:55Z

@dhanashree-sawant and @Pujan92 have been paid.

@sobitneupane reminder on the checklist and then I can get you paid out as well!

sobitneupane · 2023-05-22T14:58:23Z

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:

[@sobitneupane] The PR that introduced the bug has been identified. Link to the PR:

#11784

[@sobitneupane] 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:

https://github.com/Expensify/App/pull/11784/files#r1200631989

[@sobitneupane] 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:

https://expensify.slack.com/archives/C049HHMV9SM/p1684767489663959

puneetlath · 2023-05-22T16:08:16Z

Thanks @sobitneupane.

All paid now!

kavimuru added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels May 4, 2023

melvin-bot bot assigned puneetlath May 4, 2023

puneetlath added the External Added to denote the issue can be worked on by a contributor label May 4, 2023

melvin-bot bot changed the title ~~Workspaces icons and green dot has inconsistent padding~~ [$1000] Workspaces icons and green dot has inconsistent padding May 4, 2023

melvin-bot bot assigned sobitneupane May 4, 2023

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

melvin-bot bot added the Overdue label May 8, 2023

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

puneetlath assigned Pujan92 May 8, 2023

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label May 8, 2023

Pujan92 mentioned this issue May 9, 2023

Fix: Workspaces icons and DotIndicator has inconsistent space with right icon #18639

Merged

57 tasks

melvin-bot bot added the Overdue label May 11, 2023

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Overdue Daily KSv2 labels May 11, 2023

melvin-bot bot changed the title ~~[$1000] Workspaces icons and green dot has inconsistent padding~~ [HOLD for payment 2023-05-22] [$1000] Workspaces icons and green dot has inconsistent padding May 15, 2023

melvin-bot bot added the Overdue label May 15, 2023

melvin-bot bot added Daily KSv2 and removed Overdue Weekly KSv2 labels May 15, 2023

sobitneupane mentioned this issue May 22, 2023

Workspaces list #11784

Merged

91 tasks

puneetlath closed this as completed May 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HOLD for payment 2023-05-22] [$1000] Workspaces icons and green dot has inconsistent padding #18418

[HOLD for payment 2023-05-22] [$1000] Workspaces icons and green dot has inconsistent padding #18418

kavimuru commented May 4, 2023 •

edited by melvin-bot bot

Loading

MelvinBot commented May 4, 2023

MelvinBot commented May 4, 2023

Pujan92 commented May 4, 2023 •

edited

Loading

MelvinBot commented May 4, 2023

MelvinBot commented May 4, 2023

MelvinBot commented May 4, 2023

MelvinBot commented May 4, 2023

sethraj14 commented May 4, 2023

melvin-bot bot commented May 4, 2023

sethraj14 commented May 4, 2023

melvin-bot bot commented May 4, 2023

sobitneupane commented May 5, 2023 •

edited

Loading

s-alves10 commented May 5, 2023 •

edited

Loading

melvin-bot bot commented May 5, 2023

s-alves10 commented May 5, 2023

melvin-bot bot commented May 5, 2023

sobitneupane commented May 8, 2023 •

edited

Loading

Pujan92 commented May 8, 2023

sobitneupane commented May 8, 2023

melvin-bot bot commented May 8, 2023

Pujan92 commented May 9, 2023

melvin-bot bot commented May 9, 2023

puneetlath commented May 11, 2023

melvin-bot bot commented May 15, 2023 •

edited by puneetlath

Loading

melvin-bot bot commented May 15, 2023 •

edited by puneetlath

Loading

puneetlath commented May 15, 2023

puneetlath commented May 22, 2023

sobitneupane commented May 22, 2023

puneetlath commented May 22, 2023

[HOLD for payment 2023-05-22] [$1000] Workspaces icons and green dot has inconsistent padding #18418

[HOLD for payment 2023-05-22] [$1000] Workspaces icons and green dot has inconsistent padding #18418

Comments

kavimuru commented May 4, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

MelvinBot commented May 4, 2023

MelvinBot commented May 4, 2023

Bug0 Triage Checklist (Main S/O)

Pujan92 commented May 4, 2023 • edited Loading

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?

MelvinBot commented May 4, 2023

MelvinBot commented May 4, 2023

MelvinBot commented May 4, 2023

MelvinBot commented May 4, 2023

sethraj14 commented May 4, 2023

melvin-bot bot commented May 4, 2023

sethraj14 commented May 4, 2023

melvin-bot bot commented May 4, 2023

sobitneupane commented May 5, 2023 • edited Loading

s-alves10 commented May 5, 2023 • edited Loading

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 May 5, 2023

s-alves10 commented May 5, 2023

melvin-bot bot commented May 5, 2023

sobitneupane commented May 8, 2023 • edited Loading

Pujan92 commented May 8, 2023

sobitneupane commented May 8, 2023

melvin-bot bot commented May 8, 2023

Pujan92 commented May 9, 2023

melvin-bot bot commented May 9, 2023

puneetlath commented May 11, 2023

melvin-bot bot commented May 15, 2023 • edited by puneetlath Loading

melvin-bot bot commented May 15, 2023 • edited by puneetlath Loading

puneetlath commented May 15, 2023

puneetlath commented May 22, 2023

sobitneupane commented May 22, 2023

puneetlath commented May 22, 2023

kavimuru commented May 4, 2023 •

edited by melvin-bot bot

Loading

Pujan92 commented May 4, 2023 •

edited

Loading

sobitneupane commented May 5, 2023 •

edited

Loading

s-alves10 commented May 5, 2023 •

edited

Loading

sobitneupane commented May 8, 2023 •

edited

Loading

melvin-bot bot commented May 15, 2023 •

edited by puneetlath

Loading

melvin-bot bot commented May 15, 2023 •

edited by puneetlath

Loading