StatusActionBar: conditionally render dumb Like button

app/soapbox/components/status_action_bar.js

@@ -167,8 +167,6 @@ class StatusActionBar extends ImmutablePureComponent {
   handleLikeButtonClick = e => {
     const { features } = this.props;
 
-    e.stopPropagation();
-
     const meEmojiReact = getReactForStatus(this.props.status, this.props.allowedEmoji) || '👍';
 
     if (features.emojiReacts && isUserTouching()) {
@@ -650,6 +648,7 @@ class StatusActionBar extends ImmutablePureComponent {
           )}
         </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'
@@ -689,6 +688,16 @@ class StatusActionBar extends ImmutablePureComponent {
               )
             )}
           </div>
+        ): (
+          <StatusActionButton
+            title={intl.formatMessage(messages.favourite)}
+            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}
+          />
+        )}
 
         {canShare && (
           <StatusActionButton

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

@@ -62,7 +62,12 @@ const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, to, ac
         src={icon}
         onClick={handleClick}
         className={classNames('text-gray-400 hover:text-gray-600 dark:hover:text-white', {
-          'text-success-600 hover:text-success-600': active,
+          'text-accent-300 hover:text-accent-300': active,
+          // TODO: repost button
+          // 'text-success-600 hover:text-success-600': active,
+        })}
+        iconClassName={classNames({
+          'fill-accent-300': active,
         })}
       />