StatusActionButton: treat element as a group

app/soapbox/components/status_action_bar.tsx

@@ -646,21 +646,20 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
           title={replyTitle}
           icon={require('@tabler/icons/icons/message-circle.svg')}
           onClick={this.handleReplyClick}
-          to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`}
           count={replyCount}
         />
 
         <StatusAction>
           {reblogButton}
           {reblogCount > 0 && (
-            <StatusActionCounter onClick={this.handleOpenReblogsModal} count={reblogCount} />
+            <StatusActionCounter count={reblogCount} />
           )}
         </StatusAction>
 
         {features.emojiReacts ? (
           <div
             ref={this.setRef}
-            className='flex relative items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'
+            className='group flex relative items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'
           >
             <Hoverable
               component={(
@@ -673,8 +672,8 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
             >
               <IconButton
                 className={classNames({
-                  'text-gray-400 hover:text-gray-600 dark:hover:text-white': !meEmojiReact,
+                  'text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white': !meEmojiReact,
-                  'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
+                  'text-accent-300 group-hover:text-accent-300': Boolean(meEmojiReact),
                 })}
                 title={meEmojiTitle}
                 src={require('@tabler/icons/icons/heart.svg')}
@@ -688,10 +687,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
 
             {emojiReactCount > 0 && (
               (features.exposableReactions && !features.emojiReacts) ? (
-                <StatusActionCounter
+                <StatusActionCounter count={emojiReactCount} />
-                  to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/likes`}
-                  count={emojiReactCount}
-                />
               ) : (
                 <StatusActionCounter count={emojiReactCount} />
               )
@@ -703,7 +699,6 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
             icon={require('@tabler/icons/icons/heart.svg')}
             onClick={this.handleLikeButtonClick}
             active={Boolean(meEmojiReact)}
-            to={features.exposableReactions ? `/@${status.getIn(['account', 'acct'])}/posts/${status.id}/likes`: undefined}
             count={favouriteCount}
           />
         )}

app/soapbox/components/ui/status/status-action-button.tsx

@@ -1,31 +1,26 @@
 import classNames from 'classnames';
 import React from 'react';
-import { Link } from 'react-router-dom';
 
-import { IconButton, Text } from 'soapbox/components/ui';
+import { IconButton } from 'soapbox/components/ui';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 interface IStatusActionCounter {
   count: number,
-  onClick?: () => void,
-  to?: string,
 }
 
 /** Action button numerical counter, eg "5" likes */
-const StatusActionCounter: React.FC<IStatusActionCounter> = ({ to = '#', onClick, count = 0 }): JSX.Element => {
+const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0 }): JSX.Element => {
-
-  const handleClick: React.EventHandler<React.MouseEvent> = e => {
-    if (onClick) {
-      onClick();
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
-
   return (
-    <Link to={to} onClick={handleClick}>
+    <span className='text-xs font-semibold text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white'>{shortNumberFormat(count)}</span>
-      <Text size='xs' theme='muted'>{shortNumberFormat(count)}</Text>
+  );
-    </Link>
+};
+
+/** Status action container element */
+const StatusAction: React.FC = ({ children }) => {
+  return (
+    <div className='group flex items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'>
+      {children}
+    </div>
   );
 };
 
@@ -35,20 +30,10 @@ interface IStatusActionButton {
   count?: number,
   active?: boolean,
   title?: string,
-  to?: string,
 }
 
-/** Status action container element */
-const StatusAction: React.FC = ({ children }) => {
-  return (
-    <div className='flex items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'>
-      {children}
-    </div>
-  );
-};
-
 /** Action button (eg "Like") for a Status */
-const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, to, active = false, onClick, count = 0 }): JSX.Element => {
+const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, active = false, onClick, count = 0 }): JSX.Element => {
 
   const handleClick: React.EventHandler<React.MouseEvent> = (e) => {
     onClick();
@@ -62,8 +47,8 @@ const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, to, ac
         title={title}
         src={icon}
         onClick={handleClick}
-        className={classNames('text-gray-400 hover:text-gray-600 dark:hover:text-white', {
+        className={classNames('text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white', {
-          'text-accent-300 hover:text-accent-300': active,
+          'text-accent-300 group-hover:text-accent-300': active,
           // TODO: repost button
           // 'text-success-600 hover:text-success-600': active,
         })}
@@ -72,9 +57,9 @@ const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, to, ac
         })}
       />
 
-      {count ? (
+      {(count || null) && (
-        <StatusActionCounter to={to} count={count} />
+        <StatusActionCounter count={count} />
-      ) : null}
+      )}
     </StatusAction>
   );
 };