Merge pull request #34958 from shahinyan11/issues/34529

Wrap the login page background image in a new container to fix it moving
Expensify · Feb 8, 2024 · a08b2b9 · a08b2b9
2 parents 2988851 + 084eafd
commit a08b2b9
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 7 deletions.
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
@@ -98,6 +98,8 @@ function SignInPageLayout(props) {
 
     const scrollViewStyles = useMemo(() => scrollViewContentContainerStyles(styles), [styles]);
 
+    const backgroundImageHeight = Math.max(variables.signInContentMinHeight, containerHeight);
+
     return (
         <View style={containerStyles}>
             {!props.shouldShowSmallScreen ? (
@@ -163,13 +165,15 @@ function SignInPageLayout(props) {
                     keyboardShouldPersistTaps="handled"
                     ref={scrollViewRef}
                 >
-                    <View style={[styles.flex1, styles.flexColumn, styles.overflowHidden, StyleUtils.getMinimumHeight(Math.max(variables.signInContentMinHeight, containerHeight))]}>
-                        <BackgroundImage
-                            isSmallScreen
-                            pointerEvents="none"
-                            width={variables.signInHeroBackgroundWidthMobile}
-                            transitionDuration={CONST.BACKGROUND_IMAGE_TRANSITION_DURATION}
-                        />
+                    <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
+                                pointerEvents="none"
+                                width={variables.signInHeroBackgroundWidthMobile}
+                                transitionDuration={CONST.BACKGROUND_IMAGE_TRANSITION_DURATION}
+                            />
+                        </View>
                         <SignInPageContent
                             welcomeHeader={props.welcomeHeader}
                             welcomeText={props.welcomeText}

diff --git a/src/styles/utils/getSignInBgStyles/index.ios.ts b/src/styles/utils/getSignInBgStyles/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/getSignInBgStyles/index.ts b/src/styles/utils/getSignInBgStyles/index.ts
@@ -0,0 +1,5 @@
+import type GetSignInBgStyles from './types';
+
+const getSignInBgStyles: GetSignInBgStyles = () => ({});
+
+export default getSignInBgStyles;
diff --git a/src/styles/utils/getSignInBgStyles/types.ts b/src/styles/utils/getSignInBgStyles/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;
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
@@ -22,6 +22,7 @@ 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 type {
@@ -1084,6 +1085,7 @@ const staticStyleUtils = {
     getCardStyles,
     getOpacityStyle,
     getMultiGestureCanvasContainerStyle,
+    getSignInBgStyles,
 };
 
 const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({