From 5888b46da4ec069cdd01e71e59d8d461490843db Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Tue, 23 Jan 2024 14:58:23 +0400
Subject: [PATCH 01/11] fix login background image moving down

---
 .../SignInPageLayout/BackgroundImage/index.ios.js      |  4 +++-
 src/pages/signin/SignInPageLayout/index.js             |  1 +
 src/styles/index.ts                                    | 10 +++++++++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
index da6a6b9ee4fb..646234469611 100644
--- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
+++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
@@ -6,6 +6,7 @@ import MobileBackgroundImage from '@assets/images/home-background--mobile-new.sv
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import defaultPropTypes from './propTypes';
+import useWindowDimensions from "@hooks/useWindowDimensions";
 
 const defaultProps = {
     isSmallScreen: false,
@@ -20,12 +21,13 @@ const propTypes = {
 function BackgroundImage(props) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const {windowHeight} = useWindowDimensions()
     const src = useMemo(() => (props.isSmallScreen ? MobileBackgroundImage : DesktopBackgroundImage), [props.isSmallScreen]);
 
     return (
         <Image
             source={src}
-            style={[styles.signInBackground, StyleUtils.getWidthStyle(props.width)]}
+            style={[styles.signInBackground, StyleUtils.getWidthStyle(props.width), {top: windowHeight - 700}]}
         />
     );
 }
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index e2f9c28f9fcd..823a08ba6b7d 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -162,6 +162,7 @@ function SignInPageLayout(props) {
                     ref={scrollViewRef}
                 >
                     <View style={[styles.flex1, styles.flexColumn, styles.overflowHidden, StyleUtils.getMinimumHeight(Math.max(variables.signInContentMinHeight, containerHeight))]}>
+                        <View style={styles.signInBackgroundFillView}/>
                         <BackgroundImage
                             isSmallScreen
                             pointerEvents="none"
diff --git a/src/styles/index.ts b/src/styles/index.ts
index aace13c34594..fd6690f7d3cc 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1261,11 +1261,19 @@ const styles = (theme: ThemeColors) =>
 
         signInBackground: {
             position: 'absolute',
-            bottom: 0,
             left: 0,
             minHeight: 700,
         },
 
+        signInBackgroundFillView: {
+            position: 'absolute',
+            left: 0,
+            bottom: 0,
+            height: '50%',
+            width: '100%',
+            backgroundColor: theme.signInPage
+        },
+
         signInPageInner: {
             marginLeft: 'auto',
             marginRight: 'auto',

From 9ae124c5d49769a6593ee8fce9b2c7afda301623 Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Fri, 26 Jan 2024 12:48:58 +0400
Subject: [PATCH 02/11] Remove extra view

---
 .../signin/SignInPageLayout/BackgroundImage/index.ios.js  | 1 -
 src/styles/index.ts                                       | 8 +++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
index 9428cc3581db..45d7bf3050ef 100644
--- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
+++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
@@ -27,7 +27,6 @@ function BackgroundImage(props) {
 
     return (
         <View style={[styles.signInBackground, StyleUtils.getWidthStyle(props.width), {height: windowHeight}]}>
-            <View style={styles.signInBackgroundTopView}/>
             <Image
                 source={src}
                 style={styles.signInBackgroundImage}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 97e270fba49d..5476642d47b6 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1263,13 +1263,11 @@ const styles = (theme: ThemeColors) =>
             position: 'absolute',
             top: 0,
             left: 0,
+            backgroundColor: colors.productDark200,
+            justifyContent: "flex-end"
         },
 
-        signInBackgroundTopView: {
-            flex: 1,
-            width: '100%',
-            backgroundColor: colors.productDark200
-        },
+
         signInBackgroundImage: {
             height: 700,
         },

From fe08d30f0ba5a896aba9bda6804b19421f813df5 Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Fri, 26 Jan 2024 15:11:33 +0400
Subject: [PATCH 03/11] fix lint error

---
 .../signin/SignInPageLayout/BackgroundImage/index.ios.js      | 4 ++--
 src/styles/index.ts                                           | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
index 45d7bf3050ef..6e933fc7f2a2 100644
--- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
+++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
@@ -1,3 +1,4 @@
+import {View} from "react-native";
 import {Image} from 'expo-image';
 import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
@@ -5,9 +6,8 @@ import DesktopBackgroundImage from '@assets/images/home-background--desktop.svg'
 import MobileBackgroundImage from '@assets/images/home-background--mobile-new.svg';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import defaultPropTypes from './propTypes';
 import useWindowDimensions from "@hooks/useWindowDimensions";
-import {View} from "react-native";
+import defaultPropTypes from './propTypes';
 
 const defaultProps = {
     isSmallScreen: false,
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 5476642d47b6..52ebb580254b 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1267,7 +1267,6 @@ const styles = (theme: ThemeColors) =>
             justifyContent: "flex-end"
         },
 
-
         signInBackgroundImage: {
             height: 700,
         },

From 661b4581aca424d990a8419bf88585c19bffb468 Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Tue, 30 Jan 2024 14:00:23 +0400
Subject: [PATCH 04/11] Remove extra changes

---
 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 52ebb580254b..1353e55193a6 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1268,7 +1268,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         signInBackgroundImage: {
-            height: 700,
+            minHeight: 700,
         },
 
         signInPageInner: {

From 04503940dc67d5223a44690c1ea819a53ea67953 Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Tue, 30 Jan 2024 18:58:59 +0400
Subject: [PATCH 05/11] run prettier

---
 .../SignInPageLayout/BackgroundImage/index.ios.js      |  7 +++----
 src/pages/signin/SignInPageLayout/index.js             | 10 +++++++++-
 src/styles/index.ts                                    |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
index 6e933fc7f2a2..8a4656aeb4d8 100644
--- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
+++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
@@ -1,12 +1,12 @@
-import {View} from "react-native";
 import {Image} from 'expo-image';
 import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
+import {View} from 'react-native';
 import DesktopBackgroundImage from '@assets/images/home-background--desktop.svg';
 import MobileBackgroundImage from '@assets/images/home-background--mobile-new.svg';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from "@hooks/useWindowDimensions";
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import defaultPropTypes from './propTypes';
 
 const defaultProps = {
@@ -22,7 +22,7 @@ const propTypes = {
 function BackgroundImage(props) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const {windowHeight} = useWindowDimensions()
+    const {windowHeight} = useWindowDimensions();
     const src = useMemo(() => (props.isSmallScreen ? MobileBackgroundImage : DesktopBackgroundImage), [props.isSmallScreen]);
 
     return (
@@ -32,7 +32,6 @@ function BackgroundImage(props) {
                 style={styles.signInBackgroundImage}
             />
         </View>
-
     );
 }
 
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index d37f5fedf1de..14abc0e4128d 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -161,7 +161,15 @@ function SignInPageLayout(props) {
                     keyboardShouldPersistTaps="handled"
                     ref={scrollViewRef}
                 >
-                    <View style={[styles.flex1, styles.flexColumn, styles.overflowHidden, StyleUtils.getMinimumHeight(Math.max(variables.signInContentMinHeight, containerHeight)), {backgroundColor: theme.signInPage}]}>
+                    <View
+                        style={[
+                            styles.flex1,
+                            styles.flexColumn,
+                            styles.overflowHidden,
+                            StyleUtils.getMinimumHeight(Math.max(variables.signInContentMinHeight, containerHeight)),
+                            {backgroundColor: theme.signInPage},
+                        ]}
+                    >
                         <BackgroundImage
                             isSmallScreen
                             pointerEvents="none"
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 20d63151c5e9..04f5f6ec5035 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1260,7 +1260,7 @@ const styles = (theme: ThemeColors) =>
             top: 0,
             left: 0,
             backgroundColor: colors.productDark200,
-            justifyContent: "flex-end"
+            justifyContent: 'flex-end',
         },
 
         signInBackgroundImage: {

From 452df4678fa267db9703cd905c5e353ee84d7ed9 Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Wed, 31 Jan 2024 17:14:59 +0400
Subject: [PATCH 06/11] Reviewer requested changes

---
 .../SignInPageLayout/BackgroundImage/index.ios.js   | 13 ++++---------
 src/pages/signin/SignInPageLayout/index.js          | 12 +++++++-----
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
index 8a4656aeb4d8..860d6e2d9cc2 100644
--- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
+++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
@@ -1,12 +1,10 @@
 import {Image} from 'expo-image';
 import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
-import {View} from 'react-native';
 import DesktopBackgroundImage from '@assets/images/home-background--desktop.svg';
 import MobileBackgroundImage from '@assets/images/home-background--mobile-new.svg';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import defaultPropTypes from './propTypes';
 
 const defaultProps = {
@@ -22,16 +20,13 @@ const propTypes = {
 function BackgroundImage(props) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const {windowHeight} = useWindowDimensions();
     const src = useMemo(() => (props.isSmallScreen ? MobileBackgroundImage : DesktopBackgroundImage), [props.isSmallScreen]);
 
     return (
-        <View style={[styles.signInBackground, StyleUtils.getWidthStyle(props.width), {height: windowHeight}]}>
-            <Image
-                source={src}
-                style={styles.signInBackgroundImage}
-            />
-        </View>
+        <Image
+            source={src}
+            style={[styles.signInBackgroundImage, StyleUtils.getWidthStyle(props.width)]}
+        />
     );
 }
 
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 14abc0e4128d..8a2322c1be65 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -170,11 +170,13 @@ function SignInPageLayout(props) {
                             {backgroundColor: theme.signInPage},
                         ]}
                     >
-                        <BackgroundImage
-                            isSmallScreen
-                            pointerEvents="none"
-                            width={variables.signInHeroBackgroundWidthMobile}
-                        />
+                        <View style={[styles.signInBackground, {height: windowHeight}]}>
+                            <BackgroundImage
+                                isSmallScreen
+                                pointerEvents="none"
+                                width={variables.signInHeroBackgroundWidthMobile}
+                            />
+                        </View>
                         <SignInPageContent
                             welcomeHeader={props.welcomeHeader}
                             welcomeText={props.welcomeText}

From 4d7607904659c55462c09c6bb4265a9ff4c3b5ea Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Wed, 31 Jan 2024 18:06:52 +0400
Subject: [PATCH 07/11] Update Wrapper and revert changes in styles

---
 .../signin/SignInPageLayout/BackgroundImage/index.ios.js | 2 +-
 src/pages/signin/SignInPageLayout/index.js               | 9 ++++++++-
 .../signin/ValidateCodeForm/BaseValidateCodeForm.js      | 2 +-
 src/styles/index.ts                                      | 9 ++-------
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
index 860d6e2d9cc2..da6a6b9ee4fb 100644
--- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
+++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
@@ -25,7 +25,7 @@ function BackgroundImage(props) {
     return (
         <Image
             source={src}
-            style={[styles.signInBackgroundImage, StyleUtils.getWidthStyle(props.width)]}
+            style={[styles.signInBackground, StyleUtils.getWidthStyle(props.width)]}
         />
     );
 }
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 8a2322c1be65..fd9849bb5c36 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -170,7 +170,14 @@ function SignInPageLayout(props) {
                             {backgroundColor: theme.signInPage},
                         ]}
                     >
-                        <View style={[styles.signInBackground, {height: windowHeight}]}>
+                        <View
+                            style={[
+                                styles.pAbsolute,
+                                styles.w100,
+                                StyleUtils.getHeight(Math.max(variables.signInContentMinHeight, containerHeight)),
+                                StyleUtils.getBackgroundColorStyle(theme.highlightBG),
+                            ]}
+                        >
                             <BackgroundImage
                                 isSmallScreen
                                 pointerEvents="none"
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index fd5e9b952612..2783ba545c46 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -378,7 +378,7 @@ function BaseValidateCodeForm(props) {
                         key="validateCode"
                         testID="validateCode"
                     />
-                    {hasError && <FormHelpMessage message={ErrorUtils.getLatestErrorMessage(props.account)} />}
+                    {hasError && <FormHelpMessage message={"ErrorUtils.getLatestErrorMessage(props.account) ErrorUtils.getLatestErrorMessage(props.account) ErrorUtils.getLatestErrorMessage(props.account) ErrorUtils.getLatestErrorMessage(props.account)ErrorUtils.getLatestErrorMessage(props.account)ErrorUtils.getLatestErrorMessage(props.account) ErrorUtils.getLatestErrorMessage(props.account) ErrorUtils.getLatestErrorMessage(props.account)"} />}
                     <View style={[styles.alignItemsStart]}>
                         {timeRemaining > 0 && !props.network.isOffline ? (
                             <Text style={[styles.mt2]}>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 04f5f6ec5035..d8977da573f4 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1257,14 +1257,9 @@ const styles = (theme: ThemeColors) =>
 
         signInBackground: {
             position: 'absolute',
-            top: 0,
+            bottom: 0,
             left: 0,
-            backgroundColor: colors.productDark200,
-            justifyContent: 'flex-end',
-        },
-
-        signInBackgroundImage: {
-            minHeight: 700,
+            minHeight: 700
         },
 
         signInPageInner: {

From 3bd5198bb5ffe35e9280ea5bffff94c8ac98c68e Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Wed, 31 Jan 2024 18:08:38 +0400
Subject: [PATCH 08/11] remove extra changes

---
 src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js | 2 +-
 src/styles/index.ts                                       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index 2783ba545c46..fd5e9b952612 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -378,7 +378,7 @@ function BaseValidateCodeForm(props) {
                         key="validateCode"
                         testID="validateCode"
                     />
-                    {hasError && <FormHelpMessage message={"ErrorUtils.getLatestErrorMessage(props.account) ErrorUtils.getLatestErrorMessage(props.account) ErrorUtils.getLatestErrorMessage(props.account) ErrorUtils.getLatestErrorMessage(props.account)ErrorUtils.getLatestErrorMessage(props.account)ErrorUtils.getLatestErrorMessage(props.account) ErrorUtils.getLatestErrorMessage(props.account) ErrorUtils.getLatestErrorMessage(props.account)"} />}
+                    {hasError && <FormHelpMessage message={ErrorUtils.getLatestErrorMessage(props.account)} />}
                     <View style={[styles.alignItemsStart]}>
                         {timeRemaining > 0 && !props.network.isOffline ? (
                             <Text style={[styles.mt2]}>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index d8977da573f4..d52e876d2e8e 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1259,7 +1259,7 @@ const styles = (theme: ThemeColors) =>
             position: 'absolute',
             bottom: 0,
             left: 0,
-            minHeight: 700
+            minHeight: 700,
         },
 
         signInPageInner: {

From 16cbccf071f91a7f96d4894bbb1c021b6b2ae0bf Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Thu, 1 Feb 2024 21:04:02 +0400
Subject: [PATCH 09/11] Addressed to reviewer comments

---
 src/pages/signin/SignInPageLayout/index.js | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index fd9849bb5c36..9dfefd65e321 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -97,6 +97,8 @@ function SignInPageLayout(props) {
 
     const scrollViewStyles = useMemo(() => scrollViewContentContainerStyles(styles), [styles]);
 
+    const backgroundImageHeight = Math.max(variables.signInContentMinHeight, containerHeight);
+
     return (
         <View style={containerStyles}>
             {!props.shouldShowSmallScreen ? (
@@ -166,18 +168,11 @@ function SignInPageLayout(props) {
                             styles.flex1,
                             styles.flexColumn,
                             styles.overflowHidden,
-                            StyleUtils.getMinimumHeight(Math.max(variables.signInContentMinHeight, containerHeight)),
-                            {backgroundColor: theme.signInPage},
+                            StyleUtils.getMinimumHeight(backgroundImageHeight),
+                            StyleUtils.getBackgroundColorStyle(theme.signInPage),
                         ]}
                     >
-                        <View
-                            style={[
-                                styles.pAbsolute,
-                                styles.w100,
-                                StyleUtils.getHeight(Math.max(variables.signInContentMinHeight, containerHeight)),
-                                StyleUtils.getBackgroundColorStyle(theme.highlightBG),
-                            ]}
-                        >
+                        <View style={[styles.pAbsolute, styles.w100, StyleUtils.getHeight(backgroundImageHeight), StyleUtils.getBackgroundColorStyle(theme.highlightBG)]}>
                             <BackgroundImage
                                 isSmallScreen
                                 pointerEvents="none"

From 362dd1ce5eb43e2cfcdaa3858137f14677c42dd3 Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Mon, 5 Feb 2024 00:33:51 +0400
Subject: [PATCH 10/11] Add signInPage style util

---
 src/pages/signin/SignInPageLayout/index.js     | 10 +---------
 src/styles/utils/index.ts                      |  2 ++
 src/styles/utils/signInPageStyles/index.ios.ts |  7 +++++++
 src/styles/utils/signInPageStyles/index.ts     |  5 +++++
 src/styles/utils/signInPageStyles/types.ts     |  6 ++++++
 5 files changed, 21 insertions(+), 9 deletions(-)
 create mode 100644 src/styles/utils/signInPageStyles/index.ios.ts
 create mode 100644 src/styles/utils/signInPageStyles/index.ts
 create mode 100644 src/styles/utils/signInPageStyles/types.ts

diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 9dfefd65e321..68005dcc0cc7 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -163,15 +163,7 @@ function SignInPageLayout(props) {
                     keyboardShouldPersistTaps="handled"
                     ref={scrollViewRef}
                 >
-                    <View
-                        style={[
-                            styles.flex1,
-                            styles.flexColumn,
-                            styles.overflowHidden,
-                            StyleUtils.getMinimumHeight(backgroundImageHeight),
-                            StyleUtils.getBackgroundColorStyle(theme.signInPage),
-                        ]}
-                    >
+                    <View style={[styles.flex1, styles.flexColumn, styles.overflowHidden, StyleUtils.getMinimumHeight(backgroundImageHeight), StyleUtils.getSignInBgStyles(theme)]}>
                         <View style={[styles.pAbsolute, styles.w100, StyleUtils.getHeight(backgroundImageHeight), StyleUtils.getBackgroundColorStyle(theme.highlightBG)]}>
                             <BackgroundImage
                                 isSmallScreen
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 010714f4208f..ca9ee4501876 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -24,6 +24,7 @@ import getContextMenuItemStyles from './getContextMenuItemStyles';
 import getNavigationModalCardStyle from './getNavigationModalCardStyles';
 import {compactContentContainerStyles} from './optionRowStyles';
 import positioning from './positioning';
+import getSignInBgStyles from './signInPageStyles';
 import type {
     AllStyles,
     AvatarSize,
@@ -1084,6 +1085,7 @@ const staticStyleUtils = {
     getCardStyles,
     getOpacityStyle,
     getMultiGestureCanvasContainerStyle,
+    getSignInBgStyles,
 };
 
 const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
diff --git a/src/styles/utils/signInPageStyles/index.ios.ts b/src/styles/utils/signInPageStyles/index.ios.ts
new file mode 100644
index 000000000000..84c50cfa42bd
--- /dev/null
+++ b/src/styles/utils/signInPageStyles/index.ios.ts
@@ -0,0 +1,7 @@
+import type GetSignInBgStyles from './types';
+
+const getSignInBgStyles: GetSignInBgStyles = (theme) => ({
+    backgroundColor: theme.signInPage,
+});
+
+export default getSignInBgStyles;
diff --git a/src/styles/utils/signInPageStyles/index.ts b/src/styles/utils/signInPageStyles/index.ts
new file mode 100644
index 000000000000..10c2e5783207
--- /dev/null
+++ b/src/styles/utils/signInPageStyles/index.ts
@@ -0,0 +1,5 @@
+import type GetSignInBgStyles from './types';
+
+const getSignInBgStyles: GetSignInBgStyles = () => ({});
+
+export default getSignInBgStyles;
diff --git a/src/styles/utils/signInPageStyles/types.ts b/src/styles/utils/signInPageStyles/types.ts
new file mode 100644
index 000000000000..4d3ddbe6153d
--- /dev/null
+++ b/src/styles/utils/signInPageStyles/types.ts
@@ -0,0 +1,6 @@
+import type {ViewStyle} from 'react-native';
+import type {ThemeColors} from '@styles/theme/types';
+
+type GetSignInBgStyles = (theme: ThemeColors) => ViewStyle;
+
+export default GetSignInBgStyles;

From cebaefda71de539d16e07473afd2d3b48411cac1 Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Wed, 7 Feb 2024 11:24:08 +0400
Subject: [PATCH 11/11] Addressed to reviewer comments

---
 .../utils/{signInPageStyles => getSignInBgStyles}/index.ios.ts  | 0
 .../utils/{signInPageStyles => getSignInBgStyles}/index.ts      | 0
 .../utils/{signInPageStyles => getSignInBgStyles}/types.ts      | 0
 src/styles/utils/index.ts                                       | 2 +-
 4 files changed, 1 insertion(+), 1 deletion(-)
 rename src/styles/utils/{signInPageStyles => getSignInBgStyles}/index.ios.ts (100%)
 rename src/styles/utils/{signInPageStyles => getSignInBgStyles}/index.ts (100%)
 rename src/styles/utils/{signInPageStyles => getSignInBgStyles}/types.ts (100%)

diff --git a/src/styles/utils/signInPageStyles/index.ios.ts b/src/styles/utils/getSignInBgStyles/index.ios.ts
similarity index 100%
rename from src/styles/utils/signInPageStyles/index.ios.ts
rename to src/styles/utils/getSignInBgStyles/index.ios.ts
diff --git a/src/styles/utils/signInPageStyles/index.ts b/src/styles/utils/getSignInBgStyles/index.ts
similarity index 100%
rename from src/styles/utils/signInPageStyles/index.ts
rename to src/styles/utils/getSignInBgStyles/index.ts
diff --git a/src/styles/utils/signInPageStyles/types.ts b/src/styles/utils/getSignInBgStyles/types.ts
similarity index 100%
rename from src/styles/utils/signInPageStyles/types.ts
rename to src/styles/utils/getSignInBgStyles/types.ts
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index ca9ee4501876..0c2e11f6ffb3 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -22,9 +22,9 @@ import createReportActionContextMenuStyleUtils from './generators/ReportActionCo
 import createTooltipStyleUtils from './generators/TooltipStyleUtils';
 import getContextMenuItemStyles from './getContextMenuItemStyles';
 import getNavigationModalCardStyle from './getNavigationModalCardStyles';
+import getSignInBgStyles from './getSignInBgStyles';
 import {compactContentContainerStyles} from './optionRowStyles';
 import positioning from './positioning';
-import getSignInBgStyles from './signInPageStyles';
 import type {
     AllStyles,
     AvatarSize,