Improve localization of {els} string on Create Account page (#3912)

Co-authored-by: Hailey <me@haileyok.com>

src/screens/Signup/StepInfo/Policies.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {ReactElement} from 'react'
 import {View} from 'react-native'
 import {ComAtprotoServerDescribeServer} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
@@ -42,43 +42,64 @@ export const Policies = ({
     )
   }
 
-  const els = []
+  let els: ReactElement
-  if (tos) {
+  if (tos && pp) {
-    els.push(
+    els = (
+      <Trans>
+        By creating an account you agree to the{' '}
         <InlineLinkText
           label={_(msg`Read the Bluesky Terms of Service`)}
           key="tos"
           to={tos}>
-        {_(msg`Terms of Service`)}
+          Terms of Service
-      </InlineLinkText>,
+        </InlineLinkText>{' '}
-    )
+        and{' '}
-  }
-  if (pp) {
-    els.push(
         <InlineLinkText
           label={_(msg`Read the Bluesky Privacy Policy`)}
           key="pp"
           to={pp}>
-        {_(msg`Privacy Policy`)}
+          Privacy Policy
-      </InlineLinkText>,
+        </InlineLinkText>
+        .
+      </Trans>
     )
-  }
+  } else if (tos) {
-  if (els.length === 2) {
+    els = (
-    els.splice(
+      <Trans>
-      1,
+        By creating an account you agree to the{' '}
-      0,
+        <InlineLinkText
-      <Text key="and" style={[t.atoms.text_contrast_medium]}>
+          label={_(msg`Read the Bluesky Terms of Service`)}
-        {' '}
+          key="tos"
-        and{' '}
+          to={tos}>
-      </Text>,
+          Terms of Service
+        </InlineLinkText>
+        .
+      </Trans>
     )
+  } else if (pp) {
+    els = (
+      <Trans>
+        By creating an account you agree to the{' '}
+        <InlineLinkText
+          label={_(msg`Read the Bluesky Privacy Policy`)}
+          key="pp"
+          to={pp}>
+          Privacy Policy
+        </InlineLinkText>
+        .
+      </Trans>
+    )
+  } else {
+    return null
   }
 
   return (
     <View style={[a.gap_sm]}>
+      {els ? (
         <Text style={[a.leading_snug, t.atoms.text_contrast_medium]}>
-        <Trans>By creating an account you agree to the {els}.</Trans>
+          {els}
         </Text>
+      ) : null}
 
       {under13 ? (
         <Text style={[a.font_bold, a.leading_snug, t.atoms.text_contrast_high]}>

src/screens/Signup/index.tsx

@@ -168,7 +168,8 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
             <View
               style={[a.w_full, a.py_lg, a.flex_row, a.gap_lg, a.align_center]}>
               <AppLanguageDropdown />
-              <Text style={[t.atoms.text, !gtMobile && a.text_md]}>
+              <Text
+                style={[t.atoms.text_contrast_medium, !gtMobile && a.text_md]}>
                 <Trans>Having trouble?</Trans>{' '}
                 <InlineLinkText
                   label={_(msg`Contact support`)}