Update remove button

src/view/com/composer/ExternalEmbedRemoveBtn.tsx

@@ -1,34 +1,26 @@
 import React from 'react'
-import {TouchableOpacity} from 'react-native'
+import {View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {s} from 'lib/styles'
+import {atoms as a} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
+import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 
 export function ExternalEmbedRemoveBtn({onRemove}: {onRemove: () => void}) {
   const {_} = useLingui()
 
   return (
-    <TouchableOpacity
+    <View style={[a.absolute, a.pt_sm, a.pr_sm, {top: 0, right: 0}]}>
-      style={{
+      <Button
-        position: 'absolute',
+        label={_(msg`Remove attachment`)}
-        top: 10,
+        onPress={onRemove}
-        right: 10,
+        size="small"
-        height: 36,
+        variant="solid"
-        width: 36,
+        color="secondary"
-        backgroundColor: 'rgba(0, 0, 0, 0.75)',
+        shape="round">
-        borderRadius: 18,
+        <ButtonIcon icon={X} size="sm" />
-        alignItems: 'center',
+      </Button>
-        justifyContent: 'center',
+    </View>
-        zIndex: 1,
-      }}
-      onPress={onRemove}
-      accessibilityRole="button"
-      accessibilityLabel={_(msg`Remove attachment`)}
-      accessibilityHint={_(msg`Removes the attachment`)}
-      onAccessibilityEscape={onRemove}>
-      <FontAwesomeIcon size={18} icon="xmark" style={s.white} />
-    </TouchableOpacity>
   )
 }