fix(interactions): add correct border

Fix hand button border style.

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

@@ -9,9 +9,6 @@ import UserReactionService from '/imports/ui/components/user-reaction/service';
 import UserListService from '/imports/ui/components/user-list/service';
 import QuestionsService from '/imports/ui/components/questions/service';
 
-import cx from 'classnames';
-import { styles } from '../styles';
-
 const InteractionsButton = (props) => {
   const {
     userId,
@@ -212,8 +209,8 @@ const InteractionsButton = (props) => {
     <BBBMenu
       classes={[styles.offsetBottom]}
       trigger={(
-        <>
-          <Button
+        <Styled.InteractionsDropdown>
+          <Styled.RaiseHandButton
             data-test="InteractionsButton"
             icon={emoji === 'raiseHand' ? 'interactions-hand' : 'interactions-hand-down'}
             label={emoji === 'raiseHand'

bigbluebutton-html5/imports/ui/components/actions-bar/styles.js

@@ -76,8 +76,8 @@ const Right = styled.div`
 `;
 
 const RaiseHandButton = styled(Button)`
-  ${({ emoji }) => emoji !== 'raiseHand' && `
-      span {
+${({ ghost }) => ghost && `
+  & > span {
     box-shadow: none;
     background-color: transparent !important;
     border-color: ${colorWhite} !important;