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,6 +751,14 @@ export const ComposePost = ({
           </Animated.ScrollView>
           <SuggestedLanguage text={richtext.text} />
 
+          <Animated.View
+            style={[
+              a.flex_row,
+              a.p_sm,
+              a.gap_sm,
+              t.atoms.bg,
+              bottomBarAnimatedStyle,
+            ]}>
             {replyTo ? null : (
               <ThreadgateBtn
                 postgate={draft.postgate}
@@ -774,6 +775,14 @@ export const ComposePost = ({
                 style={bottomBarAnimatedStyle}
               />
             )}
+            <LabelsBtn
+              labels={draft.labels}
+              onChange={nextLabels => {
+                dispatch({type: 'update_labels', labels: nextLabels})
+              }}
+              hasMedia={hasMedia || Boolean(extLink)}
+            />
+          </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} />
+          }),
+        ]}>
+        <ButtonIcon icon={true ? Earth : Group} />
+        <ButtonText numberOfLines={1}>
           {labels.length > 0 ? (
-          <Check size="sm" fill={t.palette.primary_500} />
+            <Trans>Labels added</Trans>
-        ) : null}
+          ) : (
+            <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,7 +51,6 @@ export function ThreadgateBtn({
 
   return (
     <>
-      <Animated.View style={[a.flex_row, a.p_sm, t.atoms.bg, style]}>
       <Button
         variant="solid"
         color="secondary"
@@ -64,13 +61,15 @@ export function ThreadgateBtn({
         accessibilityHint={_(
           msg`Opens a dialog to choose who can reply to this thread`,
         )}
-          style={
+        style={[
-            !isNative ? {paddingVertical: 6, paddingHorizontal: 8} : undefined
+          native({
-          }>
+            paddingHorizontal: 8,
+            paddingVertical: 6,
+          }),
+        ]}>
         <ButtonIcon icon={anyoneCanInteract ? Earth : Group} />
         <ButtonText numberOfLines={1}>{label}</ButtonText>
       </Button>
-      </Animated.View>
       <PostInteractionSettingsControlledDialog
         control={control}
         onSave={() => {