Lighten blue (link) text for dim and dark themes (#11164)

src/components/moderation/ContentHider.tsx

@@ -6,9 +6,7 @@ import {
   type ViewStyle,
 } from 'react-native'
 import {type ModerationUI} from '@atproto/api'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
 
 import {
   ADULT_CONTENT_LABELS,
@@ -78,7 +76,7 @@ function ContentHiderActive({
   children?: React.ReactNode
 }) {
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const {gtMobile} = useBreakpoints()
   const [override, setOverride] = useState(false)
   const control = useModerationDetailsDialogControl()
@@ -97,7 +95,7 @@ function ContentHiderActive({
       (blur.type === 'label' && blur.source.type !== 'user')
     ) {
       if (desc.isSubjectAccount) {
-        return _(msg`${desc.name} (Account)`)
+        return l`${desc.name} (Account)`
       } else {
         return desc.name
       }
@@ -128,7 +126,7 @@ function ContentHiderActive({
 
         const def = cause.labelDef || getDefinition(labelDefs, cause.label)
         if (def.identifier === 'porn' || def.identifier === 'sexual') {
-          return _(msg`Adult Content`)
+          return l`Adult Content`
         }
         return getLabelStrings(i18n.locale, globalLabelStrings, def).name
       })
@@ -138,7 +136,7 @@ function ContentHiderActive({
     }
     return [...new Set(selfBlurNames)].join(', ')
   }, [
-    _,
+    l,
     modui.blurs,
     blur,
     desc.name,
@@ -151,7 +149,6 @@ function ContentHiderActive({
   return (
     <View testID={testID} style={[a.overflow_hidden, style]}>
       <ModerationDetailsDialog control={control} modcause={blur} />
-
       <Button
         onPress={e => {
           e.preventDefault()
@@ -166,10 +163,10 @@ function ContentHiderActive({
         label={desc.name}
         accessibilityHint={
           modui.noOverride
-            ? _(msg`Learn more about the moderation applied to this content`)
+            ? l`Learn more about the moderation applied to this content`
             : override
-              ? _(msg`Hides the content`)
-              : _(msg`Shows the content`)
+              ? l`Hides the content`
+              : l`Shows the content`
         }>
         {state => (
           <View
@@ -223,7 +220,6 @@ function ContentHiderActive({
           </View>
         )}
       </Button>
-
       {desc.source && blur.type === 'label' && !override && (
         <Button
           onPress={e => {
@@ -231,9 +227,7 @@ function ContentHiderActive({
             e.stopPropagation()
             control.open()
           }}
-          label={_(
-            msg`Learn more about the moderation applied to this content`,
-          )}
+          label={l`Learn more about the moderation applied to this content`}
           style={[a.pt_sm]}>
           {state => (
             <Text
@@ -252,7 +246,7 @@ function ContentHiderActive({
               )}{' '}
               <Text
                 style={[
-                  {color: t.palette.primary_500},
+                  t.atoms.text_link,
                   a.text_sm,
                   state.hovered && [web({textDecoration: 'underline'})],
                 ]}>
@@ -262,7 +256,6 @@ function ContentHiderActive({
           )}
         </Button>
       )}
-
       {override && <View style={childContainerStyle}>{children}</View>}
     </View>
   )

src/components/moderation/ScreenHider.tsx

@@ -6,9 +6,7 @@ import {
   type ViewStyle,
 } from 'react-native'
 import {type ModerationUI} from '@atproto/api'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
 import {useNavigation} from '@react-navigation/native'
 
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
@@ -38,7 +36,7 @@ export function ScreenHider({
   containerStyle?: StyleProp<ViewStyle>
 }>) {
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const [override, setOverride] = useState(false)
   const navigation = useNavigation<NavigationProp>()
   const {isMobile} = useWebMediaQueries()
@@ -131,15 +129,13 @@ export function ScreenHider({
                 control.open()
               }}
               accessibilityRole="button"
-              accessibilityLabel={_(msg`Learn more about this warning`)}
+              accessibilityLabel={l`Learn more about this warning`}
               accessibilityHint="">
               <Text
                 style={[
                   a.text_lg,
                   a.leading_snug,
-                  {
-                    color: t.palette.primary_500,
-                  },
+                  t.atoms.text_link,
                   web({
                     cursor: 'pointer',
                   }),
@@ -158,7 +154,7 @@ export function ScreenHider({
           color="primary"
           size="large"
           style={[a.rounded_full]}
-          label={_(msg`Go back`)}
+          label={l`Go back`}
           onPress={() => {
             if (navigation.canGoBack()) {
               navigation.goBack()
@@ -176,7 +172,7 @@ export function ScreenHider({
             color="secondary"
             size="large"
             style={[a.rounded_full]}
-            label={_(msg`Show anyway`)}
+            label={l`Show anyway`}
             onPress={() => setOverride(v => !v)}>
             <ButtonText>
               <Trans>Show anyway</Trans>