Link cards (#5677)

* New link card styles

* Cleanup of consituent parts, add hover state

* Fix gif alt text view

* Fix alt text view more

* Remove dupe

* Update remove button

* Remove added margin on gif

src/view/com/composer/ExternalEmbedRemoveBtn.tsx

@@ -1,34 +1,26 @@
 import React from 'react'
-import {TouchableOpacity} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {View} from 'react-native'
 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
-      style={{
-        position: 'absolute',
-        top: 10,
-        right: 10,
-        height: 36,
-        width: 36,
-        backgroundColor: 'rgba(0, 0, 0, 0.75)',
-        borderRadius: 18,
-        alignItems: 'center',
-        justifyContent: 'center',
-        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>
+    <View style={[a.absolute, a.pt_sm, a.pr_sm, {top: 0, right: 0}]}>
+      <Button
+        label={_(msg`Remove attachment`)}
+        onPress={onRemove}
+        size="small"
+        variant="solid"
+        color="secondary"
+        shape="round">
+        <ButtonIcon icon={X} size="sm" />
+      </Button>
+    </View>
   )
 }

src/view/com/composer/GifAltText.tsx

@@ -13,7 +13,7 @@ import {isAndroid} from '#/platform/detection'
 import {useResolveGifQuery} from '#/state/queries/resolve-link'
 import {Gif} from '#/state/queries/tenor'
 import {AltTextCounterWrapper} from '#/view/com/composer/AltTextCounterWrapper'
-import {atoms as a, native, useTheme} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DialogControlProps} from '#/components/Dialog'
@@ -213,7 +213,7 @@ function AltTextInner({
               isPreferredAltText={true}
               params={params}
               hideAlt
-              style={[native({maxHeight: 225})]}
+              style={[{height: 225}]}
             />
           </View>
         </View>