Update design to likes / reposts in interaction bar

app/soapbox/features/status/components/detailed-status.tsx

@@ -127,7 +127,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
           </Stack>
         </Stack>
 
-        <HStack justifyContent='between' alignItems='center' className='py-2' wrap>
+        <HStack justifyContent='between' alignItems='center' className='py-3' wrap>
           <StatusInteractionBar status={actualStatus} />
 
           <HStack space={1} alignItems='center'>

app/soapbox/features/status/components/status-interaction-bar.tsx

@@ -1,7 +1,7 @@
 import classNames from 'clsx';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import React from 'react';
-import { FormattedNumber } from 'react-intl';
+import { FormattedMessage, FormattedNumber } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { openModal } from 'soapbox/actions/modals';
@@ -69,18 +69,25 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
   const getReposts = () => {
     if (status.reblogs_count) {
       return (
-        <HStack space={0.5} alignItems='center'>
-          <IconButton
-            className='text-success-600 cursor-pointer'
-            src={require('@tabler/icons/repeat.svg')}
-            role='presentation'
+        <button
+          type='button'
           onClick={handleOpenReblogsModal}
-          />
-
-          <Text theme='muted' size='sm'>
+          className='text-gray-600 dark:text-gray-700 hover:underline'
+        >
+          <HStack space={1} alignItems='center'>
+            <Text theme='primary' size='sm' weight='bold'>
               <FormattedNumber value={status.reblogs_count} />
             </Text>
+
+            <Text theme='muted' size='sm'>
+              <FormattedMessage
+                id='status.interactions.reblogs'
+                defaultMessage='{count, plural, one {Repost} other {Reposts}}'
+                values={{ count: status.reblogs_count }}
+              />
+            </Text>
           </HStack>
+        </button>
       );
     }
 
@@ -97,22 +104,27 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
   const getFavourites = () => {
     if (status.favourites_count) {
       return (
-        <HStack space={0.5} alignItems='center'>
-          <IconButton
-            className={classNames({
-              'text-accent-300': true,
-              'cursor-default': !features.exposableReactions,
-            })}
-            src={require('@tabler/icons/heart.svg')}
-            iconClassName='fill-accent-300'
-            role='presentation'
+        <button
+          type='button'
           onClick={features.exposableReactions ? handleOpenFavouritesModal : undefined}
-          />
-
-          <Text theme='muted' size='sm'>
+          className='text-gray-600 dark:text-gray-700 hover:underline'
+        >
+          <HStack space={1} alignItems='center'>
+            <Text theme='primary' size='sm' weight='bold'>
               <FormattedNumber value={status.favourites_count} />
             </Text>
+
+            {/* default: !features.exposableReactions */}
+
+            <Text theme='muted' size='sm'>
+              <FormattedMessage
+                id='status.interactions.favourites'
+                defaultMessage='{count, plural, one {Like} other {Likes}}'
+                values={{ count: status.favourites_count }}
+              />
+            </Text>
           </HStack>
+        </button>
       );
     }
 

app/soapbox/locales/en.json

@@ -994,6 +994,8 @@
   "status.in_review_summary.summary": "This post has been sent to Moderation for review and is only visible to you.",
   "status.in_review_summary.contact": "If you believe this is in error please {link}.",
   "status.in_review_summary.link": "Contact Support",
+  "status.interactions.reblogs": "{count, plural, one {Repost} other {Reposts}}",
+  "status.interactions.favourites": "{count, plural, one {Like} other {Likes}}",
   "status.load_more": "Load more",
   "status.media_hidden": "Media hidden",
   "status.mention": "Mention @{name}",