Fix translate hitslop by using Buttons

src/components/Post/Translated/index.tsx

@@ -4,10 +4,12 @@ import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
 
+import {HITSLOP_30} from '#/lib/constants'
 import {codeToLanguageName, languageName} from '#/locale/helpers'
 import {LANGUAGES} from '#/locale/languages'
 import {useLanguagePrefs} from '#/state/preferences'
 import {atoms as a, useTheme} from '#/alf'
+import {Button} from '#/components/Button'
 import {Loader} from '#/components/Loader'
 import * as Select from '#/components/Select'
 import {Text} from '#/components/Typography'
@@ -71,25 +73,27 @@ function TranslationResult({
 
   return (
     <View style={[a.py_xs, a.gap_xs, a.mt_sm]}>
-      <Text style={[a.text_xs, t.atoms.text_contrast_medium]}>
+      <View style={[a.flex_row, a.align_center]}>
-        {langName ? (
+        <Text style={[a.text_xs, t.atoms.text_contrast_medium]}>
-          <Trans>Translated from {langName}</Trans>
+          {langName ? (
-        ) : (
+            <Trans>Translated from {langName}</Trans>
-          <Trans>Translated</Trans>
+          ) : (
-        )}
+            <Trans>Translated</Trans>
+          )}
+        </Text>
         {sourceLanguage != null && (
           <>
             <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
               {' '}
-              &middot;
+              &middot;{' '}
-            </Text>{' '}
+            </Text>
             <TranslationLanguageSelect
               sourceLanguage={sourceLanguage}
               postText={postText}
             />
           </>
         )}
-      </Text>
+      </View>
       <Text emoji selectable style={[a.text_md, a.leading_snug]}>
         {translatedText}
       </Text>
@@ -143,12 +147,18 @@ function TranslationLanguageSelect({
     <Select.Root
       value={sourceLanguage}
       onValueChange={handleChangeTranslationLanguage}>
-      <Select.Trigger hitSlop={10} label={_(msg`Change source language`)}>
+      <Select.Trigger label={_(msg`Change source language`)}>
         {({props}) => {
           return (
-            <Text {...props} style={[a.text_xs]}>
+            <Button
-              <Trans>Change</Trans>
+              label={props.accessibilityLabel}
-            </Text>
+              {...props}
+              hitSlop={HITSLOP_30}
+              hoverStyle={{opacity: 0.5}}>
+              <Text style={[a.text_xs]}>
+                <Trans>Change</Trans>
+              </Text>
+            </Button>
           )
         }}
       </Select.Trigger>

src/screens/PostThread/components/ThreadItemAnchor.tsx

@@ -9,16 +9,13 @@ import {
 } from '@atproto/api'
 import {Plural, Trans, useLingui} from '@lingui/react/macro'
 
+import {HITSLOP_30} from '#/lib/constants'
 import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
 import {makeProfileLink} from '#/lib/routes/links'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {niceDate} from '#/lib/strings/time'
-import {
+import {getPostLanguage, isPostInLanguage} from '#/locale/helpers'
-  getPostLanguage,
-  getTranslatorLink,
-  isPostInLanguage,
-} from '#/locale/helpers'
 import {
   POST_TOMBSTONE,
   type Shadow,
@@ -39,12 +36,12 @@ import {
   OUTER_SPACE,
   REPLY_LINE_WIDTH,
 } from '#/screens/PostThread/const'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, native, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import {DebugFieldDisplay} from '#/components/DebugFieldDisplay'
 import {CalendarClock_Stroke2_Corner0_Rounded as CalendarClockIcon} from '#/components/icons/CalendarClock'
 import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
-import {InlineLinkText, Link} from '#/components/Link'
+import {Link} from '#/components/Link'
 import {Loader} from '#/components/Loader'
 import {ContentHider} from '#/components/moderation/ContentHider'
 import {LabelsOnMyPost} from '#/components/moderation/LabelsOnMe'
@@ -627,21 +624,25 @@ function TranslateLink({
             </Text>
           </View>
         ) : translationState.status === 'success' ? (
-          <InlineLinkText
+          <Button
-            to="#"
             label={l`Hide translation`}
-            style={[a.text_sm]}
+            onPress={onHideTranslation}
-            onPress={onHideTranslation}>
+            hoverStyle={native({opacity: 0.5})}
-            <Trans>Hide translation</Trans>
+            hitSlop={HITSLOP_30}>
-          </InlineLinkText>
+            <Text style={[a.text_sm, {color: t.palette.primary_500}]}>
+              <Trans>Hide translation</Trans>
+            </Text>
+          </Button>
         ) : (
-          <InlineLinkText
+          <Button
-            to={getTranslatorLink(post.record.text, langPrefs.primaryLanguage)}
             label={l`Translate`}
-            style={[a.text_sm]}
+            onPress={onTranslatePress}
-            onPress={onTranslatePress}>
+            hoverStyle={native({opacity: 0.5})}
-            <Trans>Translate</Trans>
+            hitSlop={HITSLOP_30}>
-          </InlineLinkText>
+            <Text style={[a.text_sm, {color: t.palette.primary_500}]}>
+              <Trans>Translate</Trans>
+            </Text>
+          </Button>
         )}
       </View>
     )