fix(mobile): Android menus use the theme's card color and rounded corners

apps/mobile/src/components/ui/AndroidAnchoredMenu.android.tsx

@@ -41,7 +41,7 @@ export type AndroidAnchoredMenuProps = {
 };
 
 export function AndroidAnchoredMenu(props: AndroidAnchoredMenuProps) {
-  const { scale, menuWidth: desiredMenuWidth } = useAndroidControlSizing();
+  const { scale, menuWidth: desiredMenuWidth, menuCornerRadius } = useAndroidControlSizing();
   const [anchor, setAnchor] = useState<AnchorSnapshot | null>(null);
   const [path, setPath] = useState<readonly MenuAction[]>([]);
   const [rootHeight, setRootHeight] = useState<number | null>(null);
@@ -182,12 +182,12 @@ export function AndroidAnchoredMenu(props: AndroidAnchoredMenuProps) {
             ) : (
               <View
                 // No entering animation: it freezes this frame before the Compose host reports its size.
-                className="absolute overflow-hidden bg-card-alt shadow-md"
+                className="absolute overflow-hidden bg-grouped-card shadow-md"
                 style={{
                   left,
                   maxHeight,
                   width: menuWidth,
-                  borderRadius: 4 * scale,
+                  borderRadius: menuCornerRadius,
                   ...(opensDown
                     ? { top: local.y + local.height + ANCHOR_GAP }
                     : { bottom: (rootHeight ?? 0) - local.y + ANCHOR_GAP }),

apps/mobile/src/components/ui/MenuPopup.android.tsx

@@ -152,6 +152,7 @@ export function MenuPopupItems(
 
 export function MenuPopup(props: MenuPopupProps) {
   const { themeVariables: colors } = useAppearancePreferences();
+  const { menuCornerRadius } = useAndroidControlSizing();
   const items = <MenuPopupItems {...props} />;
   if (props.inline) {
     return (
@@ -175,7 +176,12 @@ export function MenuPopup(props: MenuPopupProps) {
         height: props.anchor.height,
       }}
     >
-      <DropdownMenu expanded onDismissRequest={props.onClose} color={colors["--color-card-alt"]}>
+      <DropdownMenu
+        expanded
+        onDismissRequest={props.onClose}
+        color={colors["--color-grouped-card"]}
+        cornerRadius={menuCornerRadius}
+      >
         <DropdownMenu.Trigger>
           <Box modifiers={[size(props.anchor.width, props.anchor.height)]} />
         </DropdownMenu.Trigger>

apps/mobile/src/lib/androidControlSizing.ts

@@ -16,6 +16,7 @@ export function resolveAndroidControlSizing(baseFontSize: number) {
     largeFabSize: Math.round(96 * scale),
     menuWidth: Math.round(250 * scale),
     menuItemHeight: Math.max(48, Math.round(48 * scale)),
+    menuCornerRadius: Math.round(16 * scale),
     fabClearance: fabSize * 2 + 36,
   };
 }