From 72189c8dbc90cf5245aa8d6ee2d8c9761ede8f38 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 27 Jul 2023 13:22:03 +0800
Subject: [PATCH 1/2] fix icon border radius is different than the overlay

---
 src/components/MultipleAvatars.js | 21 +++++++++++----------
 src/styles/StyleUtils.js          | 15 +++++----------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
index a0cc3b6a4b29..a5a944598f1d 100644
--- a/src/components/MultipleAvatars.js
+++ b/src/components/MultipleAvatars.js
@@ -185,19 +185,20 @@ function MultipleAvatars(props) {
                             >
                                 <View
                                     style={[
-                                        styles.justifyContentCenter,
-                                        styles.alignItemsCenter,
-                                        StyleUtils.getHorizontalStackedAvatarBorderStyle({
-                                            isHovered: props.isHovered,
-                                            isPressed: props.isPressed,
-                                            isInReportAction: props.isInReportAction,
-                                            shouldUseCardBackground: props.shouldUseCardBackground,
-                                        }),
-                                        StyleUtils.getHorizontalStackedAvatarStyle(index, overlapSize, oneAvatarBorderWidth, oneAvatarSize.width),
-                                        icon.type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(props.size, icon.type) : {},
+                                        StyleUtils.getHorizontalStackedAvatarStyle(index, overlapSize),
+                                        StyleUtils.getAvatarBorderRadius(props.size, icon.type),
                                     ]}
                                 >
                                     <Avatar
+                                        iconAdditionalStyles={[
+                                            StyleUtils.getHorizontalStackedAvatarBorderStyle({
+                                                isHovered: props.isHovered,
+                                                isPressed: props.isPressed,
+                                                isInReportAction: props.isInReportAction,
+                                                shouldUseCardBackground: props.shouldUseCardBackground,
+                                            }),
+                                            StyleUtils.getAvatarBorderWidth(props.size),
+                                        ]}
                                         source={icon.source || props.fallbackIcon}
                                         fill={themeColors.iconSuccessFill}
                                         size={props.size}
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index 707221a7c747..8395588784f2 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -878,20 +878,17 @@ function getKeyboardShortcutsModalWidth(isSmallScreenWidth) {
  * @returns {Object}
  */
 function getHorizontalStackedAvatarBorderStyle({isHovered, isPressed, isInReportAction = false, shouldUseCardBackground = false}) {
-    let backgroundColor = shouldUseCardBackground ? themeColors.cardBG : themeColors.appBG;
+    let borderColor = shouldUseCardBackground ? themeColors.cardBG : themeColors.appBG;
 
     if (isHovered) {
-        backgroundColor = isInReportAction ? themeColors.highlightBG : themeColors.border;
+        borderColor = isInReportAction ? themeColors.highlightBG : themeColors.border;
     }
 
     if (isPressed) {
-        backgroundColor = isInReportAction ? themeColors.highlightBG : themeColors.buttonPressedBG;
+        borderColor = isInReportAction ? themeColors.highlightBG : themeColors.buttonPressedBG;
     }
 
-    return {
-        backgroundColor,
-        borderColor: backgroundColor,
-    };
+    return {borderColor};
 }
 
 /**
@@ -902,11 +899,9 @@ function getHorizontalStackedAvatarBorderStyle({isHovered, isPressed, isInReport
  * @param {Number} borderRadius
  * @returns {Object}
  */
-function getHorizontalStackedAvatarStyle(index, overlapSize, borderWidth, borderRadius) {
+function getHorizontalStackedAvatarStyle(index, overlapSize) {
     return {
         left: -(overlapSize * index),
-        borderRadius,
-        borderWidth,
         zIndex: index + 2,
     };
 }

From fc0a75c7291abce2e65c6691b1e8c0ae919574d8 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 27 Jul 2023 13:34:44 +0800
Subject: [PATCH 2/2] prettier

---
 src/components/MultipleAvatars.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
index a5a944598f1d..6fd18d21101d 100644
--- a/src/components/MultipleAvatars.js
+++ b/src/components/MultipleAvatars.js
@@ -183,12 +183,7 @@ function MultipleAvatars(props) {
                                     avatar: icon.avatar,
                                 }}
                             >
-                                <View
-                                    style={[
-                                        StyleUtils.getHorizontalStackedAvatarStyle(index, overlapSize),
-                                        StyleUtils.getAvatarBorderRadius(props.size, icon.type),
-                                    ]}
-                                >
+                                <View style={[StyleUtils.getHorizontalStackedAvatarStyle(index, overlapSize), StyleUtils.getAvatarBorderRadius(props.size, icon.type)]}>
                                     <Avatar
                                         iconAdditionalStyles={[
                                             StyleUtils.getHorizontalStackedAvatarBorderStyle({