diff --git a/css/modals/speaker_stats/_speaker_stats.scss b/css/modals/speaker_stats/_speaker_stats.scss index 9fdd39ad3..9bb1ed0b8 100644 --- a/css/modals/speaker_stats/_speaker_stats.scss +++ b/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; -} diff --git a/react/features/speaker-stats/components/web/FacialExpressionsSwitch.js b/react/features/speaker-stats/components/web/FacialExpressionsSwitch.js index b4a45fdd6..e435a2211 100644 --- a/react/features/speaker-stats/components/web/FacialExpressionsSwitch.js +++ b/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': { - width: 38, - '& > label': { - width: 32, - height: 20, - backgroundColor: '#484A4F', - '&:not([data-checked]):hover': { - backgroundColor: '#484A4F' - }, - '&[data-checked]': { - backgroundColor: theme.palette.action01, - '&:hover': { - backgroundColor: theme.palette.action01 - }, - '&::before': { - margin: '0 0 1.5px -3px', - backgroundColor: theme.palette.text01 - } - }, - '&:focus-within': { - borderColor: 'transparent' + '& div > label': { + width: 32, + height: 20, + backgroundColor: '#484A4F', + '&:not([data-checked]):hover': { + backgroundColor: '#484A4F' + }, + '&[data-checked]': { + backgroundColor: theme.palette.action01, + '&:hover': { + backgroundColor: theme.palette.action01 }, '&::before': { - width: 14, - height: 14, - margin: '0 0 1.5px 1.5px', + margin: '0 0 1.5px -3px', 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 diff --git a/react/features/speaker-stats/components/web/SpeakerStats.js b/react/features/speaker-stats/components/web/SpeakerStats.js index 73189aa7b..6f24f5d32 100644 --- a/react/features/speaker-stats/components/web/SpeakerStats.js +++ b/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 (
-
- - { enableFacialRecognition + + { enableFacialRecognition && - } -
- + } diff --git a/react/features/speaker-stats/components/web/SpeakerStatsLabels.js b/react/features/speaker-stats/components/web/SpeakerStatsLabels.js index 664b8b010..7ab5a4bbf 100644 --- a/react/features/speaker-stats/components/web/SpeakerStatsLabels.js +++ b/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: { diff --git a/react/features/speaker-stats/components/web/SpeakerStatsSearch.js b/react/features/speaker-stats/components/web/SpeakerStatsSearch.js index ac31a11ec..c3fe016ac 100644 --- a/react/features/speaker-stats/components/web/SpeakerStatsSearch.js +++ b/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, - '&::placeholder': { - color: theme.palette.text03, - fontSize: 14, - fontWeight: 400 - } + height: 40 } }; }); diff --git a/react/features/speaker-stats/constants.js b/react/features/speaker-stats/constants.js index 9cd18078e..229d80b91 100644 --- a/react/features/speaker-stats/constants.js +++ b/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;