From 0bffe4a227e734024aa07361d5dc9d7b6a69a7ca Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 3 Aug 2022 11:05:57 -0500
Subject: [PATCH] Refactor status Card description with UI components

---
 .../features/status/components/card.tsx       | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/app/soapbox/features/status/components/card.tsx b/app/soapbox/features/status/components/card.tsx
index 4633ef743..470446b99 100644
--- a/app/soapbox/features/status/components/card.tsx
+++ b/app/soapbox/features/status/components/card.tsx
@@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react';
 
 import Blurhash from 'soapbox/components/blurhash';
 import Icon from 'soapbox/components/icon';
-import { HStack, Stack } from 'soapbox/components/ui';
+import { HStack, Stack, Text } from 'soapbox/components/ui';
 import { normalizeAttachment } from 'soapbox/normalizers';
 
 import type { Card as CardEntity, Attachment } from 'soapbox/types/entities';
@@ -147,22 +147,27 @@ const Card: React.FC<ICard> = ({
       rel='noopener'
       target='_blank'
     >
-      <strong>{trimmedTitle}</strong>
+      <span>{trimmedTitle}</span>
     </a>
   ) : (
-    <strong title={trimmedTitle}>{trimmedTitle}</strong>
+    <span title={trimmedTitle}>{trimmedTitle}</span>
   );
 
   const description = (
     <Stack space={2} className='flex-1 overflow-hidden p-4'>
       {trimmedTitle && (
-        <span className='block font-medium text-gray-800 dark:text-gray-200 no-underline'>{title}</span>
+        <Text weight='bold'>{title}</Text>
       )}
       {trimmedDescription && (
-        <p className='text-gray-500 dark:text-gray-400'>{trimmedDescription}</p>
+        <Text>{trimmedDescription}</Text>
       )}
-      <HStack>
-        <Icon src={require('@tabler/icons/link.svg')} /> {card.provider_name}
+      <HStack space={1} alignItems='center'>
+        <Text tag='span' theme='muted'>
+          <Icon src={require('@tabler/icons/link.svg')} />
+        </Text>
+        <Text tag='span' theme='muted'>
+          {card.provider_name}
+        </Text>
       </HStack>
     </Stack>
   );