diff --git a/assets/icons/settingsGear2_stroke2_corner0_rounded.svg b/assets/icons/settingsGear2_stroke2_corner0_rounded.svg
new file mode 100644
index 0000000000..de8a579194
--- /dev/null
+++ b/assets/icons/settingsGear2_stroke2_corner0_rounded.svg
@@ -0,0 +1 @@
+
diff --git a/src/components/icons/Gear.tsx b/src/components/icons/Gear.tsx
new file mode 100644
index 0000000000..980b7413bd
--- /dev/null
+++ b/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',
+})
diff --git a/src/components/moderation/ModerationLabelPref.tsx b/src/components/moderation/ModerationLabelPref.tsx
index 035635d551..13a0dff212 100644
--- a/src/components/moderation/ModerationLabelPref.tsx
+++ b/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 (
<>
- 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,
- ]}>
- {labelStrings.name}
-
-
- {labelStrings.description}
-
- {!disabled && (
+ label={settingDesc}
+ disabled={disabled}>
+ {({hovered, focused, pressed}) => (
- {!disabled && (
-
- {settingDesc}
+
+ {labelStrings.name}
+
+ {labelStrings.description}
- )}
- {!cantConfigure && (
-
+
+
+ {!disabled && (
+
+
+ {settingDesc}
+
+
+
)}
)}
-
+
{labelStrings.name}
@@ -144,10 +144,21 @@ export function ModerationLabelPref({
{labelStrings.description}
+
{cantConfigure && (
-
+
-
+
+
{adultDisabled ? (
Adult content must be enabled to configure this label.
@@ -167,18 +178,8 @@ export function ModerationLabelPref({
)}
- {disabled || cantConfigure ? (
-
- ) : (
+
+ {!cantConfigure && (
<>
>