feat(avatar) Update style (#13019)

react/features/base/avatar/components/web/StatelessAvatar.tsx

@@ -1,8 +1,11 @@
+import { Theme } from '@mui/material';
 import { withStyles } from '@mui/styles';
 import clsx from 'clsx';
 import React from 'react';
 
 import Icon from '../../../icons/components/Icon';
+import { IconUser } from '../../../icons/svg';
+import { withPixelLineHeight } from '../../../styles/functions.web';
 import AbstractStatelessAvatar, { type IProps as AbstractProps } from '../AbstractStatelessAvatar';
 import { PRESENCE_AVAILABLE_COLOR, PRESENCE_AWAY_COLOR, PRESENCE_BUSY_COLOR, PRESENCE_IDLE_COLOR } from '../styles';
 
@@ -47,17 +50,21 @@ interface IProps extends AbstractProps {
 /**
  * Creates the styles for the component.
  *
+ * @param {Theme} theme - The MUI theme.
  * @returns {Object}
  */
-const styles = () => {
+const styles = (theme: Theme) => {
     return {
         avatar: {
             backgroundColor: '#AAA',
             borderRadius: '50%',
-            color: 'rgba(255, 255, 255, 1)',
-            fontWeight: '100',
+            fontWeight: '600',
+            color: theme.palette?.text01 || '#fff',
+            ...withPixelLineHeight(theme.typography?.heading1 ?? {}),
+            fontSize: 'inherit',
             objectFit: 'cover' as const,
             textAlign: 'center' as const,
+            overflow: 'hidden',
 
             '&.avatar-small': {
                 height: '28px !important',
@@ -79,6 +86,14 @@ const styles = () => {
             }
         },
 
+        initialsContainer: {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
+        },
+
         badge: {
             position: 'relative' as const,
 
@@ -173,35 +188,23 @@ class StatelessAvatar extends AbstractStatelessAvatar<IProps> {
                     data-testid = { this.props.testId }
                     id = { this.props.id }
                     style = { this._getAvatarStyle(this.props.color) }>
-                    <svg
-                        className = 'avatar-svg'
-                        viewBox = '0 0 100 100'
-                        xmlns = 'http://www.w3.org/2000/svg'
-                        xmlnsXlink = 'http://www.w3.org/1999/xlink'>
-                        <text
-                            dominantBaseline = 'central'
-                            fill = 'rgba(255,255,255,1)'
-                            fontSize = '40pt'
-                            textAnchor = 'middle'
-                            x = '50'
-                            y = '50'>
-                            { initials }
-                        </text>
-                    </svg>
+                    <div className = { this.props.classes.initialsContainer }>
+                        {initials}
+                    </div>
                 </div>
             );
         }
 
         // default avatar
         return (
-            <div className = { this._getBadgeClassName() }>
-                <img
-                    alt = 'avatar'
-                    className = { this._getAvatarClassName('defaultAvatar') }
-                    data-testid = { this.props.testId }
-                    id = { this.props.id }
-                    src = { this.props.defaultAvatar || 'images/avatar.png' }
-                    style = { this._getAvatarStyle() } />
+            <div
+                className = { clsx(this._getAvatarClassName('defaultAvatar'), this._getBadgeClassName()) }
+                data-testid = { this.props.testId }
+                id = { this.props.id }
+                style = { this._getAvatarStyle() }>
+                <Icon
+                    size = { '50%' }
+                    src = { IconUser } />
             </div>
         );
     }
@@ -217,7 +220,7 @@ class StatelessAvatar extends AbstractStatelessAvatar<IProps> {
 
         return {
             background: color || undefined,
-            fontSize: size ? size * 0.5 : '180%',
+            fontSize: size ? size * 0.4 : '180%',
             height: size || '100%',
             width: size || '100%'
         };

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

@@ -650,6 +650,17 @@ class Thumbnail extends Component<IProps, IState> {
         });
     }
 
+    /**
+     * Returns the size the avatar should have.
+     *
+     * @returns {number}
+     */
+    _getAvatarSize() {
+        const { _height, _width } = this.props;
+
+        return Math.min(_height / 2, _width - 30, 200);
+    }
+
     /**
      * Returns an object with the styles for thumbnail.
      *
@@ -687,7 +698,7 @@ class Thumbnail extends Component<IProps, IState> {
             video: {}
         };
 
-        const avatarSize = Math.min(_height / 2, _width - 30, 200);
+        const avatarSize = this._getAvatarSize();
         let { left } = style || {};
 
         if (typeof left === 'number' && horizontalOffset) {
@@ -923,7 +934,8 @@ class Thumbnail extends Component<IProps, IState> {
                 style = { styles }>
                 <Avatar
                     className = 'userAvatar'
-                    participantId = { id } />
+                    participantId = { id }
+                    size = { this._getAvatarSize() } />
             </div>
         );
     }

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

@@ -79,13 +79,13 @@ const SpeakerStatsItem = (props: Props) => {
                             <StatelessAvatar
                                 className = 'userAvatar'
                                 color = { BaseTheme.palette.ui04 }
-                                initials = { getInitials(props.displayName) } />
+                                initials = { getInitials(props.displayName) }
+                                size = { 32 } />
                         ) : (
                             <Avatar
-
-                                // @ts-ignore
                                 className = 'userAvatar'
-                                participantId = { props.participantId } />
+                                participantId = { props.participantId }
+                                size = { 32 } />
                         )
                     }
                 </div>

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

@@ -23,9 +23,7 @@ const useStyles = makeStyles()(theme => {
                     color: theme.palette.text03
                 },
                 '& .avatar': {
-                    width: '32px',
-                    marginRight: theme.spacing(3),
-                    height: theme.spacing(5)
+                    marginRight: theme.spacing(3)
                 },
                 '& .time': {
                     padding: '2px 4px',