fix(filmstrip) Minor style fixes (#12870)

react/features/connection-indicator/components/web/ConnectionIndicator.tsx

@@ -147,7 +147,7 @@ const styles = (theme: Theme) => {
         },
 
         icon: {
-            padding: '6px',
+            padding: '4px',
             borderRadius: '4px',
 
             '&.status-high': {

react/features/connection-indicator/components/web/ConnectionIndicatorIcon.js

@@ -103,7 +103,7 @@ export const ConnectionIndicatorIcon = ({
         <span className = { emptyIconWrapperClassName }>
             <Icon
                 className = { clsx(classes.icon, colorClass) }
-                size = { 12 }
+                size = { 16 }
                 src = { IconConnection } />
         </span>
     );

react/features/filmstrip/components/web/Filmstrip.tsx

@@ -853,6 +853,7 @@ class Filmstrip extends PureComponent <IProps, IState> {
                     { ...actions }>
                     <Icon
                         aria-label = { t('toolbar.accessibilityLabel.toggleFilmstrip') }
+                        size = { 24 }
                         src = { icon } />
                 </button>
             </div>

react/features/filmstrip/components/web/Thumbnail.tsx

@@ -337,7 +337,7 @@ const defaultStyles = (theme: Theme) => {
 
         activeSpeaker: {
             '& .active-speaker-indicator': {
-                boxShadow: `inset 0px 0px 0px 4px ${theme.palette.link01Active} !important`
+                boxShadow: `inset 0px 0px 0px 3px ${theme.palette.action01Hover} !important`
             }
         },
 

react/features/filmstrip/components/web/styles.ts

@@ -20,7 +20,7 @@ export const styles = (theme: Theme) => {
             height: '24px',
             position: 'absolute' as const,
             borderRadius: '4px',
-            top: 'calc(-24px - 3px)',
+            top: 'calc(-24px - 2px)',
             left: 'calc(50% - 16px)',
             opacity: 0,
             transition: 'opacity .3s',
@@ -51,7 +51,7 @@ export const styles = (theme: Theme) => {
 
         toggleVerticalFilmstripContainer: {
             transform: 'rotate(-90deg)',
-            left: 'calc(-24px - 3px - 4px)',
+            left: 'calc(-24px - 2px - 4px)',
             top: 'calc(50% - 12px)'
         },