[HOLD for payment 2021-09-15] Log in - Language picker has a double lined border

[isagoico]

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:

1. Navigate to staging.new.expensify.com
2. Use the language picker

Expected Result:

Language picker has a regular border

Actual Result:

Language picker has a double lined border

Workaround:

N/A. Visual issue.

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.0.90-2

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

View all open jobs on GitHub

---

Found while retesting #4958 (comment) - added the external label because of @roryabraham comment below.

[MelvinBot]

Triggered auto assignment to @Luke9389 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

Triggered auto assignment to @jliexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[jliexpensify]

Internal: https://www.upwork.com/ab/applicants/1432877129250586624/job-details
External: https://www.upwork.com/jobs/~0115fca5ef203e4abf

[meetmangukiya]

I think this happens with all ExpensiPicker that are size small.

Proposal

We have to set border: none for web, and remove border styling from inputWeb, inputIOS, inputAndroid like we are doing for normal sized components here

App/src/styles/styles.js

Lines 591 to 596 in 1f332a6

	inputWeb: {
	appearance: 'none',
	cursor: disabled ? 'not-allowed' : 'pointer',
	border: 'none',
	...expensiPicker,
	},

This also means that whole styles.picker remains unused and should be deleted IMO, was very confusing until I figured it wasn't used.

App/src/styles/styles.js

Lines 314 to 362 in 1f332a6

	picker: {
	inputIOS: {
	flex: 1,
	borderWidth: 1,
	borderRadius: variables.componentBorderRadiusNormal,
	borderColor: themeColors.border,
	paddingTop: 25,
	paddingHorizontal: 12,
	paddingBottom: 8,
	justifyContent: 'center',
	height: '100%',
	backgroundColor: themeColors.componentBG,
	},
	inputWeb: {
	fontFamily: fontFamily.GTA,
	fontSize: variables.fontSizeNormal,
	paddingLeft: 12,
	paddingRight: 12,
	paddingTop: 10,
	paddingBottom: 10,
	borderWidth: 1,
	borderRadius: variables.componentBorderRadius,
	borderColor: themeColors.border,
	color: themeColors.text,
	appearance: 'none',
	height: variables.inputComponentSizeNormal,
	opacity: 1,
	cursor: 'pointer',
	},
	inputAndroid: {
	fontFamily: fontFamily.GTA,
	fontSize: variables.fontSizeNormal,
	paddingLeft: 12,
	paddingRight: 12,
	paddingTop: 10,
	paddingBottom: 10,
	borderWidth: 1,
	borderRadius: variables.componentBorderRadius,
	borderColor: themeColors.border,
	color: themeColors.text,
	height: variables.inputComponentSizeNormal,
	opacity: 1,
	},
	iconContainer: {
	top: 12,
	right: 12,
	pointerEvents: 'none',
	},
	},

[shawnborton]

I posted about this in Slack and it looks like @parasharrajat is already taking care of this: #4810

[parasharrajat]

Sorry, Shawn but I didn't notice the double border on firefox so this issue was missed. I can send a follow-up, if needed.

[shawnborton]

I think we should follow up and fix it - ideally the border behavior here looks like our text inputs.

[parasharrajat]

Sure, sending a follow up.

[gnylytsya]

submit

[parasharrajat]

PR is here #4986.

[jliexpensify]

Hi @Luke9389 / @roryabraham / @shawnborton - just a little confused as to what's happening!

My understanding is that Rajat has already submitted a PR that will resolve this issue.

Am I paying Rajat as he's fixing it?

[roryabraham]

Okay, I'd actually say that this is a duplicate of #4513, specifically this line-item from the expected result:

The picker theme should match with the theme of other Pickers.

Given that:

• this other PR was already supposed to fix the small picker styles
• This is essentially a minor regression caused by fix Locale Picker and small picker styles #4810
• Rajat has already been hired to fix [Network] Language Picker on Login Page call the API unnecessarily & does not behave correctly #4513

We should just close out this issue and the associated Upwork job.

[jliexpensify]

Cheers, job closed.

[botify]

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

[botify]

🚀 Deployed to staging by @Luke9389 in version: 1.0.93-2 🚀

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

[botify]

🚀 Deployed to production by @yuwenmemon in version: 1.0.94-1 🚀

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