Update Fallback Avatar to Support Themes

src/components/Avatar.tsx

@@ -74,21 +74,26 @@ 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 || !source;
     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 = useFallBackAvatar ? fallbackAvatar : source;
+
+    let iconColors;
+    if (isWorkspace) {
+        iconColors = StyleUtils.getDefaultWorkspaceAvatarColor(name);
+    } else if (useFallBackAvatar) {
+        iconColors = StyleUtils.getBackgroundColorAndFill(theme.border, theme.icon);
+    } else {
+        iconColors = null;
+    }
 
     return (
         <View style={[containerStyles, styles.pointerEventsNone]}>
@@ -107,13 +112,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 : iconColors?.fill ?? fill}
+                        additionalStyles={[StyleUtils.getAvatarBorderStyle(size, type), iconColors, iconAdditionalStyles]}
                     />
                 </View>
             )}

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
  */
@@ -1123,6 +1130,7 @@ const staticStyleUtils = {
     getComposeTextAreaPadding,
     getColorStyle,
     getDefaultWorkspaceAvatarColor,
+    getBackgroundColorAndFill,
     getDirectionStyle,
     getDropDownButtonHeight,
     getEmojiPickerListHeight,
@@ -1228,7 +1236,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
             height: avatarSize,
             width: avatarSize,
             borderRadius: avatarSize,
-            backgroundColor: theme.offline,
+            backgroundColor: theme.border,
         };
     },
 

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,
 };