Update presentation of settings menus (#10425)

eslint-suppressions.json

@@ -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

src/components/Menu/index.tsx

@@ -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
       }
     />
   )

src/components/Menu/index.web.tsx

@@ -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>

src/components/Menu/types.ts

@@ -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
     }
 >
 

src/screens/Messages/ConversationSettings/MemberMenu.tsx

@@ -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>

src/screens/Messages/ConversationSettings/index.tsx

@@ -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>