diff --git a/src/components/MetaPreview/ActionButton/styles.less b/src/components/MetaPreview/ActionButton/styles.less index 66821b615..6f7421ffb 100644 --- a/src/components/MetaPreview/ActionButton/styles.less +++ b/src/components/MetaPreview/ActionButton/styles.less @@ -58,31 +58,6 @@ color: var(--primary-background-color); } } - - &.rating-button { - &.active { - background-color: var(--primary-accent-color); - - .icon { - color: var(--primary-foreground-color); - } - - .label-container { - display: flex; - - .label { - color: var(--primary-foreground-color); - opacity: 1; - } - } - } - - &:not(.active) { - .label-container { - display: none; - } - } - } } @media @phone-landscape { diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js index 37adcc912..589150d82 100644 --- a/src/components/MetaPreview/MetaPreview.js +++ b/src/components/MetaPreview/MetaPreview.js @@ -268,10 +268,9 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou })} icon={'thumbs-up'} label={t('LIKE')} - showLabel={liked} + tooltip={true} tabIndex={compact ? -1 : 0} onClick={onLiked} - tooltip={compact} /> : null @@ -284,10 +283,9 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou })} icon={'heart'} label={t('LOVE')} - showLabel={loved} + tooltip={true} tabIndex={compact ? -1 : 0} onClick={onLoved} - tooltip={compact} /> : null diff --git a/src/components/MetaPreview/styles.less b/src/components/MetaPreview/styles.less index cddfbbed1..1e9442087 100644 --- a/src/components/MetaPreview/styles.less +++ b/src/components/MetaPreview/styles.less @@ -210,20 +210,10 @@ &.rating-button { &.active { - width: auto; - padding: 0 2rem; - border-radius: 4rem; background-color: var(--primary-accent-color); - - &:hover, &:focus { - background-color: var(--primary-accent-color); - opacity: 0.8; - } - } - - &:not(.active) { - &:hover, &:focus { - background-color: var(--overlay-color); + + .icon { + color: var(--primary-foreground-color); } } } diff --git a/src/components/MetaPreview/useRating.ts b/src/components/MetaPreview/useRating.ts index d8600c931..726b5e334 100644 --- a/src/components/MetaPreview/useRating.ts +++ b/src/components/MetaPreview/useRating.ts @@ -20,7 +20,7 @@ const useRating = (metaId?: string, like?: Like) => { }, }, }); - }, [core]); + }, []); const liked = useMemo(() => { return like?.content === 'liked'; @@ -32,11 +32,11 @@ const useRating = (metaId?: string, like?: Like) => { const onLiked = useCallback(() => { setRating(like?.content === 'liked' ? null : 'liked'); - }, [like, setRating]); + }, [like]); const onLoved = useCallback(() => { setRating(like?.content === 'loved' ? null : 'loved'); - }, [like, setRating]); + }, [like]); return { onLiked,