From dbaa0e583ab973831b64c69de2304326368afd85 Mon Sep 17 00:00:00 2001
From: vineyardbovines <spencerfpope@gmail.com>
Date: Tue, 21 Apr 2026 12:48:50 -0400
Subject: [PATCH] feat(lightbox): reskin web chrome buttons to match native

Replace the blurred-backdrop Button for the menu trigger and close button
with CircleChromeButton wrapped in a Pressable/View, matching the translucent
dark-circle aesthetic used by the native chrome.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/features/lightbox/Lightbox.web.tsx | 49 +++++++++-----------------
 1 file changed, 16 insertions(+), 33 deletions(-)

diff --git a/src/features/lightbox/Lightbox.web.tsx b/src/features/lightbox/Lightbox.web.tsx
index 9dda275e09..b4cd20fdf4 100644
--- a/src/features/lightbox/Lightbox.web.tsx
+++ b/src/features/lightbox/Lightbox.web.tsx
@@ -29,6 +29,7 @@ import {Loader} from '#/components/Loader'
 import * as Menu from '#/components/Menu'
 import * as Toast from '#/components/Toast'
 import {Text} from '#/components/Typography'
+import {CircleChromeButton} from '#/features/lightbox/chrome/CircleChromeButton'
 import {useLightbox, useLightboxControls} from '#/features/lightbox/state'
 import {type ImageSource} from '#/features/lightbox/types'
 
@@ -251,25 +252,16 @@ function LightboxGallery({
       <Menu.Root>
         <Menu.Trigger label={_(msg`Image options`)}>
           {({props}) => (
-            <Button
+            <Pressable
               {...props}
-              style={[
-                a.absolute,
-                styles.menuBtn,
-                styles.blurredBackdrop,
-                a.transition_color,
-                delayedFadeInAnim,
-              ]}
-              hoverStyle={styles.blurredBackdropHover}
-              color="secondary"
-              label={_(msg`Image options`)}
-              shape="round"
-              size={gtPhone ? 'large' : 'small'}>
-              <EllipsisIcon
-                size={gtPhone ? 'md' : 'sm'}
-                style={{color: t.palette.white}}
+              style={[a.absolute, styles.menuBtn, delayedFadeInAnim]}
+              accessibilityLabel={_(msg`Image options`)}
+              accessibilityHint="">
+              <CircleChromeButton
+                icon={EllipsisIcon}
+                label={_(msg`Image options`)}
               />
-            </Button>
+            </Pressable>
           )}
         </Menu.Trigger>
         <Menu.Outer>
@@ -294,22 +286,13 @@ function LightboxGallery({
           </Menu.Group>
         </Menu.Outer>
       </Menu.Root>
-      <Button
-        onPress={onClose}
-        style={[
-          a.absolute,
-          styles.closeBtn,
-          styles.blurredBackdrop,
-          a.transition_color,
-          delayedFadeInAnim,
-        ]}
-        hoverStyle={styles.blurredBackdropHover}
-        color="secondary"
-        label={_(msg`Close image viewer`)}
-        shape="round"
-        size={gtPhone ? 'large' : 'small'}>
-        <XIcon size={gtPhone ? 'md' : 'sm'} style={{color: t.palette.white}} />
-      </Button>
+      <View style={[a.absolute, styles.closeBtn, delayedFadeInAnim]}>
+        <CircleChromeButton
+          icon={XIcon}
+          label={_(msg`Close image viewer`)}
+          onPress={onClose}
+        />
+      </View>
     </View>
   )
 }