diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js index 0b1694dbe0cf..fe7f90ed225d 100644 --- a/src/components/Reactions/EmojiReactionBubble.js +++ b/src/components/Reactions/EmojiReactionBubble.js @@ -9,12 +9,8 @@ import withCurrentUserPersonalDetails, { withCurrentUserPersonalDetailsPropTypes, } from '../withCurrentUserPersonalDetails'; import * as Report from '../../libs/actions/Report'; -import Tooltip from '../Tooltip'; -import ReactionTooltipContent from './ReactionTooltipContent'; const propTypes = { - emojiName: PropTypes.string.isRequired, - /** * The emoji codes to display in the bubble. */ @@ -63,41 +59,31 @@ const defaultProps = { const EmojiReactionBubble = (props) => { const hasUserReacted = Report.hasAccountIDReacted(props.currentUserPersonalDetails.accountID, props.reactionUsers); return ( - ( - - )} + [ + styles.emojiReactionBubble, + StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, hasUserReacted, props.sizeScale), + ]} + onPress={props.onPress} + onLongPress={props.onReactionListOpen} > - [ - styles.emojiReactionBubble, - StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, hasUserReacted, props.sizeScale), - ]} - onPress={props.onPress} - onLongPress={props.onReactionListOpen} + - - {props.emojiCodes.join('')} - - {props.count > 0 && ( - - {props.count} - - )} - - + {props.emojiCodes.join('')} + + {props.count > 0 && ( + + {props.count} + + )} + ); }; diff --git a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js index 6e561d4a5201..0ce7e798031f 100644 --- a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js +++ b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js @@ -44,7 +44,6 @@ const BaseQuickEmojiReactions = props => ( // Note: focus is handled by the Pressable component in EmojiReactionBubble { diff --git a/src/components/Reactions/ReportActionItemReactions.js b/src/components/Reactions/ReportActionItemReactions.js index cbac72accf5f..59d43a471169 100644 --- a/src/components/Reactions/ReportActionItemReactions.js +++ b/src/components/Reactions/ReportActionItemReactions.js @@ -7,6 +7,8 @@ import EmojiReactionBubble from './EmojiReactionBubble'; import emojis from '../../../assets/emojis'; import AddReactionBubble from './AddReactionBubble'; import getPreferredEmojiCode from './getPreferredEmojiCode'; +import Tooltip from '../Tooltip'; +import ReactionTooltipContent from './ReactionTooltipContent'; /** * Given an emoji object and a list of senders it will return an @@ -68,14 +70,23 @@ const ReportActionItemReactions = (props) => { }; return ( - + ( + + )} + > + + ); })} {reactionsWithCount.length > 0 && }