feat(thumbnail) Video thumbnails redesign and refactor (#10351)

Update video thumbnail design
Update design of indicators
In filmstrip view move Screen Sharing indicator to the top
Removed dominant speaker indicator
Use ContextMenu component for the connection stats popover
Combine Remove video menu and Meeting participant context menu into one component
Moved some styles from SCSS to JSS
Fix mobile avatars too big
Fix mobile horizontal scroll
Created button for Send to breakout room action

react/features/video-menu/components/web/PrivateMessageMenuButton.js

@@ -2,6 +2,7 @@
 
 import React, { Component } from 'react';
 
+import ContextMenuItem from '../../../base/components/context-menu/ContextMenuItem';
 import { translate } from '../../../base/i18n';
 import { IconMessage } from '../../../base/icons';
 import { connect } from '../../../base/redux';
@@ -12,8 +13,6 @@ import {
 } from '../../../chat/components/web/PrivateMessageButton';
 import { isButtonEnabled } from '../../../toolbox/functions.web';
 
-import VideoMenuButton from './VideoMenuButton';
-
 declare var interfaceConfig: Object;
 
 type Props = AbstractProps & {
@@ -49,18 +48,18 @@ class PrivateMessageMenuButton extends Component<Props> {
      * @returns {ReactElement}
      */
     render() {
-        const { participantID, t, _hidden } = this.props;
+        const { t, _hidden } = this.props;
 
         if (_hidden) {
             return null;
         }
 
         return (
-            <VideoMenuButton
-                buttonText = { t('toolbar.privateMessage') }
+            <ContextMenuItem
+                accessibilityLabel = { t('toolbar.accessibilityLabel.privateMessage') }
                 icon = { IconMessage }
-                id = { `privmsglink_${participantID}` }
-                onClick = { this._onClick } />
+                onClick = { this._onClick }
+                text = { t('toolbar.privateMessage') } />
         );
     }