From 7b386bf83c0de3653a0c033cb908af953408fbe1 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 17 Jul 2023 07:54:51 +0100 Subject: [PATCH 01/21] remove old colors --- src/styles/StyleUtils.js | 33 -------------------- src/styles/colors.js | 49 +++++++++++++++++++++-------- src/styles/themes/default.js | 60 ------------------------------------ 3 files changed, 36 insertions(+), 106 deletions(-) diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index fd9650bc162a..8a520607d0c7 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -601,38 +601,6 @@ function getEmojiPickerStyle(isSmallScreenWidth) { }; } -/** - * Get the random promo color and image for Login page - * - * @return {Object} - */ -function getLoginPagePromoStyle() { - const promos = [ - { - backgroundColor: colors.green, - backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_green.svg`, - }, - { - backgroundColor: colors.orange, - backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_orange.svg`, - }, - { - backgroundColor: colors.pink, - backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_pink.svg`, - }, - { - backgroundColor: colors.blue, - backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_blue.svg`, - }, - { - backgroundColor: colors.floralwhite, - backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/cpa-card.svg`, - redirectUri: `${CONST.USE_EXPENSIFY_URL}/accountants`, - }, - ]; - return promos[_.random(0, 4)]; -} - /** * Generate the styles for the ReportActionItem wrapper view. * @@ -1319,7 +1287,6 @@ export { getModalPaddingStyles, getFontFamilyMonospace, getEmojiPickerStyle, - getLoginPagePromoStyle, getReportActionItemStyle, getMiniReportActionContextMenuWrapperStyle, getKeyboardShortcutsModalWidth, diff --git a/src/styles/colors.js b/src/styles/colors.js index 06513e0f18d4..61d7cdb5ef33 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.js @@ -6,9 +6,6 @@ export default { black: '#000000', blue: '#0185ff', blueHover: '#B0D9FF', - floralwhite: '#fffaf0', - orange: '#FF7101', - pink: '#F68DFE', green: '#03D47C', greenHover: '#00C271', greenPressed: '#35DD96', @@ -27,6 +24,7 @@ export default { greenBordersLighter: '#2B5548', greenIcons: '#8B9C8F', greenSupportingText: '#AFBBB0', + greenPrimaryText: '#E7ECE9', white: '#E7ECE9', blueLink: '#5AB0FF', blueLinkHover: '#B0D9FF', @@ -34,51 +32,76 @@ export default { greenDefaultButton: '#184E3D', greenDefaultButtonHover: '#2C6755', greenDefaultButtonPressed: '#467164', - greenDefaultButtonDisabled: '#8BA69E', + midnight: '#002140', + + // Light Mode Theme Colors + lightAppBackground: '#FCFBF9', + lightHighlightBackground: '#F8F4F0', + lightBorders: '#EBE6DF', + lightBordersLighter: '#2B5548', + lightIcons: '#A2A9A3', + lightSupportingText: '#76847E', + lightPrimaryText: '#002E22', + blueLink: '#0164BF', + blueLinkHover: '#B0D9FF', + blueLinkPreview: '#2EAAE2', + lightDefaultButton: '#EEEBE7', + lightDefaultButtonHover: '#E3DFD9', + lightDefaultButtonPressed: '#D2CCC3', midnight: '#002140', // Brand Colors from Figma blue100: '#B0D9FF', blue200: '#8DC8FF', + blue300: '#5AB0FF', blue400: '#0185FF', + blue500: '#0676DE', blue600: '#0164BF', blue700: '#003C73', blue800: '#002140', green100: '#B1F2D6', green200: '#8EECC4', + green300: '#5BE3AA', green400: '#03D47C', + green500: '#00B268', green600: '#008C59', green700: '#085239', green800: '#002E22', + yellow100: '#FFF2B2', yellow200: '#FFED8F', + yellow300: '#FEE45E', yellow400: '#FED607', + yellow500: '#E4BC07', + yellow600: '#D18000', yellow700: '#722B03', yellow800: '#401102', + tangerine100: '#FFD7B0', tangerine200: '#FFC68C', + tangerine300: '#FFA75A', tangerine400: '#FF7101', + tangerine500: '#F25730', + tangerine600: '#BF3013', tangerine700: '#780505', tangerine800: '#400000', + pink100: '#FCDCFF', pink200: '#FBCCFF', + pink300: '#F9B5FE', pink400: '#F68DFE', + pink500: '#E96DF2', pink600: '#CF4CD9', pink700: '#712A76', pink800: '#49225B', + ice100: '#DFFDFE', ice200: '#CCF7FF', + ice300: '#A5FBFF', ice400: '#50EEF6', + ice500: '#4ED7DE', + ice600: '#4BA6A6', ice700: '#28736D', ice800: '#134038', - - // DEPRECATED COLORS. Do not reference these colors. Will be deleted in color switch PR. - gray1: '#FAFAFA', - gray2: '#ECECEC', - gray3: '#C6C9CA', - gray4: '#7D8B8F', - oldRed: '#fc3826', - oldRedHover: '#e13826', - oldRedDisabled: '#fea29a', }; diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js index 232d1b873863..e7f020a9a4a9 100644 --- a/src/styles/themes/default.js +++ b/src/styles/themes/default.js @@ -20,7 +20,6 @@ const darkTheme = { link: colors.blueLink, linkHover: colors.blueLinkHover, buttonDefaultBG: colors.greenDefaultButton, - buttonDisabledBG: colors.greenDefaultButtonDisabled, buttonHoveredBG: colors.greenDefaultButtonHover, buttonPressedBG: colors.greenDefaultButtonPressed, danger: colors.red, @@ -82,63 +81,4 @@ darkTheme.PAGE_BACKGROUND_COLORS = { [SCREENS.HOME]: darkTheme.sidebar, }; -const oldTheme = { - shadow: colors.black, - link: colors.blue, - linkHover: colors.blueHover, - componentBG: colors.white, - hoverComponentBG: colors.gray1, - activeComponentBG: colors.gray2, - appBG: colors.white, - heading: colors.dark, - sidebar: colors.gray1, - sidebarHover: colors.white, - border: colors.gray2, - borderFocus: colors.blue, - icon: colors.gray3, - iconMenu: colors.gray3, - iconHovered: colors.dark, - iconSuccessFill: colors.green, - iconReversed: colors.white, - textSupporting: colors.gray4, - text: colors.dark, - textError: colors.oldRed, - textBackground: colors.gray1, - textReversed: colors.white, - textMutedReversed: colors.gray3, - buttonDefaultBG: colors.gray2, - offline: colors.gray3, - modalBackdrop: colors.gray3, - modalBackground: colors.gray2, - buttonDisabledBG: colors.gray2, - buttonHoveredBG: colors.gray1, - buttonPressedBG: colors.gray2, - spinner: colors.gray4, - unreadIndicator: colors.green, - placeholderText: colors.gray3, - heroCard: colors.blue, - uploadPreviewActivityIndicator: colors.gray1, - dropUIBG: 'rgba(6,27,9,0.92)', - dropTransparentOverlay: 'rgba(255,255,255,0)', - cardBG: colors.gray1, - cardBorder: colors.gray1, - checkBox: colors.blue, - overlay: colors.gray1, - - // Merging new Keys for Dark Mode merge. Delete after new branding is implemented. - highlightBG: colors.gray1, - danger: colors.oldRed, - dangerHover: colors.oldRedHover, - dangerPressed: colors.oldRedHover, - dangerDisabled: colors.oldRedDisabled, - warning: colors.yellow, - success: colors.green, - successHover: colors.greenHover, - successPressed: colors.greenPressed, - transparent: colors.transparent, - inverse: colors.dark, - textLight: colors.white, - textDark: colors.dark, -}; - export default darkTheme; From 67c2fee45eec181e9c0ce84668a589f1f7b67d0c Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 17 Jul 2023 08:21:02 +0100 Subject: [PATCH 02/21] add v1 light theme, remove bordersLighter --- src/styles/colors.js | 3 -- src/styles/themes/default.js | 6 +-- src/styles/themes/light.js | 83 ++++++++++++++++++++++++++++++++++++ 3 files changed, 86 insertions(+), 6 deletions(-) create mode 100644 src/styles/themes/light.js diff --git a/src/styles/colors.js b/src/styles/colors.js index 61d7cdb5ef33..672fc6630372 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.js @@ -9,7 +9,6 @@ export default { green: '#03D47C', greenHover: '#00C271', greenPressed: '#35DD96', - greenDisabled: '80E9BD', red: '#F25730', redHover: '#DE4822', redPressed: '#F57959', @@ -21,7 +20,6 @@ export default { greenAppBackground: '#061B09', greenHighlightBackground: '#07271F', greenBorders: '#1A3D32', - greenBordersLighter: '#2B5548', greenIcons: '#8B9C8F', greenSupportingText: '#AFBBB0', greenPrimaryText: '#E7ECE9', @@ -48,7 +46,6 @@ export default { lightDefaultButton: '#EEEBE7', lightDefaultButtonHover: '#E3DFD9', lightDefaultButtonPressed: '#D2CCC3', - midnight: '#002140', // Brand Colors from Figma blue100: '#B0D9FF', diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js index e7f020a9a4a9..875da1591734 100644 --- a/src/styles/themes/default.js +++ b/src/styles/themes/default.js @@ -8,7 +8,7 @@ const darkTheme = { splashBG: colors.green, highlightBG: colors.greenHighlightBackground, border: colors.greenBorders, - borderLighter: colors.greenBordersLighter, + borderLighter: colors.greenDefaultButton, borderFocus: colors.green, icon: colors.greenIcons, iconMenu: colors.green, @@ -17,8 +17,8 @@ const darkTheme = { iconReversed: colors.greenAppBackground, textSupporting: colors.greenSupportingText, text: colors.white, - link: colors.blueLink, - linkHover: colors.blueLinkHover, + link: colors.blue300, + linkHover: colors.blue100, buttonDefaultBG: colors.greenDefaultButton, buttonHoveredBG: colors.greenDefaultButtonHover, buttonPressedBG: colors.greenDefaultButtonPressed, diff --git a/src/styles/themes/light.js b/src/styles/themes/light.js new file mode 100644 index 000000000000..3fd51134b038 --- /dev/null +++ b/src/styles/themes/light.js @@ -0,0 +1,83 @@ +import colors from '../colors'; +import SCREENS from '../../SCREENS'; + +const lightTheme = { + // Figma keys + appBG: colors.lightAppBackground, + splashBG: colors.green, + highlightBG: colors.lightHighlightBackground, + border: colors.lightBorders, + borderLighter: colors.lightDefaultButtonPressed, + borderFocus: colors.green, + icon: colors.lightIcons, + iconMenu: colors.green, + iconHovered: colors.white, + iconSuccessFill: colors.green, + iconReversed: colors.lightAppBackground, + textSupporting: colors.lightSupportingText, + text: colors.lightPrimaryText, + link: colors.blue600, + linkHover: colors.blue500, + buttonDefaultBG: colors.greenDefaultButton, + buttonHoveredBG: colors.greenDefaultButtonHover, + buttonPressedBG: colors.greenDefaultButtonPressed, + danger: colors.red, + dangerHover: colors.redHover, + dangerPressed: colors.redHover, + warning: colors.yellow, + success: colors.green, + successHover: colors.greenHover, + successPressed: colors.greenPressed, + transparent: colors.transparent, + midtone: colors.green700, + signInPage: colors.green800, + dark: colors.midnight, + + // Additional keys + overlay: colors.lightHighlightBackground, + inverse: colors.white, + shadow: colors.black, + componentBG: colors.lightAppBackground, + hoverComponentBG: colors.lightHighlightBackground, + activeComponentBG: colors.lightBorders, + signInSidebar: colors.green800, + sidebar: colors.lightHighlightBackground, + sidebarHover: colors.lightAppBackground, + heading: colors.white, + textLight: colors.white, + textDark: colors.lightPrimaryText, + textReversed: colors.lightAppBackground, + textBackground: colors.lightHighlightBackground, + textMutedReversed: colors.lightIcons, + textError: colors.red, + offline: colors.lightIcons, + modalBackdrop: colors.lightHighlightBackground, + modalBackground: colors.lightAppBackground, + cardBG: colors.lightHighlightBackground, + cardBorder: colors.lightHighlightBackground, + spinner: colors.lightSupportingText, + unreadIndicator: colors.green, + placeholderText: colors.lightIcons, + heroCard: colors.blue, + uploadPreviewActivityIndicator: colors.lightHighlightBackground, + dropUIBG: 'rgba(6,27,9,0.92)', + dropTransparentOverlay: 'rgba(255,255,255,0)', + checkBox: colors.green, + pickerOptionsTextColor: colors.white, + imageCropBackgroundColor: colors.lightIcons, + fallbackIconColor: colors.green700, + reactionActiveBackground: colors.green100, + reactionActiveText: colors.green600, + badgeAdHoc: colors.pink600, + badgeAdHocHover: colors.pink700, + mentionText: colors.blue600, + mentionBG: colors.blue100, + ourMentionText: colors.green600, + ourMentionBG: colors.green100, +}; + +lightTheme.PAGE_BACKGROUND_COLORS = { + [SCREENS.HOME]: lightTheme.sidebar, +}; + +export default lightTheme; From 8352a65b3fe5c5100b96255d1978194417b1bc4b Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 17 Jul 2023 08:29:49 +0100 Subject: [PATCH 03/21] add greenPrimaryText key --- .storybook/theme.js | 4 ++-- src/pages/home/report/LinkPreviewer.js | 4 ++-- src/styles/StyleUtils.js | 2 +- src/styles/colors.js | 6 ------ src/styles/themes/default.js | 14 +++++++------- src/styles/themes/light.js | 12 ++++++------ 6 files changed, 18 insertions(+), 24 deletions(-) diff --git a/.storybook/theme.js b/.storybook/theme.js index 0867f6a830b5..e3d05cd2fb12 100644 --- a/.storybook/theme.js +++ b/.storybook/theme.js @@ -11,8 +11,8 @@ export default create({ colorPrimary: colors.greenDefaultButton, colorSecondary: colors.green, appContentBg: colors.greenAppBackground, - textColor: colors.white, - barTextColor: colors.white, + textColor: colors.greenPrimaryText, + barTextColor: colors.greenPrimaryText, barSelectedColor: colors.green, barBg: colors.greenAppBackground, appBorderColor: colors.greenBorders, diff --git a/src/pages/home/report/LinkPreviewer.js b/src/pages/home/report/LinkPreviewer.js index ca5614fe2208..809e8b8feccd 100644 --- a/src/pages/home/report/LinkPreviewer.js +++ b/src/pages/home/report/LinkPreviewer.js @@ -9,7 +9,7 @@ import TextLink from '../../../components/TextLink'; import * as StyleUtils from '../../../styles/StyleUtils'; import styles from '../../../styles/styles'; import variables from '../../../styles/variables'; -import colors from '../../../styles/colors'; +import themeColors from '../../../styles/themes/default'; const IMAGE_TYPES = ['jpg', 'jpeg', 'png']; const MAX_IMAGE_SIZE = 350; @@ -107,7 +107,7 @@ function LinkPreviewer(props) { {!_.isEmpty(title) && ( {title} diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 8a520607d0c7..21af895ae5a6 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -1052,7 +1052,7 @@ function getAutoCompleteSuggestionContainerStyle(itemsHeight, shouldIncludeRepor * @param {Boolean} isColored * @returns {String | null} */ -const getColoredBackgroundStyle = (isColored) => ({backgroundColor: isColored ? colors.blueLink : null}); +const getColoredBackgroundStyle = (isColored) => ({backgroundColor: isColored ? themeColors.link : null}); function getEmojiReactionBubbleStyle(isHovered, hasUserReacted, isContextMenu = false) { let backgroundColor = themeColors.border; diff --git a/src/styles/colors.js b/src/styles/colors.js index 672fc6630372..7aac0c2da6da 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.js @@ -24,9 +24,6 @@ export default { greenSupportingText: '#AFBBB0', greenPrimaryText: '#E7ECE9', white: '#E7ECE9', - blueLink: '#5AB0FF', - blueLinkHover: '#B0D9FF', - blueLinkPreview: '#2EAAE2', greenDefaultButton: '#184E3D', greenDefaultButtonHover: '#2C6755', greenDefaultButtonPressed: '#467164', @@ -40,9 +37,6 @@ export default { lightIcons: '#A2A9A3', lightSupportingText: '#76847E', lightPrimaryText: '#002E22', - blueLink: '#0164BF', - blueLinkHover: '#B0D9FF', - blueLinkPreview: '#2EAAE2', lightDefaultButton: '#EEEBE7', lightDefaultButtonHover: '#E3DFD9', lightDefaultButtonPressed: '#D2CCC3', diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js index 875da1591734..b190c4c720cb 100644 --- a/src/styles/themes/default.js +++ b/src/styles/themes/default.js @@ -12,11 +12,11 @@ const darkTheme = { borderFocus: colors.green, icon: colors.greenIcons, iconMenu: colors.green, - iconHovered: colors.white, + iconHovered: colors.greenPrimaryText, iconSuccessFill: colors.green, iconReversed: colors.greenAppBackground, textSupporting: colors.greenSupportingText, - text: colors.white, + text: colors.greenPrimaryText, link: colors.blue300, linkHover: colors.blue100, buttonDefaultBG: colors.greenDefaultButton, @@ -32,11 +32,11 @@ const darkTheme = { transparent: colors.transparent, midtone: colors.green700, signInPage: colors.green800, - dark: colors.midnight, + dark: colors.blue800, // Additional keys overlay: colors.greenHighlightBackground, - inverse: colors.white, + inverse: colors.greenPrimaryText, shadow: colors.black, componentBG: colors.greenAppBackground, hoverComponentBG: colors.greenHighlightBackground, @@ -44,8 +44,8 @@ const darkTheme = { signInSidebar: colors.green800, sidebar: colors.greenHighlightBackground, sidebarHover: colors.greenAppBackground, - heading: colors.white, - textLight: colors.white, + heading: colors.greenPrimaryText, + textLight: colors.greenPrimaryText, textDark: colors.greenAppBackground, textReversed: colors.greenAppBackground, textBackground: colors.greenHighlightBackground, @@ -64,7 +64,7 @@ const darkTheme = { dropUIBG: 'rgba(6,27,9,0.92)', dropTransparentOverlay: 'rgba(255,255,255,0)', checkBox: colors.green, - pickerOptionsTextColor: colors.white, + pickerOptionsTextColor: colors.greenPrimaryText, imageCropBackgroundColor: colors.greenIcons, fallbackIconColor: colors.green700, reactionActiveBackground: colors.green600, diff --git a/src/styles/themes/light.js b/src/styles/themes/light.js index 3fd51134b038..1e268398e175 100644 --- a/src/styles/themes/light.js +++ b/src/styles/themes/light.js @@ -11,7 +11,7 @@ const lightTheme = { borderFocus: colors.green, icon: colors.lightIcons, iconMenu: colors.green, - iconHovered: colors.white, + iconHovered: colors.lightPrimaryText, iconSuccessFill: colors.green, iconReversed: colors.lightAppBackground, textSupporting: colors.lightSupportingText, @@ -31,11 +31,11 @@ const lightTheme = { transparent: colors.transparent, midtone: colors.green700, signInPage: colors.green800, - dark: colors.midnight, + dark: colors.blue800, // Additional keys overlay: colors.lightHighlightBackground, - inverse: colors.white, + inverse: colors.lightPrimaryText, shadow: colors.black, componentBG: colors.lightAppBackground, hoverComponentBG: colors.lightHighlightBackground, @@ -43,8 +43,8 @@ const lightTheme = { signInSidebar: colors.green800, sidebar: colors.lightHighlightBackground, sidebarHover: colors.lightAppBackground, - heading: colors.white, - textLight: colors.white, + heading: colors.lightPrimaryText, + textLight: colors.greenPrimaryText, textDark: colors.lightPrimaryText, textReversed: colors.lightAppBackground, textBackground: colors.lightHighlightBackground, @@ -63,7 +63,7 @@ const lightTheme = { dropUIBG: 'rgba(6,27,9,0.92)', dropTransparentOverlay: 'rgba(255,255,255,0)', checkBox: colors.green, - pickerOptionsTextColor: colors.white, + pickerOptionsTextColor: colors.lightPrimaryText, imageCropBackgroundColor: colors.lightIcons, fallbackIconColor: colors.green700, reactionActiveBackground: colors.green100, From 70b0f8050476509639d0cf5f6ee9acfd78d47816 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 17 Jul 2023 08:37:42 +0100 Subject: [PATCH 04/21] Clean up colors by removing duplicate colors --- .storybook/theme.js | 18 ++--- src/components/GrowlNotification/index.js | 8 +- .../ReimbursementAccount/BankAccountStep.js | 2 +- src/styles/colors.js | 24 +++--- src/styles/themes/default.js | 74 +++++++++---------- src/styles/themes/light.js | 12 +-- 6 files changed, 67 insertions(+), 71 deletions(-) diff --git a/.storybook/theme.js b/.storybook/theme.js index e3d05cd2fb12..96631764726f 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.greenHighlightBackground, - colorPrimary: colors.greenDefaultButton, + appBg: colors.darkHighlightBackground, + colorPrimary: colors.darkDefaultButton, colorSecondary: colors.green, - appContentBg: colors.greenAppBackground, - textColor: colors.greenPrimaryText, - barTextColor: colors.greenPrimaryText, + appContentBg: colors.darkAppBackground, + textColor: colors.darkPrimaryText, + barTextColor: colors.darkPrimaryText, barSelectedColor: colors.green, - barBg: colors.greenAppBackground, - appBorderColor: colors.greenBorders, - inputBg: colors.greenHighlightBackground, - inputBorder: colors.greenBorders, + barBg: colors.darkAppBackground, + appBorderColor: colors.darkBorders, + inputBg: colors.darkHighlightBackground, + inputBorder: colors.darkBorders, appBorderRadius: 8, inputBorderRadius: 8, }); diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js index b995d0ec7039..964c4f3439f9 100644 --- a/src/components/GrowlNotification/index.js +++ b/src/components/GrowlNotification/index.js @@ -1,7 +1,7 @@ import React, {Component} from 'react'; import {View, Animated} from 'react-native'; import {Directions, FlingGestureHandler, State} from 'react-native-gesture-handler'; -import colors from '../../styles/colors'; +import themeColors from '../../styles/themes/default'; import Text from '../Text'; import Icon from '../Icon'; import * as Expensicons from '../Icon/Expensicons'; @@ -14,15 +14,15 @@ import * as Pressables from '../Pressable'; const types = { [CONST.GROWL.SUCCESS]: { icon: Expensicons.Checkmark, - iconColor: colors.green, + iconColor: themeColors.success, }, [CONST.GROWL.ERROR]: { icon: Expensicons.Exclamation, - iconColor: colors.red, + iconColor: themeColors.danger, }, [CONST.GROWL.WARNING]: { icon: Expensicons.Exclamation, - iconColor: colors.yellow, + iconColor: themeColors.warning, }, }; diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index 9617fbf46419..7cdd54548398 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -158,7 +158,7 @@ function BankAccountStep(props) { diff --git a/src/styles/colors.js b/src/styles/colors.js index 7aac0c2da6da..3b00a9a4c425 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.js @@ -2,9 +2,8 @@ * DO NOT import colors.js into files. Use ../themes/default.js instead. */ export default { - dark: '#0b1b34', black: '#000000', - blue: '#0185ff', + white: '#E7ECE9', blueHover: '#B0D9FF', green: '#03D47C', greenHover: '#00C271', @@ -13,21 +12,18 @@ export default { redHover: '#DE4822', redPressed: '#F57959', redDisabled: '#F8AA97', - yellow: '#FED607', transparent: 'transparent', // Dark Mode Theme Colors - greenAppBackground: '#061B09', - greenHighlightBackground: '#07271F', - greenBorders: '#1A3D32', - greenIcons: '#8B9C8F', - greenSupportingText: '#AFBBB0', - greenPrimaryText: '#E7ECE9', - white: '#E7ECE9', - greenDefaultButton: '#184E3D', - greenDefaultButtonHover: '#2C6755', - greenDefaultButtonPressed: '#467164', - midnight: '#002140', + darkAppBackground: '#061B09', + darkHighlightBackground: '#07271F', + darkBorders: '#1A3D32', + darkIcons: '#8B9C8F', + darkSupportingText: '#AFBBB0', + darkPrimaryText: '#E7ECE9', + darkDefaultButton: '#184E3D', + darkDefaultButtonHover: '#2C6755', + darkDefaultButtonPressed: '#467164', // Light Mode Theme Colors lightAppBackground: '#FCFBF9', diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js index b190c4c720cb..d885d6c578df 100644 --- a/src/styles/themes/default.js +++ b/src/styles/themes/default.js @@ -4,28 +4,28 @@ import SCREENS from '../../SCREENS'; const darkTheme = { // Figma keys - appBG: colors.greenAppBackground, + appBG: colors.darkAppBackground, splashBG: colors.green, - highlightBG: colors.greenHighlightBackground, - border: colors.greenBorders, - borderLighter: colors.greenDefaultButton, + highlightBG: colors.darkHighlightBackground, + border: colors.darkBorders, + borderLighter: colors.darkDefaultButton, borderFocus: colors.green, - icon: colors.greenIcons, + icon: colors.darkIcons, iconMenu: colors.green, - iconHovered: colors.greenPrimaryText, + iconHovered: colors.darkPrimaryText, iconSuccessFill: colors.green, - iconReversed: colors.greenAppBackground, - textSupporting: colors.greenSupportingText, - text: colors.greenPrimaryText, + iconReversed: colors.darkAppBackground, + textSupporting: colors.darkSupportingText, + text: colors.darkPrimaryText, link: colors.blue300, linkHover: colors.blue100, - buttonDefaultBG: colors.greenDefaultButton, - buttonHoveredBG: colors.greenDefaultButtonHover, - buttonPressedBG: colors.greenDefaultButtonPressed, + buttonDefaultBG: colors.darkDefaultButton, + buttonHoveredBG: colors.darkDefaultButtonHover, + buttonPressedBG: colors.darkDefaultButtonPressed, danger: colors.red, dangerHover: colors.redHover, dangerPressed: colors.redHover, - warning: colors.yellow, + warning: colors.yellow400, success: colors.green, successHover: colors.greenHover, successPressed: colors.greenPressed, @@ -35,37 +35,37 @@ const darkTheme = { dark: colors.blue800, // Additional keys - overlay: colors.greenHighlightBackground, - inverse: colors.greenPrimaryText, + overlay: colors.darkHighlightBackground, + inverse: colors.darkPrimaryText, shadow: colors.black, - componentBG: colors.greenAppBackground, - hoverComponentBG: colors.greenHighlightBackground, - activeComponentBG: colors.greenBorders, + componentBG: colors.darkAppBackground, + hoverComponentBG: colors.darkHighlightBackground, + activeComponentBG: colors.darkBorders, signInSidebar: colors.green800, - sidebar: colors.greenHighlightBackground, - sidebarHover: colors.greenAppBackground, - heading: colors.greenPrimaryText, - textLight: colors.greenPrimaryText, - textDark: colors.greenAppBackground, - textReversed: colors.greenAppBackground, - textBackground: colors.greenHighlightBackground, - textMutedReversed: colors.greenIcons, + sidebar: colors.darkHighlightBackground, + sidebarHover: colors.darkAppBackground, + heading: colors.darkPrimaryText, + textLight: colors.darkPrimaryText, + textDark: colors.darkAppBackground, + textReversed: colors.darkAppBackground, + textBackground: colors.darkHighlightBackground, + textMutedReversed: colors.darkIcons, textError: colors.red, - offline: colors.greenIcons, - modalBackdrop: colors.greenHighlightBackground, - modalBackground: colors.greenAppBackground, - cardBG: colors.greenHighlightBackground, - cardBorder: colors.greenHighlightBackground, - spinner: colors.greenSupportingText, + offline: colors.darkIcons, + modalBackdrop: colors.darkHighlightBackground, + modalBackground: colors.darkAppBackground, + cardBG: colors.darkHighlightBackground, + cardBorder: colors.darkHighlightBackground, + spinner: colors.darkSupportingText, unreadIndicator: colors.green, - placeholderText: colors.greenIcons, - heroCard: colors.blue, - uploadPreviewActivityIndicator: colors.greenHighlightBackground, + placeholderText: colors.darkIcons, + heroCard: colors.blue400, + uploadPreviewActivityIndicator: colors.darkHighlightBackground, dropUIBG: 'rgba(6,27,9,0.92)', dropTransparentOverlay: 'rgba(255,255,255,0)', checkBox: colors.green, - pickerOptionsTextColor: colors.greenPrimaryText, - imageCropBackgroundColor: colors.greenIcons, + pickerOptionsTextColor: colors.darkPrimaryText, + imageCropBackgroundColor: colors.darkIcons, fallbackIconColor: colors.green700, reactionActiveBackground: colors.green600, reactionActiveText: colors.green100, diff --git a/src/styles/themes/light.js b/src/styles/themes/light.js index 1e268398e175..f98ba9cb38f0 100644 --- a/src/styles/themes/light.js +++ b/src/styles/themes/light.js @@ -18,13 +18,13 @@ const lightTheme = { text: colors.lightPrimaryText, link: colors.blue600, linkHover: colors.blue500, - buttonDefaultBG: colors.greenDefaultButton, - buttonHoveredBG: colors.greenDefaultButtonHover, - buttonPressedBG: colors.greenDefaultButtonPressed, + buttonDefaultBG: colors.darkDefaultButton, + buttonHoveredBG: colors.darkDefaultButtonHover, + buttonPressedBG: colors.darkDefaultButtonPressed, danger: colors.red, dangerHover: colors.redHover, dangerPressed: colors.redHover, - warning: colors.yellow, + warning: colors.yellow400, success: colors.green, successHover: colors.greenHover, successPressed: colors.greenPressed, @@ -44,7 +44,7 @@ const lightTheme = { sidebar: colors.lightHighlightBackground, sidebarHover: colors.lightAppBackground, heading: colors.lightPrimaryText, - textLight: colors.greenPrimaryText, + textLight: colors.darkPrimaryText, textDark: colors.lightPrimaryText, textReversed: colors.lightAppBackground, textBackground: colors.lightHighlightBackground, @@ -58,7 +58,7 @@ const lightTheme = { spinner: colors.lightSupportingText, unreadIndicator: colors.green, placeholderText: colors.lightIcons, - heroCard: colors.blue, + heroCard: colors.blue400, uploadPreviewActivityIndicator: colors.lightHighlightBackground, dropUIBG: 'rgba(6,27,9,0.92)', dropTransparentOverlay: 'rgba(255,255,255,0)', From 0facffb9580cd2fbfaf28badf3f75cc2cbdb1baf Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 17 Jul 2023 09:45:44 +0100 Subject: [PATCH 05/21] clean up hover styles for light theme --- src/styles/colors.js | 4 +--- src/styles/styles.js | 4 ++-- src/styles/themes/default.js | 4 +--- src/styles/themes/light.js | 18 +++++++++--------- 4 files changed, 13 insertions(+), 17 deletions(-) diff --git a/src/styles/colors.js b/src/styles/colors.js index 3b00a9a4c425..3dc4f3d1884b 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.js @@ -3,15 +3,13 @@ */ export default { black: '#000000', - white: '#E7ECE9', - blueHover: '#B0D9FF', + white: '#FFFFFF', green: '#03D47C', greenHover: '#00C271', greenPressed: '#35DD96', red: '#F25730', redHover: '#DE4822', redPressed: '#F57959', - redDisabled: '#F8AA97', transparent: 'transparent', // Dark Mode Theme Colors diff --git a/src/styles/styles.js b/src/styles/styles.js index b27805b13515..aa3c3541770b 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -3281,7 +3281,7 @@ const styles = { }, fontColorReactionLabel: { - color: '#586A64', + color: themeColors.tooltipSupportingText, }, reactionEmojiTitle: { @@ -3290,7 +3290,7 @@ const styles = { }, textReactionSenders: { - color: themeColors.dark, + color: themeColors.tooltipPrimaryText, ...wordBreak.breakWord, }, diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js index d885d6c578df..fe6e747372c7 100644 --- a/src/styles/themes/default.js +++ b/src/styles/themes/default.js @@ -30,9 +30,7 @@ const darkTheme = { successHover: colors.greenHover, successPressed: colors.greenPressed, transparent: colors.transparent, - midtone: colors.green700, signInPage: colors.green800, - dark: colors.blue800, // Additional keys overlay: colors.darkHighlightBackground, @@ -47,7 +45,7 @@ const darkTheme = { heading: colors.darkPrimaryText, textLight: colors.darkPrimaryText, textDark: colors.darkAppBackground, - textReversed: colors.darkAppBackground, + textReversed: colors.lightPrimaryText, textBackground: colors.darkHighlightBackground, textMutedReversed: colors.darkIcons, textError: colors.red, diff --git a/src/styles/themes/light.js b/src/styles/themes/light.js index f98ba9cb38f0..3aedacb77a45 100644 --- a/src/styles/themes/light.js +++ b/src/styles/themes/light.js @@ -18,9 +18,9 @@ const lightTheme = { text: colors.lightPrimaryText, link: colors.blue600, linkHover: colors.blue500, - buttonDefaultBG: colors.darkDefaultButton, - buttonHoveredBG: colors.darkDefaultButtonHover, - buttonPressedBG: colors.darkDefaultButtonPressed, + buttonDefaultBG: colors.lightDefaultButton, + buttonHoveredBG: colors.lightDefaultButtonHover, + buttonPressedBG: colors.lightDefaultButtonPressed, danger: colors.red, dangerHover: colors.redHover, dangerPressed: colors.redHover, @@ -29,9 +29,7 @@ const lightTheme = { successHover: colors.greenHover, successPressed: colors.greenPressed, transparent: colors.transparent, - midtone: colors.green700, signInPage: colors.green800, - dark: colors.blue800, // Additional keys overlay: colors.lightHighlightBackground, @@ -42,11 +40,11 @@ const lightTheme = { activeComponentBG: colors.lightBorders, signInSidebar: colors.green800, sidebar: colors.lightHighlightBackground, - sidebarHover: colors.lightAppBackground, + sidebarHover: colors.lightBorders, heading: colors.lightPrimaryText, - textLight: colors.darkPrimaryText, + textLight: colors.white, textDark: colors.lightPrimaryText, - textReversed: colors.lightAppBackground, + textReversed: colors.darkPrimaryText, textBackground: colors.lightHighlightBackground, textMutedReversed: colors.lightIcons, textError: colors.red, @@ -60,7 +58,7 @@ const lightTheme = { placeholderText: colors.lightIcons, heroCard: colors.blue400, uploadPreviewActivityIndicator: colors.lightHighlightBackground, - dropUIBG: 'rgba(6,27,9,0.92)', + dropUIBG: 'rgba(252, 251, 249, 0.92)', dropTransparentOverlay: 'rgba(255,255,255,0)', checkBox: colors.green, pickerOptionsTextColor: colors.lightPrimaryText, @@ -74,6 +72,8 @@ const lightTheme = { mentionBG: colors.blue100, ourMentionText: colors.green600, ourMentionBG: colors.green100, + tooltipSupportingText: colors.darkSupportingText, + tooltipPrimaryText: colors.darkPrimaryText, }; lightTheme.PAGE_BACKGROUND_COLORS = { From 3aec7e94f08b4618ef769795a5c112eaca1c7e89 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Tue, 18 Jul 2023 12:54:02 +0100 Subject: [PATCH 06/21] merge --- src/styles/colors.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/colors.js b/src/styles/colors.js index 3dc4f3d1884b..9ac3226a1b80 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.js @@ -4,6 +4,7 @@ export default { black: '#000000', white: '#FFFFFF', + ivory: '#fffaf0', green: '#03D47C', greenHover: '#00C271', greenPressed: '#35DD96', From a4a540a015b9746deaa6d862a54ef4b6826abc99 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Wed, 19 Jul 2023 11:39:15 +0100 Subject: [PATCH 07/21] Use Light Theme --- src/styles/themes/default.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js index 1d1aef4d16d8..aa03fbb9506a 100644 --- a/src/styles/themes/default.js +++ b/src/styles/themes/default.js @@ -1,6 +1,7 @@ /* eslint-disable no-unused-vars */ import colors from '../colors'; import SCREENS from '../../SCREENS'; +import lightTheme from './light'; const darkTheme = { // Figma keys @@ -81,4 +82,4 @@ darkTheme.PAGE_BACKGROUND_COLORS = { [SCREENS.SETTINGS.PREFERENCES]: colors.blue500, }; -export default darkTheme; +export default lightTheme; From 4f68432738611a244662344a275499d2322ec61c Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Wed, 19 Jul 2023 15:06:54 +0100 Subject: [PATCH 08/21] use green400 in themes for readability, fix preferences page --- src/styles/themes/default.js | 14 +++++++------- src/styles/themes/light.js | 15 ++++++++------- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js index 1d1aef4d16d8..145edb12b78c 100644 --- a/src/styles/themes/default.js +++ b/src/styles/themes/default.js @@ -5,15 +5,15 @@ import SCREENS from '../../SCREENS'; const darkTheme = { // Figma keys appBG: colors.darkAppBackground, - splashBG: colors.green, + splashBG: colors.green400, highlightBG: colors.darkHighlightBackground, border: colors.darkBorders, borderLighter: colors.darkDefaultButton, - borderFocus: colors.green, + borderFocus: colors.green400, icon: colors.darkIcons, - iconMenu: colors.green, + iconMenu: colors.green400, iconHovered: colors.darkPrimaryText, - iconSuccessFill: colors.green, + iconSuccessFill: colors.green400, iconReversed: colors.darkAppBackground, iconColorfulBackground: `${colors.ivory}cc`, textSupporting: colors.darkSupportingText, @@ -27,7 +27,7 @@ const darkTheme = { dangerHover: colors.redHover, dangerPressed: colors.redHover, warning: colors.yellow400, - success: colors.green, + success: colors.green400, successHover: colors.greenHover, successPressed: colors.greenPressed, transparent: colors.transparent, @@ -56,13 +56,13 @@ const darkTheme = { cardBG: colors.darkHighlightBackground, cardBorder: colors.darkHighlightBackground, spinner: colors.darkSupportingText, - unreadIndicator: colors.green, + unreadIndicator: colors.green400, placeholderText: colors.darkIcons, heroCard: colors.blue400, uploadPreviewActivityIndicator: colors.darkHighlightBackground, dropUIBG: 'rgba(6,27,9,0.92)', dropTransparentOverlay: 'rgba(255,255,255,0)', - checkBox: colors.green, + checkBox: colors.green400, pickerOptionsTextColor: colors.darkPrimaryText, imageCropBackgroundColor: colors.darkIcons, fallbackIconColor: colors.green700, diff --git a/src/styles/themes/light.js b/src/styles/themes/light.js index 3aedacb77a45..297722e08778 100644 --- a/src/styles/themes/light.js +++ b/src/styles/themes/light.js @@ -4,15 +4,15 @@ import SCREENS from '../../SCREENS'; const lightTheme = { // Figma keys appBG: colors.lightAppBackground, - splashBG: colors.green, + splashBG: colors.green400, highlightBG: colors.lightHighlightBackground, border: colors.lightBorders, borderLighter: colors.lightDefaultButtonPressed, - borderFocus: colors.green, + borderFocus: colors.green400, icon: colors.lightIcons, - iconMenu: colors.green, + iconMenu: colors.green400, iconHovered: colors.lightPrimaryText, - iconSuccessFill: colors.green, + iconSuccessFill: colors.green400, iconReversed: colors.lightAppBackground, textSupporting: colors.lightSupportingText, text: colors.lightPrimaryText, @@ -25,7 +25,7 @@ const lightTheme = { dangerHover: colors.redHover, dangerPressed: colors.redHover, warning: colors.yellow400, - success: colors.green, + success: colors.green400, successHover: colors.greenHover, successPressed: colors.greenPressed, transparent: colors.transparent, @@ -54,13 +54,13 @@ const lightTheme = { cardBG: colors.lightHighlightBackground, cardBorder: colors.lightHighlightBackground, spinner: colors.lightSupportingText, - unreadIndicator: colors.green, + unreadIndicator: colors.green400, placeholderText: colors.lightIcons, heroCard: colors.blue400, uploadPreviewActivityIndicator: colors.lightHighlightBackground, dropUIBG: 'rgba(252, 251, 249, 0.92)', dropTransparentOverlay: 'rgba(255,255,255,0)', - checkBox: colors.green, + checkBox: colors.green400, pickerOptionsTextColor: colors.lightPrimaryText, imageCropBackgroundColor: colors.lightIcons, fallbackIconColor: colors.green700, @@ -78,6 +78,7 @@ const lightTheme = { lightTheme.PAGE_BACKGROUND_COLORS = { [SCREENS.HOME]: lightTheme.sidebar, + [SCREENS.SETTINGS.PREFERENCES]: colors.blue500, }; export default lightTheme; From 666d370530a03e537ba4f50fdb38e70c381593ef Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Wed, 19 Jul 2023 15:39:28 +0100 Subject: [PATCH 09/21] use text color instead of textLight --- src/styles/StyleUtils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 21af895ae5a6..ad50ebe2296d 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -1099,7 +1099,7 @@ function getEmojiReactionCounterTextStyle(hasUserReacted) { return {color: themeColors.reactionActiveText}; } - return {color: themeColors.textLight}; + return {color: themeColors.text}; } /** From 88b810581b2216ce656777a52412724f58c5880a Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 24 Jul 2023 12:13:53 +0100 Subject: [PATCH 10/21] Fix skeletonUI --- src/components/OptionsList/BaseOptionsList.js | 2 +- src/components/OptionsListSkeletonView.js | 4 ++-- src/components/ReportActionsSkeletonView/SkeletonViewLines.js | 4 ++-- src/pages/home/sidebar/SidebarLinks.js | 2 +- src/styles/themes/default.js | 4 ++++ src/styles/themes/light.js | 2 ++ 6 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js index 9c5777e222c9..469f1a9eac64 100644 --- a/src/components/OptionsList/BaseOptionsList.js +++ b/src/components/OptionsList/BaseOptionsList.js @@ -208,7 +208,7 @@ class BaseOptionsList extends Component { return ( {this.props.isLoading ? ( - + ) : ( <> {this.props.headerMessage ? ( diff --git a/src/components/OptionsListSkeletonView.js b/src/components/OptionsListSkeletonView.js index ffe9652e3945..15c66affe84d 100644 --- a/src/components/OptionsListSkeletonView.js +++ b/src/components/OptionsListSkeletonView.js @@ -60,8 +60,8 @@ class OptionsListSkeletonView extends React.Component { key={`skeletonViewItems${i}`} animate={this.props.shouldAnimate} height={CONST.LHN_SKELETON_VIEW_ITEM_HEIGHT} - backgroundColor={themeColors.borderLighter} - foregroundColor={themeColors.border} + backgroundColor={themeColors.skeletonLHNIn} + foregroundColor={themeColors.skeletonLHNOut} style={styles.mr5} > diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js index 7998ed6f44d1..27fe348da6d3 100644 --- a/src/styles/themes/default.js +++ b/src/styles/themes/default.js @@ -75,6 +75,10 @@ const darkTheme = { mentionBG: colors.blue600, ourMentionText: colors.green100, ourMentionBG: colors.green600, + tooltipSupportingText: colors.lightSupportingText, + tooltipPrimaryText: colors.lightPrimaryText, + skeletonLHNIn: colors.darkBorders, + skeletonLHNOut: colors.darkDefaultButton, }; darkTheme.PAGE_BACKGROUND_COLORS = { diff --git a/src/styles/themes/light.js b/src/styles/themes/light.js index 297722e08778..b43c834ac70b 100644 --- a/src/styles/themes/light.js +++ b/src/styles/themes/light.js @@ -74,6 +74,8 @@ const lightTheme = { ourMentionBG: colors.green100, tooltipSupportingText: colors.darkSupportingText, tooltipPrimaryText: colors.darkPrimaryText, + skeletonLHNIn: colors.lightBorders, + skeletonLHNOut: colors.lightDefaultButtonPressed, }; lightTheme.PAGE_BACKGROUND_COLORS = { From c9b198b9c1ae0e1840218357851a58b7223fd049 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 24 Jul 2023 12:22:26 +0100 Subject: [PATCH 11/21] Change toggle color --- src/components/QRShare/index.js | 2 +- src/styles/styles.js | 2 +- src/styles/themes/default.js | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/QRShare/index.js b/src/components/QRShare/index.js index 5dc2c53dc8d3..8b9a1db05618 100644 --- a/src/components/QRShare/index.js +++ b/src/components/QRShare/index.js @@ -50,7 +50,7 @@ class QRShare extends Component { > diff --git a/src/styles/styles.js b/src/styles/styles.js index 976c97c93e18..d364b683766e 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2484,7 +2484,7 @@ const styles = { }, switchInactive: { - backgroundColor: themeColors.border, + backgroundColor: themeColors.icon, }, switchThumb: { diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js index 27fe348da6d3..eb69703a8505 100644 --- a/src/styles/themes/default.js +++ b/src/styles/themes/default.js @@ -79,6 +79,7 @@ const darkTheme = { tooltipPrimaryText: colors.lightPrimaryText, skeletonLHNIn: colors.darkBorders, skeletonLHNOut: colors.darkDefaultButton, + QRLogo: colors.green500, }; darkTheme.PAGE_BACKGROUND_COLORS = { From 5eed00487fdcfb02be4be5fc66cf6832dc032e1f Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 24 Jul 2023 18:49:27 +0100 Subject: [PATCH 12/21] fix light theme QR color --- src/styles/themes/default.js | 2 +- src/styles/themes/light.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js index eb69703a8505..4a53be9ab312 100644 --- a/src/styles/themes/default.js +++ b/src/styles/themes/default.js @@ -79,7 +79,7 @@ const darkTheme = { tooltipPrimaryText: colors.lightPrimaryText, skeletonLHNIn: colors.darkBorders, skeletonLHNOut: colors.darkDefaultButton, - QRLogo: colors.green500, + QRLogo: colors.green400, }; darkTheme.PAGE_BACKGROUND_COLORS = { diff --git a/src/styles/themes/light.js b/src/styles/themes/light.js index b43c834ac70b..7d2a88daeba1 100644 --- a/src/styles/themes/light.js +++ b/src/styles/themes/light.js @@ -76,6 +76,7 @@ const lightTheme = { tooltipPrimaryText: colors.darkPrimaryText, skeletonLHNIn: colors.lightBorders, skeletonLHNOut: colors.lightDefaultButtonPressed, + QRLogo: colors.green500, }; lightTheme.PAGE_BACKGROUND_COLORS = { From a45b938e10f3a47054e2c7d6b9d7a3c2e6658b26 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 24 Jul 2023 18:51:38 +0100 Subject: [PATCH 13/21] fix preferences page --- src/styles/themes/light.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/themes/light.js b/src/styles/themes/light.js index 7d2a88daeba1..8bc01bb31cf6 100644 --- a/src/styles/themes/light.js +++ b/src/styles/themes/light.js @@ -14,6 +14,7 @@ const lightTheme = { iconHovered: colors.lightPrimaryText, iconSuccessFill: colors.green400, iconReversed: colors.lightAppBackground, + iconColorfulBackground: `${colors.ivory}cc`, textSupporting: colors.lightSupportingText, text: colors.lightPrimaryText, link: colors.blue600, From 22bcfce5efa3feb4d0e4d007fa85a12e10af1ebb Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Fri, 28 Jul 2023 14:31:11 +0100 Subject: [PATCH 14/21] Still use darkTheme --- src/styles/themes/default.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js index 4a53be9ab312..7067f51242c2 100644 --- a/src/styles/themes/default.js +++ b/src/styles/themes/default.js @@ -1,7 +1,6 @@ /* eslint-disable no-unused-vars */ import colors from '../colors'; import SCREENS from '../../SCREENS'; -import lightTheme from './light'; const darkTheme = { // Figma keys @@ -87,4 +86,4 @@ darkTheme.PAGE_BACKGROUND_COLORS = { [SCREENS.SETTINGS.PREFERENCES]: colors.blue500, }; -export default lightTheme; +export default darkTheme; From d05008c8750919560466cf03b1e17ff21f49ce52 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Fri, 28 Jul 2023 14:33:47 +0100 Subject: [PATCH 15/21] merge new key --- src/styles/themes/light.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/themes/light.js b/src/styles/themes/light.js index 8bc01bb31cf6..ddb8f6bb85d3 100644 --- a/src/styles/themes/light.js +++ b/src/styles/themes/light.js @@ -15,6 +15,7 @@ const lightTheme = { iconSuccessFill: colors.green400, iconReversed: colors.lightAppBackground, iconColorfulBackground: `${colors.ivory}cc`, + textColorfulBackground: colors.ivory, textSupporting: colors.lightSupportingText, text: colors.lightPrimaryText, link: colors.blue600, From b1ccade1105dd208ce74107601ae33333c4a9ae4 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Fri, 28 Jul 2023 14:35:03 +0100 Subject: [PATCH 16/21] make QR logo 400 --- src/styles/themes/light.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/themes/light.js b/src/styles/themes/light.js index ddb8f6bb85d3..82717f35f124 100644 --- a/src/styles/themes/light.js +++ b/src/styles/themes/light.js @@ -78,7 +78,7 @@ const lightTheme = { tooltipPrimaryText: colors.darkPrimaryText, skeletonLHNIn: colors.lightBorders, skeletonLHNOut: colors.lightDefaultButtonPressed, - QRLogo: colors.green500, + QRLogo: colors.green400, }; lightTheme.PAGE_BACKGROUND_COLORS = { From 8733c38b3abab19cdd4ffe3f962a6cd2b1ab09bd Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Wed, 13 Sep 2023 11:45:56 +0800 Subject: [PATCH 17/21] remove new color imports --- .../DeeplinkRedirectLoadingIndicator.js | 4 +- src/components/DotIndicatorMessage.js | 2 +- src/components/FormHelpMessage.js | 4 +- src/components/LHNOptionsList/OptionRowLHN.js | 3 +- src/components/MenuItem.js | 3 +- src/components/OptionsList/BaseOptionsList.js | 2 +- .../ReportActionItem/MoneyRequestPreview.js | 3 +- .../ReportActionItem/ReportPreview.js | 3 +- .../ValidateCode/ExpiredValidateCodeModal.js | 4 +- .../ValidateCode/JustSignedInModal.js | 4 +- .../ValidateCode/ValidateCodeModal.js | 4 +- src/pages/LogInWithShortLivedAuthTokenPage.js | 4 +- .../ReimbursementAccount/BankAccountStep.js | 6 +-- src/pages/home/HeaderView.js | 4 +- src/styles/StyleUtils.ts | 37 ++----------------- src/styles/colors.js | 1 - src/styles/getTooltipStyles.ts | 7 ++-- src/styles/styles.js | 9 ++--- src/styles/themes/default.js | 2 +- src/styles/themes/light.js | 4 ++ 20 files changed, 38 insertions(+), 72 deletions(-) diff --git a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js index e31429af61b6..61614c7e49e6 100644 --- a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js +++ b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js @@ -7,7 +7,7 @@ import Text from '../Text'; import Icon from '../Icon'; import * as Illustrations from '../Icon/Illustrations'; import * as Expensicons from '../Icon/Expensicons'; -import colors from '../../styles/colors'; +import themeColors from '../../styles/themes/default'; import styles from '../../styles/styles'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import Navigation from '../../libs/Navigation/Navigation'; @@ -56,7 +56,7 @@ function DeeplinkRedirectLoadingIndicator({translate, openLinkInBrowser, session diff --git a/src/components/DotIndicatorMessage.js b/src/components/DotIndicatorMessage.js index ac550f34de3f..47aca9da0a5a 100644 --- a/src/components/DotIndicatorMessage.js +++ b/src/components/DotIndicatorMessage.js @@ -57,7 +57,7 @@ function DotIndicatorMessage(props) { diff --git a/src/components/FormHelpMessage.js b/src/components/FormHelpMessage.js index df8befe5af30..39242511937d 100644 --- a/src/components/FormHelpMessage.js +++ b/src/components/FormHelpMessage.js @@ -5,7 +5,7 @@ import {View} from 'react-native'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import Text from './Text'; -import colors from '../styles/colors'; +import themeColors from '../styles/themes/default'; import styles from '../styles/styles'; import stylePropTypes from '../styles/stylePropTypes'; import * as Localize from '../libs/Localize'; @@ -42,7 +42,7 @@ function FormHelpMessage(props) { {props.isError && ( )} diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index cc187164f116..8bef8c1c00c9 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -12,7 +12,6 @@ import * as Expensicons from '../Icon/Expensicons'; import MultipleAvatars from '../MultipleAvatars'; import Hoverable from '../Hoverable'; import DisplayNames from '../DisplayNames'; -import colors from '../../styles/colors'; import Text from '../Text'; import SubscriptAvatar from '../SubscriptAvatar'; import CONST from '../../CONST'; @@ -246,7 +245,7 @@ function OptionRowLHN(props) { )} diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index adf3fa0cdd80..c39c1d503258 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -14,7 +14,6 @@ import Badge from './Badge'; import CONST from '../CONST'; import menuItemPropTypes from './menuItemPropTypes'; import SelectCircle from './SelectCircle'; -import colors from '../styles/colors'; import MultipleAvatars from './MultipleAvatars'; import * as defaultWorkspaceAvatars from './Icon/WorkspaceDefaultAvatars'; import PressableWithSecondaryInteraction from './PressableWithSecondaryInteraction'; @@ -298,7 +297,7 @@ const MenuItem = React.forwardRef((props, ref) => { )} diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js index 252b015edd45..5bf705eccfbf 100644 --- a/src/components/OptionsList/BaseOptionsList.js +++ b/src/components/OptionsList/BaseOptionsList.js @@ -218,7 +218,7 @@ function BaseOptionsList({ return ( {isLoading ? ( - + ) : ( <> {headerMessage ? ( diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js index 02da03225062..a5a499169cbd 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview.js +++ b/src/components/ReportActionItem/MoneyRequestPreview.js @@ -33,7 +33,6 @@ import * as ReceiptUtils from '../../libs/ReceiptUtils'; import ReportActionItemImages from './ReportActionItemImages'; import transactionPropTypes from '../transactionPropTypes'; import * as StyleUtils from '../../styles/StyleUtils'; -import colors from '../../styles/colors'; import variables from '../../styles/variables'; import useWindowDimensions from '../../hooks/useWindowDimensions'; import MoneyRequestSkeletonView from '../MoneyRequestSkeletonView'; @@ -265,7 +264,7 @@ function MoneyRequestPreview(props) { {hasFieldErrors && ( )} diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js index 6c2810ed4be8..1f60dddef6ec 100644 --- a/src/components/ReportActionItem/ReportPreview.js +++ b/src/components/ReportActionItem/ReportPreview.js @@ -30,7 +30,6 @@ import * as ReceiptUtils from '../../libs/ReceiptUtils'; import * as ReportActionUtils from '../../libs/ReportActionsUtils'; import * as TransactionUtils from '../../libs/TransactionUtils'; import ReportActionItemImages from './ReportActionItemImages'; -import colors from '../../styles/colors'; const propTypes = { /** All the data of the action */ @@ -199,7 +198,7 @@ function ReportPreview(props) { {hasErrors && ( )} diff --git a/src/components/ValidateCode/ExpiredValidateCodeModal.js b/src/components/ValidateCode/ExpiredValidateCodeModal.js index 449462e88130..e31e0772a8c5 100644 --- a/src/components/ValidateCode/ExpiredValidateCodeModal.js +++ b/src/components/ValidateCode/ExpiredValidateCodeModal.js @@ -1,6 +1,6 @@ import React from 'react'; import {View} from 'react-native'; -import colors from '../../styles/colors'; +import themeColors from '../../styles/themes/default'; import styles from '../../styles/styles'; import Icon from '../Icon'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; @@ -33,7 +33,7 @@ function ExpiredValidateCodeModal(props) { diff --git a/src/components/ValidateCode/JustSignedInModal.js b/src/components/ValidateCode/JustSignedInModal.js index 40b25e4a19e0..e96505470eba 100644 --- a/src/components/ValidateCode/JustSignedInModal.js +++ b/src/components/ValidateCode/JustSignedInModal.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {View} from 'react-native'; -import colors from '../../styles/colors'; +import themeColors from '../../styles/themes/default'; import styles from '../../styles/styles'; import Icon from '../Icon'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; @@ -41,7 +41,7 @@ function JustSignedInModal(props) { diff --git a/src/components/ValidateCode/ValidateCodeModal.js b/src/components/ValidateCode/ValidateCodeModal.js index 344c3107b8cf..eabb21eea4a9 100644 --- a/src/components/ValidateCode/ValidateCodeModal.js +++ b/src/components/ValidateCode/ValidateCodeModal.js @@ -4,7 +4,7 @@ import {compose} from 'underscore'; import {withOnyx} from 'react-native-onyx'; import lodashGet from 'lodash/get'; import {View} from 'react-native'; -import colors from '../../styles/colors'; +import themeColors from '../../styles/themes/default'; import styles from '../../styles/styles'; import Icon from '../Icon'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; @@ -71,7 +71,7 @@ function ValidateCodeModal(props) { diff --git a/src/pages/LogInWithShortLivedAuthTokenPage.js b/src/pages/LogInWithShortLivedAuthTokenPage.js index 1679d3aa8b5d..62eff262611d 100644 --- a/src/pages/LogInWithShortLivedAuthTokenPage.js +++ b/src/pages/LogInWithShortLivedAuthTokenPage.js @@ -8,7 +8,7 @@ import * as Session from '../libs/actions/Session'; import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator'; import Navigation from '../libs/Navigation/Navigation'; import styles from '../styles/styles'; -import colors from '../styles/colors'; +import themeColors from '../styles/themes/default'; import Icon from '../components/Icon'; import * as Expensicons from '../components/Icon/Expensicons'; import * as Illustrations from '../components/Icon/Illustrations'; @@ -93,7 +93,7 @@ function LogInWithShortLivedAuthTokenPage(props) { diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index c2ad9b863cd9..147e0cb76932 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -11,7 +11,7 @@ import * as Expensicons from '../../components/Icon/Expensicons'; import styles from '../../styles/styles'; import TextLink from '../../components/TextLink'; import Icon from '../../components/Icon'; -import colors from '../../styles/colors'; +import themeColors from '../../styles/themes/default'; import CONST from '../../CONST'; import withLocalize from '../../components/withLocalize'; import Text from '../../components/Text'; @@ -146,7 +146,7 @@ function BankAccountStep(props) { {props.translate('bankAccount.validateAccountError')} @@ -164,7 +164,7 @@ function BankAccountStep(props) { diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 74994e4dc9d0..8d389a8c8581 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -20,7 +20,7 @@ import CONST from '../../CONST'; import * as ReportUtils from '../../libs/ReportUtils'; import Text from '../../components/Text'; import Tooltip from '../../components/Tooltip'; -import colors from '../../styles/colors'; +import themeColors from '../../styles/themes/default'; import reportPropTypes from '../reportPropTypes'; import ONYXKEYS from '../../ONYXKEYS'; import ThreeDotsMenu from '../../components/ThreeDotsMenu'; @@ -209,7 +209,7 @@ function HeaderView(props) { )} diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts index 8945bc0be058..caadab8779f6 100644 --- a/src/styles/StyleUtils.ts +++ b/src/styles/StyleUtils.ts @@ -559,36 +559,6 @@ function getEmojiPickerStyle(isSmallScreenWidth: boolean): ViewStyle | CSSProper }; } -/** - * Get the random promo color and image for Login page - */ -function getLoginPagePromoStyle(): ViewStyle | CSSProperties { - const promos = [ - { - backgroundColor: colors.green, - backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_green.svg`, - }, - { - backgroundColor: colors.orange, - backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_orange.svg`, - }, - { - backgroundColor: colors.pink, - backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_pink.svg`, - }, - { - backgroundColor: colors.blue, - backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_blue.svg`, - }, - { - backgroundColor: colors.ivory, - backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/cpa-card.svg`, - redirectUri: `${CONST.USE_EXPENSIFY_URL}/accountants`, - }, - ]; - return promos[NumberUtils.generateRandomInt(0, 4)]; -} - /** * Generate the styles for the ReportActionItem wrapper view. */ @@ -599,7 +569,7 @@ function getReportActionItemStyle(isHovered = false, isLoading = false): ViewSty backgroundColor: isHovered ? themeColors.hoverComponentBG : // Warning: Setting this to a non-transparent color will cause unread indicator to break on Android - colors.transparent, + themeColors.transparent, opacity: isLoading ? 0.5 : 1, ...styles.cursorInitial, }; @@ -970,7 +940,7 @@ function getAutoCompleteSuggestionContainerStyle(itemsHeight: number, shouldIncl * Select the correct color for text. */ function getColoredBackgroundStyle(isColored: boolean): ViewStyle | CSSProperties { - return {backgroundColor: isColored ? colors.blueLink : undefined}; + return {backgroundColor: isColored ? themeColors.link : undefined}; } function getEmojiReactionBubbleStyle(isHovered: boolean, hasUserReacted: boolean, isContextMenu = false): ViewStyle | CSSProperties { @@ -1018,7 +988,7 @@ function getEmojiReactionCounterTextStyle(hasUserReacted: boolean): TextStyle | return {color: themeColors.reactionActiveText}; } - return {color: themeColors.textLight}; + return {color: themeColors.text}; } /** @@ -1251,7 +1221,6 @@ export { getModalPaddingStyles, getFontFamilyMonospace, getEmojiPickerStyle, - getLoginPagePromoStyle, getReportActionItemStyle, getMiniReportActionContextMenuWrapperStyle, getKeyboardShortcutsModalWidth, diff --git a/src/styles/colors.js b/src/styles/colors.js index 6aa08c39a6c4..a38c158e01a7 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.js @@ -91,5 +91,4 @@ export default { ice700: '#28736D', ice800: '#134038', - orange800: '#400000', }; diff --git a/src/styles/getTooltipStyles.ts b/src/styles/getTooltipStyles.ts index 3f9de9c78b97..97402467ab4c 100644 --- a/src/styles/getTooltipStyles.ts +++ b/src/styles/getTooltipStyles.ts @@ -2,7 +2,6 @@ import {CSSProperties} from 'react'; import {TextStyle, View, ViewStyle} from 'react-native'; import spacing from './utilities/spacing'; import styles from './styles'; -import colors from './colors'; import themeColors from './themes/default'; import fontFamily from './fontFamily'; import variables from './variables'; @@ -267,13 +266,13 @@ export default function getTooltipStyles( pointerStyle: { width: 0, height: 0, - backgroundColor: colors.transparent, + backgroundColor: themeColors.transparent, borderStyle: 'solid', borderLeftWidth: POINTER_WIDTH / 2, borderRightWidth: POINTER_WIDTH / 2, borderTopWidth: POINTER_HEIGHT, - borderLeftColor: colors.transparent, - borderRightColor: colors.transparent, + borderLeftColor: themeColors.transparent, + borderRightColor: themeColors.transparent, borderTopColor: themeColors.heading, ...pointerAdditionalStyle, }, diff --git a/src/styles/styles.js b/src/styles/styles.js index a83b749c5e26..fa59102f73c5 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -27,7 +27,6 @@ import * as Browser from '../libs/Browser'; import cursor from './utilities/cursor'; import userSelect from './utilities/userSelect'; import textUnderline from './utilities/textUnderline'; -import Colors from './colors'; // touchCallout is an iOS safari only property that controls the display of the callout information when you touch and hold a target const touchCalloutNone = Browser.isMobileSafari() ? {WebkitTouchCallout: 'none'} : {}; @@ -800,8 +799,8 @@ const styles = { borderRadius: 28, borderStyle: 'solid', borderWidth: 8, - backgroundColor: Colors.greenHighlightBackground, - borderColor: Colors.greenAppBackground, + backgroundColor: themeColors.highlightBG, + borderColor: themeColors.appBG, }, permissionView: { @@ -3916,13 +3915,13 @@ const styles = { }, mapDirection: { - lineColor: Colors.green, + lineColor: themeColors.success, lineWidth: 7, }, mapDirectionLayer: { layout: {'line-join': 'round', 'line-cap': 'round'}, - paint: {'line-color': Colors.green, 'line-width': 7}, + paint: {'line-color': themeColors.success, 'line-width': 7}, }, mapPendingView: { diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js index be82e9ab1ba8..7c43e140f0b1 100644 --- a/src/styles/themes/default.js +++ b/src/styles/themes/default.js @@ -88,7 +88,7 @@ darkTheme.PAGE_BACKGROUND_COLORS = { [SCREENS.HOME]: darkTheme.sidebar, [SCREENS.SETTINGS.PREFERENCES]: colors.blue500, [SCREENS.SETTINGS.WORKSPACES]: colors.pink800, - [ROUTES.I_KNOW_A_TEACHER]: colors.orange800, + [ROUTES.I_KNOW_A_TEACHER]: colors.tangerine800, [ROUTES.SETTINGS_SECURITY]: colors.ice500, }; diff --git a/src/styles/themes/light.js b/src/styles/themes/light.js index f344622e1326..7961403fbdf0 100644 --- a/src/styles/themes/light.js +++ b/src/styles/themes/light.js @@ -1,5 +1,6 @@ import colors from '../colors'; import SCREENS from '../../SCREENS'; +import ROUTES from '../../ROUTES'; const lightTheme = { // Figma keys @@ -85,6 +86,9 @@ const lightTheme = { lightTheme.PAGE_BACKGROUND_COLORS = { [SCREENS.HOME]: lightTheme.sidebar, [SCREENS.SETTINGS.PREFERENCES]: colors.blue500, + [SCREENS.SETTINGS.WORKSPACES]: colors.pink800, + [ROUTES.I_KNOW_A_TEACHER]: colors.tangerine800, + [ROUTES.SETTINGS_SECURITY]: colors.ice500, }; export default lightTheme; From 51ae8a1bb94bfb821bae1354afb1a77361d2949a Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Wed, 13 Sep 2023 11:48:58 +0800 Subject: [PATCH 18/21] change switch color to border --- src/styles/styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index fa59102f73c5..4f081aa87a58 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2586,7 +2586,7 @@ const styles = { }, switchInactive: { - backgroundColor: themeColors.icon, + backgroundColor: themeColors.border, }, switchThumb: { From 79e1914db3e950c025c10005a38364a4eb880ad2 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Wed, 13 Sep 2023 11:58:05 +0800 Subject: [PATCH 19/21] fix imports for lint --- src/components/DotIndicatorMessage.js | 2 +- src/styles/StyleUtils.ts | 3 +-- src/styles/colors.js | 1 - 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/DotIndicatorMessage.js b/src/components/DotIndicatorMessage.js index 47aca9da0a5a..b3528b43dc75 100644 --- a/src/components/DotIndicatorMessage.js +++ b/src/components/DotIndicatorMessage.js @@ -5,7 +5,7 @@ import {View} from 'react-native'; import styles from '../styles/styles'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; -import colors from '../styles/colors'; +import themeColors from '../styles/themes/default'; import Text from './Text'; import * as Localize from '../libs/Localize'; diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts index caadab8779f6..660c4bb735a1 100644 --- a/src/styles/StyleUtils.ts +++ b/src/styles/StyleUtils.ts @@ -13,7 +13,6 @@ import spacing from './utilities/spacing'; import * as UserUtils from '../libs/UserUtils'; import * as Browser from '../libs/Browser'; import cursor from './utilities/cursor'; -import * as NumberUtils from '../libs/NumberUtils'; type ColorValue = ValueOf; type AvatarSizeName = ValueOf; @@ -569,7 +568,7 @@ function getReportActionItemStyle(isHovered = false, isLoading = false): ViewSty backgroundColor: isHovered ? themeColors.hoverComponentBG : // Warning: Setting this to a non-transparent color will cause unread indicator to break on Android - themeColors.transparent, + themeColors.transparent, opacity: isLoading ? 0.5 : 1, ...styles.cursorInitial, }; diff --git a/src/styles/colors.js b/src/styles/colors.js index a38c158e01a7..9ac3226a1b80 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.js @@ -90,5 +90,4 @@ export default { ice600: '#4BA6A6', ice700: '#28736D', ice800: '#134038', - }; From d69265c407f54ccc9cc4cfbe06ac1cff8398649c Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Wed, 13 Sep 2023 19:06:59 +0800 Subject: [PATCH 20/21] remove anti-pattern --- src/components/MentionSuggestions.js | 3 ++- src/components/ReportActionItem/MoneyReportView.js | 3 ++- src/styles/styles.js | 1 - 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/MentionSuggestions.js b/src/components/MentionSuggestions.js index 4b0129635269..11df8a597ded 100644 --- a/src/components/MentionSuggestions.js +++ b/src/components/MentionSuggestions.js @@ -3,6 +3,7 @@ import {View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; import styles from '../styles/styles'; +import themeColors from '../styles/themes/default'; import * as StyleUtils from '../styles/StyleUtils'; import Text from './Text'; import CONST from '../CONST'; @@ -79,7 +80,7 @@ function MentionSuggestions(props) { size={isIcon ? CONST.AVATAR_SIZE.MENTION_ICON : CONST.AVATAR_SIZE.SMALLER} name={item.icons[0].name} type={item.icons[0].type} - fill={styles.success} + fill={themeColors.success} /> )} diff --git a/src/styles/styles.js b/src/styles/styles.js index 4f081aa87a58..52fc5734eecc 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -170,7 +170,6 @@ const styles = { ...writingDirection, ...cursor, ...userSelect, - ...themeColors, ...textUnderline, rateCol: { From a83a05ab61e59e553ccf742aceb085a904f84ca6 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Wed, 13 Sep 2023 21:09:15 +0800 Subject: [PATCH 21/21] Fix Lint, use themeColors --- src/styles/styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 231ebd6f0c02..7173f12e6ea8 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1548,7 +1548,7 @@ const styles = { top: 0, bottom: 0, right: 0, - backgroundColor: Colors.black, + backgroundColor: themeColors.shadow, opacity: current.progress.interpolate({ inputRange: [0, 1], outputRange: [0, variables.overlayOpacity],