Tweaks to Labeler profile

assets/icons/settingsGear2_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M11.1 2a1 1 0 0 0-.832.445L8.851 4.57 6.6 4.05a1 1 0 0 0-.932.268l-1.35 1.35a1 1 0 0 0-.267.932l.52 2.251-2.126 1.417A1 1 0 0 0 2 11.1v1.8a1 1 0 0 0 .445.832l2.125 1.417-.52 2.251a1 1 0 0 0 .268.932l1.35 1.35a1 1 0 0 0 .932.267l2.251-.52 1.417 2.126A1 1 0 0 0 11.1 22h1.8a1 1 0 0 0 .832-.445l1.417-2.125 2.251.52a1 1 0 0 0 .932-.268l1.35-1.35a1 1 0 0 0 .267-.932l-.52-2.251 2.126-1.417A1 1 0 0 0 22 12.9v-1.8a1 1 0 0 0-.445-.832L19.43 8.851l.52-2.251a1 1 0 0 0-.268-.932l-1.35-1.35a1 1 0 0 0-.932-.267l-2.251.52-1.417-2.126A1 1 0 0 0 12.9 2h-1.8Zm-.968 4.255L11.635 4h.73l1.503 2.255a1 1 0 0 0 1.057.42l2.385-.551.566.566-.55 2.385a1 1 0 0 0 .42 1.057L20 11.635v.73l-2.255 1.503a1 1 0 0 0-.42 1.057l.551 2.385-.566.566-2.385-.55a1 1 0 0 0-1.057.42L12.365 20h-.73l-1.503-2.255a1 1 0 0 0-1.057-.42l-2.385.551-.566-.566.55-2.385a1 1 0 0 0-.42-1.057L4 12.365v-.73l2.255-1.503a1 1 0 0 0 .42-1.057L6.123 6.69l.566-.566 2.385.55a1 1 0 0 0 1.057-.42ZM8 12a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" clip-rule="evenodd"/></svg>

src/components/icons/Gear.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const SettingsGear2_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M11.1 2a1 1 0 0 0-.832.445L8.851 4.57 6.6 4.05a1 1 0 0 0-.932.268l-1.35 1.35a1 1 0 0 0-.267.932l.52 2.251-2.126 1.417A1 1 0 0 0 2 11.1v1.8a1 1 0 0 0 .445.832l2.125 1.417-.52 2.251a1 1 0 0 0 .268.932l1.35 1.35a1 1 0 0 0 .932.267l2.251-.52 1.417 2.126A1 1 0 0 0 11.1 22h1.8a1 1 0 0 0 .832-.445l1.417-2.125 2.251.52a1 1 0 0 0 .932-.268l1.35-1.35a1 1 0 0 0 .267-.932l-.52-2.251 2.126-1.417A1 1 0 0 0 22 12.9v-1.8a1 1 0 0 0-.445-.832L19.43 8.851l.52-2.251a1 1 0 0 0-.268-.932l-1.35-1.35a1 1 0 0 0-.932-.267l-2.251.52-1.417-2.126A1 1 0 0 0 12.9 2h-1.8Zm-.968 4.255L11.635 4h.73l1.503 2.255a1 1 0 0 0 1.057.42l2.385-.551.566.566-.55 2.385a1 1 0 0 0 .42 1.057L20 11.635v.73l-2.255 1.503a1 1 0 0 0-.42 1.057l.551 2.385-.566.566-2.385-.55a1 1 0 0 0-1.057.42L12.365 20h-.73l-1.503-2.255a1 1 0 0 0-1.057-.42l-2.385.551-.566-.566.55-2.385a1 1 0 0 0-.42-1.057L4 12.365v-.73l2.255-1.503a1 1 0 0 0 .42-1.057L6.123 6.69l.566-.566 2.385.55a1 1 0 0 0 1.057-.42ZM8 12a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z',
+})

src/components/moderation/ModerationLabelPref.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Pressable, View} from 'react-native'
+import {View} from 'react-native'
 import {InterpretedLabelValueDefinition, LabelPreference} from '@atproto/api'
 import {useLingui} from '@lingui/react'
 import {msg, Trans} from '@lingui/macro'
@@ -20,9 +20,9 @@ import {Text} from '#/components/Typography'
 import {InlineLink} from '#/components/Link'
 import * as Dialog from '#/components/Dialog'
 import {Button, ButtonText, ButtonIcon} from '#/components/Button'
-import {ArrowTriangleBottom_Stroke2_Corner1_Rounded as ArrowTriangleBottom} from '../icons/ArrowTriangle'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '../icons/CircleInfo'
 import {Check_Stroke2_Corner0_Rounded as Check} from '../icons/Check'
