From 3c57155c49eb31171ba9e81f71ffef715cea6760 Mon Sep 17 00:00:00 2001
From: Steven KKC <steven.kkc.820@gmail.com>
Date: Mon, 24 Jul 2023 03:09:13 -0400
Subject: [PATCH 1/4] fix tooltip not visible for task assignee

---
 src/components/MenuItem.js                  | 2 +-
 src/components/MultipleAvatars.js           | 3 +++
 src/components/ReportActionItem/TaskView.js | 7 ++-----
 src/styles/styles.js                        | 9 +++++++++
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index e1f525899509..77e424920fed 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -150,7 +150,7 @@ function MenuItem(props) {
                                             isHovered={isHovered}
                                             isPressed={pressed}
                                             icons={props.icon}
-                                            size={CONST.AVATAR_SIZE.DEFAULT}
+                                            size={props.avatarSize || CONST.AVATAR_SIZE.DEFAULT}
                                             secondAvatarStyle={[
                                                 StyleUtils.getBackgroundAndBorderStyle(themeColors.sidebar),
                                                 pressed ? StyleUtils.getBackgroundAndBorderStyle(themeColors.buttonPressedBG) : undefined,
diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
index 3b20d99fa2ea..477dfcc18ae0 100644
--- a/src/components/MultipleAvatars.js
+++ b/src/components/MultipleAvatars.js
@@ -108,6 +108,9 @@ function MultipleAvatars(props) {
     }
 
     if (props.icons.length === 1 && !props.shouldStackHorizontally) {
+        if (props.size === CONST.AVATAR_SIZE.SMALLER) {
+            avatarContainerStyles = [styles.emptyAvatarSmaller, styles.emptyAvatarMargin];
+        }
         return (
             <UserDetailsTooltip
                 accountID={props.icons[0].id}
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index 7eb77c47980a..0b65fa57a14e 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -1,7 +1,6 @@
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import lodashGet from 'lodash/get';
 import reportPropTypes from '../../pages/reportPropTypes';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import withWindowDimensions from '../withWindowDimensions';
@@ -13,8 +12,7 @@ import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
 import MenuItem from '../MenuItem';
 import styles from '../../styles/styles';
 import * as ReportUtils from '../../libs/ReportUtils';
-import * as PersonalDetailsUtils from '../../libs/PersonalDetailsUtils';
-import * as UserUtils from '../../libs/UserUtils';
+import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import * as StyleUtils from '../../styles/StyleUtils';
 import * as Task from '../../libs/actions/Task';
 import * as PolicyUtils from '../../libs/PolicyUtils';
@@ -49,7 +47,6 @@ function TaskView(props) {
     const isCompleted = ReportUtils.isCompletedTaskReport(props.report);
     const isOpen = ReportUtils.isOpenTaskReport(props.report);
     const isCanceled = ReportUtils.isCanceledTaskReport(props.report);
-    const avatarURL = lodashGet(PersonalDetailsUtils.getPersonalDetailsByIDs([props.report.managerID], props.currentUserPersonalDetails.accountID), [0, 'avatar'], '');
     const policy = ReportUtils.getPolicy(props.report.policyID);
     const canEdit = PolicyUtils.isPolicyAdmin(policy) || Task.isTaskAssigneeOrTaskOwner(props.report, props.currentUserPersonalDetails.accountID);
     const disableState = !canEdit || !isOpen;
@@ -117,7 +114,7 @@ function TaskView(props) {
                 <MenuItem
                     label={props.translate('task.assignee')}
                     title={ReportUtils.getDisplayNameForParticipant(props.report.managerID)}
-                    icon={UserUtils.getAvatar(avatarURL, props.report.managerID)}
+                    icon={OptionsListUtils.getAvatarsForAccountIDs([props.report.managerID], props.personalDetails)}
                     iconType={CONST.ICON_TYPE_AVATAR}
                     avatarSize={CONST.AVATAR_SIZE.SMALLER}
                     titleStyle={styles.assigneeTextStyle}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 27d216e41a59..39584a3fdc1b 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1940,6 +1940,11 @@ const styles = {
         width: variables.avatarSizeSmall,
     },
 
+    emptyAvatarSmaller: {
+        height: variables.avatarSizeSmaller,
+        width: variables.avatarSizeSmaller,
+    },
+
     emptyAvatarMedium: {
         height: variables.avatarSizeMedium,
         width: variables.avatarSizeMedium,
@@ -1958,6 +1963,10 @@ const styles = {
         marginRight: variables.avatarChatSpacing - 4,
     },
 
+    emptyAvatarMarginSmaller: {
+        marginRight: 0,
+    },
+
     modalViewContainer: {
         alignItems: 'center',
         flex: 1,

From 9db9791447f1fa5bc09f26cf2065d298d63dc6fb Mon Sep 17 00:00:00 2001
From: Steven KKC <steven.kkc.820@gmail.com>
Date: Mon, 24 Jul 2023 05:12:21 -0400
Subject: [PATCH 2/4] set default size of avatar and move container style
 calculation to top

---
 src/components/MenuItem.js        | 8 ++++----
 src/components/MultipleAvatars.js | 4 +---
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 77e424920fed..d707aa17a485 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -63,7 +63,7 @@ const defaultProps = {
     brickRoadIndicator: '',
     floatRightAvatars: [],
     shouldStackHorizontally: false,
-    avatarSize: undefined,
+    avatarSize: CONST.AVATAR_SIZE.DEFAULT,
     floatRightAvatarSize: undefined,
     shouldBlockSelection: false,
     hoverAndPressStyle: [],
@@ -150,7 +150,7 @@ function MenuItem(props) {
                                             isHovered={isHovered}
                                             isPressed={pressed}
                                             icons={props.icon}
-                                            size={props.avatarSize || CONST.AVATAR_SIZE.DEFAULT}
+                                            size={props.avatarSize}
                                             secondAvatarStyle={[
                                                 StyleUtils.getBackgroundAndBorderStyle(themeColors.sidebar),
                                                 pressed ? StyleUtils.getBackgroundAndBorderStyle(themeColors.buttonPressedBG) : undefined,
@@ -159,7 +159,7 @@ function MenuItem(props) {
                                         />
                                     )}
                                     {Boolean(props.icon) && !_.isArray(props.icon) && (
-                                        <View style={[styles.popoverMenuIcon, ...props.iconStyles, StyleUtils.getAvatarWidthStyle(props.avatarSize || CONST.AVATAR_SIZE.DEFAULT)]}>
+                                        <View style={[styles.popoverMenuIcon, ...props.iconStyles, StyleUtils.getAvatarWidthStyle(props.avatarSize)]}>
                                             {props.iconType === CONST.ICON_TYPE_ICON && (
                                                 <Icon
                                                     src={props.icon}
@@ -189,7 +189,7 @@ function MenuItem(props) {
                                                     imageStyles={[styles.alignSelfCenter]}
                                                     source={props.icon}
                                                     fallbackIcon={props.fallbackIcon}
-                                                    size={props.avatarSize || CONST.AVATAR_SIZE.DEFAULT}
+                                                    size={props.avatarSize}
                                                 />
                                             )}
                                         </View>
diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
index 477dfcc18ae0..b19048583f4c 100644
--- a/src/components/MultipleAvatars.js
+++ b/src/components/MultipleAvatars.js
@@ -74,6 +74,7 @@ const defaultProps = {
 function MultipleAvatars(props) {
     const [avatarRows, setAvatarRows] = useState([props.icons]);
     let avatarContainerStyles = props.size === CONST.AVATAR_SIZE.SMALL ? [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall] : [styles.emptyAvatar, styles.emptyAvatarMargin];
+    avatarContainerStyles = props.size === CONST.AVATAR_SIZE.SMALLER ? [styles.emptyAvatarSmaller, styles.emptyAvatarMargin] : avatarContainerStyles;
     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') : [''];
@@ -108,9 +109,6 @@ function MultipleAvatars(props) {
     }
 
     if (props.icons.length === 1 && !props.shouldStackHorizontally) {
-        if (props.size === CONST.AVATAR_SIZE.SMALLER) {
-            avatarContainerStyles = [styles.emptyAvatarSmaller, styles.emptyAvatarMargin];
-        }
         return (
             <UserDetailsTooltip
                 accountID={props.icons[0].id}

From 16bb80da060563e1fcff604f9f74a8757577497c Mon Sep 17 00:00:00 2001
From: Steven KKC <steven.kkc.820@gmail.com>
Date: Mon, 24 Jul 2023 06:37:39 -0400
Subject: [PATCH 3/4] add a function

---
 src/components/MultipleAvatars.js | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
index b19048583f4c..d43586e3b352 100644
--- a/src/components/MultipleAvatars.js
+++ b/src/components/MultipleAvatars.js
@@ -71,10 +71,25 @@ const defaultProps = {
     maxAvatarsInRow: CONST.AVATAR_ROW_SIZE.DEFAULT,
 };
 
+function getContainerStyles(size) {
+    let containerStyles;
+
+    switch (size) {
+        case CONST.AVATAR_SIZE.SMALL:
+            containerStyles = [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall];
+            break;
+        case CONST.AVATAR_SIZE.SMALLER:
+            containerStyles = [styles.emptyAvatarSmaller, styles.emptyAvatarMargin];
+            break;
+        default:
+            containerStyles = [styles.emptyAvatar, styles.emptyAvatarMargin];
+    }
+
+    return containerStyles;
+}
 function MultipleAvatars(props) {
     const [avatarRows, setAvatarRows] = useState([props.icons]);
-    let avatarContainerStyles = props.size === CONST.AVATAR_SIZE.SMALL ? [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall] : [styles.emptyAvatar, styles.emptyAvatarMargin];
-    avatarContainerStyles = props.size === CONST.AVATAR_SIZE.SMALLER ? [styles.emptyAvatarSmaller, styles.emptyAvatarMargin] : avatarContainerStyles;
+    let avatarContainerStyles = getContainerStyles(props.size);
     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') : [''];

From 9b0614b8296b4d706308d28a2d789146b4bbfeaf Mon Sep 17 00:00:00 2001
From: Steven KKC <steven.kkc.820@gmail.com>
Date: Mon, 24 Jul 2023 08:38:37 -0400
Subject: [PATCH 4/4] add new style

---
 src/components/MultipleAvatars.js | 2 +-
 src/styles/styles.js              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
index d43586e3b352..f6f9a6c544ea 100644
--- a/src/components/MultipleAvatars.js
+++ b/src/components/MultipleAvatars.js
@@ -79,7 +79,7 @@ function getContainerStyles(size) {
             containerStyles = [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall];
             break;
         case CONST.AVATAR_SIZE.SMALLER:
-            containerStyles = [styles.emptyAvatarSmaller, styles.emptyAvatarMargin];
+            containerStyles = [styles.emptyAvatarSmaller, styles.emptyAvatarMarginSmaller];
             break;
         default:
             containerStyles = [styles.emptyAvatar, styles.emptyAvatarMargin];
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 39584a3fdc1b..6f05fabeed1d 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1964,7 +1964,7 @@ const styles = {
     },
 
     emptyAvatarMarginSmaller: {
-        marginRight: 0,
+        marginRight: variables.avatarChatSpacing - 4,
     },
 
     modalViewContainer: {