Update presentation of settings menus (#10425)

2026-05-07 12:00:21 -07:00
parent 2907ff0cd8
commit eddbf6ba9f
6 changed files with 56 additions and 31 deletions
@@ -74,11 +74,6 @@
      "count": 1
    }
  },
-  "src/components/Menu/index.web.tsx": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 1
-    }
-  },
  "src/components/Menu/types.ts": {
    "@typescript-eslint/no-explicit-any": {
      "count": 1
@@ -120,7 +120,14 @@ export function Outer({
  )
 }

-export function Item({children, label, style, onPress, ...rest}: ItemProps) {
+export function Item({
+  children,
+  label,
+  style,
+  onPress,
+  destructive = false,
+  ...rest
+}: ItemProps) {
  const t = useTheme()
  const context = useMenuContext()
  const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
@@ -137,7 +144,7 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
      accessibilityLabel={label}
      onFocus={onFocus}
      onBlur={onBlur}
-      onPress={async e => {
+      onPress={e => {
        if (IS_ANDROID) {
          /**
           * Below fix for iOS doesn't work for Android, this does.
@@ -176,7 +183,8 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
        style,
        (focused || pressed) && !rest.disabled && [t.atoms.bg_contrast_50],
      ]}>
-      <ItemContext.Provider value={{disabled: Boolean(rest.disabled)}}>
+      <ItemContext.Provider
+        value={{disabled: Boolean(rest.disabled), destructive}}>
        {children}
      </ItemContext.Provider>
    </Pressable>
@@ -185,7 +193,7 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {

 export function ItemText({children, style}: ItemTextProps) {
  const t = useTheme()
-  const {disabled} = useMenuItemContext()
+  const {disabled, destructive} = useMenuItemContext()
  return (
    <Text
      numberOfLines={1}
@@ -196,6 +204,7 @@ export function ItemText({children, style}: ItemTextProps) {
        a.font_semi_bold,
        t.atoms.text_contrast_high,
        style,
+        destructive && {color: t.palette.negative_500},
        disabled && t.atoms.text_contrast_low,
      ]}>
      {children}
@@ -205,7 +214,7 @@ export function ItemText({children, style}: ItemTextProps) {

 export function ItemIcon({icon: Comp, fill}: ItemIconProps) {
  const t = useTheme()
-  const {disabled} = useMenuItemContext()
+  const {disabled, destructive} = useMenuItemContext()
  return (
    <Comp
      size="lg"
@@ -214,7 +223,9 @@ export function ItemIcon({icon: Comp, fill}: ItemIconProps) {
          ? fill({disabled})
          : disabled
            ? t.atoms.text_contrast_low.color
-            : t.atoms.text_contrast_medium.color
+            : destructive
+              ? t.palette.negative_500
+              : t.atoms.text_contrast_medium.color
      }
    />
  )
@@ -107,7 +107,7 @@ const RadixTriggerPassThrough = forwardRef(
    props: {
      children: (
        props: RadixPassThroughTriggerProps & {
-          ref: React.Ref<any>
+          ref: React.Ref<HTMLElement>
        },
      ) => React.ReactNode
    },
@@ -225,7 +225,14 @@ export function Outer({
  )
 }

-export function Item({children, label, onPress, style, ...rest}: ItemProps) {
+export function Item({
+  children,
+  label,
+  onPress,
+  style,
+  destructive = false,
+  ...rest
+}: ItemProps) {
  const t = useTheme()
  const {control} = useMenuContext()
  const {
@@ -278,7 +285,8 @@ export function Item({children, label, onPress, style, ...rest}: ItemProps) {
          onMouseEnter,
          onMouseLeave,
        })}>
-        <ItemContext.Provider value={{disabled: Boolean(rest.disabled)}}>
+        <ItemContext.Provider
+          value={{disabled: Boolean(rest.disabled), destructive}}>
          {children}
        </ItemContext.Provider>
      </Pressable>
@@ -288,7 +296,7 @@ export function Item({children, label, onPress, style, ...rest}: ItemProps) {

 export function ItemText({children, style}: ItemTextProps) {
  const t = useTheme()
-  const {disabled} = useMenuItemContext()
+  const {disabled, destructive} = useMenuItemContext()
  return (
    <Text
      style={[
@@ -296,6 +304,7 @@ export function ItemText({children, style}: ItemTextProps) {
        a.font_semi_bold,
        t.atoms.text_contrast_high,
        style,
+        destructive && {color: t.palette.negative_500},
        disabled && t.atoms.text_contrast_low,
      ]}>
      {children}
@@ -305,7 +314,7 @@ export function ItemText({children, style}: ItemTextProps) {

 export function ItemIcon({icon: Comp, position = 'left', fill}: ItemIconProps) {
  const t = useTheme()
-  const {disabled} = useMenuItemContext()
+  const {disabled, destructive} = useMenuItemContext()
  return (
    <View
      style={[
@@ -324,7 +333,9 @@ export function ItemIcon({icon: Comp, position = 'left', fill}: ItemIconProps) {
            ? fill({disabled})
            : disabled
              ? t.atoms.text_contrast_low.color
-              : t.atoms.text_contrast_medium.color
+              : destructive
+                ? t.palette.negative_500
+                : t.atoms.text_contrast_medium.color
        }
      />
    </View>
@@ -15,6 +15,7 @@ export type ContextType = {

 export type ItemContextType = {
  disabled: boolean
+  destructive: boolean
 }

 export type RadixPassThroughTriggerProps = {
@@ -99,6 +100,7 @@ export type ItemProps = React.PropsWithChildren<
    ViewStyleProp & {
      label: string
      onPress: (e: GestureResponderEvent) => void
+      destructive?: boolean
    }
 >

@@ -18,6 +18,7 @@ import {DotGrid3x1_Stroke2_Corner0_Rounded as EllipsisIcon} from '#/components/i
 import {Message_Stroke2_Corner0_Rounded as MessageIcon} from '#/components/icons/Message'
 import {
  Person_Stroke2_Corner2_Rounded as PersonIcon,
+  PersonCheck_Stroke2_Corner0_Rounded as PersonCheck,
  PersonX_Stroke2_Corner0_Rounded as PersonXIcon,
 } from '#/components/icons/Person'
 import * as Menu from '#/components/Menu'
@@ -180,29 +181,30 @@ export function MemberMenu({
        </Menu.Trigger>
        <Menu.Outer>
          <Menu.Group>
+            <Menu.Item
+              label={l`Message ${displayName}`}
+              onPress={handleMessageMember}>
+              <Menu.ItemIcon icon={MessageIcon} />
+              <Menu.ItemText>
+                <Trans context="action">Message</Trans>
+              </Menu.ItemText>
+            </Menu.Item>
            <Menu.Item
              label={l`View ${displayName}’s profile`}
              onPress={() => {
                navigation.navigate('Profile', {name: profile.did})
              }}>
+              <Menu.ItemIcon icon={PersonIcon} />
              <Menu.ItemText>
                <Trans>Go to profile</Trans>
              </Menu.ItemText>
-              <Menu.ItemIcon icon={PersonIcon} />
-            </Menu.Item>
-            <Menu.Item
-              label={l`Message ${displayName}`}
-              onPress={handleMessageMember}>
-              <Menu.ItemText>
-                <Trans context="action">Message</Trans>
-              </Menu.ItemText>
-              <Menu.ItemIcon icon={MessageIcon} />
            </Menu.Item>
          </Menu.Group>
          <Menu.Divider />
          <Menu.Group>
            {canBlockMember ? (
              <Menu.Item
+                destructive
                label={
                  profile.viewer?.blocking
                    ? l`Unblock ${displayName}`
@@ -213,31 +215,35 @@ export function MemberMenu({
                    ? handleBlockMember
                    : blockMemberPrompt.open
                }>
+                <Menu.ItemIcon
+                  icon={profile.viewer?.blocking ? PersonCheck : PersonXIcon}
+                />
                <Menu.ItemText>
-                  <Trans>Block</Trans>
+                  {profile.viewer?.blocking ? l`Unblock` : l`Block`}
                </Menu.ItemText>
-                <Menu.ItemIcon icon={PersonXIcon} />
              </Menu.Item>
            ) : null}
            {canRemoveMember ? (
              <Menu.Item
+                destructive
                label={l`Remove ${displayName} from this group chat`}
                onPress={() => removeMembers({members: [profile.did]})}>
+                <Menu.ItemIcon icon={ArrowBoxLeftIcon} />
                <Menu.ItemText>
                  <Trans>Remove from chat</Trans>
                </Menu.ItemText>
-                <Menu.ItemIcon icon={ArrowBoxLeftIcon} />
              </Menu.Item>
            ) : null}
            {canUninviteMember ? (
              <Menu.Item
+                destructive
                label={l`Uninvite ${displayName} from this group chat`}
                // TODO Need to wire up the uninvite flow. -dsb
                onPress={() => {}}>
+                <Menu.ItemIcon icon={ArrowBoxLeftIcon} />
                <Menu.ItemText>
                  <Trans>Uninvite</Trans>
                </Menu.ItemText>
-                <Menu.ItemIcon icon={ArrowBoxLeftIcon} />
              </Menu.Item>
            ) : null}
          </Menu.Group>
@@ -595,7 +595,7 @@ function SettingsButton({
          a.font_medium,
          a.text_center,
          a.pt_xs,
-          t.atoms.text_contrast_medium,
+          t.atoms.text,
        ]}>
        {text}
      </Text>