Improve localization marks (#3285)

* Update Lightbox.tsx

* Change strings for easier localization

* Update DeleteAccount.tsx

* Update LabelsOnMeDialog.tsx

* Update FeedCard.tsx

* Update index.tsx

* Update LabelsOnMeDialog.tsx

* Update index.tsx

* Update FeedCard.tsx

* Update SelfLabel.tsx

* Update Hashtag.tsx

* Update index.tsx

* Update Hashtag.tsx

* Update ChangeHandle.tsx

* Update index.web.tsx

* Update index.web.tsx

* Update index.tsx

* Remove unnecessary `<Trans>` tags

* Update Drawer.tsx

src/components/ProfileHoverCard/index.web.tsx

@@ -404,7 +404,9 @@ function Inner({
             color={profileShadow.viewer?.following ? 'secondary' : 'primary'}
             variant="solid"
             label={
-              profileShadow.viewer?.following ? _('Following') : _('Follow')
+              profileShadow.viewer?.following
+                ? _(msg`Following`)
+                : _(msg`Follow`)
             }
             style={[a.rounded_full]}
             onPress={profileShadow.viewer?.following ? unfollow : follow}>
@@ -413,7 +415,9 @@ function Inner({
               icon={profileShadow.viewer?.following ? Check : Plus}
             />
             <ButtonText>
-              {profileShadow.viewer?.following ? _('Following') : _('Follow')}
+              {profileShadow.viewer?.following
+                ? _(msg`Following`)
+                : _(msg`Follow`)}
             </ButtonText>
           </Button>
         )}
@@ -452,12 +456,10 @@ function Inner({
               label={_(msg`${following} following`)}
               style={[t.atoms.text]}
               onPress={hide}>
-              <Trans>
               <Text style={[a.text_md, a.font_bold]}>{following} </Text>
               <Text style={[t.atoms.text_contrast_medium]}>
                 {pluralizedFollowings}
               </Text>
-              </Trans>
             </InlineLinkText>
           </View>
 

src/components/moderation/LabelsOnMeDialog.tsx

@@ -190,7 +190,7 @@ function AppealForm({
           },
           reason: details,
         })
-      Toast.show(_(msg`Appeal submitted.`))
+      Toast.show(_(msg`Appeal submitted`))
     } finally {
       control.close()
     }

src/components/moderation/ModerationDetailsDialog.tsx

@@ -121,20 +121,20 @@ function ModerationDetailsDialogInner({
         <>
           <Divider />
           <Text style={[t.atoms.text, a.text_md, a.leading_snug, a.mt_lg]}>
+            {modcause.source.type === 'user' ? (
+              <Trans>This label was applied by the author.</Trans>
+            ) : (
               <Trans>
                 This label was applied by{' '}
-              {modcause.source.type === 'user' ? (
-                <Trans>the author</Trans>
-              ) : (
                 <InlineLinkText
                   to={makeProfileLink({did: modcause.label.src, handle: ''})}
                   onPress={() => control.close()}
                   style={a.text_md}>
                   {desc.source}
                 </InlineLinkText>
-              )}
                 .
               </Trans>
+            )}
           </Text>
         </>
       )}

src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {View} from 'react-native'
 import {Image} from 'expo-image'
 import {LinearGradient} from 'expo-linear-gradient'
-import {msg} from '@lingui/macro'
+import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {FeedSourceInfo, useFeedSourceInfoQuery} from '#/state/queries/feed'
@@ -109,7 +109,7 @@ function PrimaryFeedCardInner({
               a.py_xs,
               ctx.selected && styles.textSelected,
             ]}>
-            by @{feed.creatorHandle}
+            <Trans>by @{feed.creatorHandle}</Trans>
           </Text>
         </View>
 

src/screens/Onboarding/StepInterests/index.tsx

@@ -189,9 +189,9 @@ export function StepInterests() {
                     color: t.palette.negative_900,
                   },
                 ]}>
-                Error:{' '}
+                <Trans>Error:</Trans>{' '}
               </Text>
-              {error?.message || 'an unknown error occurred'}
+              {error?.message || _(msg`an unknown error occurred`)}
             </Text>
           </View>
         ) : (

src/screens/Profile/Header/Metrics.tsx

@@ -50,21 +50,16 @@ export function ProfileHeaderMetrics({
         style={[a.flex_row, t.atoms.text]}
         to={makeProfileLink(profile, 'follows')}
         label={_(msg`${following} following`)}>
-        <Trans>
         <Text style={[a.font_bold, a.text_md]}>{following} </Text>
         <Text style={[t.atoms.text_contrast_medium, a.text_md]}>
           {pluralizedFollowings}
         </Text>
-        </Trans>
       </InlineLinkText>
       <Text style={[a.font_bold, t.atoms.text, a.text_md]}>
-        <Trans>
         {formatCount(profile.postsCount || 0)}{' '}
-          <Text
+        <Text style={[t.atoms.text_contrast_medium, a.font_normal, a.text_md]}>
-            style={[t.atoms.text_contrast_medium, a.font_normal, a.text_md]}>
           {plural(profile.postsCount || 0, {one: 'post', other: 'posts'})}
         </Text>
-        </Trans>
       </Text>
     </View>
   )

src/screens/Signup/index.tsx

@@ -151,11 +151,13 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
             ]}>
             <View style={[a.gap_sm, a.pb_3xl]}>
               <Text style={[a.font_semibold, t.atoms.text_contrast_medium]}>
