reactions bar tweaks

bigbluebutton-html5/imports/ui/components/actions-bar/reactions-button/component.jsx

@@ -15,6 +15,7 @@ const ReactionsButton = (props) => {
     userId,
     raiseHand,
     isMobile,
+    currentUserReaction,
   } = props;
 
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
@@ -34,13 +35,12 @@ const ReactionsButton = (props) => {
   };
 
   const handleReactionSelect = (reaction) => {
-    UserReactionService.setUserReaction(reaction);
-    handleClose();
+    const newReaction = currentUserReaction === reaction ? 'none' : reaction;
+    UserReactionService.setUserReaction(newReaction);
   };
 
   const handleRaiseHandButtonClick = () => {
     UserListService.setUserRaiseHand(userId, !raiseHand);
-    handleClose();
   };
 
   const renderReactionsBar = () => (

bigbluebutton-html5/imports/ui/components/actions-bar/reactions-button/container.jsx

@@ -4,6 +4,7 @@ import { layoutSelectInput, layoutDispatch } from '/imports/ui/components/layout
 import { injectIntl } from 'react-intl';
 import ReactionsButton from './component';
 import actionsBarService from '../service';
+import UserReactionService from '/imports/ui/components/user-reaction/service';
 import { SMALL_VIEWPORT_BREAKPOINT } from '/imports/ui/components/layout/enums';
 
 const ReactionsButtonContainer = ({ ...props }) => {
@@ -24,10 +25,12 @@ const ReactionsButtonContainer = ({ ...props }) => {
 
 export default injectIntl(withTracker(() => {
   const currentUser = actionsBarService.currentUser();
+  const currentUserReaction = UserReactionService.getUserReaction(currentUser.userId);
 
   return {
     userId: currentUser.userId,
     emoji: currentUser.emoji,
+    currentUserReaction: currentUserReaction.reaction,
     raiseHand: currentUser.raiseHand,
   };
 })(ReactionsButtonContainer));

bigbluebutton-html5/imports/ui/components/emoji-picker/reactions-bar/component.jsx

@@ -57,6 +57,7 @@ const ReactionsPicker = (props) => {
     onRaiseHand,
     raiseHand,
     isMobile,
+    currentUserReaction,
   } = props;
 
   const RaiseHandButtonLabel = () => {
@@ -70,7 +71,7 @@ const ReactionsPicker = (props) => {
   return (
     <Styled.Wrapper isMobile={isMobile}>
       {reactions.map(({ id, native }) => (
-        <Styled.ButtonWrapper>
+        <Styled.ButtonWrapper active={currentUserReaction === native}>
           <Emoji key={id} emoji={{ id }} size={30} onClick={() => onReactionSelect(native)} />
         </Styled.ButtonWrapper>
       ))}

bigbluebutton-html5/imports/ui/components/emoji-picker/reactions-bar/styles.js

@@ -41,6 +41,18 @@ const ButtonWrapper = styled.div`
     height: 1.8rem !important;
     width: 1.8rem !important;
   }
+
+  ${({ active }) => active && `
+    color: ${btnPrimaryColor};
+    background-color: ${btnPrimaryBg};
+    border: none;
+
+    &:hover{
+      filter: brightness(90%);
+      color: ${btnPrimaryColor};
+      background-color: ${btnPrimaryHoverBg} !important;
+    }
+  `}
 `;
 
 const RaiseHandButtonWrapper = styled(ButtonWrapper)`