diff --git a/app/soapbox/components/status_action_bar.tsx b/app/soapbox/components/status_action_bar.tsx index fb27f06f9..35b5dd6d9 100644 --- a/app/soapbox/components/status_action_bar.tsx +++ b/app/soapbox/components/status_action_bar.tsx @@ -646,21 +646,20 @@ class StatusActionBar extends ImmutablePureComponent {reblogButton} {reblogCount > 0 && ( - + )} {features.emojiReacts ? (
0 && ( (features.exposableReactions && !features.emojiReacts) ? ( - + ) : ( ) @@ -703,7 +699,6 @@ class StatusActionBar extends ImmutablePureComponent )} diff --git a/app/soapbox/components/ui/status/status-action-button.tsx b/app/soapbox/components/ui/status/status-action-button.tsx index 210829a97..635b891df 100644 --- a/app/soapbox/components/ui/status/status-action-button.tsx +++ b/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 = ({ to = '#', onClick, count = 0 }): JSX.Element => { - - const handleClick: React.EventHandler = e => { - if (onClick) { - onClick(); - e.preventDefault(); - e.stopPropagation(); - } - }; - +const StatusActionCounter: React.FC = ({ count = 0 }): JSX.Element => { return ( - - {shortNumberFormat(count)} - + {shortNumberFormat(count)} + ); +}; + +/** Status action container element */ +const StatusAction: React.FC = ({ children }) => { + return ( +
+ {children} +
); }; @@ -35,20 +30,10 @@ interface IStatusActionButton { count?: number, active?: boolean, title?: string, - to?: string, } -/** Status action container element */ -const StatusAction: React.FC = ({ children }) => { - return ( -
- {children} -
- ); -}; - /** Action button (eg "Like") for a Status */ -const StatusActionButton: React.FC = ({ icon, title, to, active = false, onClick, count = 0 }): JSX.Element => { +const StatusActionButton: React.FC = ({ icon, title, active = false, onClick, count = 0 }): JSX.Element => { const handleClick: React.EventHandler = (e) => { onClick(); @@ -62,8 +47,8 @@ const StatusActionButton: React.FC = ({ icon, title, to, ac title={title} src={icon} onClick={handleClick} - className={classNames('text-gray-400 hover:text-gray-600 dark:hover:text-white', { - 'text-accent-300 hover:text-accent-300': active, + className={classNames('text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white', { + '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 = ({ icon, title, to, ac })} /> - {count ? ( - - ) : null} + {(count || null) && ( + + )} ); };