Merge branch 'improve-link-previews' into 'develop'

Remove 'file-icon' in empty link preview

See merge request soapbox-pub/soapbox!2041

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Posts: letterbox images to 19:6 again.
 - Status Info: moved context (repost, pinned) to improve UX.
+- Posts: remove file icon from empty link previews.
 
 ### Fixed
 - Layout: use accent color for "floating action button" (mobile compose button).

app/soapbox/features/status/components/card.tsx

@@ -153,7 +153,7 @@ const Card: React.FC<ICard> = ({
     </Stack>
   );
 
-  let embed: React.ReactNode = '';
+  let embed: React.ReactNode = null;
 
   const canvas = (
     <Blurhash
@@ -240,12 +240,6 @@ const Card: React.FC<ICard> = ({
         {thumbnail}
       </div>
     );
-  } else {
-    embed = (
-      <div className='status-card__image status-card__image--empty'>
-        <Icon src={require('@tabler/icons/file-text.svg')} />
-      </div>
-    );
   }
 
   return (

app/styles/components/status.scss

@@ -61,7 +61,7 @@
 }
 
 .status-card {
-  @apply flex text-sm border border-solid border-gray-200 dark:border-gray-800 rounded-lg text-gray-800 dark:text-gray-200 min-h-[150px] no-underline overflow-hidden;
+  @apply flex text-sm border border-solid border-gray-200 dark:border-gray-800 rounded-lg text-gray-800 dark:text-gray-200 no-underline overflow-hidden;
 }
 
 a.status-card {
@@ -95,10 +95,6 @@ a.status-card {
       stroke-width: 1px;
     }
   }
-
-  &--empty {
-    flex: 0 0 80px;
-  }
 }
 
 .status-card.horizontal {