From 7b386bf83c0de3653a0c033cb908af953408fbe1 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Mon, 17 Jul 2023 07:54:51 +0100 Subject: [PATCH 001/176] 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 002/176] 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 003/176] 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 004/176] 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 005/176] 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 006/176] 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 007/176] 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 008/176] 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 009/176] 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 010/176] 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 011/176] 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 012/176] 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 013/176] 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 014/176] 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 015/176] 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 016/176] 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 ed7d7ba65a5b3abde9e470ac27ca8a395a28fc82 Mon Sep 17 00:00:00 2001 From: Jakub Trzebiatowski Date: Mon, 21 Aug 2023 11:00:35 +0200 Subject: [PATCH 017/176] De-duplicate checking if a report action is an attachment --- src/libs/ReportUtils.js | 4 +++- src/libs/isReportActionAttachment.js | 14 ++++++++++++++ .../home/report/ContextMenu/ContextMenuActions.js | 14 ++++++-------- 3 files changed, 23 insertions(+), 9 deletions(-) create mode 100644 src/libs/isReportActionAttachment.js diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index 84c50fcb56f3..d64dfc0120bd 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -18,6 +18,7 @@ import Permissions from './Permissions'; import DateUtils from './DateUtils'; import linkingConfig from './Navigation/linkingConfig'; import isReportMessageAttachment from './isReportMessageAttachment'; +import isReportActionAttachment from './isReportActionAttachment'; import * as defaultWorkspaceAvatars from '../components/Icon/WorkspaceDefaultAvatars'; import * as CurrencyUtils from './CurrencyUtils'; import * as UserUtils from './UserUtils'; @@ -1415,7 +1416,7 @@ function getReportName(report, policy = undefined) { return getTransactionReportName(parentReportAction); } - const isAttachment = _.has(parentReportAction, 'isAttachment') ? parentReportAction.isAttachment : isReportMessageAttachment(_.last(lodashGet(parentReportAction, 'message', [{}]))); + const isAttachment = isReportActionAttachment(parentReportAction); const parentReportActionMessage = lodashGet(parentReportAction, ['message', 0, 'text'], '').replace(/(\r\n|\n|\r)/gm, ' '); if (isAttachment && parentReportActionMessage) { return `[${Localize.translateLocal('common.attachment')}]`; @@ -3163,6 +3164,7 @@ function getTaskAssigneeChatOnyxData(accountID, assigneeEmail, assigneeAccountID export { getReportParticipantsTitle, isReportMessageAttachment, + isReportActionAttachment, findLastAccessedReport, canEditReportAction, canFlagReportAction, diff --git a/src/libs/isReportActionAttachment.js b/src/libs/isReportActionAttachment.js new file mode 100644 index 000000000000..37504b782343 --- /dev/null +++ b/src/libs/isReportActionAttachment.js @@ -0,0 +1,14 @@ +import _ from 'underscore'; +import lodashGet from 'lodash/get'; +import isReportMessageAttachment from './isReportMessageAttachment'; + +/** + * Check whether a report action is an attachment. + * + * @param {Object} reportAction report action + * @returns {Boolean} + */ +export default function isReportActionAttachment(reportAction) { + const message = _.first(lodashGet(reportAction, 'message', [{}])); + return _.has(reportAction, 'isAttachment') ? reportAction.isAttachment : isReportMessageAttachment(message); +} diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js index e66c61b1122f..4b6750bc94fa 100644 --- a/src/pages/home/report/ContextMenu/ContextMenuActions.js +++ b/src/pages/home/report/ContextMenu/ContextMenuActions.js @@ -94,9 +94,9 @@ export default [ successTextTranslateKey: 'common.download', successIcon: Expensicons.Download, shouldShow: (type, reportAction) => { - const message = _.last(lodashGet(reportAction, 'message', [{}])); - const isAttachment = _.has(reportAction, 'isAttachment') ? reportAction.isAttachment : ReportUtils.isReportMessageAttachment(message); - return isAttachment && message.html !== CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML && reportAction.reportActionID && !ReportActionUtils.isMessageDeleted(reportAction); + const isAttachment = ReportUtils.isReportActionAttachment(reportAction); + const messageHtml = lodashGet(reportAction, ['message', 0, 'html']); + return isAttachment && messageHtml !== CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML && reportAction.reportActionID && !ReportActionUtils.isMessageDeleted(reportAction); }, onPress: (closePopover, {reportAction}) => { const message = _.last(lodashGet(reportAction, 'message', [{}])); @@ -188,10 +188,9 @@ export default [ // the `text` and `icon` onPress: (closePopover, {reportAction, selection}) => { const isReportPreviewAction = ReportActionUtils.isReportPreviewAction(reportAction); - const message = _.last(lodashGet(reportAction, 'message', [{}])); - const messageHtml = lodashGet(message, 'html', ''); + const isAttachment = ReportUtils.isReportActionAttachment(reportAction); + const messageHtml = lodashGet(reportAction, ['message', 0, 'html'], ''); - const isAttachment = _.has(reportAction, 'isAttachment') ? reportAction.isAttachment : ReportUtils.isReportMessageAttachment(message); if (!isAttachment) { const content = selection || messageHtml; if (isReportPreviewAction) { @@ -224,8 +223,7 @@ export default [ successIcon: Expensicons.Checkmark, successTextTranslateKey: 'reportActionContextMenu.copied', shouldShow: (type, reportAction, isArchivedRoom, betas, menuTarget) => { - const message = _.last(lodashGet(reportAction, 'message', [{}])); - const isAttachment = _.has(reportAction, 'isAttachment') ? reportAction.isAttachment : ReportUtils.isReportMessageAttachment(message); + const isAttachment = ReportUtils.isReportActionAttachment(reportAction); // Only hide the copylink menu item when context menu is opened over img element. const isAttachmentTarget = lodashGet(menuTarget, 'tagName') === 'IMG' && isAttachment; From 65edf96b211f0b3a238161bc7732ee1f99e4004c Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 21 Aug 2023 11:40:59 +0200 Subject: [PATCH 018/176] English and spanish translations --- src/languages/en.js | 15 +++++++++++---- src/languages/es.js | 16 +++++++++++----- 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index 19dbd9c63187..c0ed7b27a071 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -353,19 +353,23 @@ export default { }, }, sidebarScreen: { - fabAction: 'New chat', + chat: 'Chat', + room: 'Room', newChat: 'New chat', newGroup: 'New group', newRoom: 'New room', buttonSearch: 'Search', buttonMySettings: 'My settings', - fabNewChat: 'New chat (Floating action)', + fabNewChat: 'Send message', + fabNewChatExplained: 'Send message (Floating action)', chatPinned: 'Chat pinned', draftedMessage: 'Drafted message', listOfChatMessages: 'List of chat messages', listOfChats: 'List of chats', }, tabSelector: { + chat: 'Chat', + room: 'Room', manual: 'Manual', scan: 'Scan', distance: 'Distance', @@ -391,9 +395,10 @@ export default { amount: 'Amount', cash: 'Cash', split: 'Split', + addToSplit: 'Add to split', + splitBill: 'Split bill', request: 'Request', participants: 'Participants', - splitBill: 'Split bill', requestMoney: 'Request money', sendMoney: 'Send money', pay: 'Pay', @@ -862,7 +867,9 @@ export default { localTime: 'Local time', }, newChatPage: { + createChat: 'Create chat', createGroup: 'Create group', + addToGroup: 'Add to group', }, yearPickerPage: { year: 'Year', @@ -1410,7 +1417,7 @@ export default { openShortcutDialog: 'Opens the keyboard shortcuts dialog', escape: 'Escape dialogs', search: 'Open search dialog', - newGroup: 'New group screen', + newChat: 'New chat screen', copy: 'Copy comment', }, }, diff --git a/src/languages/es.js b/src/languages/es.js index bb3306417e17..605e6c3c5760 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -352,19 +352,22 @@ export default { }, }, sidebarScreen: { - fabAction: 'Nuevo chat', - newChat: 'Nuevo chat', + chat: 'Chat', + room: 'Sala', newGroup: 'Nuevo grupo', newRoom: 'Nueva sala de chat', buttonSearch: 'Buscar', buttonMySettings: 'Mi configuración', - fabNewChat: 'Nuevo chat', + fabNewChat: 'Enviar mensaje', + fabNewChatExplained: 'Enviar mensaje', chatPinned: 'Chat fijado', draftedMessage: 'Mensaje borrador', listOfChatMessages: 'Lista de mensajes del chat', listOfChats: 'lista de chats', }, tabSelector: { + chat: 'Chat', + room: 'Sala', manual: 'Manual', scan: 'Escanear', distance: 'Distancia', @@ -390,9 +393,10 @@ export default { amount: 'Importe', cash: 'Efectivo', split: 'Dividir', + addToSplit: 'Añadir para dividir', + splitBill: 'Dividir factura', request: 'Solicitar', participants: 'Participantes', - splitBill: 'Dividir factura', requestMoney: 'Pedir dinero', sendMoney: 'Enviar dinero', pay: 'Pagar', @@ -866,7 +870,9 @@ export default { localTime: 'Hora local', }, newChatPage: { + createChat: 'Crear chat', createGroup: 'Crear grupo', + addToGroup: 'Añadir al grupo', }, yearPickerPage: { year: 'Año', @@ -1437,7 +1443,7 @@ export default { openShortcutDialog: 'Abre el cuadro de diálogo de métodos abreviados de teclado', escape: 'Diálogos de escape', search: 'Abrir diálogo de búsqueda', - newGroup: 'Nueva pantalla de grupo', + newChat: 'Nueva pantalla de chat', copy: 'Copiar comentario', }, }, From d0ef97a5a3354cf25a2629325ba24a679f1b435a Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 21 Aug 2023 11:45:41 +0200 Subject: [PATCH 019/176] Assign icons to new tabs --- src/components/TabSelector/TabSelector.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js index 3e0ff7eb4e99..2d3901a237fe 100644 --- a/src/components/TabSelector/TabSelector.js +++ b/src/components/TabSelector/TabSelector.js @@ -29,12 +29,18 @@ const defaultProps = { const getIcon = (route) => { switch (route) { + case CONST.TAB.MANUAL: + return Expensicons.Pencil; case CONST.TAB.SCAN: return Expensicons.Receipt; + case CONST.TAB.NEW_CHAT: + return Expensicons.User; + case CONST.TAB.NEW_ROOM: + return Expensicons.Hashtag; case CONST.TAB.DISTANCE: return Expensicons.Car; default: - return Expensicons.Pencil; + throw new Error(`Route ${route} has no icon set.`); } }; From 3e61212d2bc8a441dfb872be6c446fbb32cd947d Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 21 Aug 2023 11:57:31 +0200 Subject: [PATCH 020/176] Checkbox can become a button --- src/components/OptionRow.js | 29 ++++++++++++++++++- src/components/OptionsList/BaseOptionsList.js | 3 ++ .../OptionsSelector/BaseOptionsSelector.js | 3 ++ .../optionsSelectorPropTypes.js | 9 ++++++ 4 files changed, 43 insertions(+), 1 deletion(-) diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index adaa4457bbd9..e65b2cf5eda8 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -8,6 +8,7 @@ import * as StyleUtils from '../styles/StyleUtils'; import optionPropTypes from './optionPropTypes'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; +import Button from './Button'; import MultipleAvatars from './MultipleAvatars'; import Hoverable from './Hoverable'; import DisplayNames from './DisplayNames'; @@ -39,6 +40,15 @@ const propTypes = { /** Whether we should show the selected state */ showSelectedState: PropTypes.bool, + /** Whether to show a button pill instead of a tickbox */ + shouldShowSelectedStateAsButton: PropTypes.bool, + + /** Text for button pill */ + selectedStateButtonText: PropTypes.string, + + /** Callback to fire when the multiple selector (tickbox or button) is clicked */ + onSelectedStatePressed: PropTypes.func, + /** Whether this item is selected */ isSelected: PropTypes.bool, @@ -65,6 +75,9 @@ const propTypes = { const defaultProps = { hoverStyle: styles.sidebarLinkHover, showSelectedState: false, + shouldShowSelectedStateAsButton: false, + selectedStateButtonText: 'Select', + onSelectedStatePressed: undefined, isSelected: false, boldStyle: false, showTitleTooltip: false, @@ -248,7 +261,21 @@ class OptionRow extends Component { /> )} - {this.props.showSelectedState && } + {this.props.showSelectedState && ( + <> + {this.props.shouldShowSelectedStateAsButton && !this.props.isSelected ? ( +