Update Fallback Avatar to Support Themes

src/components/Avatar.tsx

@@ -74,21 +74,28 @@ function Avatar({
         setImageError(false);
     }, [source]);
 
-    if (!source) {
-        return null;
-    }
-
     const isWorkspace = type === CONST.ICON_TYPE_WORKSPACE;
     const iconSize = StyleUtils.getAvatarSize(size);
 
     const imageStyle: StyleProp<ImageStyle> = [StyleUtils.getAvatarStyle(size), imageStyles, styles.noBorderRadius];
     const iconStyle = imageStyles ? [StyleUtils.getAvatarStyle(size), styles.bgTransparent, imageStyles] : undefined;
 
-    const iconFillColor = isWorkspace ? StyleUtils.getDefaultWorkspaceAvatarColor(name).fill : fill;
+    // We pass the color styles down to the SVG for the workspace and fallback avatar.
+    const useFallBackAvatar = imageError || source === Expensicons.FallbackAvatar;
+
+    let iconColors;
+    if (isWorkspace) {
+        iconColors = StyleUtils.getDefaultWorkspaceAvatarColor(name);
+    } else if (useFallBackAvatar) {
+        iconColors = StyleUtils.getBackgroundColorAndFill(theme.border, theme.icon);
+    } else {
+        iconColors = null;
+    }
+
     const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(name) : fallbackIcon || Expensicons.FallbackAvatar;
     const fallbackAvatarTestID = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatarTestID(name) : fallbackIconTestID || 'SvgFallbackAvatar Icon';
 
-    const avatarSource = imageError ? fallbackAvatar : source;
+    const avatarSource = imageError || !source ? fallbackAvatar : source;
 
     return (
         <View style={[containerStyles, styles.pointerEventsNone]}>
@@ -107,13 +114,8 @@ function Avatar({
                         src={avatarSource}
                         height={iconSize}
                         width={iconSize}
-                        fill={imageError ? theme.offline : iconFillColor}
-                        additionalStyles={[
-                            StyleUtils.getAvatarBorderStyle(size, type),
-                            isWorkspace && StyleUtils.getDefaultWorkspaceAvatarColor(name),
-                            imageError && StyleUtils.getBackgroundColorStyle(theme.fallbackIconColor),
-                            iconAdditionalStyles,
-                        ]}
+                        fill={imageError ? iconColors?.fill ?? theme.offline : fill}
+                        additionalStyles={[StyleUtils.getAvatarBorderStyle(size, type), iconColors, iconAdditionalStyles]}
                     />
                 </View>
             )}

src/libs/OptionsListUtils.ts

@@ -7,6 +7,7 @@ import lodashSet from 'lodash/set';
 import lodashSortBy from 'lodash/sortBy';
 import Onyx from 'react-native-onyx';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import {FallbackAvatar} from '@components/Icon/Expensicons';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -1682,10 +1683,10 @@ function getOptions(
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         userToInvite.alternateText = userToInvite.alternateText || searchValue;
 
-        // If user doesn't exist, use a default avatar
+        // If user doesn't exist, always use the fallback avatar
         userToInvite.icons = [
             {
-                source: UserUtils.getAvatar('', optimisticAccountID),
+                source: FallbackAvatar,
                 name: searchValue,
                 type: CONST.ICON_TYPE_AVATAR,
             },

src/libs/UserUtils.ts

@@ -83,7 +83,7 @@ function generateAccountID(searchValue: string): number {
  * @returns
  */
 function getDefaultAvatar(accountID = -1, avatarURL?: string): IconAsset {
-    if (accountID <= 0) {
+    if (!accountID || accountID <= 0) {
         return FallbackAvatar;
     }
     if (Number(accountID) === CONST.ACCOUNT_ID.CONCIERGE) {

src/styles/utils/index.ts

@@ -38,11 +38,11 @@ import type {
     EReceiptColorName,
     EreceiptColorStyle,
     ParsableStyle,
+    SVGAvatarColorStyle,
     TextColorStyle,
-    WorkspaceColorStyle,
 } from './types';
 
-const workspaceColorOptions: WorkspaceColorStyle[] = [
+const workspaceColorOptions: SVGAvatarColorStyle[] = [
     {backgroundColor: colors.blue200, fill: colors.blue700},
     {backgroundColor: colors.blue400, fill: colors.blue800},
     {backgroundColor: colors.blue700, fill: colors.blue200},
@@ -276,6 +276,13 @@ function getDefaultWorkspaceAvatarColor(workspaceName: string): ViewStyle {
     return workspaceColorOptions[colorHash];
 }
 
+/**
+ * Helper method to return formatted backgroundColor and fill styles
+ */
+function getBackgroundColorAndFill(backgroundColor: string, fill: string): SVGAvatarColorStyle {
+    return {backgroundColor, fill};
+}
+
 /**
  * Helper method to return eReceipt color code
  */
@@ -1112,6 +1119,7 @@ const staticStyleUtils = {
     getComposeTextAreaPadding,
     getColorStyle,
     getDefaultWorkspaceAvatarColor,
+    getBackgroundColorAndFill,
     getDirectionStyle,
     getDropDownButtonHeight,
     getEmojiPickerListHeight,

src/styles/utils/types.ts

@@ -40,7 +40,7 @@ type ButtonSizeValue = ValueOf<typeof CONST.DROPDOWN_BUTTON_SIZE>;
 type ButtonStateName = ValueOf<typeof CONST.BUTTON_STATES>;
 type AvatarSize = {width: number};
 
-type WorkspaceColorStyle = {backgroundColor: ColorValue; fill: ColorValue};
+type SVGAvatarColorStyle = {backgroundColor: ColorValue; fill: ColorValue};
 type EreceiptColorStyle = {backgroundColor: ColorValue; color: ColorValue};
 type TextColorStyle = {color: string};
 
@@ -55,7 +55,7 @@ export type {
     ButtonSizeValue,
     ButtonStateName,
     AvatarSize,
-    WorkspaceColorStyle,
+    SVGAvatarColorStyle,
     EreceiptColorStyle,
     TextColorStyle,
 };