Merge pull request #27413 from bernhardoj/fix/26361-money-request-ava…

…tar-border Fix money request header avatar border color does not match header background color
Expensify · Sep 25, 2023 · db4d85b · db4d85b
2 parents 34e7377 + 8abc7dd
commit db4d85b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 8 deletions.
diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js
@@ -91,6 +91,7 @@ function AvatarWithDisplayName(props) {
     const shouldShowSubscriptAvatar = ReportUtils.shouldReportShowSubscript(props.report);
     const isExpenseRequest = ReportUtils.isExpenseRequest(props.report);
     const defaultSubscriptSize = isExpenseRequest ? CONST.AVATAR_SIZE.SMALL_NORMAL : props.size;
+    const avatarBorderColor = props.isAnonymous ? themeColors.highlightBG : themeColors.componentBG;
 
     return (
         <View style={[styles.appContentHeaderTitle, styles.flex1]}>
@@ -103,7 +104,7 @@ function AvatarWithDisplayName(props) {
                     >
                         {shouldShowSubscriptAvatar ? (
                             <SubscriptAvatar
-                                backgroundColor={themeColors.highlightBG}
+                                backgroundColor={avatarBorderColor}
                                 mainAvatar={icons[0]}
                                 secondaryAvatar={icons[1]}
                                 size={defaultSubscriptSize}
@@ -112,7 +113,7 @@ function AvatarWithDisplayName(props) {
                             <MultipleAvatars
                                 icons={icons}
                                 size={props.size}
-                                secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(themeColors.highlightBG)]}
+                                secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(avatarBorderColor)]}
                             />
                         )}
                     </PressableWithoutFeedback>

diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
@@ -220,18 +220,14 @@ class OptionRow extends Component {
                                             <SubscriptAvatar
                                                 mainAvatar={this.props.option.icons[0]}
                                                 secondaryAvatar={this.props.option.icons[1]}
-                                                backgroundColor={hovered && !this.props.optionIsFocused ? hoveredBackgroundColor : subscriptColor}
+                                                backgroundColor={hovered ? hoveredBackgroundColor : subscriptColor}
                                                 size={defaultSubscriptSize}
                                             />
                                         ) : (
                                             <MultipleAvatars
                                                 icons={this.props.option.icons}
                                                 size={CONST.AVATAR_SIZE.DEFAULT}
-                                                secondAvatarStyle={[
-                                                    StyleUtils.getBackgroundAndBorderStyle(themeColors.appBG),
-                                                    this.props.optionIsFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
-                                                    hovered && !this.props.optionIsFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
-                                                ]}
+                                                secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(hovered ? hoveredBackgroundColor : subscriptColor)]}
                                                 shouldShowTooltip={this.props.showTitleTooltip && OptionsListUtils.shouldOptionShowTooltip(this.props.option)}
                                             />
                                         ))}