use different border color for anonymous report footer

Expensify · Sep 16, 2023 · 8abc7dd · 8abc7dd
1 parent 37fe6bb
commit 8abc7dd
Showing 1 changed file with 4 additions and 1 deletion.
diff --git 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>