Merge pull request Expensify#65188 from parasharrajat/parasharrajat/onboarding-ui-fix

Fix irregular gap between buttons among the screens in Onboarding flow

Author: arosiclair

src/components/FormAlertWithSubmitButton.tsx

@@ -104,7 +104,7 @@ function FormAlertWithSubmitButton({
     shouldPreventDefaultFocusOnPress = false,
 }: FormAlertWithSubmitButtonProps) {
     const styles = useThemeStyles();
-    const style = [footerContent && addButtonBottomPadding ? styles.mb3 : {}, buttonStyles];
+    const style = [!shouldRenderFooterAboveSubmit && footerContent && addButtonBottomPadding ? styles.mb3 : {}, buttonStyles];
 
     // Disable pressOnEnter for Android Native to avoid issues with the Samsung keyboard,
     // where pressing Enter saves the form instead of adding a new line in multiline input.

src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

@@ -332,7 +332,7 @@ function BaseValidateCodeForm({
                         isDisabled={isOffline}
                         text={submitButtonText ?? translate('common.verify')}
                         onPress={validateAndSubmitForm}
-                        style={[styles.mt4]}
+                        style={[shouldShowSkipButton ? styles.mt3 : styles.mt4]}
                         success
                         large
                         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing

src/pages/OnboardingWorkEmail/BaseOnboardingWorkEmail.tsx

@@ -158,25 +158,24 @@ function BaseOnboardingWorkEmail({shouldUseNativeStyles}: BaseOnboardingWorkEmai
                 shouldValidateOnChange={shouldValidateOnChange}
                 shouldTrimValues={false}
                 footerContent={
-                    <View style={styles.mb2}>
-                        <OfflineWithFeedback
-                            shouldDisplayErrorAbove
-                            errors={onboardingErrorMessage ? {addWorkEmailError: onboardingErrorMessage} : undefined}
-                            errorRowStyles={[styles.mt2, styles.textWrap]}
-                            onClose={() => setOnboardingErrorMessage('')}
-                        >
-                            <Button
-                                large
-                                text={translate('common.skip')}
-                                testID="onboardingPrivateEmailSkipButton"
-                                onPress={() => {
-                                    setOnboardingErrorMessage('');
-
-                                    setOnboardingMergeAccountStepValue(true, true);
-                                }}
-                            />
-                        </OfflineWithFeedback>
-                    </View>
+                    <OfflineWithFeedback
+                        shouldDisplayErrorAbove
+                        style={styles.mb3}
+                        errors={onboardingErrorMessage ? {addWorkEmailError: onboardingErrorMessage} : undefined}
+                        errorRowStyles={[styles.mt2, styles.textWrap]}
+                        onClose={() => setOnboardingErrorMessage('')}
+                    >
+                        <Button
+                            large
+                            text={translate('common.skip')}
+                            testID="onboardingPrivateEmailSkipButton"
+                            onPress={() => {
+                                setOnboardingErrorMessage('');
+
+                                setOnboardingMergeAccountStepValue(true, true);
+                            }}
+                        />
+                    </OfflineWithFeedback>
                 }
                 shouldRenderFooterAboveSubmit
                 shouldHideFixErrorsAlert