Fix alignment of hyperlink in ValidateStep message within VBA flow

[kevinksullivan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Create workspace
2. Go through VBA flow with test credentials in (1)
3. Arrive at ValidateStep explaining there is a message from concierge with next steps

Expected Result:

The here hyperlink should be aligned with the other text in the rightpane.

Actual Result:

The here hyperlink it misaligned.

Platform:

• iOS
• Android

Reproducible in staging?: Yes
Reproducible in production?: Yes

Notes/Photos/Videos:

Expensify/Expensify Issue URL:

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @jboniface (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[MelvinBot]

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

[PrashantMangukiya]

If considered as external, this could be solution:

We have to change line 232-234 from below code:

App/src/pages/ReimbursementAccount/ValidationStep.js

Lines 230 to 236 in 5cea12c

	<Text style={[styles.mh5, styles.mb5, styles.flex1]}>
	{this.props.translate('validationStep.reviewingInfo')}
	<TextLink onPress={this.navigateToConcierge}>
	{this.props.translate('common.here')}
	</TextLink>
	{this.props.translate('validationStep.forNextSteps')}
	</Text>

Method 1: Adjust iOS/Android bottom margin. Not accurate. (I will not suggest) Other serious problem is, If link text goes to multiline then link text will mangle with other text. So I will not suggest to go with this at moment.

<TextLink onPress={this.navigateToConcierge} style={[{marginBottom: Platform.OS === CONST.PLATFORM.IOS ? -3 : -4}]}>
    {this.props.translate('common.here')}
</TextLink>

As per guideline inline style not preferred, so we can create style within src/styles/styles.js and refactor as under:

textNormalSupporting: os => ({
    marginBottom: os === CONST.PLATFORM.IOS ? -3 : -4,
}),

<TextLink onPress={this.navigateToConcierge}  style={[styles.textNormalSupporting(Platform.OS)]} >
    {this.props.translate('common.here')}
</TextLink>

Method 2: Change <TextLink> to <Text> (Suggested)
Aligned proper with other text in all platform. One minus point is mouse over (hover) color change effect does not show in web and desktop.

<Text onPress={this.navigateToConcierge} style={styles.link} accessible accessibilityLabel={this.props.translate('common.here')}>
    {this.props.translate('common.here')}
</Text>

Below are Screenshots having Method 1 and Method 2 written side by side

iOS

Android

Web

Mobile Web

Desktop

[MelvinBot]

@jasperhuangg Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[isagoico]

This is also reproducible in other hyperlinks around the app (Only on Android)

Android - Links - Links are not aligned with text.

Action Performed:

1. Launch the app
2. Log in with any account
3. Go to Concierge

Expected Result:

Links are rendered on the same line as text.

Actual Result:

Links are not aligned with text. This can bee seen in any hyperlinked text around the app.

Workaround:

None need. Visual issue.

Platform:

Where is this issue occurring?

• Android

Version Number: 1.1.0

Reproducible in staging?: yes
Reproducible in production?: yes

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

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

Issue reported by: Applause
Slack conversation:

View all open jobs on GitHub

[jasperhuangg]

Hey! Sorry, plate super full lately with User-Created Policy Rooms and midterm season fast approaching.

This issue looks totally doable by an external contributor. Specifically, I like @PrashantMangukiya's second solution 👍

[MelvinBot]

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

[jasperhuangg]

@puneetlath Please let whoever is working on this know to request me for review!

[MelvinBot]

@puneetlath, @jasperhuangg Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[jasperhuangg]

@puneetlath Friendly bump!

[MitchExpensify]

Closing in favor of https://github.com/Expensify/Expensify/issues/179254

Slack thread