From fe25602706ab208aa029785843f738d781afe60a Mon Sep 17 00:00:00 2001 From: tienifr Date: Tue, 7 Nov 2023 10:52:19 +0700 Subject: [PATCH 1/3] fix: 30252 Animation is not visible on desktop but visible on Mobile in sign in Modal --- src/pages/signin/SignInPage.js | 2 +- .../SignInPageLayout/SignInPageContent.js | 20 +++++++++++-------- src/pages/signin/SignInPageLayout/index.js | 15 +++++++------- 3 files changed, 20 insertions(+), 17 deletions(-) diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js index 30eadf952042..bbbefec3e4b2 100644 --- a/src/pages/signin/SignInPage.js +++ b/src/pages/signin/SignInPage.js @@ -240,7 +240,7 @@ function SignInPage({credentials, account, isInModal, activeClients, preferredLo shouldShowWelcomeHeader={shouldShowWelcomeHeader || !isSmallScreenWidth || !isInModal} shouldShowWelcomeText={shouldShowWelcomeText} ref={signInPageLayoutRef} - isInModal={isInModal} + shouldShowSmallScreen={shouldShowSmallScreen} > {/* LoginForm must use the isVisible prop. This keeps it mounted, but visually hidden so that password managers can access the values. Conditionally rendering this component will break this feature. */} diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 14b7b7e004a6..91e83da4a388 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -7,7 +7,7 @@ import OfflineIndicator from '@components/OfflineIndicator'; import SignInPageForm from '@components/SignInPageForm'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import compose from '@libs/compose'; import SignInHeroImage from '@pages/signin/SignInHeroImage'; import styles from '@styles/styles'; @@ -32,19 +32,23 @@ const propTypes = { /** Whether to show welcome header on a particular page */ shouldShowWelcomeHeader: PropTypes.bool.isRequired, + /** Whether to show signIn hero image on a particular page */ + shouldShowSmallScreen: PropTypes.bool.isRequired, + ...withLocalizePropTypes, - ...windowDimensionsPropTypes, }; function SignInPageContent(props) { + const {isSmallScreenWidth} = useWindowDimensions(); + return ( {/* This empty view creates margin on the top of the sign in form which will shrink and grow depending on if the keyboard is open or not */} - + - + @@ -55,7 +59,7 @@ function SignInPageContent(props) { StyleUtils.getLineHeightStyle(variables.lineHeightSignInHeroXSmall), StyleUtils.getFontSizeStyle(variables.fontSizeSignInHeroXSmall), !props.welcomeText ? styles.mb5 : {}, - !props.isSmallScreenWidth ? styles.textAlignLeft : {}, + !isSmallScreenWidth ? styles.textAlignLeft : {}, styles.mb5, ]} > @@ -63,7 +67,7 @@ function SignInPageContent(props) { ) : null} {props.shouldShowWelcomeText && props.welcomeText ? ( - {props.welcomeText} + {props.welcomeText} ) : null} {props.children} @@ -71,7 +75,7 @@ function SignInPageContent(props) { - {props.isSmallScreenWidth ? ( + {props.shouldShowSmallScreen ? ( @@ -85,4 +89,4 @@ function SignInPageContent(props) { SignInPageContent.propTypes = propTypes; SignInPageContent.displayName = 'SignInPageContent'; -export default compose(withWindowDimensions, withLocalize, withSafeAreaInsets)(SignInPageContent); +export default compose(withLocalize, withSafeAreaInsets)(SignInPageContent); diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js index 627fdd0eaa37..b887dc114c06 100644 --- a/src/pages/signin/SignInPageLayout/index.js +++ b/src/pages/signin/SignInPageLayout/index.js @@ -4,7 +4,6 @@ import {ScrollView, View} from 'react-native'; import {withSafeAreaInsets} from 'react-native-safe-area-context'; import SignInGradient from '@assets/images/home-fade-gradient.svg'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; import usePrevious from '@hooks/usePrevious'; import compose from '@libs/compose'; import SignInPageHero from '@pages/signin/SignInPageHero'; @@ -39,7 +38,7 @@ const propTypes = { innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), /** Whether or not the sign in page is being rendered in the RHP modal */ - isInModal: PropTypes.bool, + shouldShowSmallScreen: PropTypes.bool, /** Override the green headline copy */ customHeadline: PropTypes.string, @@ -47,13 +46,12 @@ const propTypes = { /** Override the smaller hero body copy below the headline */ customHeroBody: PropTypes.string, - ...windowDimensionsPropTypes, ...withLocalizePropTypes, }; const defaultProps = { innerRef: () => {}, - isInModal: false, + shouldShowSmallScreen: false, customHeadline: '', customHeroBody: '', }; @@ -63,12 +61,11 @@ function SignInPageLayout(props) { const prevPreferredLocale = usePrevious(props.preferredLocale); let containerStyles = [styles.flex1, styles.signInPageInner]; let contentContainerStyles = [styles.flex1, styles.flexRow]; - const shouldShowSmallScreen = props.isSmallScreenWidth || props.isInModal; // To scroll on both mobile and web, we need to set the container height manually const containerHeight = props.windowHeight - props.insets.top - props.insets.bottom; - if (shouldShowSmallScreen) { + if (props.shouldShowSmallScreen) { containerStyles = [styles.flex1]; contentContainerStyles = [styles.flex1, styles.flexColumn]; } @@ -94,7 +91,7 @@ function SignInPageLayout(props) { return ( - {!shouldShowSmallScreen ? ( + {!props.shouldShowSmallScreen ? ( {props.children} @@ -165,6 +163,7 @@ function SignInPageLayout(props) { welcomeText={props.welcomeText} shouldShowWelcomeText={props.shouldShowWelcomeText} shouldShowWelcomeHeader={props.shouldShowWelcomeHeader} + shouldShowSmallScreen={props.shouldShowSmallScreen} > {props.children} @@ -195,4 +194,4 @@ const SignInPageLayoutWithRef = forwardRef((props, ref) => ( SignInPageLayoutWithRef.displayName = 'SignInPageLayoutWithRef'; -export default compose(withWindowDimensions, withSafeAreaInsets, withLocalize)(SignInPageLayoutWithRef); +export default compose(withSafeAreaInsets, withLocalize)(SignInPageLayoutWithRef); From aedebbea7891388e4954641a8e162e2b1fff3f59 Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 13 Nov 2023 10:55:52 +0700 Subject: [PATCH 2/3] add shouldShowSmallScreen --- src/pages/signin/SignInHeroImage.js | 10 +++++++++- src/pages/signin/SignInPageLayout/SignInPageContent.js | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/pages/signin/SignInHeroImage.js b/src/pages/signin/SignInHeroImage.js index b905d62195d8..3bcf84bedef5 100644 --- a/src/pages/signin/SignInHeroImage.js +++ b/src/pages/signin/SignInHeroImage.js @@ -1,3 +1,4 @@ +import PropTypes from 'prop-types'; import React from 'react'; import Lottie from '@components/Lottie'; import LottieAnimations from '@components/LottieAnimations'; @@ -7,11 +8,17 @@ import variables from '@styles/variables'; const propTypes = { ...windowDimensionsPropTypes, + + shouldShowSmallScreen: PropTypes.bool, +}; + +const defaultProps = { + shouldShowSmallScreen: false, }; function SignInHeroImage(props) { let imageSize; - if (props.isSmallScreenWidth) { + if (props.isSmallScreenWidth || props.shouldShowSmallScreen) { imageSize = { height: variables.signInHeroImageMobileHeight, width: variables.signInHeroImageMobileWidth, @@ -41,5 +48,6 @@ function SignInHeroImage(props) { SignInHeroImage.displayName = 'SignInHeroImage'; SignInHeroImage.propTypes = propTypes; +SignInHeroImage.defaultProps = defaultProps; export default withWindowDimensions(SignInHeroImage); diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 91e83da4a388..9f4ffe62e913 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -77,7 +77,7 @@ function SignInPageContent(props) { {props.shouldShowSmallScreen ? ( - + ) : null} From d489f94ecf3079ce9eba114fcf18dcfc35805d22 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 16 Nov 2023 16:18:15 +0700 Subject: [PATCH 3/3] add windowHeight --- src/pages/signin/SignInPageLayout/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js index b887dc114c06..49e5824bd94c 100644 --- a/src/pages/signin/SignInPageLayout/index.js +++ b/src/pages/signin/SignInPageLayout/index.js @@ -5,6 +5,7 @@ import {withSafeAreaInsets} from 'react-native-safe-area-context'; import SignInGradient from '@assets/images/home-fade-gradient.svg'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import usePrevious from '@hooks/usePrevious'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import compose from '@libs/compose'; import SignInPageHero from '@pages/signin/SignInPageHero'; import styles from '@styles/styles'; @@ -61,9 +62,10 @@ function SignInPageLayout(props) { const prevPreferredLocale = usePrevious(props.preferredLocale); let containerStyles = [styles.flex1, styles.signInPageInner]; let contentContainerStyles = [styles.flex1, styles.flexRow]; + const {windowHeight} = useWindowDimensions(); // To scroll on both mobile and web, we need to set the container height manually - const containerHeight = props.windowHeight - props.insets.top - props.insets.bottom; + const containerHeight = windowHeight - props.insets.top - props.insets.bottom; if (props.shouldShowSmallScreen) { containerStyles = [styles.flex1];