[$500] Fix style regressions caused by new Global Nav component

[kbecciv]

This issue handles all regressions stemmed from the addition if the new Global Nav component in this PR. Any proposals should handle all these regressions. Please refer to the screenshots attached for the new design requirements to solve these issues.

cc: @allroundexperts

• Sign in button on Global Nav is cropped (the original issue)
  

• Avatar on Global Nav is cropped

• Avatar on Global Nav is very close to the native icons on desktop

• Settings Background for profile details Header is changed unintentionally while refactoring LHN

• Sign in banner for anonymous user don't have a highlighted green background color

[namhihi237]

Proposal

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

Sign in button and avatar with status should fit into the Sub LHN

What is the root cause of that problem?

Currently, global navigation has width 72px

App/src/styles/variables.ts

Lines 83 to 84 in 389d7b0

	globalNavigationWidth: 72,
	sideBarWidth: 303 + 72,

But the button sign-in has width 80px.

App/src/styles/styles.js

Lines 2296 to 2298 in 389d7b0

	signInButtonAvatar: {
	width: 80,
	},

When using set status we have sidebarStatusAvatarContainer width 84px so it will crop the avatar

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

we can increase the width of global navigation to 86px or more, I think 92 is better, and we should center the float button.
The better we should wait for the design for that.

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01289f055aecd3e696

[melvin-bot]

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

[ishpaul777]

Proposal

Problem

Sign in button for anonymous user on New LHN Nav is not fitting properly.

Problem

Sign in Button has a width of 82 px while the globalNavigation container has width of 70 px so the sign in button does not fit in container

Changes

We can increase the size for the globalNavigation container to fit the sign in button but that would decrease the size for the container for chats, especially for small screen devices.

Also the decreasing the size for sign in button won't look appealing.

IMO, we should not the change the position for the sign in button and keep it next to the Search Icon. We can remove the avatar when user is not signed in or have the avatar but the onPress action should redirect sign in button we can use Session.checkIfActionIsAllowed for this.

edit -
Just noticed that the same issue is reproduced if signed in user sets a status the staus and avatar also not fit in the container. I think we should let the Design team decide the expected behaviour here

[ZhenjaHorbach]

Proposal

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

The button is too big for sidebar

What is the root cause of that problem?

Sidebar width(72) is smaller than the button(80)

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

First we need to look at the sidebar styles

App/src/pages/home/sidebar/GlobalNavigation/index.js

Line 32 in 389d7b0

<View style={[styles.ph5, styles.pv3, styles.alignItemsCenter, styles.h100, styles.globalNavigation]}>

The most interesting thing for us is styles.ph5 and styles.globalNavigation

When these styles were created, perhaps the idea was that the width of the sidebar would be 72(styles.globalNavigation) + 20/20(styles.ph5)

But since in react native box-sizing is equal to border-box
We get the width which equals only 72

And if my theory is correct
Then in this case we need to increase the width to 112 (but 92 is better )
In which 72 is content and 20+20(10+10) is the border

What alternative solutions did you explore? (Optional)

The best way to fix this is to first contact the designers ))))

[ashishBajracharyaFrostidi]

the sidebar has a fixed width which is causing this issue, giving a variable width to the sidebar relative to the button width will solve this issue, even in the future if the button text changes or the font size increases, it won't cause a problem. #simpleCSSHacks

[melvin-bot]

📣 @ashishBajracharyaFrostidi! 📣
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:

1. Make sure you've read and understood the contributing guidelines.
2. 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.
3. 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.
4. 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>

[ashishBajracharyaFrostidi]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~0135bbe272a370da40

[melvin-bot]

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

[maxconnectAbhi]

Proposal

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

Login - Sign in button for anonymous user on New LHN Nav is not fitting

What is the root cause of that problem?

Sign in Button has a width of 82 px while the globalNavigation container has width of 70 px so the sign in button does not fit in container

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

We should make the width for sign in button 95% of the container here
width: '95%'

App/src/styles/styles.js

Lines 2296 to 2298 in 389d7b0

	signInButtonAvatar: {
	width: 80,
	},

What alternative solutions did you explore? (Optional)

NA

[hayata-suenaga]

🚨 Can you combine this issue with this issue?

[melvin-bot]

Triggered auto assignment to @zanyrenney (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

[hayata-suenaga]

melvin, please remove the overdue label.

[hayata-suenaga]

assigning myself as this is a regression from a wave 8 issue

[hayata-suenaga]

@zanyrenney could you handle the payment according to this suggestion?

[melvin-bot]

Current assignee @zanyrenney is eligible for the Bug assigner, not assigning anyone new.

[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

[zanyrenney]

https://www.upwork.com/jobs/~01a3d3d2d9336a21ba @ishpaul777 have invited you to the job.

[ishpaul777]

@zanyrenney Thanks! I accepted the invite

[melvin-bot]

@zanyrenney, @robertKozik, @0xmiroslav, @hayata-suenaga, @situchan Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[hayata-suenaga]

if the payment has been completed, we can close this issue 🙇

[situchan]

@hayata-suenaga can you please remove Reviewing which prevents adding Overdue? This way, @zanyrenney will be bumped every few days

[hayata-suenaga]

we're waiting for the payment?

[hayata-suenaga]

Please handle the payment according to this suggestion please 🙇

[situchan]

I noticed that @zanyrenney's slack status indicates OOO until Wed

[zanyrenney]

payment summary - @ishpaul777 $50 for regression reports.
@situchan $500 for C+ review

As per this comment, closing.

[zanyrenney]

Paid @situchan through bonus due to problem with hourly contract.

[zanyrenney]

Paid @situchan via a bonus as I messed up the orignal offer and made it hourly. Closing!

[zanyrenney]