diff --git a/.imgbotconfig b/.imgbotconfig index 43d1b77166cc..45cdf03ec36e 100644 --- a/.imgbotconfig +++ b/.imgbotconfig @@ -1,7 +1,7 @@ { "ignoredFiles": [ - "assets/images/empty-state_background-fade-dark.png", // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499 - "assets/images/empty-state_background-fade-light.png" + "assets/images/themeDependent/empty-state_background-fade-dark.png", // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499 + "assets/images/themeDependent/empty-state_background-fade-light.png" ], "aggressiveCompression": "false" } diff --git a/.storybook/public/index.css b/.storybook/public/index.css index 8ace4b240684..2d2411c083c1 100644 --- a/.storybook/public/index.css +++ b/.storybook/public/index.css @@ -24,5 +24,5 @@ a.sidebar-item[data-selected="true"], a.sidebar-item[data-selected="true"]:focus } .sidebar-container { - background: #07271f; + background: #072419; } diff --git a/.storybook/theme.js b/.storybook/theme.js index 96631764726f..67898fb00943 100644 --- a/.storybook/theme.js +++ b/.storybook/theme.js @@ -7,17 +7,17 @@ export default create({ fontBase: 'ExpensifyNeue-Regular', fontCode: 'monospace', base: 'dark', - appBg: colors.darkHighlightBackground, - colorPrimary: colors.darkDefaultButton, + appBg: colors.productDark200, + colorPrimary: colors.productDark400, colorSecondary: colors.green, - appContentBg: colors.darkAppBackground, - textColor: colors.darkPrimaryText, - barTextColor: colors.darkPrimaryText, + appContentBg: colors.productDark100, + textColor: colors.productDark900, + barTextColor: colors.productDark900, barSelectedColor: colors.green, - barBg: colors.darkAppBackground, - appBorderColor: colors.darkBorders, - inputBg: colors.darkHighlightBackground, - inputBorder: colors.darkBorders, + barBg: colors.productDark100, + appBorderColor: colors.productDark400, + inputBg: colors.productDark200, + inputBorder: colors.productDark400, appBorderRadius: 8, inputBorderRadius: 8, }); diff --git a/assets/images/empty-state_background-fade-dark.png b/assets/images/empty-state_background-fade-dark.png deleted file mode 100644 index 1caf5630bee3..000000000000 Binary files a/assets/images/empty-state_background-fade-dark.png and /dev/null differ diff --git a/assets/images/empty-state_background-fade-light.png b/assets/images/empty-state_background-fade-light.png deleted file mode 100644 index 98456609b502..000000000000 Binary files a/assets/images/empty-state_background-fade-light.png and /dev/null differ diff --git a/assets/images/example-check-image-en.png b/assets/images/example-check-image-en.png deleted file mode 100644 index 903618776cdf..000000000000 Binary files a/assets/images/example-check-image-en.png and /dev/null differ diff --git a/assets/images/example-check-image-es.png b/assets/images/example-check-image-es.png deleted file mode 100644 index de695a43833d..000000000000 Binary files a/assets/images/example-check-image-es.png and /dev/null differ diff --git a/assets/images/home-background--android.svg b/assets/images/home-background--android.svg index 2b72b6ccabe9..29c8affce1cc 100644 --- a/assets/images/home-background--android.svg +++ b/assets/images/home-background--android.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/images/home-background--mobile.svg b/assets/images/home-background--mobile.svg index 7c4d4d8289b7..d2fa08475c9d 100644 --- a/assets/images/home-background--mobile.svg +++ b/assets/images/home-background--mobile.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/images/home-fade-gradient--mobile.svg b/assets/images/home-fade-gradient--mobile.svg index 0b24b678a2e6..ad150f3c870c 100644 --- a/assets/images/home-fade-gradient--mobile.svg +++ b/assets/images/home-fade-gradient--mobile.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/images/home-fade-gradient.svg b/assets/images/home-fade-gradient.svg index bfe04d545364..c446d7b46a42 100644 --- a/assets/images/home-fade-gradient.svg +++ b/assets/images/home-fade-gradient.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/images/themeDependent/empty-state_background-fade-dark.png b/assets/images/themeDependent/empty-state_background-fade-dark.png new file mode 100644 index 000000000000..59951ef707fb Binary files /dev/null and b/assets/images/themeDependent/empty-state_background-fade-dark.png differ diff --git a/assets/images/themeDependent/empty-state_background-fade-light.png b/assets/images/themeDependent/empty-state_background-fade-light.png new file mode 100644 index 000000000000..200996057b47 Binary files /dev/null and b/assets/images/themeDependent/empty-state_background-fade-light.png differ diff --git a/assets/images/themeDependent/example-check-image-dark-en.png b/assets/images/themeDependent/example-check-image-dark-en.png new file mode 100644 index 000000000000..54c4f260ef5b Binary files /dev/null and b/assets/images/themeDependent/example-check-image-dark-en.png differ diff --git a/assets/images/themeDependent/example-check-image-dark-es.png b/assets/images/themeDependent/example-check-image-dark-es.png new file mode 100644 index 000000000000..d218e1faa46f Binary files /dev/null and b/assets/images/themeDependent/example-check-image-dark-es.png differ diff --git a/assets/images/themeDependent/example-check-image-light-en.png b/assets/images/themeDependent/example-check-image-light-en.png new file mode 100644 index 000000000000..4261f2a51127 Binary files /dev/null and b/assets/images/themeDependent/example-check-image-light-en.png differ diff --git a/assets/images/themeDependent/example-check-image-light-es.png b/assets/images/themeDependent/example-check-image-light-es.png new file mode 100644 index 000000000000..7c246c9280b0 Binary files /dev/null and b/assets/images/themeDependent/example-check-image-light-es.png differ diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss index b34a7d13b7f0..5556c43d87f6 100644 --- a/docs/_sass/_colors.scss +++ b/docs/_sass/_colors.scss @@ -2,8 +2,8 @@ $color-green400: #03D47C; $color-green-icons: #8B9C8F; $color-green-borders: #1A3D32; $color-button-background: #1A3D32; -$color-button-hovered: #2C6755; -$color-green-highlightBG: #07271F; +$color-button-hovered: #2A604F; +$color-green-highlightBG: #072419; $color-green-highlightBG-hover: #06231c; $color-green-appBG: #061B09; $color-green-hover: #00a862; diff --git a/docs/assets/images/settings-old-dot.svg b/docs/assets/images/settings-old-dot.svg index ca5bc04bd0ff..85561a886459 100644 --- a/docs/assets/images/settings-old-dot.svg +++ b/docs/assets/images/settings-old-dot.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 1765c85cdd48..a5b9910842bf 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -158,6 +158,8 @@ function OptionRowLHN(props) { optionItem.type === CONST.REPORT.TYPE.CHAT && _.isEmpty(optionItem.chatType) && !optionItem.isThread && lodashGet(optionItem, 'displayNamesWithTooltips.length', 0) > 2; const fullTitle = isGroupChat ? getGroupChatName(ReportUtils.getReport(optionItem.reportID)) : optionItem.text; + const subscriptAvatarBorderColor = props.isFocused ? focusedBackgroundColor : theme.sidebar; + return ( {translate('bankAccount.checkHelpLine')} - + + ); +} + +ExampleCheckImage.displayName = 'ExampleCheckImage'; +export default ExampleCheckImage; diff --git a/src/pages/ReimbursementAccount/exampleCheckImage.js b/src/pages/ReimbursementAccount/exampleCheckImage.js deleted file mode 100644 index c3fdbdd3984c..000000000000 --- a/src/pages/ReimbursementAccount/exampleCheckImage.js +++ /dev/null @@ -1,14 +0,0 @@ -import exampleCheckImageEn from '@assets/images/example-check-image-en.png'; -import exampleCheckImageEs from '@assets/images/example-check-image-es.png'; -import CONST from '@src/CONST'; - -const images = { - [CONST.LOCALES.EN]: exampleCheckImageEn, - [CONST.LOCALES.ES]: exampleCheckImageEs, -}; - -function exampleCheckImage(languageKey = CONST.LOCALES.EN) { - return images[languageKey]; -} - -export default exampleCheckImage; diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts index 64ef54a8ab84..0ebc7e1d583f 100644 --- a/src/styles/StyleUtils.ts +++ b/src/styles/StyleUtils.ts @@ -1036,7 +1036,7 @@ function getAutoCompleteSuggestionContainerStyle(itemsHeight: number): ViewStyle * Select the correct color for text. */ function getColoredBackgroundStyle(theme: ThemeColors, isColored: boolean): StyleProp { - return {backgroundColor: isColored ? theme.link : undefined}; + return {backgroundColor: isColored ? theme.mentionBG : undefined}; } function getEmojiReactionBubbleStyle(theme: ThemeColors, isHovered: boolean, hasUserReacted: boolean, isContextMenu = false): ViewStyle { diff --git a/src/styles/colors.ts b/src/styles/colors.ts index fbe694e051ee..35d93f060c86 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -19,27 +19,26 @@ const colors: Record = { transparent: 'transparent', // Dark Mode Theme Colors - darkAppBackground: '#061B09', - darkHighlightBackground: '#07271F', - darkBorders: '#1A3D32', - darkIcons: '#8B9C8F', - darkSupportingText: '#AFBBB0', - darkPrimaryText: '#E7ECE9', - darkDefaultButton: '#184E3D', - darkDefaultButtonHover: '#2C6755', - darkDefaultButtonPressed: '#467164', + productDark100: '#061B09', + productDark200: '#072419', + productDark300: '#0A2E25', + productDark400: '#1A3D32', + productDark500: '#224F41', + productDark600: '#2A604F', + productDark700: '#8B9C8F', + productDark800: '#AFBBB0', + productDark900: '#E7ECE9', // Light Mode Theme Colors - lightAppBackground: '#FCFBF9', - lightHighlightBackground: '#F8F4F0', - lightBorders: '#EBE6DF', - lightBordersLighter: '#2B5548', - lightIcons: '#A2A9A3', - lightSupportingText: '#76847E', - lightPrimaryText: '#002E22', - lightDefaultButton: '#EEEBE7', - lightDefaultButtonHover: '#E3DFD9', - lightDefaultButtonPressed: '#D2CCC3', + productLight100: '#FCFBF9', + productLight200: '#F8F4F0', + productLight300: '#F2EDE7', + productLight400: '#E6E1DA', + productLight500: '#D8D1C7', + productLight600: '#C7BFB3', + productLight700: '#A2A9A3', + productLight800: '#76847E', + productLight900: '#002E22', // Brand Colors from Figma blue100: '#B0D9FF', diff --git a/src/styles/illustrations/dark.ts b/src/styles/illustrations/dark.ts index 6bee85cdedbd..ca52a24a4e4e 100644 --- a/src/styles/illustrations/dark.ts +++ b/src/styles/illustrations/dark.ts @@ -1,8 +1,12 @@ -import EmptyStateBackgroundImage from '@assets/images/empty-state_background-fade-dark.png'; +import EmptyStateBackgroundImage from '@assets/images/themeDependent/empty-state_background-fade-dark.png'; +import ExampleCheckEN from '@assets/images/themeDependent/example-check-image-dark-en.png'; +import ExampleCheckES from '@assets/images/themeDependent/example-check-image-dark-es.png'; import {Illustrations} from './types'; const illustrations = { EmptyStateBackgroundImage, + ExampleCheckEN, + ExampleCheckES, } satisfies Illustrations; export default illustrations; diff --git a/src/styles/illustrations/light.ts b/src/styles/illustrations/light.ts index 376a6d332f79..a953a312327f 100644 --- a/src/styles/illustrations/light.ts +++ b/src/styles/illustrations/light.ts @@ -1,8 +1,12 @@ -import EmptyStateBackgroundImage from '@assets/images/empty-state_background-fade-light.png'; +import EmptyStateBackgroundImage from '@assets/images/themeDependent/empty-state_background-fade-light.png'; +import ExampleCheckEN from '@assets/images/themeDependent/example-check-image-light-en.png'; +import ExampleCheckES from '@assets/images/themeDependent/example-check-image-light-es.png'; import {Illustrations} from './types'; const illustrations = { EmptyStateBackgroundImage, + ExampleCheckEN, + ExampleCheckES, } satisfies Illustrations; export default illustrations; diff --git a/src/styles/illustrations/types.ts b/src/styles/illustrations/types.ts index aebf01428994..bfb1db4a19c1 100644 --- a/src/styles/illustrations/types.ts +++ b/src/styles/illustrations/types.ts @@ -2,6 +2,8 @@ import {ImageSourcePropType} from 'react-native'; type Illustrations = { EmptyStateBackgroundImage: ImageSourcePropType; + ExampleCheckES: ImageSourcePropType; + ExampleCheckEN: ImageSourcePropType; }; // eslint-disable-next-line import/prefer-default-export diff --git a/src/styles/styles.ts b/src/styles/styles.ts index b88119beae74..ef47b1c7faa6 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -2819,7 +2819,7 @@ const styles = (theme: ThemeColors) => smallEditIcon: { alignItems: 'center', backgroundColor: theme.buttonHoveredBG, - borderColor: theme.textReversed, + borderColor: theme.appBG, borderRadius: 14, borderWidth: 3, color: theme.textReversed, diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts index 59de9b7269a8..891eb1e9bf8e 100644 --- a/src/styles/themes/default.ts +++ b/src/styles/themes/default.ts @@ -5,26 +5,26 @@ import {type ThemeColors} from './types'; const darkTheme = { // Figma keys - appBG: colors.darkAppBackground, + appBG: colors.productDark100, splashBG: colors.green400, - highlightBG: colors.darkHighlightBackground, - border: colors.darkBorders, - borderLighter: colors.darkDefaultButton, + highlightBG: colors.productDark200, + border: colors.productDark400, + borderLighter: colors.productDark400, borderFocus: colors.green400, - icon: colors.darkIcons, + icon: colors.productDark700, iconMenu: colors.green400, - iconHovered: colors.darkPrimaryText, + iconHovered: colors.productDark900, iconSuccessFill: colors.green400, - iconReversed: colors.darkAppBackground, + iconReversed: colors.productDark100, iconColorfulBackground: `${colors.ivory}cc`, - textSupporting: colors.darkSupportingText, - text: colors.darkPrimaryText, + textSupporting: colors.productDark800, + text: colors.productDark900, textColorfulBackground: colors.ivory, link: colors.blue300, linkHover: colors.blue100, - buttonDefaultBG: colors.darkDefaultButton, - buttonHoveredBG: colors.darkDefaultButtonHover, - buttonPressedBG: colors.darkDefaultButtonPressed, + buttonDefaultBG: colors.productDark400, + buttonHoveredBG: colors.productDark500, + buttonPressedBG: colors.productDark600, danger: colors.red, dangerHover: colors.redHover, dangerPressed: colors.redHover, @@ -37,36 +37,36 @@ const darkTheme = { dangerSection: colors.tangerine800, // Additional keys - overlay: colors.darkBorders, - inverse: colors.darkPrimaryText, + overlay: colors.productDark400, + inverse: colors.productDark900, shadow: colors.black, - componentBG: colors.darkAppBackground, - hoverComponentBG: colors.darkHighlightBackground, - activeComponentBG: colors.darkBorders, + componentBG: colors.productDark100, + hoverComponentBG: colors.productDark200, + activeComponentBG: colors.productDark400, signInSidebar: colors.green800, - sidebar: colors.darkHighlightBackground, - sidebarHover: colors.darkAppBackground, - heading: colors.darkPrimaryText, - textLight: colors.darkPrimaryText, - textDark: colors.darkAppBackground, - textReversed: colors.lightPrimaryText, - textBackground: colors.darkHighlightBackground, - textMutedReversed: colors.darkIcons, + sidebar: colors.productDark200, + sidebarHover: colors.productDark300, + heading: colors.productDark900, + textLight: colors.productDark900, + textDark: colors.productDark100, + textReversed: colors.productLight900, + textBackground: colors.productDark200, + textMutedReversed: colors.productDark700, textError: colors.red, - offline: colors.darkIcons, - modalBackground: colors.darkAppBackground, - cardBG: colors.darkHighlightBackground, - cardBorder: colors.darkHighlightBackground, - spinner: colors.darkSupportingText, + offline: colors.productDark700, + modalBackground: colors.productDark100, + cardBG: colors.productDark200, + cardBorder: colors.productDark200, + spinner: colors.productDark800, unreadIndicator: colors.green400, - placeholderText: colors.darkIcons, + placeholderText: colors.productDark700, heroCard: colors.blue400, - uploadPreviewActivityIndicator: colors.darkHighlightBackground, + uploadPreviewActivityIndicator: colors.productDark200, dropUIBG: 'rgba(6,27,9,0.92)', receiptDropUIBG: 'rgba(3, 212, 124, 0.84)', checkBox: colors.green400, - pickerOptionsTextColor: colors.darkPrimaryText, - imageCropBackgroundColor: colors.darkIcons, + pickerOptionsTextColor: colors.productDark900, + imageCropBackgroundColor: colors.productDark700, fallbackIconColor: colors.green700, reactionActiveBackground: colors.green600, reactionActiveText: colors.green100, @@ -76,10 +76,10 @@ const darkTheme = { mentionBG: colors.blue600, ourMentionText: colors.green100, ourMentionBG: colors.green600, - tooltipSupportingText: colors.lightSupportingText, - tooltipPrimaryText: colors.lightPrimaryText, - skeletonLHNIn: colors.darkBorders, - skeletonLHNOut: colors.darkDefaultButton, + tooltipSupportingText: colors.productLight800, + tooltipPrimaryText: colors.productLight900, + skeletonLHNIn: colors.productDark400, + skeletonLHNOut: colors.productDark400, QRLogo: colors.green400, starDefaultBG: 'rgb(254, 228, 94)', loungeAccessOverlay: colors.blue800, @@ -92,11 +92,11 @@ const darkTheme = { // The screen name (see SCREENS.ts) is the name of the screen as far as react-navigation is concerned, and the linkingConfig maps screen names to URLs PAGE_THEMES: { [SCREENS.HOME]: { - backgroundColor: colors.darkHighlightBackground, + backgroundColor: colors.productDark200, statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.REPORT]: { - backgroundColor: colors.darkAppBackground, + backgroundColor: colors.productDark100, statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SAVE_THE_WORLD.ROOT]: { @@ -112,7 +112,7 @@ const darkTheme = { statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.WALLET]: { - backgroundColor: colors.darkAppBackground, + backgroundColor: colors.productDark100, statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.SECURITY]: { @@ -124,7 +124,7 @@ const darkTheme = { statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.ROOT]: { - backgroundColor: colors.darkHighlightBackground, + backgroundColor: colors.productDark200, statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, }, diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts index 1541c0e723d7..b3f71dec8ac2 100644 --- a/src/styles/themes/light.ts +++ b/src/styles/themes/light.ts @@ -5,26 +5,26 @@ import {type ThemeColors} from './types'; const lightTheme = { // Figma keys - appBG: colors.lightAppBackground, + appBG: colors.productLight100, splashBG: colors.green400, - highlightBG: colors.lightHighlightBackground, - border: colors.lightBorders, - borderLighter: colors.lightDefaultButtonPressed, + highlightBG: colors.productLight200, + border: colors.productLight400, + borderLighter: colors.productLight600, borderFocus: colors.green400, - icon: colors.lightIcons, + icon: colors.productLight700, iconMenu: colors.green400, - iconHovered: colors.lightPrimaryText, + iconHovered: colors.productLight900, iconSuccessFill: colors.green400, - iconReversed: colors.lightAppBackground, + iconReversed: colors.productLight100, iconColorfulBackground: `${colors.ivory}cc`, - textSupporting: colors.lightSupportingText, - text: colors.lightPrimaryText, + textSupporting: colors.productLight800, + text: colors.productLight900, textColorfulBackground: colors.ivory, link: colors.blue600, linkHover: colors.blue500, - buttonDefaultBG: colors.lightDefaultButton, - buttonHoveredBG: colors.lightDefaultButtonHover, - buttonPressedBG: colors.lightDefaultButtonPressed, + buttonDefaultBG: colors.productLight400, + buttonHoveredBG: colors.productLight500, + buttonPressedBG: colors.productLight600, danger: colors.red, dangerHover: colors.redHover, dangerPressed: colors.redHover, @@ -37,36 +37,36 @@ const lightTheme = { dangerSection: colors.tangerine800, // Additional keys - overlay: colors.lightBorders, - inverse: colors.lightPrimaryText, + overlay: colors.productLight400, + inverse: colors.productLight900, shadow: colors.black, - componentBG: colors.lightAppBackground, - hoverComponentBG: colors.lightHighlightBackground, - activeComponentBG: colors.lightBorders, + componentBG: colors.productLight100, + hoverComponentBG: colors.productLight200, + activeComponentBG: colors.productLight400, signInSidebar: colors.green800, - sidebar: colors.lightHighlightBackground, - sidebarHover: colors.lightBorders, - heading: colors.lightPrimaryText, + sidebar: colors.productLight200, + sidebarHover: colors.productLight300, + heading: colors.productLight900, textLight: colors.white, - textDark: colors.lightPrimaryText, - textReversed: colors.darkPrimaryText, - textBackground: colors.lightHighlightBackground, - textMutedReversed: colors.lightIcons, + textDark: colors.productLight900, + textReversed: colors.productDark900, + textBackground: colors.productLight200, + textMutedReversed: colors.productLight700, textError: colors.red, - offline: colors.lightIcons, - modalBackground: colors.lightAppBackground, - cardBG: colors.lightHighlightBackground, - cardBorder: colors.lightHighlightBackground, - spinner: colors.lightSupportingText, + offline: colors.productLight700, + modalBackground: colors.productLight100, + cardBG: colors.productLight200, + cardBorder: colors.productLight200, + spinner: colors.productLight800, unreadIndicator: colors.green400, - placeholderText: colors.lightIcons, + placeholderText: colors.productLight700, heroCard: colors.blue400, - uploadPreviewActivityIndicator: colors.lightHighlightBackground, + uploadPreviewActivityIndicator: colors.productLight200, dropUIBG: 'rgba(252, 251, 249, 0.92)', receiptDropUIBG: 'rgba(3, 212, 124, 0.84)', checkBox: colors.green400, - pickerOptionsTextColor: colors.lightPrimaryText, - imageCropBackgroundColor: colors.lightIcons, + pickerOptionsTextColor: colors.productLight900, + imageCropBackgroundColor: colors.productLight700, fallbackIconColor: colors.green700, reactionActiveBackground: colors.green100, reactionActiveText: colors.green600, @@ -76,10 +76,10 @@ const lightTheme = { mentionBG: colors.blue100, ourMentionText: colors.green600, ourMentionBG: colors.green100, - tooltipSupportingText: colors.darkSupportingText, - tooltipPrimaryText: colors.darkPrimaryText, - skeletonLHNIn: colors.lightBorders, - skeletonLHNOut: colors.lightDefaultButtonPressed, + tooltipSupportingText: colors.productDark800, + tooltipPrimaryText: colors.productDark900, + skeletonLHNIn: colors.productLight400, + skeletonLHNOut: colors.productLight600, QRLogo: colors.green400, starDefaultBG: 'rgb(254, 228, 94)', loungeAccessOverlay: colors.blue800, @@ -92,11 +92,11 @@ const lightTheme = { // The screen name (see SCREENS.ts) is the name of the screen as far as react-navigation is concerned, and the linkingConfig maps screen names to URLs PAGE_THEMES: { [SCREENS.HOME]: { - backgroundColor: colors.lightHighlightBackground, + backgroundColor: colors.productLight200, statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT, }, [SCREENS.REPORT]: { - backgroundColor: colors.lightAppBackground, + backgroundColor: colors.productLight100, statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT, }, [SCREENS.SAVE_THE_WORLD.ROOT]: { @@ -112,7 +112,7 @@ const lightTheme = { statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.WALLET]: { - backgroundColor: colors.darkAppBackground, + backgroundColor: colors.productDark100, statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.SECURITY]: { @@ -124,7 +124,7 @@ const lightTheme = { statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.ROOT]: { - backgroundColor: colors.lightHighlightBackground, + backgroundColor: colors.productLight200, statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT, }, },