Revert "fix(speaker-stats): layouts"

This reverts commit 92e6b9f211.

css/modals/speaker_stats/_speaker_stats.scss

@@ -1,8 +1,8 @@
 .speaker-stats {
     list-style: none;
-    width: calc(100% + 16px);
+    padding: 30px 0 0 0;
+    width: 100%;
     font-weight: 600;
-    margin: 0 -8px;
 
     .row{
         display: flex;
@@ -13,17 +13,17 @@
         }
     
         .name-time {
-            width: calc(100% - 48px);
+            width: 304px;
             display: flex;
             justify-content: space-between;
             align-items: center;
             
         }
         .name-time_expressions-on {
-            width: calc(49% - 48px);
+            width: 240px;
         }
         .expressions {
-            width: 51%;
+            width: 300px;
             display: flex;
             justify-content: space-between;
 
@@ -35,9 +35,9 @@
 
         
     }
+    .text-large{
+        font-size: 14px;
+        font-weight: 400;
+    }
     
 }
-.text-large{
-    font-size: 14px;
-    font-weight: 400;
-}

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

@@ -10,6 +10,9 @@ import { Switch } from '../../../base/react';
 const useStyles = makeStyles(theme => {
     return {
         switchContainer: {
+            position: 'absolute',
+            top: 90,
+            left: 226,
             display: 'flex',
             alignItems: 'center',
 
@@ -17,39 +20,33 @@ const useStyles = makeStyles(theme => {
                 display: 'none'
 
             },
-
+            '& div > label': {
-            '& div': {
+                width: 32,
-                width: 38,
+                height: 20,
-                '& > label': {
+                backgroundColor: '#484A4F',
-                    width: 32,
+                '&:not([data-checked]):hover': {
-                    height: 20,
+                    backgroundColor: '#484A4F'
-                    backgroundColor: '#484A4F',
+                },
-                    '&:not([data-checked]):hover': {
+                '&[data-checked]': {
-                        backgroundColor: '#484A4F'
+                    backgroundColor: theme.palette.action01,
-                    },
+                    '&:hover': {
-                    '&[data-checked]': {
+                        backgroundColor: theme.palette.action01
-                        backgroundColor: theme.palette.action01,
-                        '&:hover': {
-                            backgroundColor: theme.palette.action01
-                        },
-                        '&::before': {
-                            margin: '0 0 1.5px -3px',
-                            backgroundColor: theme.palette.text01
-                        }
-                    },
-                    '&:focus-within': {
-                        borderColor: 'transparent'
                     },
                     '&::before': {
-                        width: 14,
+                        margin: '0 0 1.5px -3px',
-                        height: 14,
-                        margin: '0 0 1.5px 1.5px',
                         backgroundColor: theme.palette.text01
                     }
+                },
+                '&:focus-within': {
+                    border: 'none'
+                },
+                '&::before': {
+                    width: 14,
+                    height: 14,
+                    margin: '0 0 1.5px 1.5px',
+                    backgroundColor: theme.palette.text01
                 }
             }
-
-
         },
         switchLabel: {
             marginRight: 10

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

@@ -22,20 +22,6 @@ const useStyles = makeStyles(theme => {
             height: 1,
             left: 0,
             backgroundColor: theme.palette.border02
-        },
-        speakerStatsDialog: {
-            '& > div': {
-
-            }
-        },
-        searchSwitchContainer: {
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            width: '100%'
-        },
-        searchSwitchContainerExpressionsOn: {
-            width: '58.5%'
         }
     };
 });
@@ -62,25 +48,16 @@ const SpeakerStats = () => {
     return (
         <Dialog
             cancelKey = 'dialog.close'
-            hideCancelButton = { true }
-            id = 'speaker-stats-dialog'
             submitDisabled = { true }
             titleKey = 'speakerStats.speakerStats'
             width = { showFacialExpressions ? '664px' : 'small' }>
             <div className = 'speaker-stats'>
-                <div
+                <SpeakerStatsSearch onSearch = { onSearch } />
-                    className = {
+                { enableFacialRecognition
-                        `${classes.searchSwitchContainer}
-                        ${showFacialExpressions ? classes.searchSwitchContainerExpressionsOn : ''}`
-                    }>
-                    <SpeakerStatsSearch onSearch = { onSearch } />
-                    { enableFacialRecognition
                     && <FacialExpressionsSwitch
                         onChange = { onToggleFacialExpressions }
                         showFacialExpressions = { showFacialExpressions } />
-                    }
+                }
-                </div>
-
                 <SpeakerStatsLabels
                     reduceExpressions = { reduceExpressions }
                     showFacialExpressions = { showFacialExpressions ?? false } />

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

@@ -9,7 +9,7 @@ import { FACIAL_EXPRESSION_EMOJIS } from '../../../facial-recognition/constants.
 const useStyles = makeStyles(() => {
     return {
         labels: {
-            padding: '22px 0 7px 0',
+            padding: '7px 0px',
             height: 20
         },
         emojis: {

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

@@ -11,6 +11,9 @@ import { isSpeakerStatsSearchDisabled } from '../../functions';
 const useStyles = makeStyles(theme => {
     return {
         speakerStatsSearch: {
+            position: 'absolute',
+            left: 20,
+            top: 85,
             backgroundColor: theme.palette.field01,
             border: '1px solid',
             borderRadius: 6,
@@ -18,12 +21,7 @@ const useStyles = makeStyles(theme => {
             color: theme.palette.text01,
             padding: '10px 16px',
             width: 183,
-            height: 40,
+            height: 40
-            '&::placeholder': {
-                color: theme.palette.text03,
-                fontSize: 14,
-                fontWeight: 400
-            }
         }
     };
 });

react/features/speaker-stats/constants.js

@@ -3,4 +3,4 @@
  */
 export const REDUCE_EXPRESSIONS_THRESHOLD = 750;
 
-export const SPEAKER_STATS_RELOAD_INTERVAL = 100000000000;
+export const SPEAKER_STATS_RELOAD_INTERVAL = 1000;