From 05dba39c4989e56d77bb23e1b77b396397b8243e Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Wed, 20 Mar 2024 13:38:32 +0000 Subject: [PATCH 01/16] Add themeing to default avatars. If no source provided, we use the default avatar --- assets/images/avatars/fallback-avatar.svg | 11 +++++++++- src/components/Avatar.tsx | 25 +++++++++++++++-------- src/libs/OptionsListUtils.ts | 2 +- src/styles/utils/index.ts | 13 ++++++++++-- 4 files changed, 38 insertions(+), 13 deletions(-) diff --git a/assets/images/avatars/fallback-avatar.svg b/assets/images/avatars/fallback-avatar.svg index b4584d910190..69293d72aed9 100644 --- a/assets/images/avatars/fallback-avatar.svg +++ b/assets/images/avatars/fallback-avatar.svg @@ -1 +1,10 @@ - \ No newline at end of file + + + + + + + diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index 2b2d0a60f657..5d740ed206b6 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -10,6 +10,7 @@ import type {AvatarSource} from '@libs/UserUtils'; import type {AvatarSizeName} from '@styles/utils'; import CONST from '@src/CONST'; import type {AvatarType} from '@src/types/onyx/OnyxCommon'; +import type {SVGAvatarColorStyle} from '@src/types'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import Image from './Image'; @@ -74,18 +75,25 @@ function Avatar({ setImageError(false); }, [source]); - if (!source) { - return null; - } - const isWorkspace = type === CONST.ICON_TYPE_WORKSPACE; const iconSize = StyleUtils.getAvatarSize(size); const imageStyle: StyleProp = [StyleUtils.getAvatarStyle(size), imageStyles, styles.noBorderRadius]; const iconStyle = imageStyles ? [StyleUtils.getAvatarStyle(size), styles.bgTransparent, imageStyles] : undefined; - const iconFillColor = isWorkspace ? StyleUtils.getDefaultWorkspaceAvatarColor(name).fill : fill; - const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(name) : fallbackIcon || Expensicons.FallbackAvatar; + // We pass the color styles down to the SVG for the workspace and fallback avatar. + const useFallBackAvatar = imageError || source === Expensicons.FallbackAvatar; + + let iconColors: SVGAvatarColorStyle; + 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; @@ -107,11 +115,10 @@ function Avatar({ src={avatarSource} height={iconSize} width={iconSize} - fill={imageError ? theme.offline : iconFillColor} + fill={imageError ? theme.offline : null} additionalStyles={[ StyleUtils.getAvatarBorderStyle(size, type), - isWorkspace && StyleUtils.getDefaultWorkspaceAvatarColor(name), - imageError && StyleUtils.getBackgroundColorStyle(theme.fallbackIconColor), + iconColors, iconAdditionalStyles, ]} /> diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index bacd019904a3..638b29633cdd 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -1685,7 +1685,7 @@ function getOptions( // If user doesn't exist, use a default avatar userToInvite.icons = [ { - source: UserUtils.getAvatar('', optimisticAccountID), + source: '', name: searchValue, type: CONST.ICON_TYPE_AVATAR, }, diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 9a25313837fe..ba2da71bce59 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -39,10 +39,10 @@ import type { EreceiptColorStyle, ParsableStyle, TextColorStyle, - WorkspaceColorStyle, + SVGAvatarColorStyle, } 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,14 @@ 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 +1120,7 @@ const staticStyleUtils = { getComposeTextAreaPadding, getColorStyle, getDefaultWorkspaceAvatarColor, + getBackgroundColorAndFill, getDirectionStyle, getDropDownButtonHeight, getEmojiPickerListHeight, From 5fd775bcb21560bc8c31235c0f4ee7c852f43e6b Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Wed, 20 Mar 2024 14:46:10 +0000 Subject: [PATCH 02/16] update cases for fallback avatar --- src/components/Avatar.tsx | 2 +- src/libs/OptionsListUtils.ts | 5 +++-- src/libs/UserUtils.ts | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index 5d740ed206b6..534ed877d997 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -115,7 +115,7 @@ function Avatar({ src={avatarSource} height={iconSize} width={iconSize} - fill={imageError ? theme.offline : null} + fill={imageError ? theme.offline : fill} additionalStyles={[ StyleUtils.getAvatarBorderStyle(size, type), iconColors, diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index 638b29633cdd..851fb317461e 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -34,6 +34,7 @@ import type DeepValueOf from '@src/types/utils/DeepValueOf'; import type {EmptyObject} from '@src/types/utils/EmptyObject'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import times from '@src/utils/times'; +import {FallbackAvatar} from '@components/Icon/Expensicons'; import Timing from './actions/Timing'; import * as CollectionUtils from './CollectionUtils'; import * as ErrorUtils from './ErrorUtils'; @@ -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: '', + source: FallbackAvatar, name: searchValue, type: CONST.ICON_TYPE_AVATAR, }, diff --git a/src/libs/UserUtils.ts b/src/libs/UserUtils.ts index 147343e99ceb..d2d45a4d8490 100644 --- a/src/libs/UserUtils.ts +++ b/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) { From 6c85462631e56436b6350cb36b603b872b493567 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Wed, 20 Mar 2024 15:01:19 +0000 Subject: [PATCH 03/16] prettier and type fix --- src/components/Avatar.tsx | 10 +++------- src/libs/OptionsListUtils.ts | 2 +- src/styles/utils/index.ts | 3 +-- 3 files changed, 5 insertions(+), 10 deletions(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index 534ed877d997..412918fa52c7 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -9,8 +9,8 @@ import * as ReportUtils from '@libs/ReportUtils'; import type {AvatarSource} from '@libs/UserUtils'; import type {AvatarSizeName} from '@styles/utils'; import CONST from '@src/CONST'; +import type {SVGAvatarColorStyle} from '@src/styles/utils/types'; import type {AvatarType} from '@src/types/onyx/OnyxCommon'; -import type {SVGAvatarColorStyle} from '@src/types'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import Image from './Image'; @@ -93,7 +93,7 @@ function Avatar({ iconColors = null; } - const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(name) : (fallbackIcon || Expensicons.FallbackAvatar); + const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(name) : fallbackIcon || Expensicons.FallbackAvatar; const fallbackAvatarTestID = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatarTestID(name) : fallbackIconTestID || 'SvgFallbackAvatar Icon'; const avatarSource = imageError ? fallbackAvatar : source; @@ -116,11 +116,7 @@ function Avatar({ height={iconSize} width={iconSize} fill={imageError ? theme.offline : fill} - additionalStyles={[ - StyleUtils.getAvatarBorderStyle(size, type), - iconColors, - iconAdditionalStyles, - ]} + additionalStyles={[StyleUtils.getAvatarBorderStyle(size, type), iconColors, iconAdditionalStyles]} /> )} diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index 851fb317461e..7184394fbf39 100644 --- a/src/libs/OptionsListUtils.ts +++ b/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'; @@ -34,7 +35,6 @@ import type DeepValueOf from '@src/types/utils/DeepValueOf'; import type {EmptyObject} from '@src/types/utils/EmptyObject'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import times from '@src/utils/times'; -import {FallbackAvatar} from '@components/Icon/Expensicons'; import Timing from './actions/Timing'; import * as CollectionUtils from './CollectionUtils'; import * as ErrorUtils from './ErrorUtils'; diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index ba2da71bce59..81226233804a 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -38,8 +38,8 @@ import type { EReceiptColorName, EreceiptColorStyle, ParsableStyle, - TextColorStyle, SVGAvatarColorStyle, + TextColorStyle, } from './types'; const workspaceColorOptions: SVGAvatarColorStyle[] = [ @@ -276,7 +276,6 @@ function getDefaultWorkspaceAvatarColor(workspaceName: string): ViewStyle { return workspaceColorOptions[colorHash]; } - /** * Helper method to return formatted backgroundColor and fill styles */ From 04d24d2c59782efd3ccd561691ee8fa4259b854a Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Thu, 21 Mar 2024 11:01:18 +0000 Subject: [PATCH 04/16] Add missing type file changes --- src/styles/utils/types.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/utils/types.ts b/src/styles/utils/types.ts index 5fe844f0f358..7dc70dc2e64e 100644 --- a/src/styles/utils/types.ts +++ b/src/styles/utils/types.ts @@ -40,7 +40,7 @@ type ButtonSizeValue = ValueOf; type ButtonStateName = ValueOf; 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, }; From 840297c84c7bbed3b4bf4113a9141cda84b6b939 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Fri, 22 Mar 2024 10:15:57 +0000 Subject: [PATCH 05/16] type --- src/components/Avatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index 412918fa52c7..e3c420c57d8f 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -84,7 +84,7 @@ function Avatar({ // We pass the color styles down to the SVG for the workspace and fallback avatar. const useFallBackAvatar = imageError || source === Expensicons.FallbackAvatar; - let iconColors: SVGAvatarColorStyle; + let iconColors; if (isWorkspace) { iconColors = StyleUtils.getDefaultWorkspaceAvatarColor(name); } else if (useFallBackAvatar) { From 7ba8e43923cc27b53ff173c78ef8958db40f2f17 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Fri, 22 Mar 2024 10:22:50 +0000 Subject: [PATCH 06/16] typescript --- src/components/Avatar.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index e3c420c57d8f..b8471e732928 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -8,8 +8,8 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as ReportUtils from '@libs/ReportUtils'; import type {AvatarSource} from '@libs/UserUtils'; import type {AvatarSizeName} from '@styles/utils'; +import type IconAsset from '@src/types/utils/IconAsset'; import CONST from '@src/CONST'; -import type {SVGAvatarColorStyle} from '@src/styles/utils/types'; import type {AvatarType} from '@src/types/onyx/OnyxCommon'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; @@ -40,7 +40,7 @@ type AvatarProps = { /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. * If the avatar is type === workspace, this fallback icon will be ignored and decided based on the name prop. */ - fallbackIcon?: AvatarSource; + fallbackIcon?: IconAsset; /** Used to locate fallback icon in end-to-end tests. */ fallbackIconTestID?: string; @@ -96,7 +96,7 @@ function Avatar({ 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 ( From 07b15ecbd0be720948f795404325acaa5f5fe75e Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Fri, 22 Mar 2024 10:27:22 +0000 Subject: [PATCH 07/16] undo type change --- src/components/Avatar.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index b8471e732928..95cb670987f0 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -8,7 +8,6 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as ReportUtils from '@libs/ReportUtils'; import type {AvatarSource} from '@libs/UserUtils'; import type {AvatarSizeName} from '@styles/utils'; -import type IconAsset from '@src/types/utils/IconAsset'; import CONST from '@src/CONST'; import type {AvatarType} from '@src/types/onyx/OnyxCommon'; import Icon from './Icon'; @@ -40,7 +39,7 @@ type AvatarProps = { /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. * If the avatar is type === workspace, this fallback icon will be ignored and decided based on the name prop. */ - fallbackIcon?: IconAsset; + fallbackIcon?: AvatarSource; /** Used to locate fallback icon in end-to-end tests. */ fallbackIconTestID?: string; From 6ab91c0283776c4dd85aceb10bb0d18b2605121d Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Fri, 22 Mar 2024 10:31:04 +0000 Subject: [PATCH 08/16] prevent flashing fill color for loading workspace/fallback svg --- src/components/Avatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index 95cb670987f0..34153624237b 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -114,7 +114,7 @@ function Avatar({ src={avatarSource} height={iconSize} width={iconSize} - fill={imageError ? theme.offline : fill} + fill={imageError ? iconColors?.fill ?? theme.offline : fill} additionalStyles={[StyleUtils.getAvatarBorderStyle(size, type), iconColors, iconAdditionalStyles]} /> From 228653d414c2bbbc2f316e70fea7491598430be0 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Fri, 22 Mar 2024 10:39:04 +0000 Subject: [PATCH 09/16] prettier --- src/components/Avatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index 34153624237b..172f51b8b04f 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -95,7 +95,7 @@ function Avatar({ const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(name) : fallbackIcon || Expensicons.FallbackAvatar; const fallbackAvatarTestID = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatarTestID(name) : fallbackIconTestID || 'SvgFallbackAvatar Icon'; - const avatarSource = (imageError || !source) ? fallbackAvatar : source; + const avatarSource = imageError || !source ? fallbackAvatar : source; return ( From 44dc9fcc28508230324dfcacfdf2d12235e36329 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Tue, 26 Mar 2024 13:41:42 +0000 Subject: [PATCH 10/16] revert change to optionListUtils to handle in a separate PR --- src/libs/OptionsListUtils.ts | 5 ++--- src/libs/UserUtils.ts | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index 1656190777d1..0f83b260c8f2 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -7,7 +7,6 @@ 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'; @@ -1715,10 +1714,10 @@ function getOptions( // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing userToInvite.alternateText = userToInvite.alternateText || searchValue; - // If user doesn't exist, always use the fallback avatar + // If user doesn't exist, use a default avatar userToInvite.icons = [ { - source: FallbackAvatar, + source: UserUtils.getAvatar('', optimisticAccountID), name: searchValue, type: CONST.ICON_TYPE_AVATAR, }, diff --git a/src/libs/UserUtils.ts b/src/libs/UserUtils.ts index d2d45a4d8490..147343e99ceb 100644 --- a/src/libs/UserUtils.ts +++ b/src/libs/UserUtils.ts @@ -83,7 +83,7 @@ function generateAccountID(searchValue: string): number { * @returns */ function getDefaultAvatar(accountID = -1, avatarURL?: string): IconAsset { - if (!accountID || accountID <= 0) { + if (accountID <= 0) { return FallbackAvatar; } if (Number(accountID) === CONST.ACCOUNT_ID.CONCIERGE) { From 988ee9a61cfd4be2f09c7329d5b778b8a0b56a33 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Tue, 26 Mar 2024 13:45:19 +0000 Subject: [PATCH 11/16] clean up fallback logic --- src/components/Avatar.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index 172f51b8b04f..a37a587f6820 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -81,7 +81,11 @@ function Avatar({ const iconStyle = imageStyles ? [StyleUtils.getAvatarStyle(size), styles.bgTransparent, imageStyles] : undefined; // We pass the color styles down to the SVG for the workspace and fallback avatar. - const useFallBackAvatar = imageError || source === Expensicons.FallbackAvatar; + 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 = useFallBackAvatar ? fallbackAvatar : source; + let iconColors; if (isWorkspace) { @@ -92,11 +96,6 @@ function Avatar({ iconColors = null; } - const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(name) : fallbackIcon || Expensicons.FallbackAvatar; - const fallbackAvatarTestID = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatarTestID(name) : fallbackIconTestID || 'SvgFallbackAvatar Icon'; - - const avatarSource = imageError || !source ? fallbackAvatar : source; - return ( {typeof avatarSource === 'string' ? ( From 419ac90fa0b7267fa34329bd1ee6873c071d35d6 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Tue, 26 Mar 2024 13:46:10 +0000 Subject: [PATCH 12/16] prettier --- src/components/Avatar.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index a37a587f6820..4f353358381d 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -86,7 +86,6 @@ function Avatar({ const fallbackAvatarTestID = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatarTestID(name) : fallbackIconTestID || 'SvgFallbackAvatar Icon'; const avatarSource = useFallBackAvatar ? fallbackAvatar : source; - let iconColors; if (isWorkspace) { iconColors = StyleUtils.getDefaultWorkspaceAvatarColor(name); From 72e9d757c5abc6462361175bff13b04b9263252a Mon Sep 17 00:00:00 2001 From: Georgia Monahan <38015950+grgia@users.noreply.github.com> Date: Tue, 26 Mar 2024 13:47:41 +0000 Subject: [PATCH 13/16] Update src/components/Avatar.tsx Co-authored-by: Abdelhafidh Belalia <16493223+s77rt@users.noreply.github.com> --- src/components/Avatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index 4f353358381d..ce753285ce39 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -112,7 +112,7 @@ function Avatar({ src={avatarSource} height={iconSize} width={iconSize} - fill={imageError ? iconColors?.fill ?? theme.offline : fill} + fill={imageError ? theme.offline : iconColors?.fill ?? fill} additionalStyles={[StyleUtils.getAvatarBorderStyle(size, type), iconColors, iconAdditionalStyles]} /> From 68d374f219d3d9810ee2cb18940ea0389c1ea502 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Thu, 28 Mar 2024 11:06:40 +0000 Subject: [PATCH 14/16] change avatar loading BG to borders color --- src/components/Avatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index ce753285ce39..c2b8e3e27567 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -112,7 +112,7 @@ function Avatar({ src={avatarSource} height={iconSize} width={iconSize} - fill={imageError ? theme.offline : iconColors?.fill ?? fill} + fill={imageError ? theme.border : iconColors?.fill ?? fill} additionalStyles={[StyleUtils.getAvatarBorderStyle(size, type), iconColors, iconAdditionalStyles]} /> From 3679762d5472a1793f6cb49b2e35d08eab78727d Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Thu, 28 Mar 2024 14:03:41 +0000 Subject: [PATCH 15/16] change getAvatarStyle to use border color too --- src/styles/utils/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 5346b32728fd..9d1b371b43c3 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1239,7 +1239,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ height: avatarSize, width: avatarSize, borderRadius: avatarSize, - backgroundColor: theme.offline, + backgroundColor: theme.border, }; }, From 7c7229f2aff72c1237a001b1be5953ca87554153 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Fri, 5 Apr 2024 10:54:58 +0100 Subject: [PATCH 16/16] if we've calculated the fill (which we do for imageError) then use that --- src/components/Avatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index c2b8e3e27567..358f5333bfba 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -112,7 +112,7 @@ function Avatar({ src={avatarSource} height={iconSize} width={iconSize} - fill={imageError ? theme.border : iconColors?.fill ?? fill} + fill={imageError ? iconColors?.fill ?? theme.offline : iconColors?.fill ?? fill} additionalStyles={[StyleUtils.getAvatarBorderStyle(size, type), iconColors, iconAdditionalStyles]} />