+import {SettingsGear2_Stroke2_Corner0_Rounded as Gear} from '../icons/Gear'
 
 export function ModerationLabelPref({
   labelValueDefinition,
@@ -86,57 +86,57 @@ export function ModerationLabelPref({
 
   return (
     <>
-      <Pressable
+      <Button
         onPress={() => control.open()}
-        accessibilityLabel={settingDesc}
-        accessibilityHint=""
-        style={[
-          a.flex_row,
-          a.justify_between,
-          a.gap_sm,
-          a.align_center,
-          t.atoms.bg_contrast_25,
-          a.px_lg,
-          a.py_lg,
-          a.rounded_sm,
-        ]}>
-        <Text style={[a.font_bold]}>{labelStrings.name}</Text>
-
-        <Text
-          style={[t.atoms.text_contrast_medium, a.flex_1]}
-          numberOfLines={1}>
-          {labelStrings.description}
-        </Text>
-        {!disabled && (
+        label={settingDesc}
+        disabled={disabled}>
+        {({hovered, focused, pressed}) => (
           <View
             style={[
-              {width: 100},
+              a.w_full,
               a.flex_row,
-              a.align_center,
-              a.justify_end,
-              a.gap_xs,
-              a.rounded_2xs,
+              a.justify_between,
+              a.gap_sm,
+              a.align_start,
+              a.px_lg,
+              a.py_lg,
+              a.rounded_sm,
+              t.atoms.bg_contrast_25,
+              (hovered || focused || pressed) && [t.atoms.bg_contrast_50],
             ]}>
-            {!disabled && (
-              <Text style={[t.atoms.text_contrast_medium, a.font_semibold]}>
-                {settingDesc}
+            <View style={[a.gap_xs]}>
+              <Text style={[a.font_bold]}>{labelStrings.name}</Text>
+              <Text
+                style={[t.atoms.text_contrast_medium, a.leading_snug]}
+                numberOfLines={1}>
+                {labelStrings.description}
               </Text>
-            )}
-            {!cantConfigure && (
-              <ArrowTriangleBottom
-                width={8}
-                fill={t.atoms.text_contrast_medium.color}
-              />
+            </View>
+
+            {!disabled && (
+              <View
+                style={[
+                  a.flex_row,
+                  a.align_center,
+                  a.justify_end,
+                  a.gap_xs,
+                  a.rounded_2xs,
+                ]}>
+                <Text style={[t.atoms.text_contrast_medium, a.font_semibold]}>
+                  {settingDesc}
+                </Text>
+                <Gear size="sm" fill={t.atoms.text_contrast_low.color} />
+              </View>
             )}
           </View>
         )}
-      </Pressable>
+      </Button>
 
       <Dialog.Outer control={control}>
         <Dialog.Handle />
 
         <Dialog.Inner
-          label={_(msg`Settings: ${labelValueDefinition.identifier}`)}
+          label={_(msg`Settings for ${labelValueDefinition.identifier}`)}
           style={[a.gap_sm]}>
           <Text style={[a.text_2xl, a.font_bold, a.pb_xs, t.atoms.text]}>
             {labelStrings.name}
@@ -144,10 +144,21 @@ export function ModerationLabelPref({
           <Text style={[a.text_md, a.pb_sm, t.atoms.text_contrast_medium]}>
             {labelStrings.description}
           </Text>
+
           {cantConfigure && (
-            <View style={[a.flex_row, a.gap_xs, a.align_center, a.pb_sm]}>
+            <View
+              style={[
+                a.flex_row,
+                a.gap_xs,
+                a.align_center,
+                a.py_md,
+                a.px_lg,
+                a.rounded_sm,
+                t.atoms.bg_contrast_25,
+              ]}>
               <CircleInfo size="md" fill={t.atoms.text_contrast_medium.color} />
-              <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
+
+              <Text style={[t.atoms.text_contrast_medium]}>
                 {adultDisabled ? (
                   <Trans>
                     Adult content must be enabled to configure this label.
@@ -167,18 +178,8 @@ export function ModerationLabelPref({
               </Text>
             </View>
           )}
-          {disabled || cantConfigure ? (
-            <Button
-              label={_(msg`Close`)}
-              size="large"
-              variant="solid"
-              color="secondary"
-              onPress={() => control.close()}>
-              <ButtonText style={[a.flex_1, a.text_left]}>
-                <Trans>Close</Trans>
-              </ButtonText>
-            </Button>
-          ) : (
+
+          {!cantConfigure && (
             <>
               <Button
                 label={hideLabel}
@@ -234,6 +235,8 @@ export function ModerationLabelPref({
               </Button>
             </>
           )}
+
+          <Dialog.Close />
         </Dialog.Inner>
       </Dialog.Outer>
     </>