Start chat - The padding of the 'Next' button is not proportional

[vincdargento]

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

---

Version Number: v9.0.72-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5305506
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Open the app or go to: https://staging.new.expensify.com/
2. Loggin with an account with multiple contacts
3. Click on FAB > Start chat
4. Click on any contact 'Add to group'

Expected Result:

The padding of the ‘Next’ button should be aligned proportionally.

Actual Result:

The padding of the ‘Next’ is not proportional.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

bug.mov

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @sakluger (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[nyomanjyotisa]

Edited by proposal-police: This proposal was edited at 2024-12-06 00:31:38 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

The padding/margin of the 'Next' button is not proportional on Start chat

What is the root cause of that problem?

We don't set any margin/padding top on the next button, but instead we set margin bottom on the ReferralProgramCTA

App/src/pages/NewChatPage.tsx

Lines 287 to 300 in 840c227

	<ReferralProgramCTA
	referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.START_CHAT}
	style={selectedOptions.length ? styles.mb5 : undefined}
	/>
	{!!selectedOptions.length && (
	<Button
	success
	large
	text={translate('common.next')}
	onPress={createGroup}
	pressOnEnter
	/>
	)}

What changes do you think we should make in order to solve the problem?

Add margin top to the button

                    <Button
                        style={styles.mt5}
                        success
                        large
                        text={translate('common.next')}
                        onPress={createGroup}
                        pressOnEnter
                    />

And remove the margin bottom on the ReferralProgramCTA

App/src/pages/NewChatPage.tsx

Lines 287 to 290 in 840c227

	<ReferralProgramCTA
	referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.START_CHAT}
	style={selectedOptions.length ? styles.mb5 : undefined}
	/>

Might need to add margin top on the ReferralProgramCTA as well only if the CTA displayed

Result

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

[neonbhai]

This might be expected 🤔

cc: @Expensify/Design

[jacobkim9881]

I agree with @neonbhai. There is <ReferralProgramCTA> so may padding/margin top not be needed. W/o <ReferralProgramCTA> it seems the next button short of padding/margin top.

[melvin-bot]

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

[sakluger]

Given that this is a simple alignment issue, I think that a $125 bounty is appropriate. Feel free to let me know if this is more complex and you think it requires a higher bounty.

I agree with the expected behavior in the OP - I think that the Next button should have some top padding. But just to be sure, let's get @Expensify/design to confirm before I add the external label and set a price.

[dannymcclain]

It is expected for the footer button to not have any top margin/padding. Here's another example from the submit expense flow:

[shawnborton]

Yeah that's my understanding as well Danny.

[sakluger]

Oh interesting, thanks for confirming! Looks odd to me, but if it's expected behavior, then we can close the issue.