From 5c0eeae3524a3d24c979bd58210f93cb6ab5788e Mon Sep 17 00:00:00 2001 From: Klajdi Paja Date: Sat, 19 Oct 2024 14:52:41 +0200 Subject: [PATCH 1/4] add css class to the SignInPageLayout to apply sign-in only styles and apply web autofill input --- src/libs/DomUtils/index.ts | 38 ++++++++++----------- src/pages/signin/SignInPageLayout/index.tsx | 18 +++++++++- 2 files changed, 36 insertions(+), 20 deletions(-) diff --git a/src/libs/DomUtils/index.ts b/src/libs/DomUtils/index.ts index e6286dce77fc..99ebda35ede8 100644 --- a/src/libs/DomUtils/index.ts +++ b/src/libs/DomUtils/index.ts @@ -34,25 +34,25 @@ const addCSS = (css: string, styleId: string) => { * Chrome on iOS does not support the autofill pseudo class because it is a non-standard webkit feature. * We should rely on the chrome-autofilled property being added to the input when users use auto-fill */ -const getAutofilledInputStyle = (inputTextColor: string) => ` - input[chrome-autofilled], - input[chrome-autofilled]:hover, - input[chrome-autofilled]:focus, - textarea[chrome-autofilled], - textarea[chrome-autofilled]:hover, - textarea[chrome-autofilled]:focus, - select[chrome-autofilled], - select[chrome-autofilled]:hover, - select[chrome-autofilled]:focus, - input:-webkit-autofill, - input:-webkit-autofill:hover, - input:-webkit-autofill:focus, - textarea:-webkit-autofill, - textarea:-webkit-autofill:hover, - textarea:-webkit-autofill:focus, - select:-webkit-autofill, - select:-webkit-autofill:hover, - select:-webkit-autofill:focus { +const getAutofilledInputStyle = (inputTextColor: string, cssSelector = '') => ` + ${cssSelector} input[chrome-autofilled], + ${cssSelector} input[chrome-autofilled]:hover, + ${cssSelector} input[chrome-autofilled]:focus, + ${cssSelector} textarea[chrome-autofilled], + ${cssSelector} textarea[chrome-autofilled]:hover, + ${cssSelector} textarea[chrome-autofilled]:focus, + ${cssSelector} select[chrome-autofilled], + ${cssSelector} select[chrome-autofilled]:hover, + ${cssSelector} select[chrome-autofilled]:focus, + ${cssSelector} input:-webkit-autofill, + ${cssSelector} input:-webkit-autofill:hover, + ${cssSelector} input:-webkit-autofill:focus, + ${cssSelector} textarea:-webkit-autofill, + ${cssSelector} textarea:-webkit-autofill:hover, + ${cssSelector} textarea:-webkit-autofill:focus, + ${cssSelector} select:-webkit-autofill, + ${cssSelector} select:-webkit-autofill:hover, + ${cssSelector} select:-webkit-autofill:focus { -webkit-background-clip: text; -webkit-text-fill-color: ${inputTextColor}; caret-color: ${inputTextColor}; diff --git a/src/pages/signin/SignInPageLayout/index.tsx b/src/pages/signin/SignInPageLayout/index.tsx index f63801dd158a..e192b23ca983 100644 --- a/src/pages/signin/SignInPageLayout/index.tsx +++ b/src/pages/signin/SignInPageLayout/index.tsx @@ -2,7 +2,7 @@ import type {ForwardedRef} from 'react'; import React, {forwardRef, useEffect, useImperativeHandle, useMemo, useRef} from 'react'; // eslint-disable-next-line no-restricted-imports import type {ScrollView as RNScrollView} from 'react-native'; -import {View} from 'react-native'; +import {Platform, View} from 'react-native'; import SignInGradient from '@assets/images/home-fade-gradient.svg'; import ImageSVG from '@components/ImageSVG'; import ScrollView from '@components/ScrollView'; @@ -15,6 +15,9 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; +import DomUtils from '@libs/DomUtils'; +// eslint-disable-next-line no-restricted-imports +import themes from '@styles/theme'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import BackgroundImage from './BackgroundImage'; @@ -81,6 +84,19 @@ function SignInPageLayout( const backgroundImageHeight = Math.max(variables.signInContentMinHeight, containerHeight); + const cssClass = 'sign-in-page-layout'; + DomUtils.addCSS(DomUtils.getAutofilledInputStyle(themes[CONST.THEME.DARK].text, `.${cssClass}`), 'sign-in-autofill-input'); + + useEffect(() => { + if (Platform.OS !== 'web') { + return; + } + document.body.classList.add(cssClass); + return () => { + document.body.classList.remove(cssClass); + }; + }, []); + return ( {!shouldUseNarrowLayout ? ( From f083b7a22f6c3b524151a490ace111b63af88f05 Mon Sep 17 00:00:00 2001 From: Klajdi Paja Date: Sat, 26 Oct 2024 18:46:22 +0200 Subject: [PATCH 2/4] add comment for new autofill styles in sign in input and add desktop to the platform that this styles are applied for Co-authored-by: Krishna Chaitanya <102477862+c3024@users.noreply.github.com> --- src/pages/signin/SignInPageLayout/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/signin/SignInPageLayout/index.tsx b/src/pages/signin/SignInPageLayout/index.tsx index e192b23ca983..c01ca1419268 100644 --- a/src/pages/signin/SignInPageLayout/index.tsx +++ b/src/pages/signin/SignInPageLayout/index.tsx @@ -84,11 +84,16 @@ function SignInPageLayout( const backgroundImageHeight = Math.max(variables.signInContentMinHeight, containerHeight); +/* +SignInPageLayout always has a dark theme regardless of the app theme. ThemeProvider sets auto-fill input styles globally so different ThemeProviders conflict and auto-fill input styles are incorrectly applied for this component. +Add a class to `body` when this component stays mounted and remove it when the component dismounts. +A new styleID with dark theme text with more specific css selector using this added class is added. +*/ const cssClass = 'sign-in-page-layout'; DomUtils.addCSS(DomUtils.getAutofilledInputStyle(themes[CONST.THEME.DARK].text, `.${cssClass}`), 'sign-in-autofill-input'); useEffect(() => { - if (Platform.OS !== 'web') { + if (![CONST.PLATFORM.WEB, CONST.PLATFORM.DESKTOP].includes(getPlatform()) return; } document.body.classList.add(cssClass); From 08494aeaeba36d7d54c5adaa932ec0d2291a35ef Mon Sep 17 00:00:00 2001 From: Klajdi Paja Date: Sat, 26 Oct 2024 18:46:22 +0200 Subject: [PATCH 3/4] add comment for new autofill styles in sign in input and add desktop to the platform that this styles are applied for Co-authored-by: Krishna Chaitanya <102477862+c3024@users.noreply.github.com> --- src/pages/signin/SignInPageLayout/index.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/pages/signin/SignInPageLayout/index.tsx b/src/pages/signin/SignInPageLayout/index.tsx index e192b23ca983..0f754075b845 100644 --- a/src/pages/signin/SignInPageLayout/index.tsx +++ b/src/pages/signin/SignInPageLayout/index.tsx @@ -16,6 +16,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; import DomUtils from '@libs/DomUtils'; +import getPlatform from '@libs/getPlatform'; // eslint-disable-next-line no-restricted-imports import themes from '@styles/theme'; import variables from '@styles/variables'; @@ -84,11 +85,16 @@ function SignInPageLayout( const backgroundImageHeight = Math.max(variables.signInContentMinHeight, containerHeight); + /* + SignInPageLayout always has a dark theme regardless of the app theme. ThemeProvider sets auto-fill input styles globally so different ThemeProviders conflict and auto-fill input styles are incorrectly applied for this component. + Add a class to `body` when this component stays mounted and remove it when the component dismounts. + A new styleID is added with dark theme text with more specific css selector using this added cssClass. + */ const cssClass = 'sign-in-page-layout'; DomUtils.addCSS(DomUtils.getAutofilledInputStyle(themes[CONST.THEME.DARK].text, `.${cssClass}`), 'sign-in-autofill-input'); useEffect(() => { - if (Platform.OS !== 'web') { + if (![CONST.PLATFORM.WEB, CONST.PLATFORM.DESKTOP].includes(getPlatform())) { return; } document.body.classList.add(cssClass); From 81f38b01049119d72d2e81be8f1b4aea6b1d3b17 Mon Sep 17 00:00:00 2001 From: Klajdi Paja Date: Sat, 26 Oct 2024 19:42:04 +0200 Subject: [PATCH 4/4] fix lint and tsc errors --- src/pages/signin/SignInPageLayout/index.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/index.tsx b/src/pages/signin/SignInPageLayout/index.tsx index 0f754075b845..3517edf9b847 100644 --- a/src/pages/signin/SignInPageLayout/index.tsx +++ b/src/pages/signin/SignInPageLayout/index.tsx @@ -2,7 +2,7 @@ import type {ForwardedRef} from 'react'; import React, {forwardRef, useEffect, useImperativeHandle, useMemo, useRef} from 'react'; // eslint-disable-next-line no-restricted-imports import type {ScrollView as RNScrollView} from 'react-native'; -import {Platform, View} from 'react-native'; +import {View} from 'react-native'; import SignInGradient from '@assets/images/home-fade-gradient.svg'; import ImageSVG from '@components/ImageSVG'; import ScrollView from '@components/ScrollView'; @@ -94,9 +94,12 @@ function SignInPageLayout( DomUtils.addCSS(DomUtils.getAutofilledInputStyle(themes[CONST.THEME.DARK].text, `.${cssClass}`), 'sign-in-autofill-input'); useEffect(() => { - if (![CONST.PLATFORM.WEB, CONST.PLATFORM.DESKTOP].includes(getPlatform())) { + const isWeb = getPlatform() === CONST.PLATFORM.WEB; + const isDesktop = getPlatform() === CONST.PLATFORM.DESKTOP; + if (!isWeb && !isDesktop) { return; } + // add css class to body only for web and desktop document.body.classList.add(cssClass); return () => { document.body.classList.remove(cssClass);