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

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

2 files changed, 54 insertions, 32 deletions

diff --git a/src/screens/Signup/StepInfo/Policies.tsx b/src/screens/Signup/StepInfo/Policies.tsx
index a3a067222..ba0cfc2b4 100644
--- a/src/screens/Signup/StepInfo/Policies.tsx
+++ b/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 = []
-  if (tos) {
-    els.push(
-      <InlineLinkText
-        label={_(msg`Read the Bluesky Terms of Service`)}
-        key="tos"
-        to={tos}>
-        {_(msg`Terms of Service`)}
-      </InlineLinkText>,
+  let els: ReactElement
+  if (tos && pp) {
+    els = (
+      <Trans>
+        By creating an account you agree to the{' '}
+        <InlineLinkText
+          label={_(msg`Read the Bluesky Terms of Service`)}
+          key="tos"
+          to={tos}>
+          Terms of Service
+        </InlineLinkText>{' '}
+        and{' '}
+        <InlineLinkText
+          label={_(msg`Read the Bluesky Privacy Policy`)}
+          key="pp"
+          to={pp}>
+          Privacy Policy
+        </InlineLinkText>
+        .
+      </Trans>
     )
-  }
-  if (pp) {
-    els.push(
-      <InlineLinkText
-        label={_(msg`Read the Bluesky Privacy Policy`)}
-        key="pp"
-        to={pp}>
-        {_(msg`Privacy Policy`)}
-      </InlineLinkText>,
+  } else if (tos) {
+    els = (
+      <Trans>
+        By creating an account you agree to the{' '}
+        <InlineLinkText
+          label={_(msg`Read the Bluesky Terms of Service`)}
+          key="tos"
+          to={tos}>
+          Terms of Service
+        </InlineLinkText>
+        .
+      </Trans>
     )
-  }
-  if (els.length === 2) {
-    els.splice(
-      1,
-      0,
-      <Text key="and" style={[t.atoms.text_contrast_medium]}>
-        {' '}
-        and{' '}
-      </Text>,
+  } 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]}>
-      <Text style={[a.leading_snug, t.atoms.text_contrast_medium]}>
-        <Trans>By creating an account you agree to the {els}.</Trans>
-      </Text>
+      {els ? (
+        <Text style={[a.leading_snug, t.atoms.text_contrast_medium]}>
+          {els}
+        </Text>
+      ) : null}
 
       {under13 ? (
         <Text style={[a.font_bold, a.leading_snug, t.atoms.text_contrast_high]}>
diff --git a/src/screens/Signup/index.tsx b/src/screens/Signup/index.tsx
index e3da053c0..1857981a0 100644
--- a/src/screens/Signup/index.tsx
+++ b/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`)}