From e0584308125949fba859feef38e0c8b9027ec5c6 Mon Sep 17 00:00:00 2001
From: ahmedGaber93 <a.gaber0093@gmail.com>
Date: Tue, 22 Aug 2023 05:29:06 +0200
Subject: [PATCH 1/3] fix IllustratedHeaderPageLayout.js padding bottom

---
 src/components/IllustratedHeaderPageLayout.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
index 7fc340426d69..c2b839a7f043 100644
--- a/src/components/IllustratedHeaderPageLayout.js
+++ b/src/components/IllustratedHeaderPageLayout.js
@@ -11,6 +11,7 @@ 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"
 
 const propTypes = {
     ...headerWithBackButtonPropTypes,
@@ -35,6 +36,7 @@ const defaultProps = {
 
 function IllustratedHeaderPageLayout({backgroundColor, children, illustration, footer, ...propsToPassToHeader}) {
     const {windowHeight} = useWindowDimensions();
+    const {isOffline} = useNetwork();
     return (
         <ScreenWrapper
             style={[StyleUtils.getBackgroundColorStyle(backgroundColor)]}
@@ -50,7 +52,7 @@ 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)]}>
+                    <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(themeColors.appBG), !isOffline ? safeAreaPaddingBottomStyle : {}]}>
                         <ScrollView
                             contentContainerStyle={safeAreaPaddingBottomStyle}
                             showsVerticalScrollIndicator={false}
@@ -66,7 +68,7 @@ function IllustratedHeaderPageLayout({backgroundColor, children, illustration, f
                             </View>
                             <View style={[styles.pt5]}>{children}</View>
                         </ScrollView>
-                        {!_.isNull(footer) && <FixedFooter>{footer}</FixedFooter>}
+                        {!_.isNull(footer) && <FixedFooter style={[styles.mtAuto, styles.pt2]}>{footer}</FixedFooter>}
                     </View>
                 </>
             )}

From 1b854f178e63470a3cf688bdfda6c0a85eb8bb2f Mon Sep 17 00:00:00 2001
From: ahmedGaber93 <a.gaber0093@gmail.com>
Date: Tue, 22 Aug 2023 06:29:33 +0200
Subject: [PATCH 2/3] prettier

---
 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 c2b839a7f043..d1f6dc08ebed 100644
--- a/src/components/IllustratedHeaderPageLayout.js
+++ b/src/components/IllustratedHeaderPageLayout.js
@@ -11,7 +11,7 @@ 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 useNetwork from '../hooks/useNetwork';
 
 const propTypes = {
     ...headerWithBackButtonPropTypes,

From 4e292cacc06cf5fcaa39f33bffcbe350ac3518bf Mon Sep 17 00:00:00 2001
From: ahmedGaber93 <a.gaber0093@gmail.com>
Date: Thu, 24 Aug 2023 15:28:36 +0200
Subject: [PATCH 3/3] update IllustratedHeaderPageLayout.js Footer style.

---
 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 d1f6dc08ebed..d1403bd4029e 100644
--- a/src/components/IllustratedHeaderPageLayout.js
+++ b/src/components/IllustratedHeaderPageLayout.js
@@ -68,7 +68,7 @@ function IllustratedHeaderPageLayout({backgroundColor, children, illustration, f
                             </View>
                             <View style={[styles.pt5]}>{children}</View>
                         </ScrollView>
-                        {!_.isNull(footer) && <FixedFooter style={[styles.mtAuto, styles.pt2]}>{footer}</FixedFooter>}
+                        {!_.isNull(footer) && <FixedFooter>{footer}</FixedFooter>}
                     </View>
                 </>
             )}