add(speaker-stats): new styles for search and switch

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

@@ -7,14 +7,46 @@ import React from 'react';
 import { Switch } from '../../../base/react';
 
 
-const useStyles = makeStyles(() => {
+const useStyles = makeStyles(theme => {
     return {
         switchContainer: {
             position: 'absolute',
             top: 90,
             left: 226,
             display: 'flex',
-            alignItems: 'center'
+            alignItems: 'center',
+
+            '& svg': {
+                display: 'none'
+
+            },
+            '& 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': {
+                        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
@@ -59,6 +91,7 @@ export default function FacialExpressionsSwitch({ onChange, showFacialExpression
             <Switch
                 id = 'facial-expressions-switch'
                 onValueChange = { onChange }
+                trackColor = {{ false: 'blue' }}
                 value = { showFacialExpressions } />
         </div>
     );

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

@@ -14,14 +14,14 @@ import SpeakerStatsLabels from './SpeakerStatsLabels';
 import SpeakerStatsList from './SpeakerStatsList';
 import SpeakerStatsSearch from './SpeakerStatsSearch';
 
-const useStyles = makeStyles(() => {
+const useStyles = makeStyles(theme => {
     return {
         separator: {
             position: 'absolute',
             width: '100%',
             height: 1,
             left: 0,
-            backgroundColor: '#666666'
+            backgroundColor: theme.palette.border02
         }
     };
 });

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

@@ -1,6 +1,5 @@
 /* @flow */
 
-import { FieldTextStateless as TextField } from '@atlaskit/field-text';
 import { makeStyles } from '@material-ui/core/styles';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -9,18 +8,20 @@ import { useSelector } from 'react-redux';
 import { getFieldValue } from '../../../base/react';
 import { isSpeakerStatsSearchDisabled } from '../../functions';
 
-const useStyles = makeStyles(() => {
+const useStyles = makeStyles(theme => {
     return {
         speakerStatsSearch: {
             position: 'absolute',
             left: 20,
-            top: 60
-
-            // [theme.breakpoints.down('400')]: {
-            //     left: 20,
-            //     right: 0,
-            //     top: 42
-            // }
+            top: 85,
+            backgroundColor: theme.palette.field01,
+            border: '1px solid',
+            borderRadius: 6,
+            borderColor: theme.palette.border02,
+            color: theme.palette.text01,
+            padding: '10px 16px',
+            width: 183,
+            height: 40
         }
     };
 });
@@ -66,19 +67,17 @@ function SpeakerStatsSearch({ onSearch }: Props) {
     }
 
     return (
-        <div className = { classes.speakerStatsSearch }>
-            <TextField
-                autoComplete = 'off'
-                autoFocus = { false }
-                id = 'speaker-stats-search'
-                name = 'speakerStatsSearch'
-                onChange = { onChange }
-                onKeyPress = { preventDismiss }
-                placeholder = { t('speakerStats.search') }
-                shouldFitContainer = { false }
-                type = 'text'
-                value = { searchValue } />
-        </div>
+        <input
+            autoComplete = 'off'
+            autoFocus = { false }
+            className = { classes.speakerStatsSearch }
+            id = 'speaker-stats-search'
+            name = 'speakerStatsSearch'
+            onChange = { onChange }
+            onKeyPress = { preventDismiss }
+            placeholder = { t('speakerStats.search') }
+            tabIndex = { 0 }
+            value = { searchValue } />
     );
 }