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/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,12 +11,14 @@ import {
   SelfLabel,
 } from '#/lib/moderation'
 import {isWeb} from '#/platform/detection'
-import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {atoms as a, native, useTheme, web} from '#/alf'
+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 {Shield_Stroke2_Corner0_Rounded} from '#/components/icons/Shield'
 import {Text} from '#/components/Typography'
+
 export function LabelsBtn({
   labels,
   hasMedia,
@@ -28,7 +29,6 @@ export function LabelsBtn({
   onChange: (v: SelfLabel[]) => void
 }) {
   const control = Dialog.useDialogControl()
-  const t = useTheme()
   const {_} = useLingui()
 
   const hasLabel = labels.length > 0
@@ -52,20 +52,33 @@ 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={() => {
-          Keyboard.dismiss()
-          control.open()
-        }}>
-        <ShieldExclamation style={{color: t.palette.primary_500}} size={24} />
-        {labels.length > 0 ? (
-          <Check size="sm" fill={t.palette.primary_500} />
-        ) : null}
+        style={[
+          !hasMedia && {opacity: 0.5},
+          native({
+            paddingHorizontal: 8,
+            paddingVertical: 6,
+          }),
+        ]}>
+        <ButtonIcon icon={hasLabel ? Check : Shield_Stroke2_Corner0_Rounded} />
+        <ButtonText numberOfLines={1}>
+          {labels.length > 0 ? (
+            <Trans>Labels added</Trans>
+          ) : (
+            <Trans>Labels</Trans>
+          )}
+        </ButtonText>
       </Button>
 
       <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
@@ -114,7 +127,8 @@ function DialogInner({
               </Trans>
             ) : (
               <Trans>
-                There are no self-labels that can be applied to this post.
+                No self-labels can be applied to this post because it contains
+                no media.
               </Trans>
             )}
           </Text>
@@ -235,7 +249,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()}