refactor(speaker-stats) use jss instead of sass in SpeakerStats (#11121)

css/main.scss

@@ -42,7 +42,6 @@ $flagsImagePath: "../images/";
 @import 'modals/settings/settings';
 @import 'modals/screen-share/share-audio';
 @import 'modals/screen-share/share-screen-warning';
-@import 'modals/speaker_stats/speaker_stats';
 @import 'modals/virtual-background/virtual-background';
 @import 'modals/local-recording/local-recording';
 @import 'videolayout_default';

css/modals/speaker_stats/_speaker_stats.scss

@@ -1,30 +0,0 @@
-.speaker-stats {
-    list-style: none;
-    .row{
-        display: flex;
-        align-items: center;
-        .avatar {
-            width: 32px;
-            margin-right: 16px;
-        }
-        .name-time {
-            width: calc(100% - 48px);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            
-        }
-        .name-time_expressions-on {
-            width: calc(47% - 48px);
-        }
-        .expressions {
-            width: calc(53% - 29px);
-            display: flex;
-            justify-content: space-between;
-            .expression {
-                width: 30px;
-                text-align: center;
-            }
-        }
-    }
-}

react/features/speaker-stats/components/web/SpeakerStats.js

@@ -20,6 +20,39 @@ import SpeakerStatsSearch from './SpeakerStatsSearch';
 
 const useStyles = makeStyles(theme => {
     return {
+        speakerStats: {
+            '& .row': {
+                display: 'flex',
+                alignItems: 'center',
+
+                '& .avatar': {
+                    width: '32px',
+                    marginRight: theme.spacing(3)
+                },
+
+                '& .name-time': {
+                    width: 'calc(100% - 48px)',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center'
+                },
+
+                '& .name-time_expressions-on': {
+                    width: 'calc(47% - 48px)'
+                },
+
+                '& .expressions': {
+                    width: 'calc(53% - 29px)',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+
+                    '& .expression': {
+                        width: '30px',
+                        textAlign: 'center'
+                    }
+                }
+            }
+        },
         footer: {
             display: 'none !important'
         },
@@ -85,7 +118,7 @@ const SpeakerStats = () => {
             submitDisabled = { true }
             titleKey = 'speakerStats.speakerStats'
             width = { showFacialExpressions ? '664px' : 'small' }>
-            <div className = 'speaker-stats'>
+            <div className = { classes.speakerStats }>
                 <div
                     className = {
                         `${classes.searchSwitchContainer}

react/features/speaker-stats/components/web/SpeakerStatsItem.js

@@ -67,12 +67,6 @@ type Props = {
 }
 
 const SpeakerStatsItem = (props: Props) => {
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
     const hasLeftClass = props.hasLeft ? props.styles.hasLeft : '';
     const rowDisplayClass = `row ${hasLeftClass} ${props.styles.item}`;
     const expressionClass = 'expression';