Update Avatar Patterns for LHN

src/CONST.js

@@ -1088,6 +1088,7 @@ const CONST = {
         LARGE_BORDERED: 'large-bordered',
         HEADER: 'header',
         MENTION_ICON: 'mention-icon',
+        MID_SMALL_NORMAL: 'mid-small-normal',
     },
     OPTION_MODE: {
         COMPACT: 'compact',

src/components/LHNOptionsList/OptionRowLHN.js

@@ -17,7 +17,6 @@ import SubscriptAvatar from '../SubscriptAvatar';
 import CONST from '../../CONST';
 import themeColors from '../../styles/themes/default';
 import SidebarUtils from '../../libs/SidebarUtils';
-import TextPill from '../TextPill';
 import OfflineWithFeedback from '../OfflineWithFeedback';
 import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteraction';
 import * as ReportActionContextMenu from '../../pages/home/report/ContextMenu/ReportActionContextMenu';
@@ -65,7 +64,6 @@ const OptionRowLHN = (props) => {
     const textStyle = props.isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText;
     const textUnreadStyle = optionItem.isUnread ? [textStyle, styles.sidebarLinkTextBold] : [textStyle];
     const displayNameStyle = StyleUtils.combineStyles([styles.optionDisplayName, styles.optionDisplayNameCompact, styles.pre, ...textUnreadStyle], props.style);
-    const textPillStyle = props.isFocused ? [styles.ml1, StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.icon, 0.5)] : [styles.ml1];
     const alternateTextStyle = StyleUtils.combineStyles(
         props.viewMode === CONST.OPTION_MODE.COMPACT
             ? [textStyle, styles.optionAlternateText, styles.pre, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2]
@@ -84,6 +82,7 @@ const OptionRowLHN = (props) => {
 
     const hasBrickError = optionItem.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
     const shouldShowGreenDotIndicator = !hasBrickError && (optionItem.isUnreadWithMention || (optionItem.hasOutstandingIOU && !optionItem.isIOUReportOwner));
+    const defaultSubscriptSize = optionItem.isExpenseReport ? CONST.AVATAR_SIZE.MID_SMALL_NORMAL : CONST.AVATAR_SIZE.DEFAULT;
 
     /**
      * Show the ReportActionContextMenu modal popover.
@@ -151,7 +150,7 @@ const OptionRowLHN = (props) => {
                                             secondaryAvatar={optionItem.icons[1]}
                                             mainTooltip={optionItem.ownerEmail}
                                             secondaryTooltip={optionItem.subtitle}
-                                            size={props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
+                                            size={props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : defaultSubscriptSize}
                                         />
                                     ) : (
                                         <MultipleAvatars
@@ -179,13 +178,6 @@ const OptionRowLHN = (props) => {
                                                 optionItem.isChatRoom || optionItem.isPolicyExpenseChat || optionItem.isTaskReport || optionItem.isThread || optionItem.isMoneyRequestReport
                                             }
                                         />
-                                        {optionItem.isChatRoom && !optionItem.isThread && (
-                                            <TextPill
-                                                style={textPillStyle}
-                                                accessibilityLabel={props.translate('accessibilityHints.workspaceName')}
-                                                text={optionItem.subtitle}
-                                            />
-                                        )}
                                     </View>
                                     {optionItem.alternateText ? (
                                         <Text

src/components/MultipleAvatars.js

@@ -67,7 +67,7 @@ const defaultProps = {
 
 const MultipleAvatars = (props) => {
     let avatarContainerStyles = props.size === CONST.AVATAR_SIZE.SMALL ? [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall] : [styles.emptyAvatar, styles.emptyAvatarMargin];
-    const singleAvatarStyles = props.size === CONST.AVATAR_SIZE.SMALL ? styles.singleAvatarSmall : styles.singleAvatar;
+    const singleAvatarStyle = props.size === CONST.AVATAR_SIZE.SMALL ? styles.singleAvatarSmall : styles.singleAvatar;
     const secondAvatarStyles = [props.size === CONST.AVATAR_SIZE.SMALL ? styles.secondAvatarSmall : styles.secondAvatar, ...props.secondAvatarStyle];
     const tooltipTexts = props.shouldShowTooltip ? _.pluck(props.icons, 'name') : [];
 
@@ -182,37 +182,37 @@ const MultipleAvatars = (props) => {
                     )}
                 </>
             ) : (
-                <View style={singleAvatarStyles}>
+                <View style={[singleAvatarStyle, props.icons[0].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(props.size, props.icons[0].type) : {}]}>
                     <UserDetailsTooltip accountID={ReportUtils.getAccountIDForLogin(props.icons[0].name)}>
                         {/* View is necessary for tooltip to show for multiple avatars in LHN */}
                         <View>
                             <Avatar
                                 source={props.icons[0].source || props.fallbackIcon}
                                 fill={themeColors.iconSuccessFill}
                                 size={props.isFocusMode ? CONST.AVATAR_SIZE.MID_SUBSCRIPT : CONST.AVATAR_SIZE.SMALLER}
-                                imageStyles={[singleAvatarStyles]}
+                                imageStyles={[singleAvatarStyle]}
                                 name={props.icons[0].name}
                                 type={props.icons[0].type}
                             />
                         </View>
                     </UserDetailsTooltip>
-                    <View style={secondAvatarStyles}>
+                    <View style={[...secondAvatarStyles, props.icons[1].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(props.size, props.icons[1].type) : {}]}>
                         {props.icons.length === 2 ? (
                             <UserDetailsTooltip accountID={ReportUtils.getAccountIDForLogin(props.icons[1].name)}>
                                 <View>
                                     <Avatar
                                         source={props.icons[1].source || props.fallbackIcon}
                                         fill={themeColors.iconSuccessFill}
                                         size={props.isFocusMode ? CONST.AVATAR_SIZE.MID_SUBSCRIPT : CONST.AVATAR_SIZE.SMALLER}
-                                        imageStyles={[singleAvatarStyles]}
+                                        imageStyles={[singleAvatarStyle]}
                                         name={props.icons[1].name}
                                         type={props.icons[1].type}
                                     />
                                 </View>
                             </UserDetailsTooltip>
                         ) : (
                             <Tooltip text={tooltipTexts.slice(1).join(', ')}>
-                                <View style={[singleAvatarStyles, styles.alignItemsCenter, styles.justifyContentCenter]}>
+                                <View style={[singleAvatarStyle, styles.alignItemsCenter, styles.justifyContentCenter]}>
                                     <Text
                                         selectable={false}
                                         style={props.size === CONST.AVATAR_SIZE.SMALL ? styles.avatarInnerTextSmall : styles.avatarInnerText}

src/components/OptionRow.js

@@ -132,6 +132,7 @@ class OptionRow extends Component {
         const hoveredBackgroundColor = this.props.hoverStyle && this.props.hoverStyle.backgroundColor ? this.props.hoverStyle.backgroundColor : this.props.backgroundColor;
         const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
         const isMultipleParticipant = lodashGet(this.props.option, 'participantsList.length', 0) > 1;
+        const defaultSubscriptSize = this.props.option.isExpenseReport ? CONST.AVATAR_SIZE.MID_SMALL_NORMAL : CONST.AVATAR_SIZE.DEFAULT;
 
         // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade.
         const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips((this.props.option.participantsList || []).slice(0, 10), isMultipleParticipant);
@@ -194,6 +195,7 @@ class OptionRow extends Component {
                                                 mainTooltip={this.props.option.ownerEmail}
                                                 secondaryTooltip={this.props.option.subtitle}
                                                 backgroundColor={hovered && !this.props.optionIsFocused ? hoveredBackgroundColor : subscriptColor}
+                                                size={defaultSubscriptSize}
                                             />
                                         ) : (
                                             <MultipleAvatars

src/components/SubscriptAvatar.js

@@ -44,10 +44,11 @@ const defaultProps = {
 };
 
 const SubscriptAvatar = (props) => {
-    const containerStyle = props.size === CONST.AVATAR_SIZE.SMALL ? styles.emptyAvatarSmall : styles.emptyAvatar;
-
+    const isSmall = props.size === CONST.AVATAR_SIZE.SMALL;
+    const subscriptSyle = props.size === CONST.AVATAR_SIZE.MID_SMALL_NORMAL ? styles.secondAvatarSubscriptMidSmallNormal : styles.secondAvatarSubscript;
+    const containerStyle = isSmall ? styles.emptyAvatarSmall : styles.emptyAvatar;
     // Default the margin style to what is normal for small or normal sized avatars
-    let marginStyle = props.size === CONST.AVATAR_SIZE.SMALL ? styles.emptyAvatarMarginSmall : styles.emptyAvatarMargin;
+    let marginStyle = isSmall ? styles.emptyAvatarMarginSmall : styles.emptyAvatarMargin;
 
     // Some views like the chat view require that there be no margins
     if (props.noMargin) {
@@ -59,23 +60,23 @@ const SubscriptAvatar = (props) => {
                 <View>
                     <Avatar
                         source={props.mainAvatar.source}
-                        size={props.size === CONST.AVATAR_SIZE.SMALL ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
+                        size={props.size || CONST.AVATAR_SIZE.DEFAULT}
                         name={props.mainAvatar.name}
                         type={props.mainAvatar.type}
                     />
                 </View>
             </Tooltip>
             <Tooltip text={props.secondaryTooltip}>
-                <View>
+                <View style={props.size === CONST.AVATAR_SIZE.MID_SMALL_NORMAL ? styles.flex1 : {}}>
                     <Avatar
                         imageStyles={null}
-                        containerStyles={[props.size === CONST.AVATAR_SIZE.SMALL ? styles.secondAvatarSubscriptCompact : styles.secondAvatarSubscript]}
+                        containerStyles={[props.size === CONST.AVATAR_SIZE.SMALL ? styles.secondAvatarSubscriptCompact : subscriptSyle]}
                         iconAdditionalStyles={[
-                            StyleUtils.getAvatarBorderWidth(props.size === CONST.AVATAR_SIZE.SMALL ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT),
+                            StyleUtils.getAvatarBorderWidth(isSmall ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT),
                             StyleUtils.getBorderColorStyle(props.backgroundColor),
                         ]}
                         source={props.secondaryAvatar.source}
-                        size={props.size === CONST.AVATAR_SIZE.SMALL ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT}
+                        size={isSmall ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT}
                         fill={themeColors.iconSuccessFill}
                         name={props.secondaryAvatar.name}
                         type={props.secondaryAvatar.type}

src/libs/OptionsListUtils.js

@@ -400,6 +400,7 @@ function createOption(logins, personalDetails, report, reportActions = {}, {show
         isArchivedRoom: false,
         shouldShowSubscript: false,
         isPolicyExpenseChat: false,
+        isExpenseReport: false,
     };
 
     const personalDetailMap = getPersonalDetailsForLogins(logins, personalDetails);
@@ -416,6 +417,7 @@ function createOption(logins, personalDetails, report, reportActions = {}, {show
         result.isDefaultRoom = ReportUtils.isDefaultRoom(report);
         result.isArchivedRoom = ReportUtils.isArchivedRoom(report);
         result.isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(report);
+        result.isExpenseReport = ReportUtils.isExpenseReport(report);
         result.isMoneyRequestReport = ReportUtils.isMoneyRequestReport(report);
         result.isThread = ReportUtils.isThread(report);
         result.isTaskReport = ReportUtils.isTaskReport(report);