[HOLD for payment Aug 18] Add Phone Number row doesn't follow the correct styling

[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!

Upwork post: https://www.upwork.com/jobs/~015cb8be422e99db23

---

Action Performed:

1. Navigate to profile settings
2. Check the Add Phone number line

Expected Result:

Add phone number line should be the same styling as the rest of the profile settings page.

Actual Result:

Styling is different, notice how the text is not bold and that there is no padding above/below the row.

Workaround:

None needed, visual issue.

Platform:

Where is this issue occurring?

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

Version Number: 1.0.83-0

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

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

View all open jobs on Upwork

---

From @shawnborton https://expensify.slack.com/archives/C01GTK53T8Q/p1628580981143900

The Add Phone Number option row does not follow the same styling as other option rows. Notice how the text is not bold and that there is no padding above/below the row.

[Santhosh-Sellavel]

Proposal

Need to change in LoginField.js file.
We can replace the following lines,

App/src/pages/settings/Profile/LoginField.js

Lines 88 to 102 in 8a35ea5

	<Pressable
	style={[styles.createMenuItem, styles.ph0]}
	onPress={() => Navigation.navigate(ROUTES.getSettingsAddLoginRoute(this.props.type))}
	>
	<View style={styles.flexRow}>
	<View style={styles.createMenuIcon}>
	<Icon src={Plus} />
	</View>
	<View style={styles.justifyContentCenter}>
	<Text style={[styles.createMenuText, styles.ml3]}>
	{`${this.props.translate('common.add')} ${this.props.label}`}
	</Text>
	</View>
	</View>
	</Pressable>

With our existing MenuItem component as below.

Post Fix:

[Santhosh-Sellavel]

@sketchydroide
Proposed changes are available in drafted PR. Additionally after discussion with @shawnborton here, removed left & right padding. Those changes are also included in the drafted PR.
Once you say go head, I'll wrap my PR work & mark ready for review thanks.

[sketchydroide]

Yeah I'm happy with that solution, go on and make the PR ready for review 👍🏼

[Santhosh-Sellavel]

Thanks for the confirmation, @sketchydroide, I'll add screenshots and mark PR ready for review.

Kindly create an Upwork job for this thanks!

[MelvinBot]

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

[Jag96]

@Santhosh-Sellavel please be sure to read our contributing guidelines, next time please do not create a PR for the issue until your proposal has been approved.

I've exported the issue to Upwork, please apply here!

[Santhosh-Sellavel]

@Santhosh-Sellavel please be sure to read our contributing guidelines, next time please do not create a PR for the issue until your proposal has been approved.

I've exported the issue to Upwork, please apply here!

@Jag96
Sorry , I already have a couple more PR in draft state. Will not open any further until proposal is accepted.

[Santhosh-Sellavel]

@Jag96 Applied for job!

[Jag96]

Sorry , I already have a couple more PR in draft state. Will not open any further until proposal is accepted.

Thanks, for those issues can you please close any draft PRs that don't have an accepted proposal? Then, if your proposal ends up being accepted you can just re-open the associated draft.

[Santhosh-Sellavel]

Sorry , I already have a couple more PR in draft state. Will not open any further until proposal is accepted.

Thanks, for those issues can you please close any draft PRs that don't have an accepted proposal? Then, if your proposal ends up being accepted you can just re-open the associated draft.

Done! @Jag96

[Jag96]

Paid!