Update presentation of settings menus (#10425)

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