[HOLD for payment 2021-10-05] Fix alignment of button text in the Workspace Expensify Card tab on mobile

[MitchExpensify]

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. Create workspace
2. Enter Expensify Card tab
3. See the "Get Started" and "Help" buttons are not properly aligned on the vertical axis:

Expected Result:

"Get Started" and "Help" should be center aligned on the vertical / horizontal axis.

Actual Result:

"Get Started" is above the centered vertical axis
"Help" is below the centered vertical axis.

Platform:

• iOS
• Android

Upwork job link: https://www.upwork.com/jobs/~01e5f92bebfeced9e3

View all open jobs on GitHub

[MelvinBot]

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

[MelvinBot]

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

[PrashantMangukiya]

If this issue considered as external, this should be solution:

At this position same button shows different label depending on the flow i.e. Add email, Manage cards, Finish setup, and Get started etc. So once we make it center it shows button with all above label in center because common button used for different operation.

At present on large screen this button shows left, better to keep it left for large screen. We should set it centre for if small screen device (not just iOS, Android) by adding style after line 193 src/pages/workspace/WorkspaceCardPage.js

App/src/pages/workspace/WorkspaceCardPage.js

Lines 189 to 202 in 5cea12c

	<Button
	style={[
	styles.alignSelfStart,
	styles.workspaceCardCTA,
	isSmallScreenWidth ? styles.wAuto : {},
	]}
	textStyles={
	!isSmallScreenWidth ? [styles.pr5, styles.pl5] : []
	}
	onPress={onPress}
	success
	large
	text={buttonText}
	/>

  <Button
      style={[
          styles.alignSelfStart,
          styles.workspaceCardCTA,
          isSmallScreenWidth ? styles.wAuto : {},
          isSmallScreenWidth ? styles.alignSelfCenter : {},       // **** Add this line  **** 
      ]}
      textStyles={
          !isSmallScreenWidth ? [styles.pr5, styles.pl5] : []
      }
      onPress={onPress}
      success
      large
      text={buttonText}
  />

[kevinksullivan]

Hm @MitchExpensify should the button be centered? On web it isn't, so I am curious why it should be for a smaller screen?

[MonilBhavsar]

I think there is misunderstanding, @MitchExpensify meant alignment of Button text and not whole button. The Get started text is not vertically aligned and slightly above vertical axis.

[kevinksullivan]

Ah, got it. Thanks for clarifying @MonilBhavsar

[MonilBhavsar]

No worries, The issue is only reproducible on iOS and Android device. Can't reproduce on Mobile screen on web.