From 3a0e7537895c1edf991e03ad997fb0e311e38391 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Thu, 17 Nov 2022 15:03:30 -0500
Subject: [PATCH] Update design to likes / reposts in interaction bar

---
 .../status/components/detailed-status.tsx     |  2 +-
 .../components/status-interaction-bar.tsx     | 66 +++++++++++--------
 app/soapbox/locales/en.json                   |  2 +
 3 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/app/soapbox/features/status/components/detailed-status.tsx b/app/soapbox/features/status/components/detailed-status.tsx
index a1fdc5434..8405f5bed 100644
--- a/app/soapbox/features/status/components/detailed-status.tsx
+++ b/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'>
diff --git a/app/soapbox/features/status/components/status-interaction-bar.tsx b/app/soapbox/features/status/components/status-interaction-bar.tsx
index a0abcf98e..a92ed2fc6 100644
--- a/app/soapbox/features/status/components/status-interaction-bar.tsx
+++ b/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'
-            onClick={handleOpenReblogsModal}
-          />
+        <button
+          type='button'
+          onClick={handleOpenReblogsModal}
+          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'>
-            <FormattedNumber value={status.reblogs_count} />
-          </Text>
-        </HStack>
+            <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'
-            onClick={features.exposableReactions ? handleOpenFavouritesModal : undefined}
-          />
+        <button
+          type='button'
+          onClick={features.exposableReactions ? handleOpenFavouritesModal : undefined}
+          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>
 
-          <Text theme='muted' size='sm'>
-            <FormattedNumber value={status.favourites_count} />
-          </Text>
-        </HStack>
+            {/* 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>
       );
     }
 
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index b7c280137..fcdda9c46 100644
--- a/app/soapbox/locales/en.json
+++ b/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}",