move self label button?

src/view/com/composer/Composer.tsx

@@ -561,13 +561,6 @@ export const ComposePost = ({
                 </>
               ) : (
                 <View style={[styles.postBtnWrapper]}>
-                  <LabelsBtn
-                    labels={draft.labels}
-                    onChange={nextLabels => {
-                      dispatch({type: 'update_labels', labels: nextLabels})
-                    }}
-                    hasMedia={hasMedia || Boolean(extLink)}
-                  />
                   {canPost ? (
                     <Button
                       testID="composerPublishBtn"
@@ -758,22 +751,38 @@ export const ComposePost = ({
           </Animated.ScrollView>
           <SuggestedLanguage text={richtext.text} />
 
-          {replyTo ? null : (
+          <Animated.View
-            <ThreadgateBtn
+            style={[
-              postgate={draft.postgate}
+              a.flex_row,
-              onChangePostgate={nextPostgate => {
+              a.p_sm,
-                dispatch({type: 'update_postgate', postgate: nextPostgate})
+              a.gap_sm,
+              t.atoms.bg,
+              bottomBarAnimatedStyle,
+            ]}>
+            {replyTo ? null : (
+              <ThreadgateBtn
+                postgate={draft.postgate}
+                onChangePostgate={nextPostgate => {
+                  dispatch({type: 'update_postgate', postgate: nextPostgate})
+                }}
+                threadgateAllowUISettings={draft.threadgate}
+                onChangeThreadgateAllowUISettings={nextThreadgate => {
+                  dispatch({
+                    type: 'update_threadgate',
+                    threadgate: nextThreadgate,
+                  })
+                }}
+                style={bottomBarAnimatedStyle}
+              />
+            )}
+            <LabelsBtn
+              labels={draft.labels}
+              onChange={nextLabels => {
+                dispatch({type: 'update_labels', labels: nextLabels})
               }}
-              threadgateAllowUISettings={draft.threadgate}
+              hasMedia={hasMedia || Boolean(extLink)}
-              onChangeThreadgateAllowUISettings={nextThreadgate => {
-                dispatch({
-                  type: 'update_threadgate',
-                  threadgate: nextThreadgate,
-                })
-              }}
-              style={bottomBarAnimatedStyle}
             />
-          )}
+          </Animated.View>
           <View
             style={[
               a.flex_row,

src/view/com/composer/labels/LabelsBtn.tsx

@@ -3,7 +3,6 @@ import {Keyboard, View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {ShieldExclamation} from '#/lib/icons'
 import {
   ADULT_CONTENT_LABELS,
   AdultSelfLabel,
@@ -12,11 +11,12 @@ import {
   SelfLabel,
 } from '#/lib/moderation'
 import {isWeb} from '#/platform/detection'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, native, useTheme, web} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as Toggle from '#/components/forms/Toggle'
-import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import {Earth_Stroke2_Corner0_Rounded as Earth} from '#/components/icons/Globe'
+import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group'
 import {Text} from '#/components/Typography'
 export function LabelsBtn({
   labels,
@@ -28,7 +28,6 @@ export function LabelsBtn({
   onChange: (v: SelfLabel[]) => void
 }) {
   const control = Dialog.useDialogControl()
-  const t = useTheme()
   const {_} = useLingui()
 
   const hasLabel = labels.length > 0
@@ -52,20 +51,32 @@ export function LabelsBtn({
   return (
     <>
       <Button
+        variant="solid"
+        color="secondary"
+        size="small"
         testID="labelsBtn"
-        style={!hasMedia && {opacity: 0.4}}
+        onPress={() => {
+          Keyboard.dismiss()
+          control.open()
+        }}
         label={_(msg`Content warnings`)}
         accessibilityHint={_(
           msg`Opens a dialog to add a content warning to your post`,
         )}
-        onPress={() => {
+        style={[
-          Keyboard.dismiss()
+          native({
-          control.open()
+            paddingHorizontal: 8,
-        }}>
+            paddingVertical: 6,
-        <ShieldExclamation style={{color: t.palette.primary_500}} size={24} />
+          }),
-        {labels.length > 0 ? (
+        ]}>
-          <Check size="sm" fill={t.palette.primary_500} />
+        <ButtonIcon icon={true ? Earth : Group} />
-        ) : null}
+        <ButtonText numberOfLines={1}>
+          {labels.length > 0 ? (
+            <Trans>Labels added</Trans>
+          ) : (
+            <Trans>Add self-label</Trans>
+          )}
+        </ButtonText>
       </Button>
 
       <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
@@ -235,7 +246,7 @@ function DialogInner({
         </View>
       </View>
 
-      <View style={[a.mt_sm]}>
+      <View style={[a.mt_sm, web([a.flex_row, a.ml_auto])]}>
         <Button
           label={_(msg`Done`)}
           onPress={() => control.close()}

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
-        <Button
+        variant="solid"
-          variant="solid"
+        color="secondary"
-          color="secondary"
+        size="small"
-          size="small"
+        testID="openReplyGateButton"
-          testID="openReplyGateButton"
+        onPress={onPress}
-          onPress={onPress}
+        label={label}
-          label={label}
+        accessibilityHint={_(
-          accessibilityHint={_(
+          msg`Opens a dialog to choose who can reply to this thread`,
-            msg`Opens a dialog to choose who can reply to this thread`,
+        )}
-          )}
+        style={[
-          style={
+          native({
-            !isNative ? {paddingVertical: 6, paddingHorizontal: 8} : undefined
+            paddingHorizontal: 8,
-          }>
+            paddingVertical: 6,
-          <ButtonIcon icon={anyoneCanInteract ? Earth : Group} />
+          }),
-          <ButtonText numberOfLines={1}>{label}</ButtonText>
+        ]}>
-        </Button>
+        <ButtonIcon icon={anyoneCanInteract ? Earth : Group} />
-      </Animated.View>
+        <ButtonText numberOfLines={1}>{label}</ButtonText>
+      </Button>
       <PostInteractionSettingsControlledDialog
         control={control}
         onSave={() => {