fix: input styles

[parasharrajat]

Details

#5462 (comment)

Fixed Issues

$ #5462

Tests | QA Steps

Open NewDot on all the below-listed platforms one by one and follow the following procedure.

1. Open Profile Page.
2. Check the Input for FirstName and LastName is proper as per the issue description.
3. Check the Pronoun Dropdown is proper.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web | Desktop

Mobile Web

iOS

Android

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[parasharrajat]

@pecanoro Sadly this was supposed to be on n6-hold. But it's not a big one so I will take care of any issues if caused by this.

@shawnborton Please have a look and let me know what do you think about the changes?

It's merged but I have an open follow-up if you have some changes.

[shawnborton]

Based on this screenshot here:

It looks like there is a difference in the location of the form label depending on whether or not we use a text input or a selector. These should literally be exactly the same location - the only difference is that one of them has a dropdown arrow and the other doesn't.

[parasharrajat]

Yeah, It looks like it. Let me check

[parasharrajat]

@shawnborton How about this?

[shawnborton]

I think that looks good, but to make sure, can you update the text input and the select menu to have the same exact labels and values? This will make it very easy to compare (by putting them on top of each other)

[parasharrajat]

@shawnborton Does this work?

[shawnborton]

Great! So it looks like the value is in the same place on both, but the label is off by 1px. On the select menu, the label is 1px lower than on the select menu.

But that being said, I think the value actually needs to go up by 1px as well.

So to recap:

• label position of the text input above
• value position goes up by 1px on both

[parasharrajat]

What did you say?

1. Position the label towards up by 1px in input.
2. and move the value in both up by 1px.

[shawnborton]

Ah let me rephrase:

1. Move the label of the select menu up by 1px. The label on the text input is good.
2. Move the value in both up by 1px

[marcaaron]

I think this maybe caused a regression to our error styles 😢

All of these fields are now missing outlines.

[aldo-expensify]

The missing outline for ExpensiPicker seems to be related to this change:

https://github.com/Expensify/App/pull/5742/files#diff-8ab8ba45ab927f1430b8d1209d187e003a9cdfe476f809e4483ef64cdba253ebL542-R551

I may be wrong, but it looks like the border was moved from the picker's outer container to the picker itself? so maybe the red border color wasn't moved consistently.

[aldo-expensify]

It looks like the Company address field lost support for the red outline and error text when it changed to use the new AddressSearch component.

App/src/pages/ReimbursementAccount/CompanyStep.js

Lines 183 to 187 in 50beee9

	<AddressSearch
	label={this.props.translate('common.companyAddress')}
	containerStyles={[styles.mt4]}
	value={`${this.state.addressStreet} ${this.state.addressCity} ${this.state.addressState} ${this.state.addressZipCode}`}
	onChangeText={(fieldName, value) => this.clearErrorAndSetValue(fieldName, value)}

So, this PR only caused the regression for the ExpensiPicker (State and Company Type fields)

[parasharrajat]

This PR was never supposed to merge at this time. But I will submit another asap.

[parasharrajat]

Created a PR to fix the Border issue and other input issues. #5805
cc: @marcaaron @aldo-expensify

[OSBotify]

🚀 Deployed to staging by @pecanoro in version: 1.1.7-25 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by @roryabraham in version: 1.1.8-9 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