-                <Trans>Step</Trans> {state.activeStep + 1} <Trans>of</Trans>{' '}
+                <Trans>
+                  Step {state.activeStep + 1} of{' '}
                   {state.serviceDescription &&
                   !state.serviceDescription.phoneVerificationRequired
                     ? '2'
                     : '3'}
+                </Trans>
               </Text>
               <Text style={[a.text_3xl, a.font_bold]}>
                 {state.activeStep === SignupStep.INFO ? (

src/view/com/lightbox/Lightbox.tsx

@@ -78,7 +78,7 @@ function LightboxFooter({imageIndex}: {imageIndex: number}) {
 
       try {
         await saveImageToMediaLibrary({uri})
-        Toast.show(_(msg`Saved to your camera roll.`))
+        Toast.show(_(msg`Saved to your camera roll`))
       } catch (e: any) {
         Toast.show(_(msg`Failed to save image: ${String(e)}`))
       }

src/view/com/modals/ChangeHandle.tsx

@@ -507,7 +507,9 @@ function CustomHandleForm({
           <Text type="xl-medium" style={[s.white, s.textCenter]}>
             {canSave
               ? _(msg`Update to ${handle}`)
-              : _(msg`Verify ${isDNSForm ? 'DNS Record' : 'Text File'}`)}
+              : isDNSForm
+              ? _(msg`Verify DNS Record`)
+              : _(msg`Verify Text File`)}
           </Text>
         )}
       </Button>

src/view/com/modals/DeleteAccount.tsx

@@ -84,11 +84,10 @@ export function Component({}: {}) {
       <ScrollView style={[pal.view]} keyboardShouldPersistTaps="handled">
         <View style={[styles.titleContainer, pal.view]}>
           <Text type="title-xl" style={[s.textCenter, pal.text]}>
-            <Trans>Delete Account</Trans>
+            <Trans>
-          </Text>
+              Delete Account{' '}
-          <View style={[pal.view, s.flexRow]}>
               <Text type="title-xl" style={[pal.text, s.bold]}>
-              {' "'}
+                "
               </Text>
               <Text
                 type="title-xl"
@@ -101,9 +100,10 @@ export function Component({}: {}) {
                 {currentAccount?.handle}
               </Text>
               <Text type="title-xl" style={[pal.text, s.bold]}>
-              {'"'}
+                "
+              </Text>
+            </Trans>
           </Text>
-          </View>
         </View>
         {!isEmailSent ? (
           <>

src/view/com/modals/SelfLabel.tsx

@@ -131,10 +131,10 @@ export function Component({
           ) : (
             <View>
               <Text style={[pal.textLight]}>
-                <Text type="md-bold" style={[pal.textLight, s.mr5]}>
-                  <Trans>Not Applicable.</Trans>
-                </Text>
                 <Trans>
+                  <Text type="md-bold" style={[pal.textLight]}>
+                    Not Applicable.
+                  </Text>{' '}
                   This warning is only available for posts with media attached.
                 </Trans>
               </Text>

src/view/shell/Drawer.tsx

@@ -97,9 +97,9 @@ let DrawerProfileCard = ({
             value={profile?.followersCount || 0}
             one="follower"
             other="followers"
-          />{' '}
+          />
+        </Trans>{' '}
         &middot;{' '}
-        </Trans>
         <Trans>
           <Text type="xl-medium" style={pal.text}>
             {formatCountShortOnly(profile?.followsCount ?? 0)}