Merge pull request #23707 from bernhardoj/fix/23426-icon-overlay-bord…

…er-radius Fix workspace icon border radius is different than the overlay
Expensify · Jul 31, 2023 · 1a1e4c5 · 1a1e4c5
2 parents 3324ea7 + d9c824a
commit 1a1e4c5
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 24 deletions.
diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
@@ -174,21 +174,17 @@ function MultipleAvatars(props) {
                                     avatar: icon.avatar,
                                 }}
                             >
-                                <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) : {},
-                                    ]}
-                                >
+                                <View style={[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
@@ -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 {
         marginLeft: index > 0 ? -overlapSize : 0,
-        borderRadius,
-        borderWidth,
         zIndex: index + 2,
     };
 }