Live (#8354)

src/components/Dialog/index.tsx

@@ -307,7 +307,7 @@ export const InnerFlatList = React.forwardRef<
   )
 })
 
-export function Handle() {
+export function Handle({difference = false}: {difference?: boolean}) {
   const t = useTheme()
   const {_} = useLingui()
   const {screenReaderEnabled} = useA11y()
@@ -328,9 +328,19 @@ export function Handle() {
               width: 35,
               height: 5,
               alignSelf: 'center',
-              backgroundColor: t.palette.contrast_975,
-              opacity: 0.5,
             },
+            difference
+              ? {
+                  // TODO: mixBlendMode is only available on the new architecture -sfn
+                  // backgroundColor: t.palette.white,
+                  // mixBlendMode: 'difference',
+                  backgroundColor: t.palette.white,
+                  opacity: 0.75,
+                }
+              : {
+                  backgroundColor: t.palette.contrast_975,
+                  opacity: 0.5,
+                },
           ]}
         />
       </Pressable>

src/components/Dialog/index.web.tsx

@@ -195,13 +195,7 @@ export function Inner({
           onDismiss={close}
           style={{display: 'flex', flexDirection: 'column'}}>
           {header}
-          <View
-            style={[
-              gtMobile ? a.p_2xl : a.p_xl,
-              a.overflow_hidden,
-              a.rounded_md,
-              contentContainerStyle,
-            ]}>
+          <View style={[gtMobile ? a.p_2xl : a.p_xl, contentContainerStyle]}>
             {children}
           </View>
         </DismissableLayer.DismissableLayer>