diff --git a/react/features/base/icons/svg/index.ts b/react/features/base/icons/svg/index.ts
index 850b18e5d..d45dab2de 100644
--- a/react/features/base/icons/svg/index.ts
+++ b/react/features/base/icons/svg/index.ts
@@ -88,7 +88,6 @@ export { default as IconSubtitles } from './subtitles.svg';
export { default as IconTileView } from './tile-view.svg';
export { default as IconTrash } from './trash.svg';
export { default as IconUserDeleted } from './user-deleted.svg';
-export { default as IconUserGroups } from './user-groups.svg';
export { default as IconUsers } from './users.svg';
export { default as IconVideo } from './video.svg';
export { default as IconVideoOff } from './video-off.svg';
diff --git a/react/features/base/icons/svg/user-groups.svg b/react/features/base/icons/svg/user-groups.svg
deleted file mode 100644
index 4ce3cd216..000000000
--- a/react/features/base/icons/svg/user-groups.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/react/features/conference/components/web/ConferenceInfo.js b/react/features/conference/components/web/ConferenceInfo.js
index 96ecfbfa1..a79874721 100644
--- a/react/features/conference/components/web/ConferenceInfo.js
+++ b/react/features/conference/components/web/ConferenceInfo.js
@@ -17,8 +17,8 @@ import { getConferenceInfo } from '../functions';
import ConferenceInfoContainer from './ConferenceInfoContainer';
import InsecureRoomNameLabel from './InsecureRoomNameLabel';
-import ParticipantsCount from './ParticipantsCount';
import RaisedHandsCountLabel from './RaisedHandsCountLabel';
+import SpeakerStatsLabel from './SpeakerStatsLabel';
import SubjectText from './SubjectText';
import ToggleTopPanelLabel from './ToggleTopPanelLabel';
@@ -52,7 +52,7 @@ const COMPONENTS = [
id: 'conference-timer'
},
{
- Component: ParticipantsCount,
+ Component: SpeakerStatsLabel,
id: 'participants-count'
},
{
diff --git a/react/features/conference/components/web/ParticipantsCount.js b/react/features/conference/components/web/ParticipantsCount.js
deleted file mode 100644
index e540b2e12..000000000
--- a/react/features/conference/components/web/ParticipantsCount.js
+++ /dev/null
@@ -1,116 +0,0 @@
-// @flow
-
-import React, { PureComponent } from 'react';
-import type { Dispatch } from 'redux';
-
-import { openDialog } from '../../../base/dialog';
-import { IconUserGroups } from '../../../base/icons';
-import { Label } from '../../../base/label';
-import { COLORS } from '../../../base/label/constants';
-import { getParticipantCount } from '../../../base/participants';
-import { connect } from '../../../base/redux';
-import { SpeakerStats } from '../../../speaker-stats';
-import { isSpeakerStatsDisabled } from '../../../speaker-stats/functions';
-
-
-/**
- * The type of the React {@code Component} props of {@link ParticipantsCount}.
- */
-type Props = {
-
- /**
- * Number of the conference participants.
- */
- count: number,
-
- /**
- * Conference data.
- */
- conference: Object,
-
- /**
- * Invoked to open Speaker stats.
- */
- dispatch: Dispatch,
-
- /**
- * Weather or not the speaker stats is disabled.
- */
- _isSpeakerStatsDisabled: Boolean,
-};
-
-/**
- * ParticipantsCount react component.
- * Displays the number of participants and opens Speaker stats on click.
- *
- * @class ParticipantsCount
- */
-class ParticipantsCount extends PureComponent {
- /**
- * Initializes a new ParticipantsCount instance.
- *
- * @param {Object} props - The read-only properties with which the new
- * instance is to be initialized.
- */
- constructor(props: Props) {
- super(props);
-
- this._onClick = this._onClick.bind(this);
- }
-
- _onClick: () => void;
-
- /**
- * Callback invoked to display {@code SpeakerStats}.
- *
- * @private
- * @returns {void}
- */
- _onClick() {
- const { dispatch, conference } = this.props;
-
- dispatch(openDialog(SpeakerStats, { conference }));
- }
-
- /**
- * Implements React's {@link PureComponent#render()}.
- *
- * @inheritdoc
- * @returns {ReactElement}
- */
- render() {
- const { count } = this.props;
-
- if (count <= 2) {
- return null;
- }
-
- return (
-
- );
- }
-}
-
-
-/**
- * Maps (parts of) the Redux state to the associated props for the
- * {@code ParticipantsCount} component.
- *
- * @param {Object} state - The Redux state.
- * @private
- * @returns {Props}
- */
-function mapStateToProps(state) {
- return {
- conference: state['features/base/conference'].conference,
- count: getParticipantCount(state),
- _isSpeakerStatsDisabled: isSpeakerStatsDisabled(state)
- };
-}
-
-export default connect(mapStateToProps)(ParticipantsCount);
diff --git a/react/features/conference/components/web/SpeakerStatsLabel.tsx b/react/features/conference/components/web/SpeakerStatsLabel.tsx
new file mode 100644
index 000000000..efa7c52ca
--- /dev/null
+++ b/react/features/conference/components/web/SpeakerStatsLabel.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { openDialog } from '../../../base/dialog/actions';
+import { IconConnection } from '../../../base/icons/svg';
+import Label from '../../../base/label/components/web/Label';
+import { COLORS } from '../../../base/label/constants';
+import { getParticipantCount } from '../../../base/participants/functions';
+import { SpeakerStats } from '../../../speaker-stats';
+import { isSpeakerStatsDisabled } from '../../../speaker-stats/functions';
+
+/**
+ * ParticipantsCount react component.
+ * Displays the number of participants and opens Speaker stats on click.
+ *
+ * @class ParticipantsCount
+ */
+function SpeakerStatsLabel() {
+ const conference = useSelector((state: IReduxState) => state['features/base/conference'].conference);
+ const count = useSelector(getParticipantCount);
+ const _isSpeakerStatsDisabled = useSelector(isSpeakerStatsDisabled);
+ const dispatch = useDispatch();
+
+ const onClick = () => {
+ dispatch(openDialog(SpeakerStats, { conference }));
+ };
+
+ if (count <= 2 || _isSpeakerStatsDisabled) {
+ return null;
+ }
+
+ return (
+
+ );
+}
+
+export default SpeakerStatsLabel;
diff --git a/react/features/participants-pane/components/web/ParticipantsCounter.tsx b/react/features/participants-pane/components/web/ParticipantsCounter.tsx
new file mode 100644
index 000000000..4c433a4f5
--- /dev/null
+++ b/react/features/participants-pane/components/web/ParticipantsCounter.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import { getParticipantCount } from '../../../base/participants/functions';
+import { withPixelLineHeight } from '../../../base/styles/functions.web';
+
+const useStyles = makeStyles()(theme => {
+ return {
+ badge: {
+ backgroundColor: theme.palette.ui03,
+ borderRadius: '100%',
+ height: '16px',
+ width: '16px',
+ color: theme.palette.text01,
+ ...withPixelLineHeight(theme.typography.labelBold),
+ pointerEvents: 'none',
+ position: 'absolute',
+ right: '-3px',
+ top: '-2px'
+ }
+ };
+});
+
+const ParticipantsCounter = () => {
+ const { classes } = useStyles();
+ const participantsCount = useSelector(getParticipantCount);
+
+ return {participantsCount};
+};
+
+export default ParticipantsCounter;
diff --git a/react/features/participants-pane/components/web/ParticipantsPaneButton.js b/react/features/participants-pane/components/web/ParticipantsPaneButton.js
index 5fdf10ac1..abd05de09 100644
--- a/react/features/participants-pane/components/web/ParticipantsPaneButton.js
+++ b/react/features/participants-pane/components/web/ParticipantsPaneButton.js
@@ -1,10 +1,13 @@
// @flow
+import React from 'react';
import { translate } from '../../../base/i18n';
import { IconUsers } from '../../../base/icons';
import { connect } from '../../../base/redux';
import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
+import ParticipantsCounter from './ParticipantsCounter';
+
/**
* The type of the React {@code Component} props of {@link ParticipantsPaneButton}.
*/
@@ -35,6 +38,23 @@ class ParticipantsPaneButton extends AbstractButton {
_isToggled() {
return this.props._isOpen;
}
+
+ /**
+ * Overrides AbstractButton's {@link Component#render()}.
+ *
+ * @override
+ * @protected
+ * @returns {React$Node}
+ */
+ render(): React$Node {
+ return (
+
+ );
+ }
}
/**