Ensure correct background is present for horizontalStackedAvatar style

src/components/LHNOptionsList/OptionRowLHN.js

@@ -138,6 +138,7 @@ const OptionRowLHN = (props) => {
                                 && (
                                     optionItem.shouldShowSubscript ? (
                                         <SubscriptAvatar
+                                            backgroundColor={props.isFocused ? themeColors.activeComponentBG : themeColors.sidebar}
                                             mainAvatar={optionItem.icons[0]}
                                             secondaryAvatar={optionItem.icons[1]}
                                             mainTooltip={optionItem.ownerEmail}

src/components/MenuItem.js

@@ -157,6 +157,8 @@ const MenuItem = (props) => {
                         {!_.isEmpty(props.floatRightAvatars) && (
                             <View style={[styles.justifyContentCenter, (props.brickRoadIndicator ? styles.mr4 : styles.mr3)]}>
                                 <MultipleAvatars
+                                    isHovered={hovered}
+                                    isPressed={pressed}
                                     icons={props.floatRightAvatars}
                                     size={props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
                                     fallbackIcon={Expensicons.Workspace}

src/components/MultipleAvatars.js

@@ -29,6 +29,12 @@ const propTypes = {
 
     /** Prop to identify if we should load avatars vertically instead of diagonally */
     shouldStackHorizontally: PropTypes.bool,
+
+    /** Whether the avatars are hovered */
+    isHovered: PropTypes.bool,
+
+    /** Whether the avatars are in an element being pressed */
+    isPressed: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -38,6 +44,8 @@ const defaultProps = {
     avatarTooltips: [],
     fallbackIcon: undefined,
     shouldStackHorizontally: false,
+    isHovered: false,
+    isPressed: false,
 };
 
 const MultipleAvatars = (props) => {
@@ -75,7 +83,7 @@ const MultipleAvatars = (props) => {
                         _.map([...props.icons].splice(0, 4).reverse(), (icon, index) => (
                             <View
                                 key={`stackedAvatars-${index}`}
-                                style={[styles.horizontalStackedAvatar, styles.alignItemsCenter, horizontalStyles[index]]}
+                                style={[styles.horizontalStackedAvatar, StyleUtils.getHorizontalStackedAvatarBorderStyle(props.isHovered, props.isPressed), horizontalStyles[index]]}
                             >
                                 <Avatar
                                     source={icon || props.fallbackIcon}
@@ -86,7 +94,14 @@ const MultipleAvatars = (props) => {
                         ))
                     }
                     {props.icons.length > 4 && (
-                        <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.horizontalStackedAvatar4Overlay]}>
+                        <View
+                            style={[
+                                styles.alignItemsCenter,
+                                styles.justifyContentCenter,
+                                StyleUtils.getHorizontalStackedAvatarBorderStyle(props.isHovered, props.isPressed),
+                                styles.horizontalStackedAvatar4Overlay,
+                            ]}
+                        >
                             <Text style={styles.avatarInnerTextSmall}>
                                 {`+${props.icons.length - 4}`}
                             </Text>

src/components/SubscriptAvatar.js

@@ -24,12 +24,16 @@ const propTypes = {
 
     /** Set the size of avatars */
     size: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
+
+    /** Background color used for subscript avatar border */
+    backgroundColor: PropTypes.string,
 };
 
 const defaultProps = {
     mainTooltip: '',
     secondaryTooltip: '',
     size: CONST.AVATAR_SIZE.DEFAULT,
+    backgroundColor: themeColors.componentBG,
 };
 
 const SubscriptAvatar = props => (
@@ -42,7 +46,7 @@ const SubscriptAvatar = props => (
         </Tooltip>
         <View style={[
             props.size === CONST.AVATAR_SIZE.SMALL ? styles.secondAvatarSubscriptCompact : styles.secondAvatarSubscript,
-            StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)]}
+            StyleUtils.getBackgroundAndBorderStyle(props.backgroundColor)]}
         >
             <Tooltip text={props.secondaryTooltip}>
                 <Avatar

src/styles/StyleUtils.js

@@ -539,6 +539,28 @@ function getKeyboardShortcutsModalWidth(isSmallScreenWidth) {
     return {maxWidth: 600};
 }
 
+/**
+ * @param {Boolean} isHovered
+ * @param {Boolean} isPressed
+ * @returns {Object}
+ */
+function getHorizontalStackedAvatarBorderStyle(isHovered, isPressed) {
+    let backgroundColor = themeColors.appBG;
+
+    if (isHovered) {
+        backgroundColor = themeColors.buttonHoveredBG;
+    }
+
+    if (isPressed) {
+        backgroundColor = themeColors.buttonPressedBG;
+    }
+
+    return {
+        backgroundColor,
+        borderColor: backgroundColor,
+    };
+}
+
 export {
     getAvatarSize,
     getAvatarStyle,
@@ -572,4 +594,5 @@ export {
     hasSafeAreas,
     getHeight,
     fade,
+    getHorizontalStackedAvatarBorderStyle,
 };

src/styles/styles.js

@@ -1569,6 +1569,7 @@ const styles = {
         backgroundColor: themeColors.appBG,
         borderRadius: 33,
         paddingTop: 2,
+        alignItems: 'center',
     },
 
     singleSubscript: {
@@ -1732,7 +1733,6 @@ const styles = {
         width: 28,
         borderWidth: 2,
         borderStyle: 'solid',
-        borderColor: themeColors.appBG,
         backgroundColor: themeColors.opaqueAvatar,
         borderRadius: 24,
         zIndex: 6,