From 4019cea780506237f8dc9da33d6f46dd00d24eee Mon Sep 17 00:00:00 2001
From: Manan <gadhiyamanan18@gmail.com>
Date: Mon, 2 Oct 2023 10:57:24 +0530
Subject: [PATCH 1/3] Fix desktop green drag and drop area

---
 src/pages/EditRequestReceiptPage.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/pages/EditRequestReceiptPage.js b/src/pages/EditRequestReceiptPage.js
index c5dd69624159..2c1ea9cbe057 100644
--- a/src/pages/EditRequestReceiptPage.js
+++ b/src/pages/EditRequestReceiptPage.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import ScreenWrapper from '../components/ScreenWrapper';
 import HeaderWithBackButton from '../components/HeaderWithBackButton';
@@ -6,6 +6,7 @@ import Navigation from '../libs/Navigation/Navigation';
 import useLocalize from '../hooks/useLocalize';
 import ReceiptSelector from './iou/ReceiptSelector';
 import DragAndDropProvider from '../components/DragAndDrop/Provider';
+import themeColors from '../styles/themes/default';
 
 const propTypes = {
     /** React Navigation route */
@@ -30,14 +31,24 @@ const defaultProps = {
 
 function EditRequestReceiptPage({route, transactionID}) {
     const {translate} = useLocalize();
+    const [isDraggingOver, setIsDraggingOver] = useState(false);
 
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             testID={EditRequestReceiptPage.displayName}
+            headerGapStyles={
+                isDraggingOver
+                    ? [
+                          {
+                              backgroundColor: themeColors.receiptDropUIBG,
+                          },
+                      ]
+                    : []
+            }
         >
-            <DragAndDropProvider>
+            <DragAndDropProvider setIsDraggingOver={setIsDraggingOver}>
                 <HeaderWithBackButton
                     title={translate('common.receipt')}
                     onBackButtonPress={Navigation.goBack}

From 51170cc1e5182adc8298dc53d27292a8002f4cf2 Mon Sep 17 00:00:00 2001
From: Manan <gadhiyamanan18@gmail.com>
Date: Mon, 2 Oct 2023 14:12:54 +0530
Subject: [PATCH 2/3] update style

---
 src/pages/EditRequestReceiptPage.js       | 12 ++----------
 src/pages/iou/MoneyRequestSelectorPage.js | 11 +----------
 src/styles/styles.js                      |  4 ++++
 3 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/src/pages/EditRequestReceiptPage.js b/src/pages/EditRequestReceiptPage.js
index 2c1ea9cbe057..f1c415cc244c 100644
--- a/src/pages/EditRequestReceiptPage.js
+++ b/src/pages/EditRequestReceiptPage.js
@@ -6,7 +6,7 @@ import Navigation from '../libs/Navigation/Navigation';
 import useLocalize from '../hooks/useLocalize';
 import ReceiptSelector from './iou/ReceiptSelector';
 import DragAndDropProvider from '../components/DragAndDrop/Provider';
-import themeColors from '../styles/themes/default';
+import styles from '../styles/styles';
 
 const propTypes = {
     /** React Navigation route */
@@ -38,15 +38,7 @@ function EditRequestReceiptPage({route, transactionID}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             testID={EditRequestReceiptPage.displayName}
-            headerGapStyles={
-                isDraggingOver
-                    ? [
-                          {
-                              backgroundColor: themeColors.receiptDropUIBG,
-                          },
-                      ]
-                    : []
-            }
+            headerGapStyles={isDraggingOver ? [styles.dragAndDropHeader] : []}
         >
             <DragAndDropProvider setIsDraggingOver={setIsDraggingOver}>
                 <HeaderWithBackButton
diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index 9e46b1d2d7a2..2fd9723c8089 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -21,7 +21,6 @@ import OnyxTabNavigator, {TopTab} from '../../libs/Navigation/OnyxTabNavigator';
 import NewRequestAmountPage from './steps/NewRequestAmountPage';
 import reportPropTypes from '../reportPropTypes';
 import * as ReportUtils from '../../libs/ReportUtils';
-import themeColors from '../../styles/themes/default';
 import usePrevious from '../../hooks/usePrevious';
 
 const propTypes = {
@@ -86,15 +85,7 @@ function MoneyRequestSelectorPage(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
-            headerGapStyles={
-                isDraggingOver
-                    ? [
-                          {
-                              backgroundColor: themeColors.receiptDropUIBG,
-                          },
-                      ]
-                    : []
-            }
+            headerGapStyles={isDraggingOver ? [styles.dragAndDropHeader] : []}
             testID={MoneyRequestSelectorPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
diff --git a/src/styles/styles.js b/src/styles/styles.js
index cef87c531972..ad31ca6dcadc 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3704,6 +3704,10 @@ const styles = (theme) => ({
         fontSize: variables.fontSizeSmall,
         lineHeight: variables.lineHeightLarge,
     },
+
+    dragAndDropHeader: {
+        backgroundColor: theme.receiptDropUIBG,
+    },
 });
 
 // For now we need to export the styles function that takes the theme as an argument

From def5ba3bd3033ccd30ff1bb36573acac7f3cd08e Mon Sep 17 00:00:00 2001
From: Manan <gadhiyamanan18@gmail.com>
Date: Mon, 2 Oct 2023 16:48:32 +0530
Subject: [PATCH 3/3] update style name

---
 src/pages/EditRequestReceiptPage.js       | 2 +-
 src/pages/iou/MoneyRequestSelectorPage.js | 2 +-
 src/styles/styles.js                      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/EditRequestReceiptPage.js b/src/pages/EditRequestReceiptPage.js
index f1c415cc244c..6744f027b404 100644
--- a/src/pages/EditRequestReceiptPage.js
+++ b/src/pages/EditRequestReceiptPage.js
@@ -38,7 +38,7 @@ function EditRequestReceiptPage({route, transactionID}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             testID={EditRequestReceiptPage.displayName}
-            headerGapStyles={isDraggingOver ? [styles.dragAndDropHeader] : []}
+            headerGapStyles={isDraggingOver ? [styles.receiptDropHeaderGap] : []}
         >
             <DragAndDropProvider setIsDraggingOver={setIsDraggingOver}>
                 <HeaderWithBackButton
diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index 2fd9723c8089..c8e3aebaa0b3 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -85,7 +85,7 @@ function MoneyRequestSelectorPage(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
-            headerGapStyles={isDraggingOver ? [styles.dragAndDropHeader] : []}
+            headerGapStyles={isDraggingOver ? [styles.receiptDropHeaderGap] : []}
             testID={MoneyRequestSelectorPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
diff --git a/src/styles/styles.js b/src/styles/styles.js
index ad31ca6dcadc..a3bd18f061ae 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3705,7 +3705,7 @@ const styles = (theme) => ({
         lineHeight: variables.lineHeightLarge,
     },
 
-    dragAndDropHeader: {
+    receiptDropHeaderGap: {
         backgroundColor: theme.receiptDropUIBG,
     },
 });