Update presentation of trending topics in Explore (#11227)

src/screens/Search/modules/ExploreInterestsCard.tsx

@@ -1,15 +1,13 @@
 import {useState} from 'react'
 import {View} 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 {useInterestsDisplayNames} from '#/lib/interests'
 import {Nux, useSaveNux} from '#/state/queries/nuxs'
 import {usePreferencesQuery} from '#/state/queries/preferences'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {Shapes_Stroke2_Corner0_Rounded as Shapes} from '#/components/icons/Shapes'
+import {Shapes_Stroke2_Corner0_Rounded as ShapesIcon} from '#/components/icons/Shapes'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {Link} from '#/components/Link'
 import * as Prompt from '#/components/Prompt'
@@ -17,7 +15,7 @@ import {Text} from '#/components/Typography'
 
 export function ExploreInterestsCard() {
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const {data: preferences} = usePreferencesQuery()
   const interestsDisplayNames = useInterestsDisplayNames()
   const {mutateAsync: saveNux} = useSaveNux()
@@ -41,16 +39,12 @@ export function ExploreInterestsCard() {
     <>
       <Prompt.Basic
         control={trendingPrompt}
-        title={_(msg`Dismiss interests`)}
-        description={_(
-          msg`You can adjust your interests at any time from "Content and media" settings.`,
-        )}
-        confirmButtonCta={_(
-          msg({
-            message: `OK`,
-            comment: `Confirm button text.`,
-          }),
-        )}
+        title={l`Dismiss interests`}
+        description={l`You can adjust your interests at any time from "Content and media" settings.`}
+        confirmButtonCta={l({
+          message: `OK`,
+          comment: `Confirm button text.`,
+        })}
         onConfirm={onConfirmClose}
       />
 
@@ -63,8 +57,8 @@ export function ExploreInterestsCard() {
             t.atoms.border_contrast_medium,
           ]}>
           <View style={[a.flex_row, a.gap_sm, a.align_center]}>
-            <Shapes />
-            <Text style={[a.text_xl, a.font_semi_bold, a.leading_tight]}>
+            <ShapesIcon fill={t.atoms.text.color} />
+            <Text style={[a.text_lg, a.font_semi_bold]}>
               <Trans>Your interests</Trans>
             </Text>
           </View>
@@ -96,7 +90,7 @@ export function ExploreInterestsCard() {
           </Text>
 
           <Link
-            label={_(msg`Edit interests`)}
+            label={l`Edit interests`}
             to="/settings/interests"
             size="small"
             variant="solid"
@@ -108,7 +102,7 @@ export function ExploreInterestsCard() {
           </Link>
 
           <Button
-            label={_(msg`Hide this card`)}
+            label={l`Hide this card`}
             size="small"
             variant="ghost"
             color="secondary"