From 7a3df0263c74505c1676a0ab1190bbfe862b896a Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 17 Nov 2022 14:09:18 -0700 Subject: [PATCH 01/21] Improve layout by switching it to flex --- .../SignInPageLayout/SignInPageContent.js | 151 +++++++++++------- src/styles/styles.js | 4 +- src/styles/utilities/flex.js | 4 + 3 files changed, 103 insertions(+), 56 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index f90778d203d8..cda76babf025 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -31,71 +31,114 @@ const propTypes = { }; const SignInPageContent = props => ( - - - + + - - - - - - {props.shouldShowWelcomeText && ( - - {props.welcomeText} - - )} - {props.children} - - - - + - + {props.shouldShowWelcomeText && ( + + {props.welcomeText} + + )} + {props.children} + + + + - + ); +// const SignInPageContent = props => ( +// +// +// +// +// +// +// +// +// +// +// +// +// {props.shouldShowWelcomeText && ( +// +// {props.welcomeText} +// +// )} +// {props.children} +// +// +// +// +// +// +// +// +// +// ); + SignInPageContent.propTypes = propTypes; SignInPageContent.displayName = 'SignInPageContent'; diff --git a/src/styles/styles.js b/src/styles/styles.js index 3e961ef7c659..799c9d53cc1c 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -930,7 +930,7 @@ const styles = { }, signInPageNarrowContentContainer: { - maxWidth: 335, + maxWidth: 395, }, signInPageNarrowContentMargin: { @@ -943,7 +943,7 @@ const styles = { }, signInPageWideLeftContentMargin: { - marginTop: '44.5%', + marginTop: '44.5%', // 173px }, signInPageWideHeroContent: { diff --git a/src/styles/utilities/flex.js b/src/styles/utilities/flex.js index 22acb5cba4ff..bdba4238a2fc 100644 --- a/src/styles/utilities/flex.js +++ b/src/styles/utilities/flex.js @@ -108,6 +108,10 @@ export default { flexGrow: 1, }, + flexGrow2: { + flexGrow: 2, + }, + flexGrow4: { flexGrow: 4, }, From b0cddae615d5f1aa6ba80de37396533c55cc6fde Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 17 Nov 2022 14:35:55 -0700 Subject: [PATCH 02/21] A few tweaks to the layout for different screen widths --- .../signin/SignInPageLayout/SignInPageContent.js | 13 ++++++++++--- src/styles/styles.js | 2 +- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index cda76babf025..46278260f425 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -34,11 +34,18 @@ const SignInPageContent = props => ( - - + + Date: Thu, 17 Nov 2022 14:39:38 -0700 Subject: [PATCH 03/21] Remove some of the old code --- .../SignInPageLayout/SignInPageContent.js | 73 +------------------ 1 file changed, 1 insertion(+), 72 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 46278260f425..38433d79e61c 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -47,6 +47,7 @@ const SignInPageContent = props => ( ]} > @@ -74,78 +75,6 @@ const SignInPageContent = props => ( ); -// const SignInPageContent = props => ( -// -// -// -// -// -// -// -// -// -// -// -// -// {props.shouldShowWelcomeText && ( -// -// {props.welcomeText} -// -// )} -// {props.children} -// -// -// -// -// -// -// -// -// -// ); - SignInPageContent.propTypes = propTypes; SignInPageContent.displayName = 'SignInPageContent'; From a8e082a5b3c4db1f4b45cbac434817c7a42eb652 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 17 Nov 2022 14:45:20 -0700 Subject: [PATCH 04/21] Remove unused code --- src/pages/signin/SignInPageLayout/SignInPageContent.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 38433d79e61c..178cc13690af 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -1,5 +1,5 @@ import React from 'react'; -import {ScrollView, View, KeyboardAvoidingView} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import {withSafeAreaInsets} from 'react-native-safe-area-context'; import styles from '../../../styles/styles'; @@ -10,10 +10,8 @@ import TermsAndLicenses from '../TermsAndLicenses'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import SignInPageForm from '../../../components/SignInPageForm'; import compose from '../../../libs/compose'; -import scrollViewContentContainerStyles from './signInPageStyles'; import withKeyboardState from '../../../components/withKeyboardState'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; -import * as StyleUtils from '../../../styles/StyleUtils'; const propTypes = { /** The children to show inside the layout */ @@ -81,8 +79,5 @@ SignInPageContent.displayName = 'SignInPageContent'; export default compose( withWindowDimensions, withLocalize, - - // KeyboardState HOC is needed to trigger recalculation of the UI when keyboard opens or closes - withKeyboardState, withSafeAreaInsets, )(SignInPageContent); From f956443aaecc758878ac8f8ce9b4f57e106ff9a6 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 17 Nov 2022 16:04:06 -0700 Subject: [PATCH 05/21] Remove unused code and styles --- .../SignInPageLayout/SignInPageContent.js | 20 +++++---- src/styles/styles.js | 45 +------------------ 2 files changed, 13 insertions(+), 52 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 178cc13690af..454c19451535 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -10,7 +10,6 @@ import TermsAndLicenses from '../TermsAndLicenses'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import SignInPageForm from '../../../components/SignInPageForm'; import compose from '../../../libs/compose'; -import withKeyboardState from '../../../components/withKeyboardState'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; const propTypes = { @@ -32,26 +31,29 @@ const SignInPageContent = props => ( - + {/* 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 */} + + ( {props.children} - + diff --git a/src/styles/styles.js b/src/styles/styles.js index 14d12fd38555..f0a827315f29 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -894,11 +894,6 @@ const styles = { flex: 1, }, - signInPageLogo: { - height: variables.componentSizeLarge, - marginBottom: 24, - }, - signInPageInner: { marginLeft: 'auto', marginRight: 'auto', @@ -906,50 +901,14 @@ const styles = { width: '100%', }, - signInPageInnerNative: { - width: '100%', - }, - - signInPageHeroHeading: { - fontFamily: fontFamily.GTA, - fontWeight: fontWeightBold, - fontSize: variables.fontSizeHero, - color: themeColors.appBG, - lineHeight: variables.lineHeightHero, - }, - - signInPageHeroDescription: { - fontFamily: fontFamily.GTA, - fontSize: variables.fontSizeNormal, - color: themeColors.appBG, - }, - - signInPageFormContainer: { - maxWidth: 295, - width: '100%', - }, - - signInPageNarrowContentContainer: { - maxWidth: 375, - }, - - signInPageNarrowContentMargin: { - marginTop: '40%', + signInPageContentTopSpacer: { + maxHeight: 132, }, signInPageWideLeftContainer: { - width: 375, maxWidth: 375, }, - signInPageWideLeftContentMargin: { - marginTop: '44.5%', // 173px - }, - - signInPageWideHeroContent: { - maxWidth: 400, - }, - changeExpensifyLoginLinkContainer: { flexDirection: 'row', flexWrap: 'wrap', From b090f0c714c6ec506c6162ebb271491fee9972e9 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 17 Nov 2022 16:05:03 -0700 Subject: [PATCH 06/21] Allow styles to be spread --- src/pages/signin/SignInPageLayout/SignInPageContent.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 454c19451535..8535a8dbc5b6 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -53,7 +53,7 @@ const SignInPageContent = props => ( > Date: Thu, 17 Nov 2022 16:13:52 -0700 Subject: [PATCH 07/21] Leave a WIP marker --- src/pages/signin/SignInPageLayout/SignInPageContent.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 8535a8dbc5b6..bd0816b8dd47 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -31,6 +31,8 @@ const SignInPageContent = props => ( Date: Fri, 18 Nov 2022 07:47:24 -0700 Subject: [PATCH 08/21] Move styles to the style files --- src/pages/signin/SignInPageLayout/SignInPageContent.js | 4 +--- src/styles/styles.js | 5 +++++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index bd0816b8dd47..6ce23a87be68 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -31,9 +31,7 @@ const SignInPageContent = props => ( Date: Fri, 18 Nov 2022 09:44:57 -0700 Subject: [PATCH 09/21] Remove flex style from form button because it makes the height of the login form span the full vertical height of the page --- src/components/FormAlertWithSubmitButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js index 3fbb5ac607b7..a2995e4d8024 100644 --- a/src/components/FormAlertWithSubmitButton.js +++ b/src/components/FormAlertWithSubmitButton.js @@ -49,7 +49,7 @@ const defaultProps = { const FormAlertWithSubmitButton = props => ( Date: Fri, 18 Nov 2022 13:41:49 -0700 Subject: [PATCH 10/21] Allow keyboard to be dismissed --- .../SignInPageLayout/SignInPageContent.js | 74 +++++++++++-------- 1 file changed, 42 insertions(+), 32 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 6ce23a87be68..c429a462dbd7 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View} from 'react-native'; +import {KeyboardAvoidingView, ScrollView, View} from 'react-native'; import PropTypes from 'prop-types'; import {withSafeAreaInsets} from 'react-native-safe-area-context'; import styles from '../../../styles/styles'; @@ -11,6 +11,7 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal import SignInPageForm from '../../../components/SignInPageForm'; import compose from '../../../libs/compose'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; +import scrollViewContentContainerStyles from './signInPageStyles'; const propTypes = { /** The children to show inside the layout */ @@ -37,41 +38,50 @@ const SignInPageContent = props => ( !props.isMediumScreenWidth && !props.isSmallScreenWidth && styles.signInPageWideLeftContainer, ]} > - {/* 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 */} - - - - + + - - - - {props.shouldShowWelcomeText && ( - - {props.welcomeText} - - )} - {props.children} - - - - - + + + + {props.shouldShowWelcomeText && ( + + {props.welcomeText} + + )} + {props.children} + + + + + + + ); From 7022f1a1ff83d69590f4726daa33c94035ea875b Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Fri, 18 Nov 2022 14:12:52 -0700 Subject: [PATCH 11/21] Remove unused import --- src/pages/signin/SignInPageLayout/SignInPageContent.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index c429a462dbd7..bee15395ea30 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -1,5 +1,5 @@ import React from 'react'; -import {KeyboardAvoidingView, ScrollView, View} from 'react-native'; +import {ScrollView, View} from 'react-native'; import PropTypes from 'prop-types'; import {withSafeAreaInsets} from 'react-native-safe-area-context'; import styles from '../../../styles/styles'; From 012b56142cd10dd361fb55d311831f233ba4ae36 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 21 Nov 2022 10:55:39 -0700 Subject: [PATCH 12/21] Fix typo in the prop name --- src/pages/signin/SignInPageLayout/SignInPageContent.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index bee15395ea30..7a6994c26353 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -42,7 +42,7 @@ const SignInPageContent = props => ( style={[styles.h100]} contentContainerStyle={[scrollViewContentContainerStyles]} keyboardShouldPersistTaps="handled" - howsVerticalScrollIndicator={false} + showsVerticalScrollIndicator={false} > {/* 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 */} From 8e5f142a5f51e4d9d19819e2dfb1cea3dd0172dd Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 22 Nov 2022 09:25:01 -0700 Subject: [PATCH 13/21] Remove scrollview --- .../SignInPageLayout/SignInPageContent.js | 74 ++++++++----------- 1 file changed, 32 insertions(+), 42 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 7a6994c26353..6ce23a87be68 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -1,5 +1,5 @@ import React from 'react'; -import {ScrollView, View} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import {withSafeAreaInsets} from 'react-native-safe-area-context'; import styles from '../../../styles/styles'; @@ -11,7 +11,6 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal import SignInPageForm from '../../../components/SignInPageForm'; import compose from '../../../libs/compose'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; -import scrollViewContentContainerStyles from './signInPageStyles'; const propTypes = { /** The children to show inside the layout */ @@ -38,50 +37,41 @@ const SignInPageContent = props => ( !props.isMediumScreenWidth && !props.isSmallScreenWidth && styles.signInPageWideLeftContainer, ]} > - - - {/* 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 */} - + {/* 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 */} + - + - - - - - {props.shouldShowWelcomeText && ( - - {props.welcomeText} - - )} - {props.children} - - - - - - - + + + {props.shouldShowWelcomeText && ( + + {props.welcomeText} + + )} + {props.children} + + + + + ); From eb3833f36c2f3a3fbbdffb5e17695f03bec4065d Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 22 Nov 2022 09:42:42 -0700 Subject: [PATCH 14/21] Fix a wonky flex layout which makes the success message take up the entire screen --- src/pages/signin/ResendValidationForm.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js index 4c52df0121a0..8854905a47e8 100755 --- a/src/pages/signin/ResendValidationForm.js +++ b/src/pages/signin/ResendValidationForm.js @@ -73,7 +73,7 @@ const ResendValidationForm = (props) => { {!_.isEmpty(props.account.message) && ( // DotIndicatorMessage mostly expects onyxData errors so we need to mock an object so that the messages looks similar to prop.account.errors - + )} {!_.isEmpty(props.account.errors) && ( From 8ddf21e760bafb0db714beab29abb38ec08df609 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 22 Nov 2022 09:53:14 -0700 Subject: [PATCH 15/21] Dismiss keyboard when tapping outside of the inputs --- .../SignInPageLayout/SignInPageContent.js | 101 ++++++++++-------- 1 file changed, 58 insertions(+), 43 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 6ce23a87be68..466be16823c3 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View} from 'react-native'; +import {TouchableWithoutFeedback, View, Keyboard} from 'react-native'; import PropTypes from 'prop-types'; import {withSafeAreaInsets} from 'react-native-safe-area-context'; import styles from '../../../styles/styles'; @@ -11,6 +11,7 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal import SignInPageForm from '../../../components/SignInPageForm'; import compose from '../../../libs/compose'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; +import withKeyboardState, {withKeyboardStatePropTypes} from '../../../components/withKeyboardState'; const propTypes = { /** The children to show inside the layout */ @@ -25,55 +26,68 @@ const propTypes = { ...withLocalizePropTypes, ...windowDimensionsPropTypes, + ...withKeyboardStatePropTypes, }; -const SignInPageContent = props => ( - { + const dismissKeyboardWhenTappedOutsideOfInput = () => { + // This prop comes from with + if (!props.isShown) { + return; + } + Keyboard.dismiss(); + }; - // Restrict the width if the left container only for large screens. For smaller screens, the width needs to be fluid to span the entire width of the page. - !props.isMediumScreenWidth && !props.isSmallScreenWidth && styles.signInPageWideLeftContainer, - ]} - > - {/* 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 */} - + 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 */} + + + - + + + + + {props.shouldShowWelcomeText && ( + + {props.welcomeText} + + )} + {props.children} + - {props.shouldShowWelcomeText && ( - - {props.welcomeText} - - )} - {props.children} - - - - - - -); + + + + + + ); +}; SignInPageContent.propTypes = propTypes; SignInPageContent.displayName = 'SignInPageContent'; @@ -82,4 +96,5 @@ export default compose( withWindowDimensions, withLocalize, withSafeAreaInsets, + withKeyboardState, )(SignInPageContent); From 611bee89ad2a2696f6ae4999ecb7b8910699826a Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 22 Nov 2022 09:53:56 -0700 Subject: [PATCH 16/21] Improve the padding around the input form --- src/styles/styles.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 7612387790f7..5eb583e079c3 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -906,8 +906,8 @@ const styles = { }, signInPageLeftContainer: { - paddingLeft: 52, - paddingRight: 52, + paddingLeft: 40, + paddingRight: 40, }, signInPageWideLeftContainer: { From 8cd5c1c38186b90ec40cbfae89ec18685917911a Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 22 Nov 2022 10:19:50 -0700 Subject: [PATCH 17/21] Fix how the reviewer checklist is found in GH action --- .github/actions/javascript/reviewerChecklist/index.js | 2 +- .../actions/javascript/reviewerChecklist/reviewerChecklist.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/actions/javascript/reviewerChecklist/index.js b/.github/actions/javascript/reviewerChecklist/index.js index a594fa69d1a1..962c12a13ac1 100644 --- a/.github/actions/javascript/reviewerChecklist/index.js +++ b/.github/actions/javascript/reviewerChecklist/index.js @@ -66,7 +66,7 @@ function checkIssueForCompletedChecklist(numberOfChecklistItems) { for (let i = 0; i < combinedComments.length; i++) { // Skip all other comments if we already found the reviewer checklist if (foundReviewerChecklist) { - return; + break; } const whitespace = /([\n\r])/gm; diff --git a/.github/actions/javascript/reviewerChecklist/reviewerChecklist.js b/.github/actions/javascript/reviewerChecklist/reviewerChecklist.js index 7fb27e5b5a5a..1f942ce66fd6 100644 --- a/.github/actions/javascript/reviewerChecklist/reviewerChecklist.js +++ b/.github/actions/javascript/reviewerChecklist/reviewerChecklist.js @@ -56,7 +56,7 @@ function checkIssueForCompletedChecklist(numberOfChecklistItems) { for (let i = 0; i < combinedComments.length; i++) { // Skip all other comments if we already found the reviewer checklist if (foundReviewerChecklist) { - return; + break; } const whitespace = /([\n\r])/gm; From daa51ec870a1a37058a920a9e220f5bb429a8de0 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 22 Nov 2022 10:26:07 -0700 Subject: [PATCH 18/21] Remove line break that causes bad formatting of checklist --- .github/PULL_REQUEST_TEMPLATE.md | 1 - 1 file changed, 1 deletion(-) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 0dd10af71747..a3e062b0a988 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -68,7 +68,6 @@ This is a checklist for PR authors. Please make sure to complete all tasks and c - [ ] I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct) - [ ] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline) - [ ] I tested this PR with a [High Traffic account](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#high-traffic-accounts) against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability). - - [ ] I included screenshots or videos for tests on [all platforms](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#make-sure-you-can-test-on-all-platforms) - [ ] I ran the tests on **all platforms** & verified they passed on: - [ ] iOS / native From 5fdd0b6fef03caf2281d9a4edc2f47c3a6509c77 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 22 Nov 2022 10:27:56 -0700 Subject: [PATCH 19/21] Update PR template to have collapsable sections for screenshots by default --- .github/PULL_REQUEST_TEMPLATE.md | 50 +++++++++++++++++++++++--------- 1 file changed, 36 insertions(+), 14 deletions(-) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index a3e062b0a988..d7e35bb5894d 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -166,23 +166,45 @@ The reviewer will copy/paste it into a new comment and complete it after the aut -### Screenshots - +### Screenshots/Videos +
+Web + + + +
+ +
+Mobile Web - Chrome -#### Web - + -#### Mobile Web - Chrome - +
+ +
+Mobile Web - Safari -#### Mobile Web - Safari - + -#### Desktop - +
+ +
+Desktop -#### iOS - + -#### Android - +
+ +
+iOS + + + +
+ +
+Android + + + +
From 70d39cdfa23afba96f88ed9dcfa7c3f00c53fb74 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 22 Nov 2022 10:31:55 -0700 Subject: [PATCH 20/21] Revert changes from bad branch --- ios/NewExpensify.xcodeproj/project.pbxproj | 2 - src/components/FormAlertWithSubmitButton.js | 2 +- src/pages/signin/ResendValidationForm.js | 2 +- .../SignInPageLayout/SignInPageContent.js | 87 ++++++++++--------- src/styles/styles.js | 46 ++++++++-- src/styles/utilities/flex.js | 4 - 6 files changed, 91 insertions(+), 52 deletions(-) diff --git a/ios/NewExpensify.xcodeproj/project.pbxproj b/ios/NewExpensify.xcodeproj/project.pbxproj index 66c206b31b06..953179f1e1f8 100644 --- a/ios/NewExpensify.xcodeproj/project.pbxproj +++ b/ios/NewExpensify.xcodeproj/project.pbxproj @@ -791,7 +791,6 @@ ); MTL_ENABLE_DEBUG_INFO = YES; ONLY_ACTIVE_ARCH = YES; - REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; SDKROOT = iphoneos; }; name = Debug; @@ -845,7 +844,6 @@ "\"$(inherited)\"", ); MTL_ENABLE_DEBUG_INFO = NO; - REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; SDKROOT = iphoneos; VALIDATE_PRODUCT = YES; }; diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js index fdace1fcc40f..f611a18e16ef 100644 --- a/src/components/FormAlertWithSubmitButton.js +++ b/src/components/FormAlertWithSubmitButton.js @@ -53,7 +53,7 @@ const defaultProps = { const FormAlertWithSubmitButton = props => ( { {!_.isEmpty(props.account.message) && ( // DotIndicatorMessage mostly expects onyxData errors so we need to mock an object so that the messages looks similar to prop.account.errors - + )} {!_.isEmpty(props.account.errors) && ( diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 466be16823c3..f90778d203d8 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -1,5 +1,5 @@ import React from 'react'; -import {TouchableWithoutFeedback, View, Keyboard} from 'react-native'; +import {ScrollView, View, KeyboardAvoidingView} from 'react-native'; import PropTypes from 'prop-types'; import {withSafeAreaInsets} from 'react-native-safe-area-context'; import styles from '../../../styles/styles'; @@ -10,8 +10,10 @@ import TermsAndLicenses from '../TermsAndLicenses'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import SignInPageForm from '../../../components/SignInPageForm'; import compose from '../../../libs/compose'; +import scrollViewContentContainerStyles from './signInPageStyles'; +import withKeyboardState from '../../../components/withKeyboardState'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; -import withKeyboardState, {withKeyboardStatePropTypes} from '../../../components/withKeyboardState'; +import * as StyleUtils from '../../../styles/StyleUtils'; const propTypes = { /** The children to show inside the layout */ @@ -26,42 +28,47 @@ const propTypes = { ...withLocalizePropTypes, ...windowDimensionsPropTypes, - ...withKeyboardStatePropTypes, }; -const SignInPageContent = (props) => { - const dismissKeyboardWhenTappedOutsideOfInput = () => { - // This prop comes from with - if (!props.isShown) { - return; - } - Keyboard.dismiss(); - }; - - 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 */} - - - - { )} {props.children} - - + + - - ); -}; + + +); SignInPageContent.propTypes = propTypes; SignInPageContent.displayName = 'SignInPageContent'; @@ -95,6 +102,8 @@ SignInPageContent.displayName = 'SignInPageContent'; export default compose( withWindowDimensions, withLocalize, - withSafeAreaInsets, + + // KeyboardState HOC is needed to trigger recalculation of the UI when keyboard opens or closes withKeyboardState, + withSafeAreaInsets, )(SignInPageContent); diff --git a/src/styles/styles.js b/src/styles/styles.js index c54efb37e9c2..7adc9d975c17 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -894,6 +894,11 @@ const styles = { flex: 1, }, + signInPageLogo: { + height: variables.componentSizeLarge, + marginBottom: 24, + }, + signInPageInner: { marginLeft: 'auto', marginRight: 'auto', @@ -901,19 +906,50 @@ const styles = { width: '100%', }, - signInPageContentTopSpacer: { - maxHeight: 132, + signInPageInnerNative: { + width: '100%', }, - signInPageLeftContainer: { - paddingLeft: 40, - paddingRight: 40, + signInPageHeroHeading: { + fontFamily: fontFamily.GTA, + fontWeight: fontWeightBold, + fontSize: variables.fontSizeHero, + color: themeColors.appBG, + lineHeight: variables.lineHeightHero, + }, + + signInPageHeroDescription: { + fontFamily: fontFamily.GTA, + fontSize: variables.fontSizeNormal, + color: themeColors.appBG, + }, + + signInPageFormContainer: { + maxWidth: 295, + width: '100%', + }, + + signInPageNarrowContentContainer: { + maxWidth: 335, + }, + + signInPageNarrowContentMargin: { + marginTop: '40%', }, signInPageWideLeftContainer: { + width: 375, maxWidth: 375, }, + signInPageWideLeftContentMargin: { + marginTop: '44.5%', + }, + + signInPageWideHeroContent: { + maxWidth: 400, + }, + changeExpensifyLoginLinkContainer: { flexDirection: 'row', flexWrap: 'wrap', diff --git a/src/styles/utilities/flex.js b/src/styles/utilities/flex.js index bdba4238a2fc..22acb5cba4ff 100644 --- a/src/styles/utilities/flex.js +++ b/src/styles/utilities/flex.js @@ -108,10 +108,6 @@ export default { flexGrow: 1, }, - flexGrow2: { - flexGrow: 2, - }, - flexGrow4: { flexGrow: 4, }, From 0093d7d5a13802686b8fea27f5e9f334cc0aeea0 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 22 Nov 2022 10:32:24 -0700 Subject: [PATCH 21/21] Revert changes from bad branch --- ios/NewExpensify.xcodeproj/project.pbxproj | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ios/NewExpensify.xcodeproj/project.pbxproj b/ios/NewExpensify.xcodeproj/project.pbxproj index 953179f1e1f8..66c206b31b06 100644 --- a/ios/NewExpensify.xcodeproj/project.pbxproj +++ b/ios/NewExpensify.xcodeproj/project.pbxproj @@ -791,6 +791,7 @@ ); MTL_ENABLE_DEBUG_INFO = YES; ONLY_ACTIVE_ARCH = YES; + REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; SDKROOT = iphoneos; }; name = Debug; @@ -844,6 +845,7 @@ "\"$(inherited)\"", ); MTL_ENABLE_DEBUG_INFO = NO; + REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; SDKROOT = iphoneos; VALIDATE_PRODUCT = YES; };