From 82b54cdf0de59812b9d0b4417490c85687c1df19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Musia=C5=82?= Date: Fri, 3 Jul 2026 14:34:27 +0200 Subject: [PATCH 01/10] Unify avatar sizes --- src/CONST/index.ts | 266 ++++++++++++---- .../Attachments/AttachmentView/index.tsx | 4 +- src/components/AvatarButtonWithIcon.tsx | 2 +- src/components/AvatarSelector.tsx | 2 +- src/components/ColoredLetterAvatar.tsx | 2 +- .../ImportedFromAccountingSoftware.tsx | 2 +- src/components/MentionSuggestions.tsx | 2 +- .../OnboardingHelpDropdownButton.tsx | 10 +- .../ReportActionAvatar.tsx | 67 ++-- src/components/ReportActionItem/TaskView.tsx | 19 +- .../TransactionPreviewContent.tsx | 13 +- src/components/RoomHeaderAvatars.tsx | 18 +- .../SearchList/ListItem/AttendeesCell.tsx | 11 +- .../ListItem/AvatarWithTextCell.tsx | 2 +- .../SearchList/ListItem/ExportedIconCell.tsx | 16 +- .../SearchList/ListItem/TaskListItemRow.tsx | 6 +- .../ListItem/UserInfoAndActionButtonRow.tsx | 14 +- .../SearchList/ListItem/UserInfoCell.tsx | 2 +- .../SearchList/ListItem/WorkspaceCell.tsx | 7 +- src/components/Search/SearchStaticList.tsx | 26 +- .../ListItem/MultiSelectListItem.tsx | 2 +- .../SingleSelectWithAvatarListItem.tsx | 8 +- .../ListItem/UserSelectionListItem.tsx | 2 +- .../WorkspaceCategoriesTableRow.tsx | 2 +- .../WorkspaceListTable/WorkspaceTableRow.tsx | 2 +- .../WorkspaceTagsTableRow.tsx | 2 +- src/components/UserPill.tsx | 2 +- src/components/WorkspaceConfirmationForm.tsx | 22 +- src/hooks/useWorkspaceConfirmationAvatar.tsx | 8 +- src/pages/DynamicReportDetailsPage.tsx | 45 ++- .../DynamicReportParticipantDetailsPage.tsx | 6 +- src/pages/DynamicRoomMemberDetailsPage.tsx | 6 +- src/pages/NewChatConfirmPage.tsx | 35 ++- src/pages/ProfilePage.tsx | 31 +- .../BaseDomainMemberDetailsComponent.tsx | 6 +- src/pages/inbox/HeaderView.tsx | 20 +- .../inbox/report/ReportActionItemCreated.tsx | 10 +- .../sidebar/AvatarWithDelegateAvatar.tsx | 8 +- .../components/ReceiptPreviews/index.tsx | 14 +- .../hooks/useReceiptPreviewsSizes.ts | 4 +- src/pages/settings/Agents/AddAgentPage.tsx | 9 +- src/pages/settings/Agents/AgentInfoRow.tsx | 4 +- src/pages/settings/Agents/EditAgentPage.tsx | 4 +- .../Agents/Fields/EditAgentAvatarPage.tsx | 31 +- .../Avatar/AvatarCapture/index.native.tsx | 2 +- .../Profile/Avatar/AvatarCapture/index.tsx | 4 +- .../settings/Profile/Avatar/AvatarPreview.tsx | 11 +- src/pages/settings/Profile/ProfilePage.tsx | 10 +- src/pages/workspace/WorkspaceOverviewPage.tsx | 40 ++- .../duplicate/WorkspaceDuplicateForm.tsx | 28 +- .../ImportedMembersConfirmationPage.tsx | 8 +- .../WorkspaceInviteMessageComponent.tsx | 7 +- .../members/WorkspaceMemberDetailsPage.tsx | 6 +- src/stories/Avatar.stories.tsx | 2 +- src/stories/AvatarSelector.stories.tsx | 2 +- src/styles/index.ts | 123 +++++--- src/styles/utils/index.ts | 288 ++++++++++++------ src/styles/utils/types.ts | 28 +- src/styles/variables.ts | 35 +-- tests/unit/AvatarButtonWithIconTest.tsx | 4 +- 60 files changed, 925 insertions(+), 447 deletions(-) diff --git a/src/CONST/index.ts b/src/CONST/index.ts index 084e4c5d6669..708e1f83a26f 100644 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -230,7 +230,10 @@ const CONST = { TASK_TITLE_DISABLED_RULES: ['image'], // Note: Group and Self-DM excluded as these are not tied to a Workspace WORKSPACE_ROOM_TYPES: [chatTypes.POLICY_ADMINS, chatTypes.POLICY_ANNOUNCE, chatTypes.DOMAIN_ALL, chatTypes.POLICY_ROOM, chatTypes.POLICY_EXPENSE_CHAT, chatTypes.INVOICE], - CUSTOM_FIELD_KEYS: {customField1: 'employeeUserID', customField2: 'employeePayrollID'}, + CUSTOM_FIELD_KEYS: { + customField1: 'employeeUserID', + customField2: 'employeePayrollID', + }, WORKSPACE_ENABLE_FEATURE_REDIRECT_DELAY: 100, ANIMATED_HIGHLIGHT_ENTRY_DELAY: 50, ANIMATED_HIGHLIGHT_ENTRY_DURATION: 300, @@ -1070,7 +1073,10 @@ const CONST = { modifiers: ['CTRL', 'SHIFT'], trigger: { DEFAULT: {input: 'k', modifierFlags: keyModifierShiftControl}, - [PLATFORM_OS_MACOS]: {input: 'k', modifierFlags: keyModifierShiftCommand}, + [PLATFORM_OS_MACOS]: { + input: 'k', + modifierFlags: keyModifierShiftCommand, + }, [PLATFORM_IOS]: {input: 'k', modifierFlags: keyModifierShiftCommand}, }, type: KEYBOARD_SHORTCUT_NAVIGATION_TYPE, @@ -1111,8 +1117,14 @@ const CONST = { modifiers: ['CTRL'], trigger: { DEFAULT: {input: keyInputEnter, modifierFlags: keyModifierControl}, - [PLATFORM_OS_MACOS]: {input: keyInputEnter, modifierFlags: keyModifierCommand}, - [PLATFORM_IOS]: {input: keyInputEnter, modifierFlags: keyModifierCommand}, + [PLATFORM_OS_MACOS]: { + input: keyInputEnter, + modifierFlags: keyModifierCommand, + }, + [PLATFORM_IOS]: { + input: keyInputEnter, + modifierFlags: keyModifierCommand, + }, }, }, COPY: { @@ -1199,7 +1211,10 @@ const CONST = { modifiers: ['CTRL', 'SHIFT'], trigger: { DEFAULT: {input: 'g', modifierFlags: keyModifierShiftControl}, - [PLATFORM_OS_MACOS]: {input: 'g', modifierFlags: keyModifierShiftCommand}, + [PLATFORM_OS_MACOS]: { + input: 'g', + modifierFlags: keyModifierShiftCommand, + }, [PLATFORM_IOS]: {input: 'g', modifierFlags: keyModifierShiftCommand}, }, type: KEYBOARD_SHORTCUT_NAVIGATION_TYPE, @@ -1210,7 +1225,10 @@ const CONST = { modifiers: ['CTRL', 'SHIFT'], trigger: { DEFAULT: {input: 'p', modifierFlags: keyModifierShiftControl}, - [PLATFORM_OS_MACOS]: {input: 'p', modifierFlags: keyModifierShiftCommand}, + [PLATFORM_OS_MACOS]: { + input: 'p', + modifierFlags: keyModifierShiftCommand, + }, [PLATFORM_IOS]: {input: 'p', modifierFlags: keyModifierShiftCommand}, }, type: KEYBOARD_SHORTCUT_NAVIGATION_TYPE, @@ -4347,21 +4365,19 @@ const CONST = { }, AVATAR_SIZE: { - X_LARGE: 'xlarge', - LARGE: 'large', - MEDIUM: 'medium', - DEFAULT: 'default', + XXXX_SMALL: 'xxxx-small', + XXX_SMALL: 'xxx-small', + XX_SMALL: 'xx-small', + X_SMALL: 'x-small', SMALL: 'small', - SMALLER: 'smaller', - SUBSCRIPT: 'subscript', - SMALL_SUBSCRIPT: 'small-subscript', - MID_SUBSCRIPT: 'mid-subscript', - LARGE_BORDERED: 'large-bordered', - MEDIUM_LARGE: 'medium-large', - HEADER: 'header', - MENTION_ICON: 'mention-icon', - SMALL_NORMAL: 'small-normal', - LARGE_NORMAL: 'large-normal', + // Alias of MEDIUM, used as the default avatar size + DEFAULT: 'medium', + LARGE: 'large', + X_LARGE: 'x-large', + XX_LARGE: 'xx-large', + XXX_LARGE: 'xxx-large', + XXXX_LARGE: 'xxxx-large', + XXXXX_LARGE: 'xxxxx-large', }, COMPANY_CARD: { @@ -6547,44 +6563,184 @@ const CONST = { */ get COLUMN_AVAILABILITY() { return { - RECEIPT: {column: this.TABLE_COLUMNS.RECEIPT, search: true, reportView: true}, - DATE: {column: this.TABLE_COLUMNS.DATE, search: true, reportView: true}, - STATUS: {column: this.TABLE_COLUMNS.STATUS, search: true, reportView: false}, - SUBMITTED: {column: this.TABLE_COLUMNS.SUBMITTED, search: true, reportView: false}, - APPROVED: {column: this.TABLE_COLUMNS.APPROVED, search: true, reportView: false}, - POSTED: {column: this.TABLE_COLUMNS.POSTED, search: true, reportView: true}, - EXPORTED: {column: this.TABLE_COLUMNS.EXPORTED, search: true, reportView: false}, - MERCHANT: {column: this.TABLE_COLUMNS.MERCHANT, search: true, reportView: true}, - DESCRIPTION: {column: this.TABLE_COLUMNS.DESCRIPTION, search: true, reportView: true}, - FROM: {column: this.TABLE_COLUMNS.FROM, search: true, reportView: false}, + RECEIPT: { + column: this.TABLE_COLUMNS.RECEIPT, + search: true, + reportView: true, + }, + DATE: { + column: this.TABLE_COLUMNS.DATE, + search: true, + reportView: true, + }, + STATUS: { + column: this.TABLE_COLUMNS.STATUS, + search: true, + reportView: false, + }, + SUBMITTED: { + column: this.TABLE_COLUMNS.SUBMITTED, + search: true, + reportView: false, + }, + APPROVED: { + column: this.TABLE_COLUMNS.APPROVED, + search: true, + reportView: false, + }, + POSTED: { + column: this.TABLE_COLUMNS.POSTED, + search: true, + reportView: true, + }, + EXPORTED: { + column: this.TABLE_COLUMNS.EXPORTED, + search: true, + reportView: false, + }, + MERCHANT: { + column: this.TABLE_COLUMNS.MERCHANT, + search: true, + reportView: true, + }, + DESCRIPTION: { + column: this.TABLE_COLUMNS.DESCRIPTION, + search: true, + reportView: true, + }, + FROM: { + column: this.TABLE_COLUMNS.FROM, + search: true, + reportView: false, + }, TO: {column: this.TABLE_COLUMNS.TO, search: true, reportView: false}, - POLICY_NAME: {column: this.TABLE_COLUMNS.POLICY_NAME, search: true, reportView: false}, - CARD: {column: this.TABLE_COLUMNS.CARD, search: true, reportView: true}, - CATEGORY: {column: this.TABLE_COLUMNS.CATEGORY, search: true, reportView: true}, - CATEGORY_GL_CODE: {column: this.TABLE_COLUMNS.CATEGORY_GL_CODE, search: true, reportView: true}, - ATTENDEES: {column: this.TABLE_COLUMNS.ATTENDEES, search: true, reportView: true}, - TOTAL_PER_ATTENDEE: {column: this.TABLE_COLUMNS.TOTAL_PER_ATTENDEE, search: true, reportView: true}, + POLICY_NAME: { + column: this.TABLE_COLUMNS.POLICY_NAME, + search: true, + reportView: false, + }, + CARD: { + column: this.TABLE_COLUMNS.CARD, + search: true, + reportView: true, + }, + CATEGORY: { + column: this.TABLE_COLUMNS.CATEGORY, + search: true, + reportView: true, + }, + CATEGORY_GL_CODE: { + column: this.TABLE_COLUMNS.CATEGORY_GL_CODE, + search: true, + reportView: true, + }, + ATTENDEES: { + column: this.TABLE_COLUMNS.ATTENDEES, + search: true, + reportView: true, + }, + TOTAL_PER_ATTENDEE: { + column: this.TABLE_COLUMNS.TOTAL_PER_ATTENDEE, + search: true, + reportView: true, + }, TAG: {column: this.TABLE_COLUMNS.TAG, search: true, reportView: true}, - TAG_GL_CODE: {column: this.TABLE_COLUMNS.TAG_GL_CODE, search: true, reportView: true}, - EXCHANGE_RATE: {column: this.TABLE_COLUMNS.EXCHANGE_RATE, search: true, reportView: true}, - ORIGINAL_AMOUNT: {column: this.TABLE_COLUMNS.ORIGINAL_AMOUNT, search: true, reportView: true}, - REPORT_ID: {column: this.TABLE_COLUMNS.REPORT_ID, search: true, reportView: false}, - BASE_62_REPORT_ID: {column: this.TABLE_COLUMNS.BASE_62_REPORT_ID, search: true, reportView: false}, - REIMBURSABLE: {column: this.TABLE_COLUMNS.REIMBURSABLE, search: true, reportView: true}, - BILLABLE: {column: this.TABLE_COLUMNS.BILLABLE, search: true, reportView: true}, + TAG_GL_CODE: { + column: this.TABLE_COLUMNS.TAG_GL_CODE, + search: true, + reportView: true, + }, + EXCHANGE_RATE: { + column: this.TABLE_COLUMNS.EXCHANGE_RATE, + search: true, + reportView: true, + }, + ORIGINAL_AMOUNT: { + column: this.TABLE_COLUMNS.ORIGINAL_AMOUNT, + search: true, + reportView: true, + }, + REPORT_ID: { + column: this.TABLE_COLUMNS.REPORT_ID, + search: true, + reportView: false, + }, + BASE_62_REPORT_ID: { + column: this.TABLE_COLUMNS.BASE_62_REPORT_ID, + search: true, + reportView: false, + }, + REIMBURSABLE: { + column: this.TABLE_COLUMNS.REIMBURSABLE, + search: true, + reportView: true, + }, + BILLABLE: { + column: this.TABLE_COLUMNS.BILLABLE, + search: true, + reportView: true, + }, MCC: {column: this.TABLE_COLUMNS.MCC, search: true, reportView: true}, - TAX_CODE: {column: this.TABLE_COLUMNS.TAX_CODE, search: true, reportView: true}, - TAX_RATE: {column: this.TABLE_COLUMNS.TAX_RATE, search: true, reportView: true}, - TAX_AMOUNT: {column: this.TABLE_COLUMNS.TAX_AMOUNT, search: true, reportView: true}, - TITLE: {column: this.TABLE_COLUMNS.TITLE, search: true, reportView: false}, - AMOUNT: {column: this.TABLE_COLUMNS.TOTAL_AMOUNT, search: true, reportView: true}, - TOTAL: {column: this.TABLE_COLUMNS.TOTAL, search: false, reportView: true}, - EXPORTED_TO: {column: this.TABLE_COLUMNS.EXPORTED_TO, search: true, reportView: false}, - ACTION: {column: this.TABLE_COLUMNS.ACTION, search: true, reportView: false}, - WITHDRAWAL_ID: {column: this.TABLE_COLUMNS.WITHDRAWAL_ID, search: true, reportView: true}, - SUBMITTER_USER_ID: {column: this.TABLE_COLUMNS.SUBMITTER_USER_ID, search: true, reportView: true}, - SUBMITTER_PAYROLL_ID: {column: this.TABLE_COLUMNS.SUBMITTER_PAYROLL_ID, search: true, reportView: true}, - ORDER_DEAL_NUMBERS: {column: this.TABLE_COLUMNS.ORDER_DEAL_NUMBERS, search: true, reportView: true}, + TAX_CODE: { + column: this.TABLE_COLUMNS.TAX_CODE, + search: true, + reportView: true, + }, + TAX_RATE: { + column: this.TABLE_COLUMNS.TAX_RATE, + search: true, + reportView: true, + }, + TAX_AMOUNT: { + column: this.TABLE_COLUMNS.TAX_AMOUNT, + search: true, + reportView: true, + }, + TITLE: { + column: this.TABLE_COLUMNS.TITLE, + search: true, + reportView: false, + }, + AMOUNT: { + column: this.TABLE_COLUMNS.TOTAL_AMOUNT, + search: true, + reportView: true, + }, + TOTAL: { + column: this.TABLE_COLUMNS.TOTAL, + search: false, + reportView: true, + }, + EXPORTED_TO: { + column: this.TABLE_COLUMNS.EXPORTED_TO, + search: true, + reportView: false, + }, + ACTION: { + column: this.TABLE_COLUMNS.ACTION, + search: true, + reportView: false, + }, + WITHDRAWAL_ID: { + column: this.TABLE_COLUMNS.WITHDRAWAL_ID, + search: true, + reportView: true, + }, + SUBMITTER_USER_ID: { + column: this.TABLE_COLUMNS.SUBMITTER_USER_ID, + search: true, + reportView: true, + }, + SUBMITTER_PAYROLL_ID: { + column: this.TABLE_COLUMNS.SUBMITTER_PAYROLL_ID, + search: true, + reportView: true, + }, + ORDER_DEAL_NUMBERS: { + column: this.TABLE_COLUMNS.ORDER_DEAL_NUMBERS, + search: true, + reportView: true, + }, }; }, get TYPE_CUSTOM_COLUMNS() { diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index ab69b29dfa5b..07a6013f57cc 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -204,8 +204,8 @@ function AttachmentView({ return ( React.ReactNode; /** Size of Indicator */ - size?: typeof CONST.AVATAR_SIZE.X_LARGE | typeof CONST.AVATAR_SIZE.LARGE | typeof CONST.AVATAR_SIZE.DEFAULT; + size?: typeof CONST.AVATAR_SIZE.XXXXX_LARGE | typeof CONST.AVATAR_SIZE.XXX_LARGE | typeof CONST.AVATAR_SIZE.DEFAULT; /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */ fallbackIcon?: AvatarSource; diff --git a/src/components/AvatarSelector.tsx b/src/components/AvatarSelector.tsx index 58b47ea2c330..d2e25076b802 100644 --- a/src/components/AvatarSelector.tsx +++ b/src/components/AvatarSelector.tsx @@ -38,7 +38,7 @@ const SPACER_SIZE = 10; /** * AvatarSelector — renders a grid of selectable avatars. */ -function AvatarSelector({selectedID, onSelect, label, name, size = CONST.AVATAR_SIZE.MEDIUM}: AvatarSelectorProps) { +function AvatarSelector({selectedID, onSelect, label, name, size = CONST.AVATAR_SIZE.X_LARGE}: AvatarSelectorProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); diff --git a/src/components/ColoredLetterAvatar.tsx b/src/components/ColoredLetterAvatar.tsx index 2b60bf6b92c5..b138f947872e 100644 --- a/src/components/ColoredLetterAvatar.tsx +++ b/src/components/ColoredLetterAvatar.tsx @@ -26,7 +26,7 @@ type ColoredLetterAvatarProps = { * ColoredLetterAvatar renders an SVG component with a colored circular background. * Used for letter avatars and other colored icon avatars. */ -function ColoredLetterAvatar({component, backgroundColor, fillColor, size = CONST.AVATAR_SIZE.MEDIUM}: ColoredLetterAvatarProps) { +function ColoredLetterAvatar({component, backgroundColor, fillColor, size = CONST.AVATAR_SIZE.X_LARGE}: ColoredLetterAvatarProps) { const StyleUtils = useStyleUtils(); const avatarSize = StyleUtils.getAvatarSize(size); return ( diff --git a/src/components/ImportedFromAccountingSoftware.tsx b/src/components/ImportedFromAccountingSoftware.tsx index 162bda8ccdc2..ffe0d9a96d2f 100644 --- a/src/components/ImportedFromAccountingSoftware.tsx +++ b/src/components/ImportedFromAccountingSoftware.tsx @@ -69,7 +69,7 @@ function ImportedFromAccountingSoftware({policyID, currentConnectionName, transl src={icon} height={variables.iconSizeMedium} width={variables.iconSizeMedium} - additionalStyles={[StyleUtils.getAvatarBorderStyle(CONST.AVATAR_SIZE.SMALLER, ''), styles.appBG]} + additionalStyles={[StyleUtils.getAvatarBorderStyle(CONST.AVATAR_SIZE.X_SMALL, ''), styles.appBG]} /> ) : undefined } diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx index c10bfda819f7..e75f14d53e2e 100644 --- a/src/components/MentionSuggestions.tsx +++ b/src/components/MentionSuggestions.tsx @@ -97,7 +97,7 @@ function MentionSuggestions({ ; -function ProfileAvatar(props: Parameters[0] & {useProfileNavigationWrapper?: boolean; reportID?: string}) { +function ProfileAvatar( + props: Parameters[0] & { + useProfileNavigationWrapper?: boolean; + reportID?: string; + }, +) { const {translate} = useLocalize(); const {avatarID, useProfileNavigationWrapper, type, name, reportID} = props; @@ -206,21 +211,17 @@ function ReportActionAvatarSubscript({ const subscriptAvatarStyle = useMemo(() => { if (size === CONST.AVATAR_SIZE.SMALL) { - return styles.secondAvatarSubscriptCompact; - } - - if (size === CONST.AVATAR_SIZE.SMALL_NORMAL) { - return styles.secondAvatarSubscriptSmallNormal; + return styles.secondAvatarSubscriptSmall; } - if (size === CONST.AVATAR_SIZE.X_LARGE) { - return styles.secondAvatarSubscriptXLarge; + if (size === CONST.AVATAR_SIZE.XXXXX_LARGE) { + return styles.secondAvatarSubscriptXxxxxLarge; } return styles.secondAvatarSubscript; }, [size, styles]); - const subscriptAvatarSize = size === CONST.AVATAR_SIZE.X_LARGE ? CONST.AVATAR_SIZE.HEADER : CONST.AVATAR_SIZE.SUBSCRIPT; + const subscriptAvatarSize = size === CONST.AVATAR_SIZE.XXXXX_LARGE ? CONST.AVATAR_SIZE.DEFAULT : CONST.AVATAR_SIZE.XX_SMALL; return ( - + (shouldShowTooltip ? icons.map((icon) => getUserDetailTooltipText(Number(icon.id), formatPhoneNumber, icon.name)) : ['']), [shouldShowTooltip, icons, formatPhoneNumber], ); - const removeRightMargin = icons.length === 2 && size === CONST.AVATAR_SIZE.X_LARGE; + const removeRightMargin = icons.length === 2 && size === CONST.AVATAR_SIZE.XXXXX_LARGE; const avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction); const avatarSizeToStylesMap: AvatarSizeToStylesMap = useMemo( () => ({ [CONST.AVATAR_SIZE.SMALL]: { - singleAvatarStyle: styles.singleAvatarSmall, - secondAvatarStyles: styles.secondAvatarSmall, + singleAvatarStyle: styles.singleAvatarXxxSmall, + secondAvatarStyles: styles.secondAvatarXxxSmall, }, - [CONST.AVATAR_SIZE.LARGE]: { - singleAvatarStyle: styles.singleAvatarMedium, - secondAvatarStyles: styles.secondAvatarMedium, + [CONST.AVATAR_SIZE.XXX_LARGE]: { + singleAvatarStyle: styles.singleAvatarXLarge, + secondAvatarStyles: styles.secondAvatarXLarge, }, - [CONST.AVATAR_SIZE.X_LARGE]: { - singleAvatarStyle: styles.singleAvatarMediumLarge, - secondAvatarStyles: styles.secondAvatarMediumLarge, + [CONST.AVATAR_SIZE.XXXXX_LARGE]: { + singleAvatarStyle: styles.singleAvatarXxLarge, + secondAvatarStyles: styles.secondAvatarXxLarge, }, [CONST.AVATAR_SIZE.DEFAULT]: { - singleAvatarStyle: styles.singleAvatar, - secondAvatarStyles: styles.secondAvatar, + singleAvatarStyle: styles.singleAvatarXSmall, + secondAvatarStyles: styles.secondAvatarXSmall, }, }), [styles], @@ -515,21 +515,24 @@ function ReportActionAvatarMultipleDiagonal({ const avatarSize = useMemo(() => { if (useMidSubscriptSize) { - return CONST.AVATAR_SIZE.MID_SUBSCRIPT; + return CONST.AVATAR_SIZE.XXX_SMALL; } - if (size === CONST.AVATAR_SIZE.LARGE) { - return CONST.AVATAR_SIZE.MEDIUM; + if (size === CONST.AVATAR_SIZE.XXX_LARGE) { + return CONST.AVATAR_SIZE.X_LARGE; } - if (size === CONST.AVATAR_SIZE.X_LARGE) { - return CONST.AVATAR_SIZE.MEDIUM_LARGE; + if (size === CONST.AVATAR_SIZE.XXXXX_LARGE) { + return CONST.AVATAR_SIZE.XX_LARGE; } - return CONST.AVATAR_SIZE.SMALLER; + return CONST.AVATAR_SIZE.X_SMALL; }, [useMidSubscriptSize, size]); - const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size, avatarSizeToStylesMap]); + const {singleAvatarStyle, secondAvatarStyles} = useMemo( + () => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap[CONST.AVATAR_SIZE.DEFAULT], + [size, avatarSizeToStylesMap], + ); const secondaryAvatarContainerStyles = secondaryAvatarContainerStyle ?? [StyleUtils.getBackgroundAndBorderStyle(isHovered ? theme.activeComponentBG : theme.componentBG)]; return ( diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx index 0c5a95f47611..ad0aed4a2242 100644 --- a/src/components/ReportActionItem/TaskView.tsx +++ b/src/components/ReportActionItem/TaskView.tsx @@ -68,8 +68,12 @@ function TaskView({report, parentReport, action}: TaskViewProps) { const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID); const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED); const [betas] = useOnyx(ONYXKEYS.BETAS); - const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: hasSeenTourSelector}); - const [delegateEmail] = useOnyx(ONYXKEYS.ACCOUNT, {selector: delegateEmailSelector}); + const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, { + selector: hasSeenTourSelector, + }); + const [delegateEmail] = useOnyx(ONYXKEYS.ACCOUNT, { + selector: delegateEmailSelector, + }); useEffect(() => { setTaskReport(report); @@ -234,7 +238,9 @@ function TaskView({report, parentReport, action}: TaskViewProps) { accessibilityRole={CONST.ROLE.BUTTON} accessibilityLabel={taskAccessibilityLabel} accessibilityHint={titlePressableAccessibilityHint} - accessibilityState={{disabled: isDisableInteractive}} + accessibilityState={{ + disabled: isDisableInteractive, + }} disabled={isDisableInteractive} onPress={callFunctionIfActionIsAllowed(() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.TASK_TITLE.path)))} style={[styles.flexRow, styles.flex1]} @@ -272,10 +278,13 @@ function TaskView({report, parentReport, action}: TaskViewProps) { {report?.managerID ? ( Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.TASK_ASSIGNEE.path))} shouldShowRightIcon={!isDisableInteractive} diff --git a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx index 307e12275d1c..d1b260b6992c 100644 --- a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx +++ b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx @@ -182,7 +182,9 @@ function TransactionPreviewContent({ const shouldShowMerchantOrDescription = shouldShowDescription || shouldShowMerchant; const description = truncate(StringUtils.lineBreaksToSpaces(Parser.htmlToText(requestComment ?? '')), {length: CONST.REQUEST_PREVIEW.MAX_LENGTH}); - const requestMerchant = truncate(merchant, {length: CONST.REQUEST_PREVIEW.MAX_LENGTH}); + const requestMerchant = truncate(merchant, { + length: CONST.REQUEST_PREVIEW.MAX_LENGTH, + }); const isApproved = isReportApproved({report}); const pendingAction = action?.pendingAction; const isIOUSettled = !pendingAction && isSettled(report); @@ -305,8 +307,11 @@ function TransactionPreviewContent({ participantFromDisplayName={from.displayName ?? from.login ?? translate('common.hidden')} participantToDisplayName={to.displayName ?? to.login ?? translate('common.hidden')} participantTo={to} - avatarSize="mid-subscript" - infoCellsTextStyle={{...styles.textMicroBold, lineHeight: 14}} + avatarSize={CONST.AVATAR_SIZE.XXX_SMALL} + infoCellsTextStyle={{ + ...styles.textMicroBold, + lineHeight: 14, + }} infoCellsAvatarStyle={styles.pr1} style={[styles.flex1, styles.dFlex, styles.alignItemsCenter, styles.gap2, styles.flexRow]} /> @@ -322,7 +327,7 @@ function TransactionPreviewContent({ sort: CONST.REPORT_ACTION_AVATARS.SORT_BY.ID, useCardBG: true, }} - size={CONST.AVATAR_SIZE.SUBSCRIPT} + size={CONST.AVATAR_SIZE.XX_SMALL} /> )} diff --git a/src/components/RoomHeaderAvatars.tsx b/src/components/RoomHeaderAvatars.tsx index 9949350afec4..1b12c040ba14 100644 --- a/src/components/RoomHeaderAvatars.tsx +++ b/src/components/RoomHeaderAvatars.tsx @@ -65,8 +65,8 @@ function RoomHeaderAvatars({icons, report, policy, participants, currentUserAcco source={icon.source || report.avatarUrl} avatarID={icon.id} isUsingDefaultAvatar={!report.avatarUrl || isDefaultAvatar(icon.source)} - size={CONST.AVATAR_SIZE.X_LARGE} - avatarStyle={[styles.avatarXLarge, styles.alignSelfCenter]} + size={CONST.AVATAR_SIZE.XXXXX_LARGE} + avatarStyle={[styles.avatarXxxxxLarge, styles.alignSelfCenter]} onViewPhotoPress={() => Navigation.navigate(ROUTES.REPORT_AVATAR.getRoute(report.reportID))} onImageRemoved={() => updatePolicyRoomAvatar(report.reportID, currentUserAccountID, report.avatarUrl)} onImageSelected={(file) => updatePolicyRoomAvatar(report.reportID, currentUserAccountID, report.avatarUrl, file)} @@ -94,8 +94,8 @@ function RoomHeaderAvatars({icons, report, policy, participants, currentUserAcco > @@ -123,7 +123,7 @@ function RoomHeaderAvatars({icons, report, policy, participants, currentUserAcco style={[styles.justifyContentCenter, styles.alignItemsCenter]} > navigateToAvatarPage(icon)} accessibilityRole={CONST.ROLE.BUTTON} accessibilityLabel={icon.name ?? ''} @@ -131,8 +131,8 @@ function RoomHeaderAvatars({icons, report, policy, participants, currentUserAcco > diff --git a/src/components/Search/SearchList/ListItem/AttendeesCell.tsx b/src/components/Search/SearchList/ListItem/AttendeesCell.tsx index 3550875a9814..73c0d4fa46c7 100644 --- a/src/components/Search/SearchList/ListItem/AttendeesCell.tsx +++ b/src/components/Search/SearchList/ListItem/AttendeesCell.tsx @@ -35,7 +35,14 @@ function AttendeesCell({attendees, isHovered, isPressed}: AttendeesCellProps) { const attendeeIcons: IconType[] = attendees.map((attendee) => ({ id: attendee.accountID ?? CONST.DEFAULT_NUMBER_ID, name: attendee.displayName ?? attendee.email, - source: (attendee.avatarUrl || getDefaultAvatar({accountID: attendee.accountID, accountEmail: attendee.email, defaultAvatars})) ?? '', + source: + (attendee.avatarUrl || + getDefaultAvatar({ + accountID: attendee.accountID, + accountEmail: attendee.email, + defaultAvatars, + })) ?? + '', type: CONST.ICON_TYPE_AVATAR, })); @@ -46,7 +53,7 @@ function AttendeesCell({attendees, isHovered, isPressed}: AttendeesCellProps) { const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); - const size = CONST.AVATAR_SIZE.SMALLER; + const size = CONST.AVATAR_SIZE.X_SMALL; const maxAvatarsInRow = CONST.AVATAR_ROW_SIZE.DEFAULT; const oneAvatarSize = StyleUtils.getAvatarStyle(size); const oneAvatarBorderWidth = StyleUtils.getAvatarBorderWidth(size).borderWidth ?? 0; diff --git a/src/components/Search/SearchList/ListItem/AvatarWithTextCell.tsx b/src/components/Search/SearchList/ListItem/AvatarWithTextCell.tsx index b375702f3add..ad5ef421d9d3 100644 --- a/src/components/Search/SearchList/ListItem/AvatarWithTextCell.tsx +++ b/src/components/Search/SearchList/ListItem/AvatarWithTextCell.tsx @@ -31,7 +31,7 @@ function AvatarWithTextCell({reportName, icon, isLargeScreenWidth}: AvatarWithTe avatarID={icon.id} type={icon.type} fallbackIcon={icon.fallbackIcon} - size={CONST.AVATAR_SIZE.MID_SUBSCRIPT} + size={CONST.AVATAR_SIZE.XXX_SMALL} containerStyles={[styles.pr2]} /> )} diff --git a/src/components/Search/SearchList/ListItem/ExportedIconCell.tsx b/src/components/Search/SearchList/ListItem/ExportedIconCell.tsx index 57827e4f6817..0e3b87aca3a6 100644 --- a/src/components/Search/SearchList/ListItem/ExportedIconCell.tsx +++ b/src/components/Search/SearchList/ListItem/ExportedIconCell.tsx @@ -99,56 +99,56 @@ function ExportedIconCell({reportActions}: ExportedIconCellProps) { )} {isExportedToXero && ( )} {isExportedToIntacct && ( )} {(isExportedToQuickbooksOnline || isExportedToQuickbooksDesktop) && ( )} {isExportedToCertinia && ( )} {isExportedToRillet && ( )} {isExportedToBillCom && ( )} {isExportedToZenefits && ( )} diff --git a/src/components/Search/SearchList/ListItem/TaskListItemRow.tsx b/src/components/Search/SearchList/ListItem/TaskListItemRow.tsx index ce9a8a428ab5..2a98f0ce7c32 100644 --- a/src/components/Search/SearchList/ListItem/TaskListItemRow.tsx +++ b/src/components/Search/SearchList/ListItem/TaskListItemRow.tsx @@ -90,7 +90,9 @@ function ActionCell({taskItem, isLargeScreenWidth}: TaskCellProps) { const isParentReportArchived = useReportIsArchived(parentReport?.reportID); const hasOutstandingChildTask = useHasOutstandingChildTask(taskItem.report); const parentReportAction = useParentReportAction(taskItem.report); - const [delegateEmail] = useOnyx(ONYXKEYS.ACCOUNT, {selector: delegateEmailSelector}); + const [delegateEmail] = useOnyx(ONYXKEYS.ACCOUNT, { + selector: delegateEmailSelector, + }); const isTaskActionable = canActionTask(taskItem.report, parentReportAction, session?.accountID, parentReport, isParentReportArchived); const isTaskCompleted = taskItem.statusNum === CONST.REPORT.STATUS_NUM.APPROVED && taskItem.stateNum === CONST.REPORT.STATE_NUM.APPROVED; @@ -195,7 +197,7 @@ function TaskListItemRow({item, containerStyle, showTooltip}: TaskListItemRowPro {!!item.assignee.accountID && ( @@ -53,7 +61,7 @@ function UserInfoAndActionButtonRow({ participantFromDisplayName={participantFromDisplayName} participantToDisplayName="" participantTo={item?.to} - avatarSize={CONST.AVATAR_SIZE.MID_SUBSCRIPT} + avatarSize={CONST.AVATAR_SIZE.XXX_SMALL} style={[styles.flexRow, styles.alignItemsCenter, styles.gap1]} infoCellsTextStyle={styles.mutedNormalTextLabel} infoCellsAvatarStyle={styles.pr1half} diff --git a/src/components/Search/SearchList/ListItem/UserInfoCell.tsx b/src/components/Search/SearchList/ListItem/UserInfoCell.tsx index 354dbfe43624..49fba2f37e23 100644 --- a/src/components/Search/SearchList/ListItem/UserInfoCell.tsx +++ b/src/components/Search/SearchList/ListItem/UserInfoCell.tsx @@ -37,7 +37,7 @@ function UserInfoCell({avatar, accountID, displayName, avatarSize, containerStyl hasDeferredWrite(CONST.DEFERRED_LAYOUT_WRITE_KEYS.SEARCH) || Navigation.getIsFullscreenPreInsertedUnderRHP(), @@ -183,9 +189,17 @@ function SearchStaticList({ const stateNum = item.report?.stateNum; const statusNum = item.report?.statusNum; - const statusText = getReportStatusTranslation({stateNum, statusNum, translate}); + const statusText = getReportStatusTranslation({ + stateNum, + statusNum, + translate, + }); const reportStatusColorStyle = getReportStatusColorStyle(theme, stateNum, statusNum); - const statusTooltipText = getReportStatusTooltipTranslation({stateNum, statusNum, translate}); + const statusTooltipText = getReportStatusTooltipTranslation({ + stateNum, + statusNum, + translate, + }); return ( ({item, wrapperSt avatarID={icon.id} type={icon.type ?? CONST.ICON_TYPE_AVATAR} fallbackIcon={icon.fallbackIcon} - iconAdditionalStyles={[{width: variables.avatarSizeNormal, height: variables.avatarSizeNormal}, styles.mr3]} + iconAdditionalStyles={[ + { + width: variables.avatarSizeMedium, + height: variables.avatarSizeMedium, + }, + styles.mr3, + ]} /> ); diff --git a/src/components/SelectionList/ListItem/UserSelectionListItem.tsx b/src/components/SelectionList/ListItem/UserSelectionListItem.tsx index 3a82def80a4d..8ec3b5939c4a 100644 --- a/src/components/SelectionList/ListItem/UserSelectionListItem.tsx +++ b/src/components/SelectionList/ListItem/UserSelectionListItem.tsx @@ -87,7 +87,7 @@ function UserSelectionListItem({ )} ({ + const [workspaceAvatar, setWorkspaceAvatar] = useState<{ + avatarUri: string | null; + avatarFileName?: string | null; + avatarFileType?: string | null; + }>({ avatarUri: null, avatarFileName: null, avatarFileType: null, @@ -203,14 +207,22 @@ function WorkspaceConfirmationForm({ source={stashedLocalAvatarImage} onImageSelected={(image) => { setAvatarFile(image); - setWorkspaceAvatar({avatarUri: image.uri ?? '', avatarFileName: image.name ?? '', avatarFileType: image.type}); + setWorkspaceAvatar({ + avatarUri: image.uri ?? '', + avatarFileName: image.name ?? '', + avatarFileType: image.type, + }); }} onImageRemoved={() => { setAvatarFile(undefined); - setWorkspaceAvatar({avatarUri: null, avatarFileName: null, avatarFileType: null}); + setWorkspaceAvatar({ + avatarUri: null, + avatarFileName: null, + avatarFileType: null, + }); }} - size={CONST.AVATAR_SIZE.X_LARGE} - avatarStyle={[styles.avatarXLarge, styles.alignSelfCenter]} + size={CONST.AVATAR_SIZE.XXXXX_LARGE} + avatarStyle={[styles.avatarXxxxxLarge, styles.alignSelfCenter]} editIcon={icons.Camera} editIconStyle={styles.smallEditIconAccount} type={CONST.ICON_TYPE_WORKSPACE} diff --git a/src/hooks/useWorkspaceConfirmationAvatar.tsx b/src/hooks/useWorkspaceConfirmationAvatar.tsx index 7b53c7adbca6..19c75908545a 100644 --- a/src/hooks/useWorkspaceConfirmationAvatar.tsx +++ b/src/hooks/useWorkspaceConfirmationAvatar.tsx @@ -16,17 +16,17 @@ function useWorkspaceConfirmationAvatar({policyID, source, name}: {policyID: str return useCallback( () => ( ), - [name, policyID, source, styles.alignSelfCenter, styles.avatarXLarge, icons.FallbackWorkspaceAvatar], + [name, policyID, source, styles.alignSelfCenter, styles.avatarXxxxxLarge, icons.FallbackWorkspaceAvatar], ); } diff --git a/src/pages/DynamicReportDetailsPage.tsx b/src/pages/DynamicReportDetailsPage.tsx index 9dd15b162f46..e61f46c3fe70 100644 --- a/src/pages/DynamicReportDetailsPage.tsx +++ b/src/pages/DynamicReportDetailsPage.tsx @@ -220,13 +220,21 @@ function DynamicReportDetailsPage({policy, report, route, reportMetadata, report const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED); const [betas] = useOnyx(ONYXKEYS.BETAS); - const [draftTransactionIDs] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_DRAFT, {selector: validTransactionDraftIDsSelector}); + const [draftTransactionIDs] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_DRAFT, { + selector: validTransactionDraftIDsSelector, + }); const [allTransactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS); - const [delegateEmail] = useOnyx(ONYXKEYS.ACCOUNT, {selector: delegateEmailSelector}); + const [delegateEmail] = useOnyx(ONYXKEYS.ACCOUNT, { + selector: delegateEmailSelector, + }); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); - const [filteredPoliciesInfo] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {selector: createFilteredPoliciesInfoSelector(currentUserPersonalDetails?.email)}, [ - currentUserPersonalDetails?.email, - ]); + const [filteredPoliciesInfo] = useOnyx( + ONYXKEYS.COLLECTION.POLICY, + { + selector: createFilteredPoliciesInfoSelector(currentUserPersonalDetails?.email), + }, + [currentUserPersonalDetails?.email], + ); const {showConfirmModal} = useConfirmModal(); const isPolicyAdmin = useMemo(() => isPolicyAdminUtil(policy), [policy]); const isPolicyEmployee = useMemo(() => isPolicyEmployeeUtil(report?.policyID, policy), [report?.policyID, policy]); @@ -349,7 +357,9 @@ function DynamicReportDetailsPage({policy, report, route, reportMetadata, report const isCardTransactionCanBeDeleted = canDeleteCardTransactionByLiabilityType(iouTransaction); const shouldShowDeleteButton = shouldShowTaskDeleteButton || (canDeleteRequest && isCardTransactionCanBeDeleted) || isDemoTransaction(iouTransaction); const shouldShowEditSplitOnDeleteAction = iouTransactionID ? shouldOpenSplitExpenseEditFlowOnDelete([iouTransactionID]) : false; - let deleteMenuItemTitle = translate('reportActionContextMenu.deleteAction', {action: requestParentReportAction}); + let deleteMenuItemTitle = translate('reportActionContextMenu.deleteAction', { + action: requestParentReportAction, + }); if (shouldShowEditSplitOnDeleteAction) { deleteMenuItemTitle = translate('iou.editSplits'); } else if (caseID === CASES.DEFAULT) { @@ -758,7 +768,7 @@ function DynamicReportDetailsPage({policy, report, route, reportMetadata, report Navigation.navigate(ROUTES.REPORT_AVATAR.getRoute(report.reportID))} onImageRemoved={() => { // Calling this without a file will remove the avatar @@ -795,7 +805,7 @@ function DynamicReportDetailsPage({policy, report, route, reportMetadata, report isGroupChat, icons, report, - styles.avatarXLarge, + styles.avatarXxxxxLarge, styles.smallEditIconAccount, styles.mt6, styles.w100, @@ -856,7 +866,10 @@ function DynamicReportDetailsPage({policy, report, route, reportMetadata, report shouldShowRightIcon={false} interactive={false} description={translate('workspace.common.workspace')} - title={getPolicyName({report, unavailableTranslation: translate('workspace.common.unavailable')})} + title={getPolicyName({ + report, + unavailableTranslation: translate('workspace.common.unavailable'), + })} numberOfLinesTitle={2} shouldBreakWord /> @@ -1034,7 +1047,10 @@ function DynamicReportDetailsPage({policy, report, route, reportMetadata, report ) { if (isSuperWideRHPDisplayed) { const distanceToPop = rhpRoutes.length - 1 - superWideRHPIndex; - navigationRef.dispatch({...StackActions.pop(distanceToPop), target: rhp?.state?.key}); + navigationRef.dispatch({ + ...StackActions.pop(distanceToPop), + target: rhp?.state?.key, + }); return; } Navigation.dismissModal(); @@ -1106,7 +1122,10 @@ function DynamicReportDetailsPage({policy, report, route, reportMetadata, report navigateToTargetUrl(); // Delay deletion until the RHP close animation finishes to prevent a brief // "Not Found" flash inside the animating-out panel on slower devices. - TransitionTracker.runAfterTransitions({callback: deleteTransaction, waitForUpcomingTransition: true}); + TransitionTracker.runAfterTransitions({ + callback: deleteTransaction, + waitForUpcomingTransition: true, + }); }); }, [showConfirmModal, translate, caseID, iouTransactionID, shouldOpenSplitExpenseEditFlowOnDelete, navigateToTargetUrl, deleteTransaction]); diff --git a/src/pages/DynamicReportParticipantDetailsPage.tsx b/src/pages/DynamicReportParticipantDetailsPage.tsx index 06e263f62778..ab49cd012a9a 100644 --- a/src/pages/DynamicReportParticipantDetailsPage.tsx +++ b/src/pages/DynamicReportParticipantDetailsPage.tsx @@ -90,12 +90,12 @@ function DynamicReportParticipantDetails({report, route}: DynamicReportParticipa {!!(displayName ?? '') && ( diff --git a/src/pages/DynamicRoomMemberDetailsPage.tsx b/src/pages/DynamicRoomMemberDetailsPage.tsx index b86f747ce38b..7fd94d1a3a90 100644 --- a/src/pages/DynamicRoomMemberDetailsPage.tsx +++ b/src/pages/DynamicRoomMemberDetailsPage.tsx @@ -84,12 +84,12 @@ function DynamicRoomMemberDetailsPage({report, route}: DynamicRoomMemberDetailsP {!!(details.displayName ?? '') && ( diff --git a/src/pages/NewChatConfirmPage.tsx b/src/pages/NewChatConfirmPage.tsx index fff85b34edf4..9222b179a227 100644 --- a/src/pages/NewChatConfirmPage.tsx +++ b/src/pages/NewChatConfirmPage.tsx @@ -71,7 +71,11 @@ function AvatarAndGroupNameSection({setAvatarFile, optimisticReportID}: AvatarAn const onFailure = () => { setAvatarFile(undefined); - setGroupDraft({avatarUri: null, avatarFileName: null, avatarFileType: null}); + setGroupDraft({ + avatarUri: null, + avatarFileName: null, + avatarFileType: null, + }); }; // If the user navigates back to the member selection page and then returns to the confirmation page, the component will re-mount, causing avatarFile to be null. @@ -90,14 +94,22 @@ function AvatarAndGroupNameSection({setAvatarFile, optimisticReportID}: AvatarAn source={stashedLocalAvatarImage ?? getDefaultGroupAvatar(optimisticReportID.current)} onImageSelected={(image) => { setAvatarFile(image); - setGroupDraft({avatarUri: image.uri ?? '', avatarFileName: image.name ?? '', avatarFileType: image.type}); + setGroupDraft({ + avatarUri: image.uri ?? '', + avatarFileName: image.name ?? '', + avatarFileType: image.type, + }); }} onImageRemoved={() => { setAvatarFile(undefined); - setGroupDraft({avatarUri: null, avatarFileName: null, avatarFileType: null}); + setGroupDraft({ + avatarUri: null, + avatarFileName: null, + avatarFileType: null, + }); }} - size={CONST.AVATAR_SIZE.X_LARGE} - avatarStyle={styles.avatarXLarge} + size={CONST.AVATAR_SIZE.XXXXX_LARGE} + avatarStyle={styles.avatarXxxxxLarge} editIcon={icons.Camera} editIconStyle={styles.smallEditIconAccount} style={styles.w100} @@ -125,13 +137,22 @@ function NewChatConfirmPage() { const [allPersonalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED); const [betas] = useOnyx(ONYXKEYS.BETAS); - const [guidedSetupAndTourStatus] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: guidedSetupAndTourStatusSelector}); + const [guidedSetupAndTourStatus] = useOnyx(ONYXKEYS.NVP_ONBOARDING, { + selector: guidedSetupAndTourStatusSelector, + }); const [newGroupDraft] = useOnyx(ONYXKEYS.NEW_GROUP_CHAT_DRAFT); const participants = newGroupDraft?.participants ?? []; const selectedOptions: Participant[] = participants.map((participant) => - getParticipantsOption({accountID: participant.accountID, login: participant?.login, reportID: ''}, allPersonalDetails), + getParticipantsOption( + { + accountID: participant.accountID, + login: participant?.login, + reportID: '', + }, + allPersonalDetails, + ), ); const selectedParticipants: ListItem[] = selectedOptions diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx index 0ed8434349fe..622affd17907 100755 --- a/src/pages/ProfilePage.tsx +++ b/src/pages/ProfilePage.tsx @@ -82,7 +82,9 @@ const chatReportSelector = (report: OnyxEntry): OnyxEntry => const reportsSelector = (reports: OnyxCollection) => mapOnyxCollectionItems(reports, chatReportSelector); function ProfilePage({route}: ProfilePageProps) { - const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {selector: reportsSelector}); + const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, { + selector: reportsSelector, + }); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const [personalDetailsMetadata] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_METADATA); const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails(); @@ -90,7 +92,9 @@ function ProfilePage({route}: ProfilePageProps) { const [isDebugModeEnabled = false] = useOnyx(ONYXKEYS.IS_DEBUG_MODE_ENABLED); const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED); const [betas] = useOnyx(ONYXKEYS.BETAS); - const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: hasSeenTourSelector}); + const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, { + selector: hasSeenTourSelector, + }); const switchToDelegator = useSwitchToDelegator(); const guideCalendarLink = account?.guideDetails?.calendarLink ?? ''; const expensifyIcons = useMemoizedLazyExpensifyIcons(['Bug', 'Pencil', 'Phone', 'UserPlus']); @@ -125,7 +129,11 @@ function ProfilePage({route}: ProfilePageProps) { } else { // If we don't have the personal details in Onyx, we can create an optimistic account const optimisticAccountID = generateAccountID(loginParams); - details = {accountID: optimisticAccountID, login: loginParams, displayName: loginParams}; + details = { + accountID: optimisticAccountID, + login: loginParams, + displayName: loginParams, + }; } } @@ -191,7 +199,16 @@ function ProfilePage({route}: ProfilePageProps) { // If it's a self DM, we only want to show the Message button if the self DM report exists because we don't want to optimistically create a report for self DM if ((!isCurrentUser || report) && !isAnonymousUserSession()) { promotedActions.push( - PromotedActions.message({reportID: report?.reportID, personalDetails, accountID, login: loginParams, currentUserAccountID, introSelected, isSelfTourViewed, betas}), + PromotedActions.message({ + reportID: report?.reportID, + personalDetails, + accountID, + login: loginParams, + currentUserAccountID, + introSelected, + isSelfTourViewed, + betas, + }), ); } @@ -215,12 +232,12 @@ function ProfilePage({route}: ProfilePageProps) { > diff --git a/src/pages/domain/BaseDomainMemberDetailsComponent.tsx b/src/pages/domain/BaseDomainMemberDetailsComponent.tsx index a86cba230bb3..bbe2f5220a7d 100644 --- a/src/pages/domain/BaseDomainMemberDetailsComponent.tsx +++ b/src/pages/domain/BaseDomainMemberDetailsComponent.tsx @@ -73,12 +73,12 @@ function BaseDomainMemberDetailsComponent({domainAccountID, accountID, children, diff --git a/src/pages/inbox/HeaderView.tsx b/src/pages/inbox/HeaderView.tsx index dcd0ce022d67..9e301c981410 100644 --- a/src/pages/inbox/HeaderView.tsx +++ b/src/pages/inbox/HeaderView.tsx @@ -59,7 +59,6 @@ import { isConciergeChatReport, isCurrentUserSubmitter, isDeprecatedGroupDM, - isExpenseRequest, isGroupChat as isGroupChatReportUtils, isInvoiceReport, isInvoiceRoom, @@ -121,7 +120,9 @@ function HeaderView({onNavigationMenuButtonClicked, reportID}: HeaderViewProps) const [userBillingFundID] = useOnyx(ONYXKEYS.NVP_BILLING_FUND_ID); const [firstDayFreeTrial] = useOnyx(ONYXKEYS.NVP_FIRST_DAY_FREE_TRIAL); const [lastDayFreeTrial] = useOnyx(ONYXKEYS.NVP_LAST_DAY_FREE_TRIAL); - const [accountGuideDetails] = useOnyx(ONYXKEYS.ACCOUNT, {selector: accountGuideDetailsSelector}); + const [accountGuideDetails] = useOnyx(ONYXKEYS.ACCOUNT, { + selector: accountGuideDetailsSelector, + }); const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID}`); const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${report?.reportID}`, {selector: pendingChatMembersSelector}); const isReportArchived = isArchivedReport(reportNameValuePairs); @@ -164,11 +165,19 @@ function HeaderView({onNavigationMenuButtonClicked, reportID}: HeaderViewProps) const subtitle = getChatRoomSubtitle(reportHeaderData, reportHeaderDataPolicy, conciergeReportID, translate, false, isReportHeaderDataArchived); // This is used to get the status badge for invoice report subtitle. const statusTextForInvoiceReport = isParentInvoiceAndIsChatThread - ? getReportStatusTranslation({stateNum: reportHeaderData?.stateNum, statusNum: reportHeaderData?.statusNum, translate}) + ? getReportStatusTranslation({ + stateNum: reportHeaderData?.stateNum, + statusNum: reportHeaderData?.statusNum, + translate, + }) : undefined; const statusColorForInvoiceReport = isParentInvoiceAndIsChatThread ? getReportStatusColorStyle(theme, reportHeaderData?.stateNum, reportHeaderData?.statusNum) : {}; const statusTooltipForInvoiceReport = isParentInvoiceAndIsChatThread - ? getReportStatusTooltipTranslation({stateNum: reportHeaderData?.stateNum, statusNum: reportHeaderData?.statusNum, translate}) + ? getReportStatusTooltipTranslation({ + stateNum: reportHeaderData?.stateNum, + statusNum: reportHeaderData?.statusNum, + translate, + }) : undefined; const isParentReportHeaderDataArchived = useReportIsArchived(reportHeaderData?.parentReportID); const parentNavigationSubtitleData = getParentNavigationSubtitle(parentNavigationReport, policy, conciergeReportID, isParentReportHeaderDataArchived); @@ -240,7 +249,6 @@ function HeaderView({onNavigationMenuButtonClicked, reportID}: HeaderViewProps) ); const shouldShowSubscript = shouldReportShowSubscript(report, isReportArchived); - const defaultSubscriptSize = isExpenseRequest(report) ? CONST.AVATAR_SIZE.SMALL_NORMAL : CONST.AVATAR_SIZE.DEFAULT; const brickRoadIndicator = hasReportNameError(report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''; const shouldDisableDetailPage = shouldDisableDetailPageReportUtils(report, isParticipantOptimistic); const shouldUseGroupTitle = isGroupChat && (!!report?.reportName || !isMultipleParticipant); @@ -281,7 +289,7 @@ function HeaderView({onNavigationMenuButtonClicked, reportID}: HeaderViewProps) const multipleAvatars = ( ); diff --git a/src/pages/inbox/report/ReportActionItemCreated.tsx b/src/pages/inbox/report/ReportActionItemCreated.tsx index 3e76244c6f0d..7cc19bfe457a 100644 --- a/src/pages/inbox/report/ReportActionItemCreated.tsx +++ b/src/pages/inbox/report/ReportActionItemCreated.tsx @@ -42,10 +42,14 @@ function ReportActionItemCreated({reportID, policyID}: ReportActionItemCreatedPr const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID); const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED); const [betas] = useOnyx(ONYXKEYS.BETAS); - const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: hasSeenTourSelector}); + const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, { + selector: hasSeenTourSelector, + }); const currentUserPersonalDetail = useCurrentUserPersonalDetails(); const {accountID: currentUserAccountID} = currentUserPersonalDetail; - const [conciergePersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: conciergePersonalDetailSelector}); + const [conciergePersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, { + selector: conciergePersonalDetailSelector, + }); const reportOwnerSelector = useMemo(() => personalDetailsSelector(report?.ownerAccountID), [report?.ownerAccountID]); const [reportOwnerPersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: reportOwnerSelector}, [reportOwnerSelector]); @@ -103,7 +107,7 @@ function ReportActionItemCreated({reportID, policyID}: ReportActionItemCreatedPr > diff --git a/src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/index.tsx index 077b55ec4335..3476a46a6a78 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/index.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/index.tsx @@ -116,7 +116,9 @@ function ReceiptPreviews({submit, isMultiScanEnabled, isCapturingPhoto = false, }; const slideInStyle = useAnimatedStyle(() => { - const sizeValue = withTiming(isPreviewsVisible.get() ? previewsSize : 0, {duration: 300}); + const sizeValue = withTiming(isPreviewsVisible.get() ? previewsSize : 0, { + duration: 300, + }); if (isInLandscapeMode) { return {width: sizeValue}; @@ -134,20 +136,24 @@ function ReceiptPreviews({submit, isMultiScanEnabled, isCapturingPhoto = false, horizontal={!isInLandscapeMode} keyExtractor={(_, index) => index.toString()} renderItem={renderItem} - getItemLayout={(data, index) => ({length: previewItemSize, offset: previewItemSize * index, index})} + getItemLayout={(data, index) => ({ + length: previewItemSize, + offset: previewItemSize * index, + index, + })} style={isInLandscapeMode ? styles.ph2 : styles.pv2} scrollEnabled={isScrollEnabled} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} contentContainerStyle={ - isInLandscapeMode ? [{paddingBottom: styles.singleAvatarMedium.height}, styles.ph4] : [{paddingRight: styles.singleAvatarMedium.width}, styles.pl4] + isInLandscapeMode ? [{paddingBottom: styles.singleAvatarXLarge.height}, styles.ph4] : [{paddingRight: styles.singleAvatarXLarge.width}, styles.pl4] } />