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

src/components/Post/ShowMoreTextButton.tsx

@@ -1,8 +1,6 @@
 import {useCallback, useMemo} from 'react'
 import {LayoutAnimation, type TextStyle} from 'react-native'
-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 {HITSLOP_10} from '#/lib/constants'
 import {atoms as a, flatten, type TextStyleProp, useTheme} from '#/alf'
@@ -14,7 +12,7 @@ export function ShowMoreTextButton({
   style,
 }: TextStyleProp & {onPress: () => void}) {
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
 
   const onPress = useCallback(() => {
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
@@ -30,7 +28,7 @@ export function ShowMoreTextButton({
 
   return (
     <Button
-      label={_(msg`Expand post text`)}
+      label={l`Expand post text`}
       onPress={onPress}
       style={[
         a.self_start,
@@ -43,13 +41,13 @@ export function ShowMoreTextButton({
         <Text
           style={[
             textStyle,
+            t.atoms.text_link,
             {
-              color: t.palette.primary_500,
               opacity: pressed ? 0.6 : 1,
               textDecorationLine: hovered ? 'underline' : undefined,
             },
           ]}>
-          <Trans>Show More</Trans>
+          <Trans>Show more</Trans>
         </Text>
       )}
     </Button>

src/components/Post/Translated/index.tsx

@@ -150,10 +150,10 @@ function TranslationLink({
         label={l`Translate`}
         hoverStyle={[
           native({opacity: 0.5}),
-          web([a.underline, {textDecorationColor: t.palette.primary_500}]),
+          web([a.underline, {textDecorationColor: t.atoms.text_link.color}]),
         ]}
         hitSlop={HITSLOP_30}>
-        <Text style={[a.text_sm, {color: t.palette.primary_500}]}>
+        <Text style={[a.text_sm, t.atoms.text_link]}>
           <Trans>Translate</Trans>
         </Text>
       </Link>
@@ -229,7 +229,7 @@ function TranslationError({
           label={l`Try Google Translate`}
           hoverStyle={[
             native({opacity: 0.5}),
-            web([a.underline, {textDecorationColor: t.palette.primary_500}]),
+            web([a.underline, {textDecorationColor: t.atoms.text_link.color}]),
           ]}
           hitSlop={HITSLOP_30}>
           <Text
@@ -237,7 +237,7 @@ function TranslationError({
               a.text_xs,
               a.font_medium,
               a.leading_snug,
-              {color: t.palette.primary_500},
+              t.atoms.text_link,
             ]}>
             <Trans>Try Google Translate</Trans>
           </Text>