match context menu with designs

src/components/ContextMenu/index.tsx

@@ -850,10 +850,11 @@ export function Item({
         !unstyled && [
           a.flex_row,
           a.align_center,
-          a.px_2xl,
+          a.px_lg,
+          a.gap_sm,
           a.rounded_md,
           t.atoms.bg_contrast_25,
-          {gap: 6, minHeight: 44, paddingVertical: 10},
+          {minHeight: 44, paddingVertical: 10},
           (focused || pressed || context.hoveredMenuItem === id) &&
             !rest.disabled &&
             t.atoms.bg_contrast_50,
@@ -882,8 +883,7 @@ export function ItemText({children, style}: ItemTextProps) {
       style={[
         a.flex_1,
         a.text_md,
-        a.font_semi_bold,
-        t.atoms.text_contrast_high,
+        a.font_medium,
         style,
         destructive && {color: t.palette.negative_500},
         disabled && t.atoms.text_contrast_low,
@@ -898,13 +898,13 @@ export function ItemIcon({icon: Comp}: ItemIconProps) {
   const {disabled, destructive} = useContextMenuItemContext()
   return (
     <Comp
-      size="lg"
+      size="md"
       fill={
         disabled
           ? t.atoms.text_contrast_low.color
           : destructive
             ? t.palette.negative_500
-            : t.atoms.text_contrast_medium.color
+            : t.atoms.text.color
       }
     />
   )

src/components/dms/MessageContextMenu.tsx

@@ -20,10 +20,10 @@ import {atoms as a} from '#/alf'
 import * as ContextMenu from '#/components/ContextMenu'
 import {type TriggerProps} from '#/components/ContextMenu/types'
 import {useMessageDialogs} from '#/components/dms/MessageOverlays'
+import {ArrowCornerDownRight_Stroke2_Corner2_Rounded as ReplyIcon} from '#/components/icons/ArrowCornerDownRight'
 import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard'
 import {Flag_Stroke2_Corner0_Rounded as FlagIcon} from '#/components/icons/Flag'
 import {Language_Stroke2_Corner2_Rounded as LanguageIcon} from '#/components/icons/Language'
-import {Reply as ReplyIcon} from '#/components/icons/Reply'
 import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
 import * as Toast from '#/components/Toast'
 import {useAnalytics} from '#/analytics'
@@ -180,7 +180,6 @@ export let MessageContextMenu = ({
           </>
         )}
         <ContextMenu.Item
-          destructive
           testID="messageDropdownDeleteBtn"
           label={l`Delete message for me`}
           onPress={() => openDeleteMessage(message)}>
@@ -189,7 +188,6 @@ export let MessageContextMenu = ({
         </ContextMenu.Item>
         {!isFromSelf && (
           <ContextMenu.Item
-            destructive
             testID="messageDropdownReportBtn"
             label={l`Report message`}
             onPress={() => openReportMessage(message, senderProfile)}>