StatusActionButton improvements

app/soapbox/components/status_action_bar.tsx

@@ -622,8 +622,8 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
         <IconButton
           disabled={!publicStatus}
           className={classNames({
-            'text-gray-400 hover:text-gray-600 dark:hover:text-white': !status.get('reblogged'),
-            'text-success-600 hover:text-success-600': status.get('reblogged'),
+            'text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white': !status.reblogged,
+            'text-success-600 group-hover:text-success-600': status.reblogged,
           })}
           title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
           src={reblogIcon}

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

@@ -6,19 +6,26 @@ import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 interface IStatusActionCounter {
   count: number,
+  className?: string,
 }
 
 /** Action button numerical counter, eg "5" likes */
-const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0 }): JSX.Element => {
+const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0, className }): JSX.Element => {
   return (
-    <span className='text-xs font-semibold text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white'>{shortNumberFormat(count)}</span>
+    <span className={classNames('text-xs font-semibold text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white', className)}>
+      {shortNumberFormat(count)}
+    </span>
   );
 };
 
+interface IStatusAction {
+  title?: string,
+}
+
 /** Status action container element */
-const StatusAction: React.FC = ({ children }) => {
+const StatusAction: React.FC<IStatusAction> = ({ title, 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'>
+    <div title={title} 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>
   );
@@ -42,13 +49,13 @@ const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, active
   };
 
   return (
-    <StatusAction>
+    <StatusAction title={title}>
       <IconButton
         title={title}
         src={icon}
         onClick={handleClick}
         className={classNames('text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white', {
-          'text-accent-300 group-hover:text-accent-300': active,
+          'text-accent-300 group-hover:text-accent-300 dark:group-hover:text-accent-300': active,
           // TODO: repost button
           // 'text-success-600 hover:text-success-600': active,
         })}
@@ -58,7 +65,10 @@ const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, active
       />
 
       {(count || null) && (
-        <StatusActionCounter count={count} />
+        <StatusActionCounter
+          className={classNames({ 'text-accent-300 group-hover:text-accent-300': active })}
+          count={count}
+        />
       )}
     </StatusAction>
   );