From 5d3fea9c4d650c3b317802768e6549a155ee6300 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 16 Dec 2023 00:28:33 +0530 Subject: [PATCH 01/14] Update text style using getItemColor --- src/components/Picker/BasePicker.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx index 6f587f350b79..c12f6d990669 100644 --- a/src/components/Picker/BasePicker.tsx +++ b/src/components/Picker/BasePicker.tsx @@ -10,6 +10,8 @@ import useScrollContext from '@hooks/useScrollContext'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import type {BasePickerHandle, BasePickerProps} from './types'; +import getOperatingSystem from '@libs/getOperatingSystem'; +import CONST from '@src/CONST' type IconToRender = () => ReactElement; @@ -155,6 +157,14 @@ function BasePicker( ); } + const getItemColor = () => { + if (getOperatingSystem() == CONST.OS.WINDOWS) { + return theme.pickerOptionsTextColor; + } + + return theme.textLight; + } + return ( <> ( ({...item, color: theme.pickerOptionsTextColor}))} + items={items.map((item) => ({...item, color: getItemColor()}))} style={size === 'normal' ? styles.picker(isDisabled, backgroundColor) : styles.pickerSmall(backgroundColor)} useNativeAndroidPickerStyle={false} placeholder={pickerPlaceholder} From af9d625172cda7511d4640ff179503c6eecc6857 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 16 Dec 2023 01:22:09 +0530 Subject: [PATCH 02/14] lint fixes --- src/components/Picker/BasePicker.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx index c12f6d990669..0e3f6205f2c8 100644 --- a/src/components/Picker/BasePicker.tsx +++ b/src/components/Picker/BasePicker.tsx @@ -9,9 +9,9 @@ import Text from '@components/Text'; import useScrollContext from '@hooks/useScrollContext'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import type {BasePickerHandle, BasePickerProps} from './types'; import getOperatingSystem from '@libs/getOperatingSystem'; import CONST from '@src/CONST' +import type {BasePickerHandle, BasePickerProps} from './types'; type IconToRender = () => ReactElement; @@ -138,6 +138,15 @@ function BasePicker( }, })); + const getItemColor = useMemo(() => { + if (getOperatingSystem() == CONST.OS.WINDOWS) { + return theme.pickerOptionsTextColor; + } + + return theme.textLight; + }, [theme]); + + const hasError = !!errorText; if (isDisabled) { @@ -156,14 +165,6 @@ function BasePicker( ); } - - const getItemColor = () => { - if (getOperatingSystem() == CONST.OS.WINDOWS) { - return theme.pickerOptionsTextColor; - } - - return theme.textLight; - } return ( <> From a8a7e4194b48e63e2e461a36cdf006d819109f46 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 16 Dec 2023 01:31:48 +0530 Subject: [PATCH 03/14] Prettier changes --- src/components/Picker/BasePicker.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx index 0e3f6205f2c8..c2ac556bcebc 100644 --- a/src/components/Picker/BasePicker.tsx +++ b/src/components/Picker/BasePicker.tsx @@ -10,7 +10,7 @@ import useScrollContext from '@hooks/useScrollContext'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import getOperatingSystem from '@libs/getOperatingSystem'; -import CONST from '@src/CONST' +import CONST from '@src/CONST'; import type {BasePickerHandle, BasePickerProps} from './types'; type IconToRender = () => ReactElement; @@ -146,7 +146,6 @@ function BasePicker( return theme.textLight; }, [theme]); - const hasError = !!errorText; if (isDisabled) { @@ -165,7 +164,7 @@ function BasePicker( ); } - + return ( <> Date: Sat, 16 Dec 2023 01:33:14 +0530 Subject: [PATCH 04/14] Add explaining comment --- src/components/Picker/BasePicker.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx index c2ac556bcebc..11fd136743a4 100644 --- a/src/components/Picker/BasePicker.tsx +++ b/src/components/Picker/BasePicker.tsx @@ -138,6 +138,10 @@ function BasePicker( }, })); + /** + * Windows will reuse the text color of the select for each one of the options + * so we need to color accordingly so it doesn't blend with the background. + */ const getItemColor = useMemo(() => { if (getOperatingSystem() == CONST.OS.WINDOWS) { return theme.pickerOptionsTextColor; From 2684a7572c0472d495a6f046abf1ff5ab5c1f9d6 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 16 Dec 2023 01:58:03 +0530 Subject: [PATCH 05/14] Fix typo --- src/components/Picker/BasePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx index 11fd136743a4..faeb2eb62afa 100644 --- a/src/components/Picker/BasePicker.tsx +++ b/src/components/Picker/BasePicker.tsx @@ -179,7 +179,7 @@ function BasePicker( ({...item, color: getItemColor()}))} + items={items.map((item) => ({...item, color: getItemColor}))} style={size === 'normal' ? styles.picker(isDisabled, backgroundColor) : styles.pickerSmall(backgroundColor)} useNativeAndroidPickerStyle={false} placeholder={pickerPlaceholder} From d0fec94753584edc9c7bf714747469824712f4dc Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 16 Dec 2023 01:58:42 +0530 Subject: [PATCH 06/14] Add stricter equality check --- src/components/Picker/BasePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx index faeb2eb62afa..d16872277fe1 100644 --- a/src/components/Picker/BasePicker.tsx +++ b/src/components/Picker/BasePicker.tsx @@ -143,7 +143,7 @@ function BasePicker( * so we need to color accordingly so it doesn't blend with the background. */ const getItemColor = useMemo(() => { - if (getOperatingSystem() == CONST.OS.WINDOWS) { + if (getOperatingSystem() === CONST.OS.WINDOWS) { return theme.pickerOptionsTextColor; } From f2429ace6170a0ac76e0e936940f56951a5a5e3c Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 16 Dec 2023 01:59:07 +0530 Subject: [PATCH 07/14] Fix windows text color --- src/components/Picker/BasePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx index d16872277fe1..1f3853ff328a 100644 --- a/src/components/Picker/BasePicker.tsx +++ b/src/components/Picker/BasePicker.tsx @@ -144,7 +144,7 @@ function BasePicker( */ const getItemColor = useMemo(() => { if (getOperatingSystem() === CONST.OS.WINDOWS) { - return theme.pickerOptionsTextColor; + return theme.text; } return theme.textLight; From 4d495f361cba151312c3deeb2e992c19fd1d34f0 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 16 Dec 2023 02:24:42 +0530 Subject: [PATCH 08/14] Rename variable --- src/components/Picker/BasePicker.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx index 1f3853ff328a..4a9f34a01109 100644 --- a/src/components/Picker/BasePicker.tsx +++ b/src/components/Picker/BasePicker.tsx @@ -142,7 +142,7 @@ function BasePicker( * Windows will reuse the text color of the select for each one of the options * so we need to color accordingly so it doesn't blend with the background. */ - const getItemColor = useMemo(() => { + const itemColor = useMemo(() => { if (getOperatingSystem() === CONST.OS.WINDOWS) { return theme.text; } @@ -179,7 +179,7 @@ function BasePicker( ({...item, color: getItemColor}))} + items={items.map((item) => ({...item, color: itemColor}))} style={size === 'normal' ? styles.picker(isDisabled, backgroundColor) : styles.pickerSmall(backgroundColor)} useNativeAndroidPickerStyle={false} placeholder={pickerPlaceholder} From 960cdc7f46c3a6eba51d37709885abc7fb82d83b Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 16 Dec 2023 02:43:26 +0530 Subject: [PATCH 09/14] Fix iOS native picker behavior --- src/components/Picker/BasePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx index 4a9f34a01109..1acb761f7ddb 100644 --- a/src/components/Picker/BasePicker.tsx +++ b/src/components/Picker/BasePicker.tsx @@ -143,7 +143,7 @@ function BasePicker( * so we need to color accordingly so it doesn't blend with the background. */ const itemColor = useMemo(() => { - if (getOperatingSystem() === CONST.OS.WINDOWS) { + if (getOperatingSystem() === CONST.OS.WINDOWS || getOperatingSystem() === CONST.OS.IOS) { return theme.text; } From c4007a7e1a2a5b8d98ec0ec871887c3a045e59ab Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 16 Dec 2023 03:02:52 +0530 Subject: [PATCH 10/14] Simplify logic --- src/components/Picker/BasePicker.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx index 1acb761f7ddb..d3213b6d00ca 100644 --- a/src/components/Picker/BasePicker.tsx +++ b/src/components/Picker/BasePicker.tsx @@ -143,11 +143,11 @@ function BasePicker( * so we need to color accordingly so it doesn't blend with the background. */ const itemColor = useMemo(() => { - if (getOperatingSystem() === CONST.OS.WINDOWS || getOperatingSystem() === CONST.OS.IOS) { - return theme.text; + if(getOperatingSystem() === CONST.OS.ANDROID) { + return theme.textLight; } - return theme.textLight; + return theme.pickerOptionsTextColor; }, [theme]); const hasError = !!errorText; From cd532f5b6afcfdbcffae4acc50346f28044c2631 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 16 Dec 2023 03:04:10 +0530 Subject: [PATCH 11/14] prettier --- src/components/Picker/BasePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx index d3213b6d00ca..93990d4f3847 100644 --- a/src/components/Picker/BasePicker.tsx +++ b/src/components/Picker/BasePicker.tsx @@ -143,7 +143,7 @@ function BasePicker( * so we need to color accordingly so it doesn't blend with the background. */ const itemColor = useMemo(() => { - if(getOperatingSystem() === CONST.OS.ANDROID) { + if (getOperatingSystem() === CONST.OS.ANDROID) { return theme.textLight; } From af154c40c9d3274a59368f0eebae3ae418d472f1 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 16 Dec 2023 03:22:22 +0530 Subject: [PATCH 12/14] Update comment --- src/components/Picker/BasePicker.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx index 93990d4f3847..6ca96457d3c1 100644 --- a/src/components/Picker/BasePicker.tsx +++ b/src/components/Picker/BasePicker.tsx @@ -139,8 +139,7 @@ function BasePicker( })); /** - * Windows will reuse the text color of the select for each one of the options - * so we need to color accordingly so it doesn't blend with the background. + * We pass light text on Android, since Android Native alerts have a dark background in all themes for now. */ const itemColor = useMemo(() => { if (getOperatingSystem() === CONST.OS.ANDROID) { From 8eaec2d12a117715aada5a42dd39639dcc21acbb Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 16 Dec 2023 03:26:36 +0530 Subject: [PATCH 13/14] Replace pickerOptionsTextColor with theme.text --- src/components/Picker/BasePicker.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx index 6ca96457d3c1..c6b5026b1938 100644 --- a/src/components/Picker/BasePicker.tsx +++ b/src/components/Picker/BasePicker.tsx @@ -49,7 +49,7 @@ function BasePicker( // Windows will reuse the text color of the select for each one of the options // so we might need to color accordingly so it doesn't blend with the background. - const pickerPlaceholder = Object.keys(placeholder).length > 0 ? {...placeholder, color: theme.pickerOptionsTextColor} : {}; + const pickerPlaceholder = Object.keys(placeholder).length > 0 ? {...placeholder, color: theme.text} : {}; useEffect(() => { if (!!value || !items || items.length !== 1 || !onInputChange) { @@ -146,7 +146,7 @@ function BasePicker( return theme.textLight; } - return theme.pickerOptionsTextColor; + return theme.text; }, [theme]); const hasError = !!errorText; From f1cfaf1088df035a467dc488c4a451c6db5dab1e Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 16 Dec 2023 03:27:53 +0530 Subject: [PATCH 14/14] Remove pickerOptionsTextColor from App --- src/styles/theme/themes/dark.ts | 1 - src/styles/theme/themes/light.ts | 1 - src/styles/theme/types.ts | 1 - 3 files changed, 3 deletions(-) diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts index c2fcac6af13e..95cf518921a9 100644 --- a/src/styles/theme/themes/dark.ts +++ b/src/styles/theme/themes/dark.ts @@ -65,7 +65,6 @@ const darkTheme = { dropUIBG: 'rgba(6,27,9,0.92)', receiptDropUIBG: 'rgba(3, 212, 124, 0.84)', checkBox: colors.green400, - pickerOptionsTextColor: colors.productDark900, imageCropBackgroundColor: colors.productDark700, fallbackIconColor: colors.green700, reactionActiveBackground: colors.green600, diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts index 3cd052046f43..f10885ae4d2e 100644 --- a/src/styles/theme/themes/light.ts +++ b/src/styles/theme/themes/light.ts @@ -65,7 +65,6 @@ const lightTheme = { dropUIBG: 'rgba(252, 251, 249, 0.92)', receiptDropUIBG: 'rgba(3, 212, 124, 0.84)', checkBox: colors.green400, - pickerOptionsTextColor: colors.productLight900, imageCropBackgroundColor: colors.productLight700, fallbackIconColor: colors.green700, reactionActiveBackground: colors.green100, diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts index 56da65ddd17d..b443295b8167 100644 --- a/src/styles/theme/types.ts +++ b/src/styles/theme/types.ts @@ -68,7 +68,6 @@ type ThemeColors = { dropUIBG: Color; receiptDropUIBG: Color; checkBox: Color; - pickerOptionsTextColor: Color; imageCropBackgroundColor: Color; fallbackIconColor: Color; reactionActiveBackground: Color;