From b3097382a4cf96bb0e3204c8b148314d3e5fe38a Mon Sep 17 00:00:00 2001
From: Ishpaul Singh <ishpaul207@gmail.com>
Date: Wed, 6 Sep 2023 20:29:20 +0530
Subject: [PATCH 1/3] fix overscroller for safari

---
 src/components/IllustratedHeaderPageLayout.js | 12 +++++++-----
 src/styles/styles.js                          |  9 +++++++++
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
index d1403bd4029e..6634281ec495 100644
--- a/src/components/IllustratedHeaderPageLayout.js
+++ b/src/components/IllustratedHeaderPageLayout.js
@@ -9,7 +9,6 @@ import ScreenWrapper from './ScreenWrapper';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import * as StyleUtils from '../styles/StyleUtils';
-import useWindowDimensions from '../hooks/useWindowDimensions';
 import FixedFooter from './FixedFooter';
 import useNetwork from '../hooks/useNetwork';
 
@@ -35,7 +34,6 @@ const defaultProps = {
 };
 
 function IllustratedHeaderPageLayout({backgroundColor, children, illustration, footer, ...propsToPassToHeader}) {
-    const {windowHeight} = useWindowDimensions();
     const {isOffline} = useNetwork();
     return (
         <ScreenWrapper
@@ -53,11 +51,15 @@ function IllustratedHeaderPageLayout({backgroundColor, children, illustration, f
                         iconFill={backgroundColor === themeColors.appBG ? undefined : themeColors.iconColorfulBackground}
                     />
                     <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(themeColors.appBG), !isOffline ? safeAreaPaddingBottomStyle : {}]}>
+                        {/* Safari on ios has a bug where overscrolling the page scrollview shows green the background color. This is a workaround to fix that. https://github.com/Expensify/App/issues/23422#issuecomment-1666890994 */}
+                        <View style={[styles.dualColorOverscrollSpacer]}>
+                            <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(backgroundColor)]} />
+                            <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(themeColors.appBG)]} />
+                        </View>
                         <ScrollView
                             contentContainerStyle={safeAreaPaddingBottomStyle}
                             showsVerticalScrollIndicator={false}
                         >
-                            <View style={styles.overscrollSpacer(backgroundColor, windowHeight)} />
                             <View style={[styles.alignItemsCenter, styles.justifyContentEnd, StyleUtils.getBackgroundColorStyle(backgroundColor)]}>
                                 <Lottie
                                     source={illustration}
@@ -66,9 +68,9 @@ function IllustratedHeaderPageLayout({backgroundColor, children, illustration, f
                                     loop
                                 />
                             </View>
-                            <View style={[styles.pt5]}>{children}</View>
+                            <View style={[styles.pt5, StyleUtils.getBackgroundColorStyle(themeColors.appBG)]}>{children}</View>
                         </ScrollView>
-                        {!_.isNull(footer) && <FixedFooter>{footer}</FixedFooter>}
+                        {!_.isNull(footer) && <FixedFooter style={[StyleUtils.getBackgroundColorStyle(themeColors.appBG)]}>{footer}</FixedFooter>}
                     </View>
                 </>
             )}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 7bb44acfb97a..ba7f505e6a2e 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3716,6 +3716,15 @@ const styles = {
         right: 0,
     }),
 
+    dualColorOverscrollSpacer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        zIndex: -1,
+    },
+
     willChangeTransform: {
         willChange: 'transform',
     },

From 23fe5cae52f052b00e4222cf4fb245565aba904f Mon Sep 17 00:00:00 2001
From: Ishpaul Singh <ishpaul207@gmail.com>
Date: Thu, 7 Sep 2023 23:00:48 +0530
Subject: [PATCH 2/3] made the fix specific to safari

---
 src/components/IllustratedHeaderPageLayout.js | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
index 6634281ec495..87cf2e68403b 100644
--- a/src/components/IllustratedHeaderPageLayout.js
+++ b/src/components/IllustratedHeaderPageLayout.js
@@ -9,8 +9,10 @@ import ScreenWrapper from './ScreenWrapper';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import * as StyleUtils from '../styles/StyleUtils';
+import useWindowDimensions from '../hooks/useWindowDimensions';
 import FixedFooter from './FixedFooter';
 import useNetwork from '../hooks/useNetwork';
