From 33f9703383149e292a54c5c4b558c6ccfea8ca0a Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 22 Nov 2022 12:42:42 -0700 Subject: [PATCH 01/13] Refactor to include isLargeScreenWidth --- src/components/withWindowDimensions.js | 7 +++++++ src/pages/signin/SignInPageLayout/SignInPageContent.js | 6 +++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/withWindowDimensions.js b/src/components/withWindowDimensions.js index 3cb1b0310734..d39da4b0316d 100644 --- a/src/components/withWindowDimensions.js +++ b/src/components/withWindowDimensions.js @@ -18,6 +18,9 @@ const windowDimensionsPropTypes = { // Is the window width narrow, like on a tablet device? isMediumScreenWidth: PropTypes.bool.isRequired, + + // Is the window width wide, like on a browser or desktop? + isLargeScreenWidth: PropTypes.bool.isRequired, }; const windowDimensionsProviderPropTypes = { @@ -35,6 +38,7 @@ class WindowDimensionsProvider extends React.Component { const isSmallScreenWidth = initialDimensions.width <= variables.mobileResponsiveWidthBreakpoint; const isMediumScreenWidth = initialDimensions.width > variables.mobileResponsiveWidthBreakpoint && initialDimensions.width <= variables.tabletResponsiveWidthBreakpoint; + const isLargeScreenWidth = !isMediumScreenWidth && !isMediumScreenWidth; this.dimensionsEventListener = null; @@ -43,6 +47,7 @@ class WindowDimensionsProvider extends React.Component { windowWidth: initialDimensions.width, isSmallScreenWidth, isMediumScreenWidth, + isLargeScreenWidth, }; } @@ -67,11 +72,13 @@ class WindowDimensionsProvider extends React.Component { const {window} = newDimensions; const isSmallScreenWidth = window.width <= variables.mobileResponsiveWidthBreakpoint; const isMediumScreenWidth = !isSmallScreenWidth && window.width <= variables.tabletResponsiveWidthBreakpoint; + const isLargeScreenWidth = !isSmallScreenWidth && !isMediumScreenWidth; this.setState({ windowHeight: window.height, windowWidth: window.width, isSmallScreenWidth, isMediumScreenWidth, + isLargeScreenWidth, }); } diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 466be16823c3..ae081144012f 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -31,7 +31,7 @@ const propTypes = { const SignInPageContent = (props) => { const dismissKeyboardWhenTappedOutsideOfInput = () => { - // This prop comes from with + // This prop comes from withKeyboardState if (!props.isShown) { return; } @@ -45,8 +45,8 @@ const SignInPageContent = (props) => { styles.flex1, styles.signInPageLeftContainer, - // 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, + // Restrict the width of 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.isLargeScreenWidth && 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 */} From 1aaafa7bcc18b7bb39fb82f9ffcd0d1abf7da0c6 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 22 Nov 2022 12:46:46 -0700 Subject: [PATCH 02/13] Restrict the height of the spacer --- src/styles/styles.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/styles.js b/src/styles/styles.js index c54efb37e9c2..444aa465934b 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -903,6 +903,7 @@ const styles = { signInPageContentTopSpacer: { maxHeight: 132, + minHeight: 24, }, signInPageLeftContainer: { From 85a4fc5999cc2eabf10f7bd86db47ebb85e3aa2f Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 22 Nov 2022 16:02:16 -0700 Subject: [PATCH 03/13] Make terms have a minimum width like the form --- src/pages/signin/SignInPageLayout/SignInPageContent.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index ae081144012f..4c9cfd244f60 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -52,13 +52,7 @@ 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} - + From a17a2672c1c9ee1fc80881ab11fa32112ea26e35 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 28 Nov 2022 14:45:33 -0700 Subject: [PATCH 04/13] Fix conflicts from theme work --- .../SignInPageLayout/SignInPageContent.js | 20 +++++---- src/styles/styles.js | 42 ++----------------- src/styles/utilities/flex.js | 4 ++ 3 files changed, 19 insertions(+), 47 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index f0b426612d9d..66926132c1e6 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, TouchableWithoutFeedback, Keyboard} 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 */ @@ -53,7 +51,13 @@ 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} - + - - -); + + ); +}; SignInPageContent.propTypes = propTypes; SignInPageContent.displayName = 'SignInPageContent'; diff --git a/src/styles/styles.js b/src/styles/styles.js index c54517794e89..43b96e63398b 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -893,11 +893,6 @@ const styles = { flex: 1, }, - signInPageLogo: { - height: variables.componentSizeLarge, - marginBottom: 24, - }, - signInPageInner: { marginLeft: 'auto', marginRight: 'auto', @@ -910,44 +905,13 @@ const styles = { minHeight: 24, }, - 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, + signInPageLeftContainer: { + paddingLeft: 40, + paddingRight: 40, }, changeExpensifyLoginLinkContainer: { 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 17e8d3166fe0ff3e6f3eeb53bfbcb2c5ca6a865a Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 28 Nov 2022 15:27:28 -0700 Subject: [PATCH 05/13] Get layout working on web and android --- src/components/FormAlertWithSubmitButton.js | 2 +- src/components/withWindowDimensions.js | 2 +- src/pages/signin/ResendValidationForm.js | 2 +- .../signin/SignInPageLayout/SignInPageContent.js | 11 ++++------- src/styles/styles.js | 2 +- 5 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js index f611a18e16ef..fdace1fcc40f 100644 --- a/src/components/FormAlertWithSubmitButton.js +++ b/src/components/FormAlertWithSubmitButton.js @@ -53,7 +53,7 @@ const defaultProps = { const FormAlertWithSubmitButton = props => ( variables.mobileResponsiveWidthBreakpoint && initialDimensions.width <= variables.tabletResponsiveWidthBreakpoint; - const isLargeScreenWidth = !isMediumScreenWidth && !isMediumScreenWidth; + const isLargeScreenWidth = !isSmallScreenWidth && !isMediumScreenWidth; this.dimensionsEventListener = null; 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) && ( diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 66926132c1e6..5b750b191ba7 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -45,7 +45,7 @@ const SignInPageContent = (props) => { styles.signInPageLeftContainer, // Restrict the width of 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.isLargeScreenWidth && styles.signInPageWideLeftContainer, + props.isLargeScreenWidth && styles.signInPageLeftContainerLargeScreen, ]} > {/* 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,13 +55,10 @@ const SignInPageContent = (props) => { style={[ styles.flexGrow2, styles.alignSelfCenter, - styles.signInPageWideLeftContainer, + styles.signInPageLeftContainerLargeScreen, ]} > - + { {props.children} - + diff --git a/src/styles/styles.js b/src/styles/styles.js index 43b96e63398b..f88d28f90001 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -905,7 +905,7 @@ const styles = { minHeight: 24, }, - signInPageWideLeftContainer: { + signInPageLeftContainerLargeScreen: { maxWidth: 375, }, From 1bb4d4ba281079e925b46c781966cdb90136f5c1 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 28 Nov 2022 15:30:35 -0700 Subject: [PATCH 06/13] Remove medium screen layout --- src/pages/signin/SignInPageLayout/index.js | 10 +--------- src/styles/utilities/flex.js | 4 ---- src/styles/variables.js | 1 - 3 files changed, 1 insertion(+), 14 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js index 42fdd6de8ade..216a6a2bdf8b 100644 --- a/src/pages/signin/SignInPageLayout/index.js +++ b/src/pages/signin/SignInPageLayout/index.js @@ -25,21 +25,13 @@ const SignInPageLayout = (props) => { let containerStyles = [styles.flex1, styles.signInPageInner]; let contentContainerStyles = [styles.flex1, styles.flexRow]; - const isLongMediumScreenWidth = props.isMediumScreenWidth && props.windowHeight >= variables.minHeightToShowGraphics; - if (props.isSmallScreenWidth) { containerStyles = [styles.flex1]; contentContainerStyles = [styles.flex1]; - } else if (isLongMediumScreenWidth) { - containerStyles = [styles.dFlex, styles.signInPageInner, styles.flexColumnReverse, styles.justifyContentBetween]; - contentContainerStyles = [styles.flex1]; } return ( - {isLongMediumScreenWidth && ( - - )} { > {props.children} - {!props.isSmallScreenWidth && !isLongMediumScreenWidth && ( + {!props.isSmallScreenWidth && ( )} diff --git a/src/styles/utilities/flex.js b/src/styles/utilities/flex.js index bdba4238a2fc..4de3409948a4 100644 --- a/src/styles/utilities/flex.js +++ b/src/styles/utilities/flex.js @@ -36,10 +36,6 @@ export default { flexDirection: 'column', }, - flexColumnReverse: { - flexDirection: 'column-reverse', - }, - justifyContentCenter: { justifyContent: 'center', }, diff --git a/src/styles/variables.js b/src/styles/variables.js index 409c9be576f2..ef57ec32acd5 100644 --- a/src/styles/variables.js +++ b/src/styles/variables.js @@ -49,7 +49,6 @@ export default { tooltipzIndex: 10050, gutterWidth: 16, popoverMenuShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.06)', - minHeightToShowGraphics: 854, // Login form layout breaks below this height due to insufficient space to show the form and graphics optionRowHeight: 64, optionRowHeightCompact: 52, optionsListSectionHeaderHeight: 54, From 391fd42d4c20b352ea053230252c8cdbb8959417 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 28 Nov 2022 15:37:57 -0700 Subject: [PATCH 07/13] Remove medium screen styles --- src/pages/signin/SignInPageLayout/SignInPageContent.js | 4 ++-- src/pages/signin/SignInPageLayout/index.js | 1 - src/styles/styles.js | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 5b750b191ba7..175c7636bec5 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -45,7 +45,7 @@ const SignInPageContent = (props) => { styles.signInPageLeftContainer, // Restrict the width of 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.isLargeScreenWidth && styles.signInPageLeftContainerLargeScreen, + !props.isSmallScreenWidth && styles.signInPageLeftContainerMediumScreen, ]} > {/* 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 +55,7 @@ const SignInPageContent = (props) => { style={[ styles.flexGrow2, styles.alignSelfCenter, - styles.signInPageLeftContainerLargeScreen, + styles.signInPageLeftContainerMediumScreen, ]} > diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js index 216a6a2bdf8b..c165b336bb3d 100644 --- a/src/pages/signin/SignInPageLayout/index.js +++ b/src/pages/signin/SignInPageLayout/index.js @@ -4,7 +4,6 @@ import PropTypes from 'prop-types'; import SignInPageContent from './SignInPageContent'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; import styles from '../../../styles/styles'; -import variables from '../../../styles/variables'; import SignInPageGraphics from './SignInPageGraphics'; const propTypes = { diff --git a/src/styles/styles.js b/src/styles/styles.js index f88d28f90001..de2832c6f32c 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -905,7 +905,7 @@ const styles = { minHeight: 24, }, - signInPageLeftContainerLargeScreen: { + signInPageLeftContainerMediumScreen: { maxWidth: 375, }, From 19f654f9c06a961a0880089cdb9367c9fb1635f7 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Wed, 30 Nov 2022 06:38:47 -0700 Subject: [PATCH 08/13] Removed unused import --- src/pages/signin/SignInPageLayout/SignInPageContent.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 295823801c9f..175c7636bec5 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -4,7 +4,6 @@ import PropTypes from 'prop-types'; import {withSafeAreaInsets} from 'react-native-safe-area-context'; import styles from '../../../styles/styles'; import variables from '../../../styles/variables'; -import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView'; import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo'; import Text from '../../../components/Text'; import TermsAndLicenses from '../TermsAndLicenses'; From c351516a0a98b61d1f05fa359e9035f1cd95091b Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Wed, 30 Nov 2022 07:24:40 -0700 Subject: [PATCH 09/13] Make sure the padding is the same on the password form --- src/pages/signin/SignInPageLayout/SignInPageContent.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 175c7636bec5..491c8fcc0794 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -51,13 +51,7 @@ 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 */} - + Date: Wed, 30 Nov 2022 07:34:36 -0700 Subject: [PATCH 10/13] Add a little vertical mergin --- 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 491c8fcc0794..852d99a6c9fd 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -71,7 +71,7 @@ const SignInPageContent = (props) => { {props.children} - + From 8ffc298033e65b6d1fcf32bf10b934c0878603b9 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Wed, 30 Nov 2022 18:23:47 -0700 Subject: [PATCH 11/13] Keep the form a fixed width on small to medium screens --- src/pages/signin/SignInPageLayout/SignInPageContent.js | 4 +--- src/styles/styles.js | 4 +++- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 852d99a6c9fd..ee5c858eae84 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -43,9 +43,7 @@ const SignInPageContent = (props) => { style={[ styles.flex1, styles.signInPageLeftContainer, - - // Restrict the width of 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.isSmallScreenWidth && styles.signInPageLeftContainerMediumScreen, + styles.signInPageLeftContainerMediumScreen, ]} > {/* 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 */} diff --git a/src/styles/styles.js b/src/styles/styles.js index 6d6255ad419c..0c34ff1eb69c 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -906,7 +906,9 @@ const styles = { }, signInPageLeftContainerMediumScreen: { - maxWidth: 375, + maxWidth: 400, + marginLeft: 'auto', + marginRight: 'auto', }, signInPageLeftContainer: { From efd0738eed9d3af43f5fda2df9f5b0ed3322d900 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 1 Dec 2022 10:15:35 -0700 Subject: [PATCH 12/13] Center the form better and fix iphone SE --- .../SignInPageLayout/SignInPageContent.js | 54 ++++++++++--------- src/styles/styles.js | 18 ++++--- 2 files changed, 41 insertions(+), 31 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index ee5c858eae84..1206a0f01823 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -43,34 +43,38 @@ const SignInPageContent = (props) => { style={[ styles.flex1, styles.signInPageLeftContainer, - styles.signInPageLeftContainerMediumScreen, + !props.isSmallScreenWidth && styles.signInPageLeftContainerWide, ]} > - {/* 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} + + + + + diff --git a/src/styles/styles.js b/src/styles/styles.js index 0c34ff1eb69c..3ceb69b8acb7 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -905,17 +905,23 @@ const styles = { minHeight: 24, }, - signInPageLeftContainerMediumScreen: { - maxWidth: 400, - marginLeft: 'auto', - marginRight: 'auto', - }, - signInPageLeftContainer: { paddingLeft: 40, paddingRight: 40, }, + signInPageLeftContainerWide: { + maxWidth: 375, + }, + + signInPageWelcomeFormContainer: { + maxWidth: 400, + }, + + signInPageWelcomeTextContainer: { + width: 300, + }, + changeExpensifyLoginLinkContainer: { flexDirection: 'row', flexWrap: 'wrap', From 7208991eb65c619870ca7ce2a60522a4ab604ff2 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 1 Dec 2022 10:21:18 -0700 Subject: [PATCH 13/13] Always keep the form the same width --- 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 3ceb69b8acb7..eb733fad72d5 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -911,11 +911,11 @@ const styles = { }, signInPageLeftContainerWide: { - maxWidth: 375, + maxWidth: 360, }, signInPageWelcomeFormContainer: { - maxWidth: 400, + maxWidth: 300, }, signInPageWelcomeTextContainer: {