fix offline indicator styling

software-mansion-labs · Apr 4, 2024 · 9d96aec · 9d96aec
1 parent da9a6c7
commit 9d96aec
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/src/components/FormAlertWithSubmitButton.tsx b/src/components/FormAlertWithSubmitButton.tsx
@@ -75,7 +75,7 @@ function FormAlertWithSubmitButton({
     errorMessageStyle,
 }: FormAlertWithSubmitButtonProps) {
     const styles = useThemeStyles();
-    const style = [!footerContent ? {} : styles.mb3, buttonStyles];
+    const style = [!footerContent ? {} : (styles.mb3, buttonStyles)];
 
     return (
         <FormAlertWrapper

diff --git a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx
@@ -74,6 +74,8 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
         return errors;
     };
 
+    const PersonalDetailsFooterInstance = <OfflineIndicator />;
+
     return (
         <View style={[styles.h100, styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}>
             <HeaderWithBackButton
@@ -88,6 +90,7 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
                 <FormProvider
                     style={[styles.flexGrow1, shouldUseNarrowLayout && styles.mt5, shouldUseNarrowLayout ? styles.mh8 : styles.mh5]}
                     formID={ONYXKEYS.FORMS.ONBOARDING_PERSONAL_DETAILS_FORM}
+                    footerContent={isSmallScreenWidth && PersonalDetailsFooterInstance}
                     validate={validate}
                     onSubmit={saveAndNavigate}
                     submitButtonText={translate('common.continue')}
@@ -131,7 +134,6 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
                         />
                     </View>
                 </FormProvider>
-                {isSmallScreenWidth && <OfflineIndicator />}
             </KeyboardAvoidingView>
         </View>
     );

diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx
@@ -47,6 +47,8 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, on
     const [error, setError] = useState(false);
     const theme = useTheme();
 
+    const PurposeFooterInstance = <OfflineIndicator />;
+
     useEffect(() => {
         setSelectedPurpose(onboardingPurposeSelected ?? undefined);
     }, [onboardingPurposeSelected]);
@@ -142,6 +144,7 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, on
                     </ScrollView>
                     <FormAlertWithSubmitButton
                         enabledWhenOffline
+                        footerContent={isSmallScreenWidth && PurposeFooterInstance}
                         buttonText={translate('common.continue')}
                         onSubmit={() => {
                             if (!selectedPurpose) {
@@ -155,7 +158,6 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, on
                         isAlertVisible={error || Boolean(errorMessage)}
                         containerStyles={[styles.w100, styles.mb5, styles.mh0, paddingHorizontal]}
                     />
-                    {isSmallScreenWidth && <OfflineIndicator />}
                 </View>
             )}
         </SafeAreaConsumer>