Hack a footer into the logged out view

src/screens/Signup/index.tsx

@@ -6,7 +6,6 @@ import {AppBskyGraphStarterpack} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {FEEDBACK_FORM_URL} from '#/lib/constants'
 import {logger} from '#/logger'
 import {useServiceQuery} from '#/state/queries/service'
 import {useStarterPackQuery} from '#/state/queries/starter-packs'
@@ -22,11 +21,8 @@ import {
 import {StepCaptcha} from '#/screens/Signup/StepCaptcha'
 import {StepHandle} from '#/screens/Signup/StepHandle'
 import {StepInfo} from '#/screens/Signup/StepInfo'
-import {atoms as a, native, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, native, useTheme} from '#/alf'
-import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
-import {Divider} from '#/components/Divider'
 import {LinearGradientBackground} from '#/components/LinearGradientBackground'
-import {InlineLinkText} from '#/components/Link'
 import {ScreenTransition} from '#/components/ScreenTransition'
 import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
@@ -41,7 +37,6 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
     ...initialState,
     analytics: ax,
   })
-  const {gtMobile} = useBreakpoints()
   const submit = useSubmitSignup()
 
   useEffect(() => {
@@ -167,13 +162,7 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
               <ScreenTransition
                 key={state.activeStep}
                 direction={state.screenTransitionDirection}>
-                <View
+                <View style={[a.flex_1, a.px_xl, a.pt_2xl]}>
-                  style={[
-                    a.flex_1,
-                    a.px_xl,
-                    a.pt_2xl,
-                    !gtMobile && {paddingBottom: 100},
-                  ]}>
                   <View style={[a.gap_sm, a.pb_3xl]}>
                     <Text
                       style={[a.font_semi_bold, t.atoms.text_contrast_medium]}>
@@ -210,33 +199,6 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
                   ) : (
                     <StepCaptcha />
                   )}
-
-                  <Divider />
-
-                  <View
-                    style={[
-                      a.w_full,
-                      a.py_lg,
-                      a.flex_row,
-                      a.gap_md,
-                      a.align_center,
-                    ]}>
-                    <AppLanguageDropdown />
-                    <Text
-                      style={[
-                        a.flex_1,
-                        t.atoms.text_contrast_medium,
-                        !gtMobile && a.text_md,
-                      ]}>
-                      <Trans>Having trouble?</Trans>{' '}
-                      <InlineLinkText
-                        label={_(msg`Contact support`)}
-                        to={FEEDBACK_FORM_URL({email: state.email})}
-                        style={[!gtMobile && a.text_md]}>
-                        <Trans>Contact support</Trans>
-                      </InlineLinkText>
-                    </Text>
-                  </View>
                 </View>
               </ScreenTransition>
             </LayoutAnimationConfig>

src/view/com/util/layouts/LoggedOutLayout.tsx

@@ -1,11 +1,18 @@
 import {ScrollView, StyleSheet, View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 import type React from 'react'
 
+import {FEEDBACK_FORM_URL} from '#/lib/constants'
 import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
 import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {atoms as a} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
+import {Divider} from '#/components/Divider'
+import {InlineLinkText} from '#/components/Link'
+import {Text as NewText} from '#/components/Typography'
 import {IS_WEB} from '#/env'
 import {Text} from '../text/Text'
 
@@ -21,6 +28,9 @@ export const LoggedOutLayout = ({
   description: string
   scrollable?: boolean
 }>) => {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {gtMobile} = useBreakpoints()
   const {isMobile, isTabletOrMobile} = useWebMediaQueries()
   const pal = usePalette('default')
   const sideBg = useColorSchemeStyle(pal.viewLight, pal.view)
@@ -33,6 +43,29 @@ export const LoggedOutLayout = ({
   const [isKeyboardVisible] = useIsKeyboardVisible()
 
   if (isMobile) {
+    const footer = (
+      <View style={[a.px_lg]}>
+        <Divider />
+
+        <View style={[a.w_full, a.py_lg, a.flex_row, a.gap_md, a.align_center]}>
+          <AppLanguageDropdown />
+          <NewText
+            style={[
+              a.flex_1,
+              t.atoms.text_contrast_medium,
+              !gtMobile && a.text_md,
+            ]}>
+            <Trans>Having trouble?</Trans>{' '}
+            <InlineLinkText
+              label={_(msg`Contact support`)}
+              to={FEEDBACK_FORM_URL({})}
+              style={[!gtMobile && a.text_md]}>
+              <Trans>Contact support</Trans>
+            </InlineLinkText>
+          </NewText>
+        </View>
+      </View>
+    )
     if (scrollable) {
       return (
         <ScrollView
@@ -43,10 +76,16 @@ export const LoggedOutLayout = ({
             {paddingBottom: isKeyboardVisible ? 300 : 0},
           ]}>
           <View style={a.pt_md}>{children}</View>
+          {footer}
         </ScrollView>
       )
     } else {
-      return <View style={a.pt_md}>{children}</View>
+      return (
+        <>
+          <View style={a.pt_md}>{children}</View>
+          {footer}
+        </>
+      )
     }
   }
   return (