From 3659df2ec78da825fe488df79ba9146390194b06 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Mon, 14 Jul 2025 12:02:17 +0200 Subject: [PATCH 01/12] chore: improve border styles --- src/components/DropZone/DropZoneUI.tsx | 7 ++++--- src/components/DropZone/DualDropZone.tsx | 12 ++++++++++-- src/libs/Permissions.ts | 1 + src/pages/Search/SearchPage.tsx | 10 ++++++++-- .../ReportActionCompose/ReportActionCompose.tsx | 7 ++++++- .../request/step/IOURequestStepConfirmation.tsx | 5 ++++- .../request/step/IOURequestStepScan/index.tsx | 5 ++++- src/styles/index.ts | 16 ++++++++++++++++ 8 files changed, 53 insertions(+), 10 deletions(-) diff --git a/src/components/DropZone/DropZoneUI.tsx b/src/components/DropZone/DropZoneUI.tsx index ac5dcd56f912..734b13480938 100644 --- a/src/components/DropZone/DropZoneUI.tsx +++ b/src/components/DropZone/DropZoneUI.tsx @@ -20,19 +20,19 @@ type DropZoneUIProps = { dropTextStyles?: StyleProp; /** Custom styles for the inner wrapper of the drop zone */ - dropInnerWrapperStyles?: StyleProp; + dashedBorderStyles?: StyleProp; /** Custom styles for the drop wrapper */ dropWrapperStyles?: StyleProp; }; -function DropZoneUI({icon, dropTitle, dropStyles, dropTextStyles, dropWrapperStyles, dropInnerWrapperStyles}: DropZoneUIProps) { +function DropZoneUI({icon, dropTitle, dropStyles, dropTextStyles, dropWrapperStyles, dashedBorderStyles}: DropZoneUIProps) { const styles = useThemeStyles(); return ( - + {dropTitle} + diff --git a/src/components/DropZone/DualDropZone.tsx b/src/components/DropZone/DualDropZone.tsx index 1845b863c893..41f269712f16 100644 --- a/src/components/DropZone/DualDropZone.tsx +++ b/src/components/DropZone/DualDropZone.tsx @@ -5,6 +5,7 @@ import * as Expensicons from '@components/Icon/Expensicons'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; +import useTheme from '@hooks/useTheme'; import DropZoneUI from './DropZoneUI'; import DropZoneWrapper from './DropZoneWrapper'; @@ -26,6 +27,7 @@ function DualDropZone({isEditing, onAttachmentDrop, onReceiptDrop, shouldAcceptS const styles = useThemeStyles(); const {translate} = useLocalize(); const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout(); + const theme = useTheme(); const shouldStackVertically = shouldUseNarrowLayout || isMediumScreenWidth; const scanReceiptsText = shouldAcceptSingleReceipt ? 'dropzone.addReceipt' : 'dropzone.scanReceipts'; @@ -40,8 +42,11 @@ function DualDropZone({isEditing, onAttachmentDrop, onReceiptDrop, shouldAcceptS dropTitle={translate('dropzone.addAttachments')} dropStyles={styles.attachmentDropOverlay(isDraggingOver)} dropTextStyles={styles.attachmentDropText} - dropInnerWrapperStyles={styles.attachmentDropInnerWrapper(isDraggingOver)} dropWrapperStyles={shouldStackVertically ? styles.pb0 : styles.pr0} + dashedBorderStyles={styles.activeDropzoneDashedBorder({ + isActive: isDraggingOver, + borderColor: theme.attachmentDropBorderColorActive, + })} /> )} @@ -52,7 +57,10 @@ function DualDropZone({isEditing, onAttachmentDrop, onReceiptDrop, shouldAcceptS dropTitle={translate(isEditing ? 'dropzone.replaceReceipt' : scanReceiptsText)} dropStyles={styles.receiptDropOverlay(isDraggingOver)} dropTextStyles={styles.receiptDropText} - dropInnerWrapperStyles={styles.receiptDropInnerWrapper(isDraggingOver)} + dashedBorderStyles={styles.activeDropzoneDashedBorder({ + isActive: isDraggingOver, + borderColor: theme.receiptDropBorderColorActive, + })} /> )} diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts index 408df3326275..024ca0d4267b 100644 --- a/src/libs/Permissions.ts +++ b/src/libs/Permissions.ts @@ -4,6 +4,7 @@ import type Beta from '@src/types/onyx/Beta'; // eslint-disable-next-line rulesdir/no-beta-handler function canUseAllBetas(betas: OnyxEntry): boolean { + return true; return !!betas?.includes(CONST.BETAS.ALL); } diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx index 3d66d5646bf1..4e5f5d7ad775 100644 --- a/src/pages/Search/SearchPage.tsx +++ b/src/pages/Search/SearchPage.tsx @@ -514,8 +514,11 @@ function SearchPage({route}: SearchPageProps) { dropTitle={translate('dropzone.scanReceipts')} dropStyles={styles.receiptDropOverlay(true)} dropTextStyles={styles.receiptDropText} - dropInnerWrapperStyles={styles.receiptDropInnerWrapper(true)} dropWrapperStyles={{marginBottom: variables.bottomTabHeight}} + dashedBorderStyles={styles.activeDropzoneDashedBorder({ + isActive: true, + borderColor: theme.receiptDropBorderColorActive, + })} /> {ErrorModal} @@ -603,7 +606,10 @@ function SearchPage({route}: SearchPageProps) { dropTitle={translate('dropzone.scanReceipts')} dropStyles={styles.receiptDropOverlay(true)} dropTextStyles={styles.receiptDropText} - dropInnerWrapperStyles={styles.receiptDropInnerWrapper(true)} + dashedBorderStyles={styles.activeDropzoneDashedBorder({ + isActive: true, + borderColor: theme.receiptDropBorderColorActive, + })} /> diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index 5171fcc936df..99ff8ca8d61b 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -29,6 +29,7 @@ import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; import usePermissions from '@hooks/usePermissions'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus'; import {canUseTouchScreen} from '@libs/DeviceCapabilities'; @@ -139,6 +140,7 @@ function ReportActionCompose({ }: ReportActionComposeProps) { const actionSheetAwareScrollViewContext = useContext(ActionSheetAwareScrollView.ActionSheetAwareScrollViewContext); const styles = useThemeStyles(); + const theme = useTheme(); const {translate} = useLocalize(); // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth, isMediumScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); @@ -684,7 +686,10 @@ function ReportActionCompose({ dropTitle={translate('dropzone.addAttachments')} dropStyles={styles.attachmentDropOverlay(true)} dropTextStyles={styles.attachmentDropText} - dropInnerWrapperStyles={styles.attachmentDropInnerWrapper(true)} + dashedBorderStyles={styles.activeDropzoneDashedBorder({ + isActive: true, + borderColor: theme.attachmentDropBorderColorActive, + })} /> )} diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx index 02dbbb89fd20..eb5206cc6447 100644 --- a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx +++ b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx @@ -1043,7 +1043,10 @@ function IOURequestStepConfirmation({ dropStyles={styles.receiptDropOverlay(true)} dropTitle={translate(isEditingReceipt ? 'dropzone.replaceReceipt' : 'quickAction.scanReceipt')} dropTextStyles={styles.receiptDropText} - dropInnerWrapperStyles={styles.receiptDropInnerWrapper(true)} + dashedBorderStyles={styles.activeDropzoneDashedBorder({ + isActive: true, + borderColor: theme.receiptDropBorderColorActive, + })} /> ) : ( diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.tsx index 86c117b333cf..83adf5f66a5b 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.tsx @@ -1047,7 +1047,10 @@ function IOURequestStepScan({ isReplacingReceipt ? translate('dropzone.replaceReceipt') : translate(shouldAcceptMultipleFiles ? 'dropzone.scanReceipts' : 'quickAction.scanReceipt') } dropTextStyles={styles.receiptDropText} - dropInnerWrapperStyles={styles.receiptDropInnerWrapper(true)} + dashedBorderStyles={styles.activeDropzoneDashedBorder({ + isActive: true, + borderColor: theme.receiptDropBorderColorActive, + })} /> ) : ( diff --git a/src/styles/index.ts b/src/styles/index.ts index 16a8731d95bb..f6a2e0d6f7f8 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4030,6 +4030,22 @@ const styles = (theme: ThemeColors) => backgroundColor: theme.fileDropUIBG, }, + activeDropzoneDashedBorder: ({borderColor, isActive}) => ({ + position: 'absolute' as const, + top: 0, + left: 0, + right: 0, + bottom: 0, + ...(Platform.OS === 'web' && { + backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='1' y='1' width='calc(100%25 - 3px)' height='calc(100%25 - 3px)' fill='none' stroke='${encodeURIComponent(borderColor)}' stroke-width='2' stroke-dasharray='8' stroke-dashoffset='4' stroke-linecap='round' rx='8' ry='8'/%3e%3c/svg%3e")`, + backgroundSize: '100% 100%', + backgroundRepeat: 'no-repeat', + }), + width: '100%', + height: '100%', + opacity: isActive ? 1 : 0, + }), + attachmentDropOverlay: (isActive?: boolean) => ({ backgroundColor: isActive ? theme.attachmentDropUIBGActive : theme.attachmentDropUIBG, transition: 'background-color 0.2s ease-in', From 8c75e853ae619899b0320b9556b58bca1e4d3776 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Mon, 14 Jul 2025 12:02:38 +0200 Subject: [PATCH 02/12] chore: improve border styles --- src/libs/Permissions.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts index 024ca0d4267b..408df3326275 100644 --- a/src/libs/Permissions.ts +++ b/src/libs/Permissions.ts @@ -4,7 +4,6 @@ import type Beta from '@src/types/onyx/Beta'; // eslint-disable-next-line rulesdir/no-beta-handler function canUseAllBetas(betas: OnyxEntry): boolean { - return true; return !!betas?.includes(CONST.BETAS.ALL); } From b7091418716e77e5030f91fd5bea44ad9ec9423f Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Tue, 15 Jul 2025 13:51:24 +0200 Subject: [PATCH 03/12] fix: minor changes --- src/components/DropZone/DualDropZone.tsx | 12 ++---- src/pages/Search/SearchPage.tsx | 10 +---- .../ReportActionCompose.tsx | 5 +-- .../step/IOURequestStepConfirmation.tsx | 5 +-- .../request/step/IOURequestStepScan/index.tsx | 5 +-- src/styles/index.ts | 42 ++++++++++++------- 6 files changed, 35 insertions(+), 44 deletions(-) diff --git a/src/components/DropZone/DualDropZone.tsx b/src/components/DropZone/DualDropZone.tsx index 41f269712f16..b09607cd1f44 100644 --- a/src/components/DropZone/DualDropZone.tsx +++ b/src/components/DropZone/DualDropZone.tsx @@ -4,8 +4,8 @@ import DragAndDropConsumer from '@components/DragAndDrop/Consumer'; import * as Expensicons from '@components/Icon/Expensicons'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useThemeStyles from '@hooks/useThemeStyles'; import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import DropZoneUI from './DropZoneUI'; import DropZoneWrapper from './DropZoneWrapper'; @@ -43,10 +43,7 @@ function DualDropZone({isEditing, onAttachmentDrop, onReceiptDrop, shouldAcceptS dropStyles={styles.attachmentDropOverlay(isDraggingOver)} dropTextStyles={styles.attachmentDropText} dropWrapperStyles={shouldStackVertically ? styles.pb0 : styles.pr0} - dashedBorderStyles={styles.activeDropzoneDashedBorder({ - isActive: isDraggingOver, - borderColor: theme.attachmentDropBorderColorActive, - })} + dashedBorderStyles={styles.activeDropzoneDashedBorder(theme.attachmentDropBorderColorActive, isDraggingOver)} /> )} @@ -57,10 +54,7 @@ function DualDropZone({isEditing, onAttachmentDrop, onReceiptDrop, shouldAcceptS dropTitle={translate(isEditing ? 'dropzone.replaceReceipt' : scanReceiptsText)} dropStyles={styles.receiptDropOverlay(isDraggingOver)} dropTextStyles={styles.receiptDropText} - dashedBorderStyles={styles.activeDropzoneDashedBorder({ - isActive: isDraggingOver, - borderColor: theme.receiptDropBorderColorActive, - })} + dashedBorderStyles={styles.activeDropzoneDashedBorder(theme.receiptDropBorderColorActive, isDraggingOver)} /> )} diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx index 4e5f5d7ad775..bd4bfa7a370c 100644 --- a/src/pages/Search/SearchPage.tsx +++ b/src/pages/Search/SearchPage.tsx @@ -515,10 +515,7 @@ function SearchPage({route}: SearchPageProps) { dropStyles={styles.receiptDropOverlay(true)} dropTextStyles={styles.receiptDropText} dropWrapperStyles={{marginBottom: variables.bottomTabHeight}} - dashedBorderStyles={styles.activeDropzoneDashedBorder({ - isActive: true, - borderColor: theme.receiptDropBorderColorActive, - })} + dashedBorderStyles={styles.activeDropzoneDashedBorder(theme.receiptDropBorderColorActive, true)} /> {ErrorModal} @@ -606,10 +603,7 @@ function SearchPage({route}: SearchPageProps) { dropTitle={translate('dropzone.scanReceipts')} dropStyles={styles.receiptDropOverlay(true)} dropTextStyles={styles.receiptDropText} - dashedBorderStyles={styles.activeDropzoneDashedBorder({ - isActive: true, - borderColor: theme.receiptDropBorderColorActive, - })} + dashedBorderStyles={styles.activeDropzoneDashedBorder(theme.receiptDropBorderColorActive, true)} /> diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index 99ff8ca8d61b..484341f7ce04 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -686,10 +686,7 @@ function ReportActionCompose({ dropTitle={translate('dropzone.addAttachments')} dropStyles={styles.attachmentDropOverlay(true)} dropTextStyles={styles.attachmentDropText} - dashedBorderStyles={styles.activeDropzoneDashedBorder({ - isActive: true, - borderColor: theme.attachmentDropBorderColorActive, - })} + dashedBorderStyles={styles.activeDropzoneDashedBorder(theme.attachmentDropBorderColorActive, true)} /> )} diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx index eb5206cc6447..837f4f6d8208 100644 --- a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx +++ b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx @@ -1043,10 +1043,7 @@ function IOURequestStepConfirmation({ dropStyles={styles.receiptDropOverlay(true)} dropTitle={translate(isEditingReceipt ? 'dropzone.replaceReceipt' : 'quickAction.scanReceipt')} dropTextStyles={styles.receiptDropText} - dashedBorderStyles={styles.activeDropzoneDashedBorder({ - isActive: true, - borderColor: theme.receiptDropBorderColorActive, - })} + dashedBorderStyles={styles.activeDropzoneDashedBorder(theme.receiptDropBorderColorActive, true)} /> ) : ( diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.tsx index 609acf1ce699..604afb7e3386 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.tsx @@ -1047,10 +1047,7 @@ function IOURequestStepScan({ isReplacingReceipt ? translate('dropzone.replaceReceipt') : translate(shouldAcceptMultipleFiles ? 'dropzone.scanReceipts' : 'quickAction.scanReceipt') } dropTextStyles={styles.receiptDropText} - dashedBorderStyles={styles.activeDropzoneDashedBorder({ - isActive: true, - borderColor: theme.receiptDropBorderColorActive, - })} + dashedBorderStyles={styles.activeDropzoneDashedBorder(theme.receiptDropBorderColorActive, true)} /> ) : ( diff --git a/src/styles/index.ts b/src/styles/index.ts index 9440bb2d5bed..5a6f29490a5d 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -13,6 +13,7 @@ import type {ValueOf} from 'type-fest'; import type DotLottieAnimation from '@components/LottieAnimations/types'; import {ACTIVE_LABEL_SCALE} from '@components/TextInput/styleConst'; import {getBrowser, isMobile, isMobileSafari, isSafari} from '@libs/Browser'; +import getPlatform from '@libs/getPlatform'; import CONST from '@src/CONST'; import {defaultTheme} from './theme'; import colors from './theme/colors'; @@ -4025,21 +4026,32 @@ const styles = (theme: ThemeColors) => backgroundColor: theme.fileDropUIBG, }, - activeDropzoneDashedBorder: ({borderColor, isActive}) => ({ - position: 'absolute' as const, - top: 0, - left: 0, - right: 0, - bottom: 0, - ...(Platform.OS === 'web' && { - backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='1' y='1' width='calc(100%25 - 3px)' height='calc(100%25 - 3px)' fill='none' stroke='${encodeURIComponent(borderColor)}' stroke-width='2' stroke-dasharray='8' stroke-dashoffset='4' stroke-linecap='round' rx='8' ry='8'/%3e%3c/svg%3e")`, - backgroundSize: '100% 100%', - backgroundRepeat: 'no-repeat', - }), - width: '100%', - height: '100%', - opacity: isActive ? 1 : 0, - }), + activeDropzoneDashedBorder: (borderColor: string, isActive: boolean) => { + const browser = getBrowser(); + const isSafariOrChromeBrowser = getPlatform() === 'web' && (browser === CONST.BROWSER.SAFARI || browser === CONST.BROWSER.CHROME); + + return { + position: 'absolute' as const, + top: 0, + left: 0, + right: 0, + bottom: 0, + width: '100%', + height: '100%', + opacity: isActive ? 1 : 0, + ...(isSafariOrChromeBrowser && { + backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='1' y='1' width='calc(100%25 - 3px)' height='calc(100%25 - 3px)' fill='none' stroke='${encodeURIComponent(borderColor)}' stroke-width='2' stroke-dasharray='8' stroke-dashoffset='4' stroke-linecap='round' rx='8' ry='8'/%3e%3c/svg%3e")`, + backgroundSize: '100% 100%', + backgroundRepeat: 'no-repeat', + }), + ...(!isSafariOrChromeBrowser && { + borderWidth: 2, + borderStyle: 'dashed', + borderColor, + borderRadius: variables.componentBorderRadiusNormal, + }), + }; + }, attachmentDropOverlay: (isActive?: boolean) => ({ backgroundColor: isActive ? theme.attachmentDropUIBGActive : theme.attachmentDropUIBG, From 64d71aab060feabb6185774be1e05f8659f20f11 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Tue, 15 Jul 2025 14:28:43 +0200 Subject: [PATCH 04/12] fix: eslint --- src/pages/iou/request/step/IOURequestStepConfirmation.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx index 837f4f6d8208..0b92cf01f304 100644 --- a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx +++ b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx @@ -20,6 +20,7 @@ import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; import usePermissions from '@hooks/usePermissions'; import useThemeStyles from '@hooks/useThemeStyles'; +import useTheme from '@hooks/useTheme'; import useThreeDotsAnchorPosition from '@hooks/useThreeDotsAnchorPosition'; import {completeTestDriveTask} from '@libs/actions/Task'; import DateUtils from '@libs/DateUtils'; @@ -141,6 +142,7 @@ function IOURequestStepConfirmation({ const policyCategories = policyCategoriesReal ?? policyCategoriesDraft; const styles = useThemeStyles(); + const theme = useTheme(); const {translate} = useLocalize(); const threeDotsAnchorPosition = useThreeDotsAnchorPosition(styles.threeDotsPopoverOffsetNoCloseButton); const {isOffline} = useNetwork(); From 1f89133753e8209316e432f0f383bfe72d463d24 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Wed, 16 Jul 2025 15:38:12 +0200 Subject: [PATCH 05/12] fix: minor fix --- src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 5a6f29490a5d..b2ddb2b29623 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4040,7 +4040,7 @@ const styles = (theme: ThemeColors) => height: '100%', opacity: isActive ? 1 : 0, ...(isSafariOrChromeBrowser && { - backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='1' y='1' width='calc(100%25 - 3px)' height='calc(100%25 - 3px)' fill='none' stroke='${encodeURIComponent(borderColor)}' stroke-width='2' stroke-dasharray='8' stroke-dashoffset='4' stroke-linecap='round' rx='8' ry='8'/%3e%3c/svg%3e")`, + backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='1' y='1' width='calc(100%25 - 3px)' height='calc(100%25 - 3px)' fill='none' stroke='${encodeURIComponent(borderColor)}' stroke-width='2' stroke-dasharray='8' stroke-dashoffset='4 8' stroke-linecap='round' rx='8' ry='8' /%3e%3c/svg%3e")`, backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', }), From 1eea3b368a05da618e7812b98d5314a910df8c0d Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Thu, 17 Jul 2025 09:09:01 +0200 Subject: [PATCH 06/12] fix: prettier --- src/pages/iou/request/step/IOURequestStepConfirmation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx index af9e48a0936c..88b3426b6476 100644 --- a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx +++ b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx @@ -19,8 +19,8 @@ import useFilesValidation from '@hooks/useFilesValidation'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; -import useThemeStyles from '@hooks/useThemeStyles'; import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; import useThreeDotsAnchorPosition from '@hooks/useThreeDotsAnchorPosition'; import {completeTestDriveTask} from '@libs/actions/Task'; import DateUtils from '@libs/DateUtils'; From e28086385306482252c017709a3458314eb83296 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Thu, 17 Jul 2025 11:40:58 +0200 Subject: [PATCH 07/12] fix: minor fix --- src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index b2ddb2b29623..4754401d914a 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4040,7 +4040,7 @@ const styles = (theme: ThemeColors) => height: '100%', opacity: isActive ? 1 : 0, ...(isSafariOrChromeBrowser && { - backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='1' y='1' width='calc(100%25 - 3px)' height='calc(100%25 - 3px)' fill='none' stroke='${encodeURIComponent(borderColor)}' stroke-width='2' stroke-dasharray='8' stroke-dashoffset='4 8' stroke-linecap='round' rx='8' ry='8' /%3e%3c/svg%3e")`, + backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='1' y='1' width='calc(100%25 - 3px)' height='calc(100%25 - 3px)' fill='none' stroke='${encodeURIComponent(borderColor)}' stroke-width='2' stroke-dasharray='8' stroke-dashoffset='4 8' stroke-linecap='round' rx='8' ry='8' /%3e%20%3c/svg%3e")`, backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', }), From 828f377ae7789bdebec7bac6b6754dd4434aab36 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Thu, 17 Jul 2025 13:40:18 +0200 Subject: [PATCH 08/12] fix: cspell --- cspell.json | 1 + src/styles/index.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/cspell.json b/cspell.json index 5efd4621b29e..724bd0dbedcc 100644 --- a/cspell.json +++ b/cspell.json @@ -123,6 +123,7 @@ "creditamount", "CREDS", "crios", + "csvg", "customairshipextender", "customfield", "customise", diff --git a/src/styles/index.ts b/src/styles/index.ts index 4754401d914a..b2ddb2b29623 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4040,7 +4040,7 @@ const styles = (theme: ThemeColors) => height: '100%', opacity: isActive ? 1 : 0, ...(isSafariOrChromeBrowser && { - backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='1' y='1' width='calc(100%25 - 3px)' height='calc(100%25 - 3px)' fill='none' stroke='${encodeURIComponent(borderColor)}' stroke-width='2' stroke-dasharray='8' stroke-dashoffset='4 8' stroke-linecap='round' rx='8' ry='8' /%3e%20%3c/svg%3e")`, + backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='1' y='1' width='calc(100%25 - 3px)' height='calc(100%25 - 3px)' fill='none' stroke='${encodeURIComponent(borderColor)}' stroke-width='2' stroke-dasharray='8' stroke-dashoffset='4 8' stroke-linecap='round' rx='8' ry='8' /%3e%3c/svg%3e")`, backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', }), From 0f2d03f2cf58e4ab32d1bfd79d150fa996e3b3ec Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Fri, 18 Jul 2025 08:55:31 +0200 Subject: [PATCH 09/12] fix: remove unused styles --- src/styles/index.ts | 11 +---------- src/styles/theme/themes/dark.ts | 2 -- src/styles/theme/themes/light.ts | 2 -- src/styles/theme/types.ts | 2 -- 4 files changed, 1 insertion(+), 16 deletions(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index b2ddb2b29623..a1898fcb6083 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4044,6 +4044,7 @@ const styles = (theme: ThemeColors) => backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', }), + // fallback for the desktop and other browsers that this svg doesn't work with ...(!isSafariOrChromeBrowser && { borderWidth: 2, borderStyle: 'dashed', @@ -4062,11 +4063,6 @@ const styles = (theme: ThemeColors) => color: theme.textAttachmentDropZone, }, - attachmentDropInnerWrapper: (isActive?: boolean) => ({ - borderColor: isActive ? theme.attachmentDropBorderColorActive : theme.attachmentDropBorderColor, - transition: '0.2s ease-in', - }), - receiptDropOverlay: (isActive?: boolean) => ({ backgroundColor: isActive ? theme.receiptDropUIBGActive : theme.receiptDropUIBG, transition: 'background-color 0.2s ease-in', @@ -4076,11 +4072,6 @@ const styles = (theme: ThemeColors) => color: theme.textReceiptDropZone, }, - receiptDropInnerWrapper: (isActive?: boolean) => ({ - borderColor: isActive ? theme.receiptDropBorderColorActive : theme.receiptDropBorderColor, - transition: '0.2s ease-in', - }), - flashButtonContainer: { position: 'absolute', top: 20, diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts index b97189b6698f..672f271e0ca9 100644 --- a/src/styles/theme/themes/dark.ts +++ b/src/styles/theme/themes/dark.ts @@ -74,11 +74,9 @@ const darkTheme = { fileDropUIBG: 'rgba(3, 212, 124, 0.84)', attachmentDropUIBG: 'rgba(90, 176, 255, 0.8)', attachmentDropUIBGActive: 'rgba(90, 176, 255, 96)', - attachmentDropBorderColor: 'rgba(176, 217, 255, 0)', attachmentDropBorderColorActive: colors.blue100, receiptDropUIBG: 'rgba(3, 212, 124, 0.8)', receiptDropUIBGActive: 'rgba(3, 212, 124, 96)', - receiptDropBorderColor: 'rgba(177, 242, 214, 0)', receiptDropBorderColorActive: colors.green100, checkBox: colors.green400, imageCropBackgroundColor: colors.productDark700, diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts index 9896a568ef3f..359d09be456f 100644 --- a/src/styles/theme/themes/light.ts +++ b/src/styles/theme/themes/light.ts @@ -74,11 +74,9 @@ const lightTheme = { fileDropUIBG: 'rgba(3, 212, 124, 0.84)', attachmentDropUIBG: 'rgba(90, 176, 255, 0.8)', attachmentDropUIBGActive: 'rgba(90, 176, 255, 0.96)', - attachmentDropBorderColor: 'rgba(176, 217, 255, 0)', attachmentDropBorderColorActive: colors.blue100, receiptDropUIBG: 'rgba(3, 212, 124, 0.8)', receiptDropUIBGActive: 'rgba(3, 212, 124, 0.96)', - receiptDropBorderColor: 'rgba(177, 242, 214, 0)', receiptDropBorderColorActive: colors.green100, checkBox: colors.green400, imageCropBackgroundColor: colors.productLight700, diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts index f5153b884248..a7ffe98f6bdd 100644 --- a/src/styles/theme/types.ts +++ b/src/styles/theme/types.ts @@ -79,11 +79,9 @@ type ThemeColors = { fileDropUIBG: Color; attachmentDropUIBG: Color; attachmentDropUIBGActive: Color; - attachmentDropBorderColor: Color; attachmentDropBorderColorActive: Color; receiptDropUIBG: Color; receiptDropUIBGActive: Color; - receiptDropBorderColor: Color; receiptDropBorderColorActive: Color; checkBox: Color; imageCropBackgroundColor: Color; From af4b3ae1b75f7800f499d61fa42e776a6e79fa0d Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Fri, 18 Jul 2025 08:57:14 +0200 Subject: [PATCH 10/12] fix: use const --- src/styles/index.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index a1898fcb6083..3d836260d2c2 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3025,8 +3025,15 @@ const styles = (theme: ThemeColors) => }, rootNavigatorContainerStyles: (isSmallScreenWidth: boolean) => - ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWithLHBWidth + variables.navigationTabBarSize, flex: 1}) satisfies ViewStyle, - RHPNavigatorContainerNavigatorContainerStyles: (isSmallScreenWidth: boolean) => ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, flex: 1}) satisfies ViewStyle, + ({ + marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWithLHBWidth + variables.navigationTabBarSize, + flex: 1, + }) satisfies ViewStyle, + RHPNavigatorContainerNavigatorContainerStyles: (isSmallScreenWidth: boolean) => + ({ + marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, + flex: 1, + }) satisfies ViewStyle, avatarInnerTextChat: { color: theme.text, @@ -4028,7 +4035,7 @@ const styles = (theme: ThemeColors) => activeDropzoneDashedBorder: (borderColor: string, isActive: boolean) => { const browser = getBrowser(); - const isSafariOrChromeBrowser = getPlatform() === 'web' && (browser === CONST.BROWSER.SAFARI || browser === CONST.BROWSER.CHROME); + const isSafariOrChromeBrowser = getPlatform() === CONST.PLATFORM.WEB && (browser === CONST.BROWSER.SAFARI || browser === CONST.BROWSER.CHROME); return { position: 'absolute' as const, @@ -5317,6 +5324,7 @@ const styles = (theme: ThemeColors) => paddingVertical: 20, flexGrow: 1, flexShrink: 1, + flexBasis: '35%', }, From 02e6829bd04b2ef52aefcb757e6a24e47f20fc9c Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Fri, 18 Jul 2025 16:23:54 +0200 Subject: [PATCH 11/12] fix: minor fix --- src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 3d836260d2c2..93ac23742b03 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4038,7 +4038,7 @@ const styles = (theme: ThemeColors) => const isSafariOrChromeBrowser = getPlatform() === CONST.PLATFORM.WEB && (browser === CONST.BROWSER.SAFARI || browser === CONST.BROWSER.CHROME); return { - position: 'absolute' as const, + position: 'absolute', top: 0, left: 0, right: 0, From 2c323fe7cdbcaf4cf6d32e8be2d7b9d0b8aa613b Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Mon, 21 Jul 2025 14:58:30 +0200 Subject: [PATCH 12/12] fix: add transition --- src/styles/index.ts | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index e49c6c9cf6da..0ca88973234e 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2854,15 +2854,8 @@ const styles = (theme: ThemeColors) => }, rootNavigatorContainerStyles: (isSmallScreenWidth: boolean) => - ({ - marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWithLHBWidth + variables.navigationTabBarSize, - flex: 1, - }) satisfies ViewStyle, - RHPNavigatorContainerNavigatorContainerStyles: (isSmallScreenWidth: boolean) => - ({ - marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, - flex: 1, - }) satisfies ViewStyle, + ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWithLHBWidth + variables.navigationTabBarSize, flex: 1}) satisfies ViewStyle, + RHPNavigatorContainerNavigatorContainerStyles: (isSmallScreenWidth: boolean) => ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, flex: 1}) satisfies ViewStyle, avatarInnerTextChat: { color: theme.text, @@ -3789,6 +3782,7 @@ const styles = (theme: ThemeColors) => width: '100%', height: '100%', opacity: isActive ? 1 : 0, + transition: 'opacity 0.2s ease-in', ...(isSafariOrChromeBrowser && { backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='1' y='1' width='calc(100%25 - 3px)' height='calc(100%25 - 3px)' fill='none' stroke='${encodeURIComponent(borderColor)}' stroke-width='2' stroke-dasharray='8' stroke-dashoffset='4 8' stroke-linecap='round' rx='8' ry='8' /%3e%3c/svg%3e")`, backgroundSize: '100% 100%',