From 9e8dc67a5f523c23ed92f4073051c3c429c64661 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Mon, 6 Feb 2023 15:11:11 -0600
Subject: [PATCH] Remove fallback gradient on external links without thumbs
 (#164)

* Remove fallback gradient on external links without thumbs

* Remove fallback gradient on external links without thumbs in the composer preview
---
 src/view/com/composer/ExternalEmbed.tsx | 25 +++++++------------------
 src/view/com/util/PostEmbeds.tsx        | 14 +-------------
 2 files changed, 8 insertions(+), 31 deletions(-)

diff --git a/src/view/com/composer/ExternalEmbed.tsx b/src/view/com/composer/ExternalEmbed.tsx
index b7c10e4c95..ab91d3c59a 100644
--- a/src/view/com/composer/ExternalEmbed.tsx
+++ b/src/view/com/composer/ExternalEmbed.tsx
@@ -7,10 +7,9 @@ import {
 } from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {BlurView} from '@react-native-community/blur'
-import LinearGradient from 'react-native-linear-gradient'
 import {Image} from '../util/images/Image'
 import {Text} from '../util/text/Text'
-import {s, gradients} from '../../lib/styles'
+import {s} from '../../lib/styles'
 import {usePalette} from '../../lib/hooks/usePalette'
 import {ExternalEmbedDraft} from '../../../state/lib/api'
 
@@ -39,19 +38,7 @@ export const ExternalEmbed = ({
         </View>
       ) : link.localThumb ? (
         <Image uri={link.localThumb.path} style={styles.image} />
-      ) : (
-        <LinearGradient
-          colors={[gradients.blueDark.start, gradients.blueDark.end]}
-          start={{x: 0, y: 0}}
-          end={{x: 1, y: 1}}
-          style={[styles.image, styles.imageFallback]}
-        />
-      )}
-      <TouchableWithoutFeedback onPress={onRemove}>
-        <BlurView style={styles.removeBtn} blurType="dark">
-          <FontAwesomeIcon size={18} icon="xmark" style={s.white} />
-        </BlurView>
-      </TouchableWithoutFeedback>
+      ) : undefined}
       <View style={styles.inner}>
         {!!link.meta?.title && (
           <Text type="sm-bold" numberOfLines={2} style={[pal.text]}>
@@ -78,6 +65,11 @@ export const ExternalEmbed = ({
           </Text>
         )}
       </View>
+      <TouchableWithoutFeedback onPress={onRemove}>
+        <BlurView style={styles.removeBtn} blurType="dark">
+          <FontAwesomeIcon size={18} icon="xmark" style={s.white} />
+        </BlurView>
+      </TouchableWithoutFeedback>
     </View>
   )
 }
@@ -97,9 +89,6 @@ const styles = StyleSheet.create({
     width: '100%',
     maxHeight: 200,
   },
-  imageFallback: {
-    height: 160,
-  },
   removeBtn: {
     position: 'absolute',
     top: 10,
diff --git a/src/view/com/util/PostEmbeds.tsx b/src/view/com/util/PostEmbeds.tsx
index 5c2af59e13..ab71933821 100644
--- a/src/view/com/util/PostEmbeds.tsx
+++ b/src/view/com/util/PostEmbeds.tsx
@@ -7,7 +7,6 @@ import {
   Image as RNImage,
 } 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 {Image} from './images/Image'
@@ -15,7 +14,6 @@ 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 {saveImageModal} from '../../../lib/images'
 
 type Embed =
@@ -112,14 +110,7 @@ export function PostEmbeds({
         noFeedback>
         {link.thumb ? (
           <Image uri={link.thumb} style={styles.extImage} />
-        ) : (
-          <LinearGradient
-            colors={[gradients.blueDark.start, gradients.blueDark.end]}
-            start={{x: 0, y: 0}}
-            end={{x: 1, y: 1}}
-            style={[styles.extImage, styles.extImageFallback]}
-          />
-        )}
+        ) : undefined}
         <View style={styles.extInner}>
           <Text type="md-bold" numberOfLines={2} style={[pal.text]}>
             {link.title || link.uri}
@@ -167,9 +158,6 @@ const styles = StyleSheet.create({
     width: '100%',
     maxHeight: 200,
   },
-  extImageFallback: {
-    height: 160,
-  },
   extUri: {
     marginTop: 2,
   },