Revert "fix(speaker-stats): add more tokens and remove some useless lines"

This reverts commit 21389bd397.

css/modals/speaker_stats/_speaker_stats.scss

@@ -1,5 +1,6 @@
 .speaker-stats {
     list-style: none;
+    font-weight: 600;
     .row{
         display: flex;
         align-items: center;
@@ -27,4 +28,5 @@
             }
         }
     }
+    
 }

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

@@ -5,7 +5,6 @@ import { View, Text } from 'react-native';
 
 import { Avatar, StatelessAvatar } from '../../../base/avatar';
 import { getInitials } from '../../../base/avatar/functions';
-import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 import TimeElapsed from './TimeElapsed';
 import style from './styles';
@@ -48,15 +47,15 @@ const SpeakerStatsItem = (props: Props) =>
                     props.hasLeft ? (
                         <StatelessAvatar
                             className = 'userAvatar'
-                            color = { BaseTheme.palette.ui05 }
+                            color = { '#525252' }
                             id = 'avatar'
                             initials = { getInitials(props.displayName) }
-                            size = { BaseTheme.spacing[5] } />
+                            size = { 32 } />
                     ) : (
                         <Avatar
                             className = 'userAvatar'
                             participantId = { props.participantId }
-                            size = { BaseTheme.spacing[5] } />
+                            size = { 32 } />
                     )
                 }
             </View>
@@ -74,6 +73,7 @@ const SpeakerStatsItem = (props: Props) =>
                     time = { props.dominantSpeakerTime } />
             </View>
         </View>
-    );
+    )
+;
 
 export default SpeakerStatsItem;

react/features/speaker-stats/components/native/styles.js

