Move self-label button (#5780)

* move self label button?

* rm

* make sure its usable on large font sizes

* tweak wording

* update icon

* tweaks

* change button label and change opacity when no media (#5794)

* Tweak it moar (#5807)

* Tweak it moar

* Pluralize

* Labels

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>
Co-authored-by: Eric Bailey <git@esb.lol>

src/view/com/composer/threadgate/ThreadgateBtn.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import {Keyboard, StyleProp, ViewStyle} from 'react-native'
-import Animated, {AnimatedStyle} from 'react-native-reanimated'
+import {AnimatedStyle} from 'react-native-reanimated'
 import {AppBskyFeedPostgate} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {isNative} from '#/platform/detection'
 import {ThreadgateAllowUISetting} from '#/state/queries/threadgate'
-import {atoms as a, useTheme} from '#/alf'
+import {native} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {PostInteractionSettingsControlledDialog} from '#/components/dialogs/PostInteractionSettingsDialog'
@@ -19,7 +19,6 @@ export function ThreadgateBtn({
   onChangePostgate,
   threadgateAllowUISettings,
   onChangeThreadgateAllowUISettings,
-  style,
 }: {
   postgate: AppBskyFeedPostgate.Record
   onChangePostgate: (v: AppBskyFeedPostgate.Record) => void
@@ -30,7 +29,6 @@ export function ThreadgateBtn({
   style?: StyleProp<AnimatedStyle<ViewStyle>>
 }) {
   const {_} = useLingui()
-  const t = useTheme()
   const control = Dialog.useDialogControl()
 
   const onPress = () => {
@@ -53,24 +51,25 @@ export function ThreadgateBtn({
 
   return (
     <>
-      <Animated.View style={[a.flex_row, a.p_sm, t.atoms.bg, style]}>
-        <Button
-          variant="solid"
-          color="secondary"
-          size="small"
-          testID="openReplyGateButton"
-          onPress={onPress}
-          label={label}
-          accessibilityHint={_(
-            msg`Opens a dialog to choose who can reply to this thread`,
-          )}
-          style={
-            !isNative ? {paddingVertical: 6, paddingHorizontal: 8} : undefined
-          }>
-          <ButtonIcon icon={anyoneCanInteract ? Earth : Group} />
-          <ButtonText numberOfLines={1}>{label}</ButtonText>
-        </Button>
-      </Animated.View>
+      <Button
+        variant="solid"
+        color="secondary"
+        size="small"
+        testID="openReplyGateButton"
+        onPress={onPress}
+        label={label}
+        accessibilityHint={_(
+          msg`Opens a dialog to choose who can reply to this thread`,
+        )}
+        style={[
+          native({
+            paddingHorizontal: 8,
+            paddingVertical: 6,
+          }),
+        ]}>
+        <ButtonIcon icon={anyoneCanInteract ? Earth : Group} />
+        <ButtonText numberOfLines={1}>{label}</ButtonText>
+      </Button>
       <PostInteractionSettingsControlledDialog
         control={control}
         onSave={() => {