From 8abc7dd30504483df5134224ec98f0e357b6b0a4 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sat, 16 Sep 2023 16:28:19 +0800
Subject: [PATCH] use different border color for anonymous report footer

---
 src/components/AvatarWithDisplayName.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js
index a6c630b775f7..97ef5ac741f5 100644
--- a/src/components/AvatarWithDisplayName.js
+++ b/src/components/AvatarWithDisplayName.js
@@ -17,6 +17,7 @@ import DisplayNames from './DisplayNames';
 import compose from '../libs/compose';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
 import Text from './Text';
+import * as StyleUtils from '../styles/StyleUtils';
 import ParentNavigationSubtitle from './ParentNavigationSubtitle';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import Navigation from '../libs/Navigation/Navigation';
@@ -90,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]}>
@@ -102,7 +104,7 @@ function AvatarWithDisplayName(props) {
                     >
                         {shouldShowSubscriptAvatar ? (
                             <SubscriptAvatar
-                                backgroundColor={themeColors.highlightBG}
+                                backgroundColor={avatarBorderColor}
                                 mainAvatar={icons[0]}
                                 secondaryAvatar={icons[1]}
                                 size={defaultSubscriptSize}
@@ -111,6 +113,7 @@ function AvatarWithDisplayName(props) {
                             <MultipleAvatars
                                 icons={icons}
                                 size={props.size}
+                                secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(avatarBorderColor)]}
                             />
                         )}
                     </PressableWithoutFeedback>