@@ -11,12 +11,12 @@ export default {
     speakerStatsItemContainer: {
         flexDirection: 'row',
         alignSelf: 'stretch',
-        height: BaseTheme.spacing[9],
+        height: 64,
         alignItems: 'center'
     },
     speakerStatsAvatar: {
-        width: BaseTheme.spacing[5],
-        height: BaseTheme.spacing[5],
+        width: 32,
+        height: 32,
         marginRight: BaseTheme.spacing[3]
     },
     speakerStatsNameTime: {
@@ -26,7 +26,8 @@ export default {
         alignItems: 'center'
     },
     speakerStatsText: {
-        ...BaseTheme.typography.bodyShortRegularLarge,
+        fontSize: 16,
+        fontWeight: '400',
         color: BaseTheme.palette.text01
     },
     speakerStatsTime: {

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

@@ -11,18 +11,20 @@ const useStyles = makeStyles(theme => {
         switchContainer: {
             display: 'flex',
             alignItems: 'center',
+
             '& svg': {
                 display: 'none'
 
             },
+
             '& div': {
                 width: 38,
                 '& > label': {
                     width: 32,
                     height: 20,
-                    backgroundColor: theme.palette.ui05,
+                    backgroundColor: '#484A4F',
                     '&:not([data-checked]):hover': {
-                        backgroundColor: theme.palette.ui05
+                        backgroundColor: '#484A4F'
                     },
                     '&[data-checked]': {
                         backgroundColor: theme.palette.action01,
@@ -48,8 +50,8 @@ const useStyles = makeStyles(theme => {
         },
         switchLabel: {
             marginRight: 10,
-            ...theme.typography.bodyShortRegular,
-            lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`
+            fontSize: 14,
+            fontWeight: 400
         }
     };
 });

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

@@ -75,6 +75,7 @@ const SpeakerStats = () => {
         <Dialog
             cancelKey = 'dialog.close'
             hideCancelButton = { true }
+            id = 'speaker-stats-dialog'
             submitDisabled = { true }
             titleKey = 'speakerStats.speakerStats'
             width = { showFacialExpressions ? '664px' : 'small' }>

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

@@ -4,7 +4,6 @@ import React from 'react';
 
 import { Avatar, StatelessAvatar } from '../../../base/avatar';
 import { getInitials } from '../../../base/avatar/functions';
-import BaseTheme from '../../../base/ui/components/BaseTheme';
 import { FACIAL_EXPRESSIONS } from '../../../facial-recognition/constants.js';
 
 import TimeElapsed from './TimeElapsed';
@@ -106,7 +105,7 @@ const SpeakerStatsItem = (props: Props) => {
                     props.hasLeft ? (
                         <StatelessAvatar
                             className = 'userAvatar'
-                            color = { BaseTheme.palette.ui04 }
+                            color = { '#525252' }
                             id = 'avatar'
                             initials = { getInitials(props.displayName) } />
                     ) : (

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

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { Tooltip } from '../../../base/tooltip';
 import { FACIAL_EXPRESSION_EMOJIS } from '../../../facial-recognition/constants.js';
 
-const useStyles = makeStyles(theme => {
+const useStyles = makeStyles(() => {
     return {
         labels: {
             padding: '22px 0 7px 0',
@@ -14,8 +14,8 @@ const useStyles = makeStyles(theme => {
         },
         emojis: {
             paddingLeft: 27,
-            ...theme.typography.bodyShortRegularLarge,
-            lineHeight: `${theme.typography.bodyShortRegular.lineHeightLarge}px`
+            fontSize: 14,
+            fontWeight: 400
         }
     };
 });
@@ -34,6 +34,7 @@ type Props = {
 const SpeakerStatsLabels = (props: Props) => {
     const { t } = useTranslation();
     const classes = useStyles();
+
     const FacialExpressionsLabels = () => Object.keys(FACIAL_EXPRESSION_EMOJIS).map(
             expression => (
                 <div
@@ -66,11 +67,13 @@ const SpeakerStatsLabels = (props: Props) => {
                     { t('speakerStats.speakerTime') }
                 </div>
             </div>
+
             {
                 props.showFacialExpressions
                 && <div className = { `expressions ${classes.emojis}` }>
                     <FacialExpressionsLabels />
                 </div>
+
             }
         </div>
     );

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

@@ -11,16 +11,18 @@ import SpeakerStatsItem from './SpeakerStatsItem';
 const useStyles = makeStyles(theme => {
     return {
         list: {
-            marginTop: `${theme.spacing(3)}px`
+            marginTop: 15
         },
         item: {
-            height: `${theme.spacing(7)}px`,
+            height: 48,
             [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
-                height: `${theme.spacing(8)}px`
+                height: 64,
+                fontSize: 16,
+                fontWeight: 400
             }
         },
         avatar: {
-            height: `${theme.spacing(5)}px`
+            height: 32
         },
         expressions: {
             paddingLeft: 29
@@ -29,21 +31,18 @@ const useStyles = makeStyles(theme => {
             color: theme.palette.text03
         },
         displayName: {
-            ...theme.typography.bodyShortRegular,
-            lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`,
+            fontSize: 14,
+            fontWeight: 400,
             [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
-                ...theme.typography.bodyShortRegularLarge,
-                lineHeight: `${theme.typography.bodyShortRegular.lineHeightLarge}px`
+                fontSize: 16
             }
         },
         time: {
             padding: '2px 4px',
             borderRadius: '4px',
-            ...theme.typography.labelBold,
-            lineHeight: `${theme.typography.labelBold.lineHeight}px`,
             [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
-                ...theme.typography.bodyShortRegularLarge,
-                lineHeight: `${theme.typography.bodyShortRegular.lineHeightLarge}px`
+                fontSize: 16,
+                fontWeight: 400
             }
         },
         dominant: {

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

@@ -7,7 +7,6 @@ import { useSelector } from 'react-redux';
 
 import { IconSearch, Icon } from '../../../base/icons';
 import { getFieldValue } from '../../../base/react';
-import BaseTheme from '../../../base/ui/components/BaseTheme';
 import { MOBILE_BREAKPOINT } from '../../constants';
 import { isSpeakerStatsSearchDisabled } from '../../functions';
 
@@ -39,15 +38,14 @@ const useStyles = makeStyles(theme => {
             height: 40,
             '&::placeholder': {
                 color: theme.palette.text03,
-                ...theme.typography.bodyShortRegular,
-                lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`
+                fontSize: 14,
+                fontWeight: 400
             },
             [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
                 height: 48,
                 padding: '13px 16px 13px 44px',
                 '&::placeholder': {
-                    ...theme.typography.bodyShortRegularLarge,
-                    lineHeight: `${theme.typography.bodyShortRegular.lineHeightLarge}px`
+                    fontSize: 16
                 }
             }
         }
@@ -66,6 +64,7 @@ type Props = {
 
 };
 
+
 /**
  * React component for display an individual user's speaker stats.
  *
@@ -103,8 +102,9 @@ function SpeakerStatsSearch({ onSearch }: Props) {
         <div className = { classes.speakerStatsSearchContainer }>
             <Icon
                 className = { classes.searchIcon }
-                color = { BaseTheme.palette.surface07 }
+                color = '#858585'
                 src = { IconSearch } />
+
             <input
                 autoComplete = 'off'
                 autoFocus = { false }