+import * as Browser from '../libs/Browser';
 
 const propTypes = {
     ...headerWithBackButtonPropTypes,
@@ -35,12 +37,14 @@ const defaultProps = {
 
 function IllustratedHeaderPageLayout({backgroundColor, children, illustration, footer, ...propsToPassToHeader}) {
     const {isOffline} = useNetwork();
+    const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
+    const appBGColor = StyleUtils.getBackgroundColorStyle(themeColors.appBG);
     return (
         <ScreenWrapper
             style={[StyleUtils.getBackgroundColorStyle(backgroundColor)]}
             shouldEnablePickerAvoiding={false}
             includeSafeAreaPaddingBottom={false}
-            offlineIndicatorStyle={[StyleUtils.getBackgroundColorStyle(themeColors.appBG)]}
+            offlineIndicatorStyle={[appBGColor]}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <>
@@ -50,16 +54,19 @@ function IllustratedHeaderPageLayout({backgroundColor, children, illustration, f
                         titleColor={backgroundColor === themeColors.appBG ? undefined : themeColors.textColorfulBackground}
                         iconFill={backgroundColor === themeColors.appBG ? undefined : themeColors.iconColorfulBackground}
                     />
-                    <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(themeColors.appBG), !isOffline ? safeAreaPaddingBottomStyle : {}]}>
-                        {/* Safari on ios has a bug where overscrolling the page scrollview shows green the background color. This is a workaround to fix that. https://github.com/Expensify/App/issues/23422#issuecomment-1666890994 */}
-                        <View style={[styles.dualColorOverscrollSpacer]}>
-                            <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(backgroundColor)]} />
-                            <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(themeColors.appBG)]} />
-                        </View>
+                    <View style={[styles.flex1, appBGColor, !isOffline ? safeAreaPaddingBottomStyle : {}]}>
+                        {/* Safari on ios/mac has a bug where overscrolling the page scrollview shows green the background color. This is a workaround to fix that. https://github.com/Expensify/App/issues/23422 */}
+                        {Browser.isSafari() && (
+                            <View style={[styles.dualColorOverscrollSpacer]}>
+                                <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(backgroundColor)]} />
+                                <View style={[isSmallScreenWidth ? styles.flex1 : styles.flex3, appBGColor]} />
+                            </View>
+                        )}
                         <ScrollView
                             contentContainerStyle={safeAreaPaddingBottomStyle}
                             showsVerticalScrollIndicator={false}
                         >
+                            {!Browser.isSafari() && <View style={styles.overscrollSpacer(backgroundColor, windowHeight)} />}
                             <View style={[styles.alignItemsCenter, styles.justifyContentEnd, StyleUtils.getBackgroundColorStyle(backgroundColor)]}>
                                 <Lottie
                                     source={illustration}
@@ -68,9 +75,9 @@ function IllustratedHeaderPageLayout({backgroundColor, children, illustration, f
                                     loop
                                 />
                             </View>
-                            <View style={[styles.pt5, StyleUtils.getBackgroundColorStyle(themeColors.appBG)]}>{children}</View>
+                            <View style={[styles.pt5, appBGColor]}>{children}</View>
                         </ScrollView>
-                        {!_.isNull(footer) && <FixedFooter style={[StyleUtils.getBackgroundColorStyle(themeColors.appBG)]}>{footer}</FixedFooter>}
+                        {!_.isNull(footer) && <FixedFooter>{footer}</FixedFooter>}
                     </View>
                 </>
             )}

From a55003d1ae06da3191c71881cdc4c4182c256f30 Mon Sep 17 00:00:00 2001
From: Ishpaul Singh <ishpaul207@gmail.com>
Date: Thu, 14 Sep 2023 15:00:16 +0530
Subject: [PATCH 3/3] resolve-conflicts

---
 src/components/IllustratedHeaderPageLayout.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
index e47ba861fb05..92a9c8b8552b 100644
--- a/src/components/IllustratedHeaderPageLayout.js
+++ b/src/components/IllustratedHeaderPageLayout.js
@@ -40,10 +40,10 @@ const defaultProps = {
 };
 
 function IllustratedHeaderPageLayout({backgroundColor, children, illustration, footer, overlayContent, ...propsToPassToHeader}) {
-    const {windowHeight} = useWindowDimensions();
     const {isOffline} = useNetwork();
     const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
     const appBGColor = StyleUtils.getBackgroundColorStyle(themeColors.appBG);
+
     return (
         <ScreenWrapper
             style={[StyleUtils.getBackgroundColorStyle(backgroundColor)]}