Visual improvements to post embeds for external links

src/view/com/util/PostEmbeds.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import {StyleSheet, StyleProp, View, ViewStyle} from 'react-native'
+import {Image, StyleSheet, StyleProp, View, ViewStyle} from 'react-native'
 import {AppBskyEmbedImages, AppBskyEmbedExternal} from '@atproto/api'
+import LinearGradient from 'react-native-linear-gradient'
 import {Link} from '../util/Link'
 import {Text} from './text/Text'
 import {AutoSizedImage} from './images/AutoSizedImage'
@@ -8,6 +9,8 @@ import {ImageLayoutGrid} from './images/ImageLayoutGrid'
 import {ImagesLightbox} from '../../../state/models/shell-ui'
 import {useStores} from '../../../state'
 import {usePalette} from '../../lib/hooks/usePalette'
+import {gradients} from '../../lib/styles'
+import {DEF_AVATAR} from '../../lib/assets'
 
 type Embed =
   | AppBskyEmbedImages.Presented
@@ -80,22 +83,37 @@ export function PostEmbeds({
         href={link.uri}
         noFeedback>
         {link.thumb ? (
-          <AutoSizedImage uri={link.thumb} containerStyle={{borderRadius: 4}} />
-        ) : undefined}
-        <Text type="h5" numberOfLines={2} style={pal.text}>
-          {link.title || link.uri}
-        </Text>
-        <Text type="body2" numberOfLines={1} style={pal.textLight}>
-          {link.uri}
-        </Text>
-        {link.description ? (
+          <AutoSizedImage uri={link.thumb} containerStyle={styles.extImage} />
+        ) : (
+          <LinearGradient
+            colors={[gradients.blue.start, gradients.blue.end]}
+            start={{x: 0, y: 0}}
+            end={{x: 1, y: 1}}
+            style={[styles.extImage, styles.extImageFallback]}
+          />
+        )}
+        <View style={styles.extInner}>
           <Text
-            type="body1"
+            type="body2"
             numberOfLines={2}
-            style={[pal.text, styles.extDescription]}>
-            {link.description}
+            style={[pal.text, styles.extTitle]}>
+            {link.title || link.uri}
           </Text>
-        ) : undefined}
+          <Text
+            type="body2"
+            numberOfLines={1}
+            style={[pal.textLight, styles.extUri]}>
+            {link.uri}
+          </Text>
+          {link.description ? (
+            <Text
+              type="body2"
+              numberOfLines={2}
+              style={[pal.text, styles.extDescription]}>
+              {link.description}
+            </Text>
+          ) : undefined}
+        </View>
       </Link>
     )
   }
@@ -107,11 +125,28 @@ const styles = StyleSheet.create({
     marginTop: 4,
   },
   extOuter: {
-    padding: 10,
     borderWidth: 1,
-    borderRadius: 4,
+    borderRadius: 8,
     marginTop: 4,
   },
+  extInner: {
+    padding: 10,
+  },
+  extImage: {
+    borderTopLeftRadius: 6,
+    borderTopRightRadius: 6,
+    width: '100%',
+    height: 200,
+  },
+  extImageFallback: {
+    height: 160,
+  },
+  extTitle: {
+    fontWeight: '600',
+  },
+  extUri: {
+    marginTop: 2,
+  },
   extDescription: {
     marginTop: 4,
   },