From 7c8ffcf0ca1b66067e30a2ac1de2e9a025b294d5 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 13 Sep 2023 12:43:43 +0200 Subject: [PATCH 1/9] feat: improve how we use static styles in ThemeStylesProvider --- src/styles/ThemeStylesProvider.tsx | 22 +- src/styles/styles.js | 579 +++++++++++++++-------------- 2 files changed, 296 insertions(+), 305 deletions(-) diff --git a/src/styles/ThemeStylesProvider.tsx b/src/styles/ThemeStylesProvider.tsx index d8a081572644..0a32d2de1cf7 100644 --- a/src/styles/ThemeStylesProvider.tsx +++ b/src/styles/ThemeStylesProvider.tsx @@ -2,7 +2,9 @@ import React, {useMemo} from 'react'; import useTheme from './themes/useTheme'; import StylesContext from './ThemeStylesContext'; -import defaultStyles from './styles'; +import {styles as stylesUntyped} from './styles'; + +const styles = stylesUntyped as (theme: Record) => Record; type ThemeStylesProviderProps = { children: React.ReactNode; @@ -11,23 +13,9 @@ type ThemeStylesProviderProps = { function ThemeStylesProvider({children}: ThemeStylesProviderProps) { const theme = useTheme(); - const appContentStyle = useMemo( - () => ({ - ...defaultStyles.appContent, - backgroundColor: theme.appBG, - }), - [theme.appBG], - ); - - const styles = useMemo( - () => ({ - ...defaultStyles, - appContent: appContentStyle, - }), - [appContentStyle], - ); + const themeStyles = useMemo(() => styles(theme), [theme]); - return {children}; + return {children}; } ThemeStylesProvider.displayName = 'ThemeStylesProvider'; diff --git a/src/styles/styles.js b/src/styles/styles.js index 29d4541c9b4a..9cc18b6c44a0 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2,7 +2,7 @@ import {defaultStyles as defaultPickerStyles} from 'react-native-picker-select/s import lodashClamp from 'lodash/clamp'; import fontFamily from './fontFamily'; import addOutlineWidth from './addOutlineWidth'; -import themeColors from './themes/default'; +import defaultTheme from './themes/default'; import fontWeightBold from './fontWeight/bold'; import variables from './variables'; import spacing from './utilities/spacing'; @@ -31,9 +31,9 @@ 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'} : {}; -const picker = { - backgroundColor: themeColors.transparent, - color: themeColors.text, +const picker = (theme) => ({ + backgroundColor: theme.transparent, + color: theme.text, fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeNormal, lineHeight: variables.fontSizeNormalHeight, @@ -44,27 +44,27 @@ const picker = { height: variables.inputHeight, borderWidth: 0, textAlign: 'left', -}; +}); -const link = { - color: themeColors.link, - textDecorationColor: themeColors.link, +const link = (theme) => ({ + color: theme.link, + textDecorationColor: theme.link, fontFamily: fontFamily.EXP_NEUE, -}; +}); -const baseCodeTagStyles = { +const baseCodeTagStyles = (theme) => ({ borderWidth: 1, borderRadius: 5, - borderColor: themeColors.border, - backgroundColor: themeColors.textBackground, -}; + borderColor: theme.border, + backgroundColor: theme.textBackground, +}); const headlineFont = { fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM, fontWeight: '500', }; -const webViewStyles = { +const webViewStyles = (theme) => ({ // As of react-native-render-html v6, don't declare distinct styles for // custom renderers, the API for custom renderers has changed. Declare the // styles in the below "tagStyles" instead. If you need to reuse those @@ -86,7 +86,7 @@ const webViewStyles = { fontWeight: 'bold', }, - a: link, + a: link(theme), ul: { maxWidth: '100%', @@ -101,7 +101,7 @@ const webViewStyles = { }, blockquote: { - borderLeftColor: themeColors.border, + borderLeftColor: theme.border, borderLeftWidth: 4, paddingLeft: 12, marginTop: 4, @@ -112,7 +112,7 @@ const webViewStyles = { }, pre: { - ...baseCodeTagStyles, + ...baseCodeTagStyles(theme), paddingTop: 12, paddingBottom: 12, paddingRight: 8, @@ -123,7 +123,7 @@ const webViewStyles = { }, code: { - ...baseCodeTagStyles, + ...baseCodeTagStyles(theme), ...codeStyles.codeTextStyle, paddingLeft: 5, paddingRight: 5, @@ -132,7 +132,7 @@ const webViewStyles = { }, img: { - borderColor: themeColors.border, + borderColor: theme.border, borderRadius: variables.componentBorderRadiusNormal, borderWidth: 1, ...touchCalloutNone, @@ -149,15 +149,15 @@ const webViewStyles = { }, baseFontStyle: { - color: themeColors.text, + color: theme.text, fontSize: variables.fontSizeNormal, fontFamily: fontFamily.EXP_NEUE, flex: 1, lineHeight: variables.fontSizeNormalHeight, }, -}; +}); -const styles = { +const styles = (theme) => ({ // Add all of our utility and helper styles ...spacing, ...sizing, @@ -170,8 +170,8 @@ const styles = { ...writingDirection, ...cursor, ...userSelect, - ...themeColors, ...textUnderline, + ...theme, // TODO: Should we do this? rateCol: { margin: 0, @@ -180,10 +180,10 @@ const styles = { }, autoCompleteSuggestionsContainer: { - backgroundColor: themeColors.appBG, + backgroundColor: theme.appBG, borderRadius: 8, borderWidth: 1, - borderColor: themeColors.border, + borderColor: theme.border, justifyContent: 'center', boxShadow: variables.popoverMenuShadow, position: 'absolute', @@ -227,7 +227,7 @@ const styles = { }, mentionSuggestionsHandle: { - color: themeColors.textSupporting, + color: theme.textSupporting, }, appIconBorderRadius: { @@ -242,30 +242,30 @@ const styles = { flexBasis: '48%', }, - webViewStyles, + webViewStyles: webViewStyles(theme), - link, + link: link(theme), linkMuted: { - color: themeColors.textSupporting, - textDecorationColor: themeColors.textSupporting, + color: theme.textSupporting, + textDecorationColor: theme.textSupporting, fontFamily: fontFamily.EXP_NEUE, }, linkMutedHovered: { - color: themeColors.textMutedReversed, + color: theme.textMutedReversed, }, highlightBG: { - backgroundColor: themeColors.highlightBG, + backgroundColor: theme.highlightBG, }, appBG: { - backgroundColor: themeColors.appBG, + backgroundColor: theme.appBG, }, h1: { - color: themeColors.heading, + color: theme.heading, fontFamily: fontFamily.EXP_NEUE_BOLD, fontSize: variables.fontSizeh1, fontWeight: fontWeightBold, @@ -305,13 +305,13 @@ const styles = { }, textLabel: { - color: themeColors.text, + color: theme.text, fontSize: variables.fontSizeLabel, lineHeight: variables.lineHeightLarge, }, mutedTextLabel: { - color: themeColors.textSupporting, + color: theme.textSupporting, fontSize: variables.fontSizeLabel, lineHeight: variables.lineHeightLarge, }, @@ -323,7 +323,7 @@ const styles = { }, textMicroBold: { - color: themeColors.text, + color: theme.text, fontWeight: fontWeightBold, fontFamily: fontFamily.EXP_NEUE_BOLD, fontSize: variables.fontSizeSmall, @@ -331,14 +331,14 @@ const styles = { }, textMicroSupporting: { - color: themeColors.textSupporting, + color: theme.textSupporting, fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeSmall, lineHeight: variables.lineHeightSmall, }, textExtraSmallSupporting: { - color: themeColors.textSupporting, + color: theme.textSupporting, fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeExtraSmall, }, @@ -382,7 +382,7 @@ const styles = { textHeadline: { ...headlineFont, ...whiteSpace.preWrap, - color: themeColors.heading, + color: theme.heading, fontSize: variables.fontSizeXLarge, lineHeight: variables.lineHeightXXLarge, }, @@ -390,7 +390,7 @@ const styles = { textHeadlineH1: { ...headlineFont, ...whiteSpace.preWrap, - color: themeColors.heading, + color: theme.heading, fontSize: variables.fontSizeh1, lineHeight: variables.lineHeightSizeh1, }, @@ -400,11 +400,11 @@ const styles = { }, textWhite: { - color: themeColors.textLight, + color: theme.textLight, }, textBlue: { - color: themeColors.link, + color: theme.link, }, textUppercase: { @@ -416,19 +416,19 @@ const styles = { }, colorReversed: { - color: themeColors.textReversed, + color: theme.textReversed, }, colorMutedReversed: { - color: themeColors.textMutedReversed, + color: theme.textMutedReversed, }, colorMuted: { - color: themeColors.textSupporting, + color: theme.textSupporting, }, colorHeading: { - color: themeColors.heading, + color: theme.heading, }, bgTransparent: { @@ -436,7 +436,7 @@ const styles = { }, bgDark: { - backgroundColor: themeColors.inverse, + backgroundColor: theme.inverse, }, opacity0: { @@ -448,7 +448,7 @@ const styles = { }, textDanger: { - color: themeColors.danger, + color: theme.danger, }, borderRadiusNormal: { @@ -456,7 +456,7 @@ const styles = { }, button: { - backgroundColor: themeColors.buttonDefaultBG, + backgroundColor: theme.buttonDefaultBG, borderRadius: variables.buttonBorderRadius, minHeight: variables.componentSizeLarge, justifyContent: 'center', @@ -469,7 +469,7 @@ const styles = { }, buttonText: { - color: themeColors.text, + color: theme.text, fontFamily: fontFamily.EXP_NEUE_BOLD, fontSize: variables.fontSizeNormal, fontWeight: fontWeightBold, @@ -490,7 +490,7 @@ const styles = { paddingTop: 4, paddingHorizontal: 14, paddingBottom: 4, - backgroundColor: themeColors.buttonDefaultBG, + backgroundColor: theme.buttonDefaultBG, }, buttonMedium: { @@ -500,7 +500,7 @@ const styles = { paddingRight: 16, paddingBottom: 12, paddingLeft: 16, - backgroundColor: themeColors.buttonDefaultBG, + backgroundColor: theme.buttonDefaultBG, }, buttonLarge: { @@ -510,7 +510,7 @@ const styles = { paddingRight: 10, paddingBottom: 8, paddingLeft: 18, - backgroundColor: themeColors.buttonDefaultBG, + backgroundColor: theme.buttonDefaultBG, }, buttonSmallText: { @@ -535,12 +535,12 @@ const styles = { }, buttonDefaultHovered: { - backgroundColor: themeColors.buttonHoveredBG, + backgroundColor: theme.buttonHoveredBG, borderWidth: 0, }, buttonSuccess: { - backgroundColor: themeColors.success, + backgroundColor: theme.success, borderWidth: 0, }, @@ -549,29 +549,29 @@ const styles = { }, buttonSuccessHovered: { - backgroundColor: themeColors.successHover, + backgroundColor: theme.successHover, borderWidth: 0, }, buttonDanger: { - backgroundColor: themeColors.danger, + backgroundColor: theme.danger, borderWidth: 0, }, buttonDangerHovered: { - backgroundColor: themeColors.dangerHover, + backgroundColor: theme.dangerHover, borderWidth: 0, }, buttonDisabled: { - backgroundColor: themeColors.buttonDefaultBG, + backgroundColor: theme.buttonDefaultBG, borderWidth: 0, }, buttonDivider: { height: variables.dropDownButtonDividerHeight, borderWidth: 0.7, - borderColor: themeColors.text, + borderColor: theme.text, }, noBorderRadius: { @@ -616,19 +616,19 @@ const styles = { }, buttonSuccessText: { - color: themeColors.textLight, + color: theme.textLight, }, buttonDangerText: { - color: themeColors.textLight, + color: theme.textLight, }, hoveredComponentBG: { - backgroundColor: themeColors.hoverComponentBG, + backgroundColor: theme.hoverComponentBG, }, activeComponentBG: { - backgroundColor: themeColors.activeComponentBG, + backgroundColor: theme.activeComponentBG, }, fontWeightBold: { @@ -658,7 +658,7 @@ const styles = { height: 140, }, - pickerSmall: (backgroundColor = themeColors.highlightBG) => ({ + pickerSmall: (backgroundColor = theme.highlightBG) => ({ inputIOS: { fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeSmall, @@ -667,23 +667,23 @@ const styles = { paddingTop: 6, paddingBottom: 6, borderWidth: 0, - color: themeColors.text, + color: theme.text, height: 26, opacity: 1, backgroundColor: 'transparent', }, done: { - color: themeColors.text, + color: theme.text, }, doneDepressed: { fontSize: defaultPickerStyles.done.fontSize, }, modalViewMiddle: { - backgroundColor: themeColors.border, + backgroundColor: theme.border, borderTopWidth: 0, }, modalViewBottom: { - backgroundColor: themeColors.highlightBG, + backgroundColor: theme.highlightBG, }, inputWeb: { fontFamily: fontFamily.EXP_NEUE, @@ -693,7 +693,7 @@ const styles = { paddingTop: 6, paddingBottom: 6, borderWidth: 0, - color: themeColors.text, + color: theme.text, appearance: 'none', height: 26, opacity: 1, @@ -708,7 +708,7 @@ const styles = { paddingTop: 6, paddingBottom: 6, borderWidth: 0, - color: themeColors.text, + color: theme.text, height: 26, opacity: 1, backgroundColor: 'transparent', @@ -724,7 +724,7 @@ const styles = { }), badge: { - backgroundColor: themeColors.border, + backgroundColor: theme.border, borderRadius: 14, height: variables.iconSizeNormal, flexDirection: 'row', @@ -733,31 +733,31 @@ const styles = { }, badgeSuccess: { - backgroundColor: themeColors.success, + backgroundColor: theme.success, }, badgeSuccessPressed: { - backgroundColor: themeColors.successHover, + backgroundColor: theme.successHover, }, badgeAdHocSuccess: { - backgroundColor: themeColors.badgeAdHoc, + backgroundColor: theme.badgeAdHoc, }, badgeAdHocSuccessPressed: { - backgroundColor: themeColors.badgeAdHocHover, + backgroundColor: theme.badgeAdHocHover, }, badgeDanger: { - backgroundColor: themeColors.danger, + backgroundColor: theme.danger, }, badgeDangerPressed: { - backgroundColor: themeColors.dangerPressed, + backgroundColor: theme.dangerPressed, }, badgeText: { - color: themeColors.text, + color: theme.text, fontSize: variables.fontSizeSmall, lineHeight: variables.lineHeightNormal, ...whiteSpace.noWrap, @@ -766,37 +766,37 @@ const styles = { border: { borderWidth: 1, borderRadius: variables.componentBorderRadius, - borderColor: themeColors.border, + borderColor: theme.border, }, borderColorFocus: { - borderColor: themeColors.borderFocus, + borderColor: theme.borderFocus, }, borderColorDanger: { - borderColor: themeColors.danger, + borderColor: theme.danger, }, textInputDisabled: { // Adding disabled color theme to indicate user that the field is not editable. - backgroundColor: themeColors.highlightBG, + backgroundColor: theme.highlightBG, borderBottomWidth: 2, - borderColor: themeColors.borderLighter, + borderColor: theme.borderLighter, // Adding browser specefic style to bring consistency between Safari and other platforms. // Applying the Webkit styles only to browsers as it is not available in native. ...(Browser.getBrowser() ? { - WebkitTextFillColor: themeColors.textSupporting, + WebkitTextFillColor: theme.textSupporting, WebkitOpacity: 1, } : {}), - color: themeColors.textSupporting, + color: theme.textSupporting, }, uploadReceiptView: (isSmallScreenWidth) => ({ borderRadius: variables.componentBorderRadiusLarge, borderWidth: isSmallScreenWidth ? 0 : 2, - borderColor: themeColors.borderFocus, + borderColor: theme.borderFocus, borderStyle: 'dotted', marginBottom: 20, marginLeft: 20, @@ -827,14 +827,14 @@ const styles = { }, headerAnonymousFooter: { - color: themeColors.heading, + color: theme.heading, fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM, fontSize: variables.fontSizeXLarge, lineHeight: variables.lineHeightXXLarge, }, headerText: { - color: themeColors.heading, + color: theme.heading, fontFamily: fontFamily.EXP_NEUE_BOLD, fontSize: variables.fontSizeNormal, fontWeight: fontWeightBold, @@ -859,7 +859,7 @@ const styles = { }, chatItemComposeSecondaryRowSubText: { - color: themeColors.textSupporting, + color: theme.textSupporting, fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeSmall, lineHeight: variables.lineHeightSmall, @@ -920,7 +920,7 @@ const styles = { }, calendarDayContainerSelected: { - backgroundColor: themeColors.buttonDefaultBG, + backgroundColor: theme.buttonDefaultBG, }, /** @@ -946,7 +946,7 @@ const styles = { height: '100%', backgroundColor: 'transparent', borderBottomWidth: 2, - borderColor: themeColors.border, + borderColor: theme.border, overflow: 'hidden', }, @@ -955,7 +955,7 @@ const styles = { left: 0, top: 0, fontSize: variables.fontSizeNormal, - color: themeColors.textSupporting, + color: theme.textSupporting, fontFamily: fontFamily.EXP_NEUE, width: '100%', }, @@ -965,7 +965,7 @@ const styles = { top: 0, width: '100%', height: 23, - backgroundColor: themeColors.componentBG, + backgroundColor: theme.componentBG, }, textInputLabelDesktop: { @@ -980,7 +980,7 @@ const styles = { fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeNormal, lineHeight: variables.lineHeightXLarge, - color: themeColors.text, + color: theme.text, paddingTop: 23, paddingBottom: 8, paddingLeft: 0, @@ -1019,9 +1019,9 @@ const styles = { backgroundColor: 'transparent', borderRadius: variables.componentBorderRadiusNormal, height: variables.inputComponentSizeNormal, - borderColor: themeColors.border, + borderColor: theme.border, borderWidth: 1, - color: themeColors.text, + color: theme.text, fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeNormal, paddingLeft: 12, @@ -1044,7 +1044,7 @@ const styles = { }, textInputPrefix: { - color: themeColors.text, + color: theme.text, fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeNormal, textAlignVertical: 'center', @@ -1054,7 +1054,7 @@ const styles = { borderBottomWidth: 2, paddingLeft: 0, borderStyle: 'solid', - borderColor: themeColors.border, + borderColor: theme.border, justifyContent: 'center', backgroundColor: 'transparent', height: variables.inputHeight, @@ -1072,7 +1072,7 @@ const styles = { zIndex: 1, }, - picker: (disabled = false, backgroundColor = themeColors.appBG) => ({ + picker: (disabled = false, backgroundColor = theme.appBG) => ({ iconContainer: { top: Math.round(variables.inputHeight * 0.5) - 11, right: 0, @@ -1082,63 +1082,63 @@ const styles = { inputWeb: { appearance: 'none', ...(disabled ? cursor.cursorDisabled : cursor.cursorPointer), - ...picker, + ...picker(theme), backgroundColor, }, inputIOS: { - ...picker, + ...picker(theme), }, done: { - color: themeColors.text, + color: theme.text, }, doneDepressed: { fontSize: defaultPickerStyles.done.fontSize, }, modalViewMiddle: { - backgroundColor: themeColors.border, + backgroundColor: theme.border, borderTopWidth: 0, }, modalViewBottom: { - backgroundColor: themeColors.highlightBG, + backgroundColor: theme.highlightBG, }, inputAndroid: { - ...picker, + ...picker(theme), }, }), disabledText: { - color: themeColors.icon, + color: theme.icon, }, inputDisabled: { - backgroundColor: themeColors.highlightBG, - color: themeColors.icon, + backgroundColor: theme.highlightBG, + color: theme.icon, }, noOutline: addOutlineWidth({}, 0), errorOutline: { - borderColor: themeColors.danger, + borderColor: theme.danger, }, textLabelSupporting: { fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeLabel, - color: themeColors.textSupporting, + color: theme.textSupporting, }, textLabelError: { fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeLabel, - color: themeColors.textError, + color: theme.textError, }, textReceiptUpload: { ...headlineFont, fontSize: variables.fontSizeXLarge, - color: themeColors.textLight, + color: theme.textLight, textAlign: 'center', }, @@ -1146,13 +1146,13 @@ const styles = { fontFamily: fontFamily.EXP_NEUE, lineHeight: variables.lineHeightLarge, textAlign: 'center', - color: themeColors.textLight, + color: theme.textLight, }, furtherDetailsText: { fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeSmall, - color: themeColors.textSupporting, + color: theme.textSupporting, }, lh16: { @@ -1168,35 +1168,35 @@ const styles = { }, formHelp: { - color: themeColors.textSupporting, + color: theme.textSupporting, fontSize: variables.fontSizeLabel, lineHeight: variables.lineHeightLarge, marginBottom: 4, }, formError: { - color: themeColors.textError, + color: theme.textError, fontSize: variables.fontSizeLabel, lineHeight: variables.formErrorLineHeight, marginBottom: 4, }, formSuccess: { - color: themeColors.success, + color: theme.success, fontSize: variables.fontSizeLabel, lineHeight: 18, marginBottom: 4, }, desktopRedirectPage: { - backgroundColor: themeColors.appBG, + backgroundColor: theme.appBG, minHeight: '100%', flex: 1, alignItems: 'center', }, signInPage: { - backgroundColor: themeColors.highlightBG, + backgroundColor: theme.highlightBG, minHeight: '100%', flex: 1, }, @@ -1276,7 +1276,7 @@ const styles = { // Sidebar Styles sidebar: { - backgroundColor: themeColors.sidebar, + backgroundColor: theme.sidebar, height: '100%', }, @@ -1294,14 +1294,14 @@ const styles = { }, sidebarAvatar: { - backgroundColor: themeColors.icon, + backgroundColor: theme.icon, borderRadius: 20, height: variables.componentSizeNormal, width: variables.componentSizeNormal, }, - statusIndicator: (backgroundColor = themeColors.danger) => ({ - borderColor: themeColors.sidebar, + statusIndicator: (backgroundColor = theme.danger) => ({ + borderColor: theme.sidebar, backgroundColor, borderRadius: 8, borderWidth: 2, @@ -1323,7 +1323,7 @@ const styles = { }, floatingActionButton: { - backgroundColor: themeColors.success, + backgroundColor: theme.success, height: variables.componentSizeLarge, width: variables.componentSizeLarge, borderRadius: 999, @@ -1332,7 +1332,7 @@ const styles = { }, sidebarFooterUsername: { - color: themeColors.heading, + color: theme.heading, fontSize: variables.fontSizeLabel, fontWeight: '700', width: 200, @@ -1342,7 +1342,7 @@ const styles = { }, sidebarFooterLink: { - color: themeColors.textSupporting, + color: theme.textSupporting, fontSize: variables.fontSizeSmall, textDecorationLine: 'none', fontFamily: fontFamily.EXP_NEUE, @@ -1403,7 +1403,7 @@ const styles = { createMenuHeaderText: { fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeLabel, - color: themeColors.heading, + color: theme.heading, }, popoverMenuItem: { @@ -1423,7 +1423,7 @@ const styles = { popoverMenuText: { fontSize: variables.fontSizeNormal, - color: themeColors.heading, + color: theme.heading, }, popoverInnerContainer: { @@ -1453,28 +1453,28 @@ const styles = { }, sidebarLinkText: { - color: themeColors.textSupporting, + color: theme.textSupporting, fontSize: variables.fontSizeNormal, textDecorationLine: 'none', overflow: 'hidden', }, sidebarLinkHover: { - backgroundColor: themeColors.sidebarHover, + backgroundColor: theme.sidebarHover, }, sidebarLinkActive: { - backgroundColor: themeColors.border, + backgroundColor: theme.border, textDecorationLine: 'none', }, sidebarLinkTextBold: { fontWeight: '700', - color: themeColors.heading, + color: theme.heading, }, sidebarLinkActiveText: { - color: themeColors.textSupporting, + color: theme.textSupporting, fontSize: variables.fontSizeNormal, textDecorationLine: 'none', overflow: 'hidden', @@ -1525,11 +1525,11 @@ const styles = { }, optionRowSelected: { - backgroundColor: themeColors.activeComponentBG, + backgroundColor: theme.activeComponentBG, }, optionRowDisabled: { - color: themeColors.textSupporting, + color: theme.textSupporting, }, optionRowCompact: { @@ -1559,7 +1559,7 @@ const styles = { }), appContent: { - backgroundColor: themeColors.appBG, + backgroundColor: theme.appBG, overflow: 'hidden', }, @@ -1632,7 +1632,7 @@ const styles = { }, chatItemMessageHeaderSender: { - color: themeColors.heading, + color: theme.heading, fontFamily: fontFamily.EXP_NEUE_BOLD, fontSize: variables.fontSizeNormal, fontWeight: fontWeightBold, @@ -1642,13 +1642,13 @@ const styles = { chatItemMessageHeaderTimestamp: { flexShrink: 0, - color: themeColors.textSupporting, + color: theme.textSupporting, fontSize: variables.fontSizeSmall, paddingTop: 2, }, chatItemMessage: { - color: themeColors.text, + color: theme.text, fontSize: variables.fontSizeNormal, fontFamily: fontFamily.EXP_NEUE, lineHeight: variables.lineHeightXLarge, @@ -1667,15 +1667,15 @@ const styles = { }, chatItemComposeBoxColor: { - borderColor: themeColors.border, + borderColor: theme.border, }, chatItemComposeBoxFocusedColor: { - borderColor: themeColors.borderFocus, + borderColor: theme.borderFocus, }, chatItemComposeBox: { - backgroundColor: themeColors.componentBG, + backgroundColor: theme.componentBG, borderWidth: 1, borderRadius: variables.componentBorderRadiusRounded, minHeight: variables.componentSizeMedium, @@ -1690,7 +1690,7 @@ const styles = { paddingLeft: 20, paddingRight: 20, display: 'flex', - backgroundColor: themeColors.appBG, + backgroundColor: theme.appBG, }, chatFooterFullCompose: { @@ -1718,9 +1718,9 @@ const styles = { // Make sure you run the following tests against any changes: #12669 textInputCompose: addOutlineWidth( { - backgroundColor: themeColors.componentBG, - borderColor: themeColors.border, - color: themeColors.text, + backgroundColor: theme.componentBG, + borderColor: theme.border, + color: theme.text, fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeNormal, borderWidth: 0, @@ -1748,7 +1748,7 @@ const styles = { }, editInputComposeSpacing: { - backgroundColor: themeColors.transparent, + backgroundColor: theme.transparent, marginVertical: 8, }, @@ -1761,13 +1761,13 @@ const styles = { textInputComposeBorder: { borderLeftWidth: 1, - borderColor: themeColors.border, + borderColor: theme.border, }, chatItemSubmitButton: { alignSelf: 'flex-end', borderRadius: variables.componentBorderRadiusRounded, - backgroundColor: themeColors.transparent, + backgroundColor: theme.transparent, height: 40, padding: 10, margin: 3, @@ -1775,11 +1775,11 @@ const styles = { }, emojiPickerContainer: { - backgroundColor: themeColors.componentBG, + backgroundColor: theme.componentBG, }, emojiHeaderContainer: { - backgroundColor: themeColors.componentBG, + backgroundColor: theme.componentBG, display: 'flex', height: CONST.EMOJI_PICKER_HEADER_HEIGHT, justifyContent: 'center', @@ -1791,7 +1791,7 @@ const styles = { ...spacing.pv1, fontFamily: fontFamily.EXP_NEUE_BOLD, fontWeight: fontWeightBold, - color: themeColors.heading, + color: theme.heading, fontSize: variables.fontSizeSmall, }, @@ -1815,13 +1815,13 @@ const styles = { emojiItemHighlighted: { transition: '0.2s ease', - backgroundColor: themeColors.buttonDefaultBG, + backgroundColor: theme.buttonDefaultBG, }, emojiItemKeyboardHighlighted: { transition: '0.2s ease', borderWidth: 1, - borderColor: themeColors.link, + borderColor: theme.link, borderRadius: variables.buttonBorderRadius, }, @@ -1848,7 +1848,7 @@ const styles = { }, hoveredButton: { - backgroundColor: themeColors.buttonHoveredBG, + backgroundColor: theme.buttonHoveredBG, }, composerSizeButton: { @@ -1858,13 +1858,13 @@ const styles = { padding: 6, margin: 3, borderRadius: variables.componentBorderRadiusRounded, - backgroundColor: themeColors.transparent, + backgroundColor: theme.transparent, justifyContent: 'center', }, chatItemAttachmentPlaceholder: { - backgroundColor: themeColors.sidebar, - borderColor: themeColors.border, + backgroundColor: theme.sidebar, + borderColor: theme.border, borderWidth: 1, borderRadius: variables.componentBorderRadiusNormal, height: 150, @@ -1902,7 +1902,7 @@ const styles = { exampleCheckImage: { width: '100%', height: 80, - borderColor: themeColors.border, + borderColor: theme.border, borderWidth: 1, borderRadius: variables.componentBorderRadiusNormal, }, @@ -1910,14 +1910,14 @@ const styles = { singleAvatar: { height: 24, width: 24, - backgroundColor: themeColors.icon, + backgroundColor: theme.icon, borderRadius: 24, }, singleSubscript: { height: variables.iconSizeNormal, width: variables.iconSizeNormal, - backgroundColor: themeColors.icon, + backgroundColor: theme.icon, borderRadius: 20, zIndex: 1, }, @@ -1925,7 +1925,7 @@ const styles = { singleAvatarSmall: { height: 18, width: 18, - backgroundColor: themeColors.icon, + backgroundColor: theme.icon, borderRadius: 18, }, @@ -1981,8 +1981,8 @@ const styles = { right: -25, borderWidth: 3, borderRadius: 18, - borderColor: themeColors.cardBorder, - backgroundColor: themeColors.appBG, + borderColor: theme.cardBorder, + backgroundColor: theme.appBG, }, avatarLarge: { @@ -2003,7 +2003,7 @@ const styles = { }, avatarInnerText: { - color: themeColors.textLight, + color: theme.textLight, fontSize: variables.fontSizeSmall, lineHeight: undefined, marginLeft: -3, @@ -2011,7 +2011,7 @@ const styles = { }, avatarInnerTextSmall: { - color: themeColors.textLight, + color: theme.textLight, fontSize: variables.fontSizeExtraSmall, lineHeight: undefined, marginLeft: -2, @@ -2024,13 +2024,13 @@ const styles = { }, avatar: { - backgroundColor: themeColors.sidebar, - borderColor: themeColors.sidebar, + backgroundColor: theme.sidebar, + borderColor: theme.sidebar, }, focusedAvatar: { - backgroundColor: themeColors.border, - borderColor: themeColors.border, + backgroundColor: theme.border, + borderColor: theme.border, }, emptyAvatar: { @@ -2086,26 +2086,26 @@ const styles = { borderTop: { borderTopWidth: variables.borderTopWidth, - borderColor: themeColors.border, + borderColor: theme.border, }, borderTopRounded: { borderTopWidth: 1, - borderColor: themeColors.border, + borderColor: theme.border, borderTopLeftRadius: variables.componentBorderRadiusNormal, borderTopRightRadius: variables.componentBorderRadiusNormal, }, borderBottomRounded: { borderBottomWidth: 1, - borderColor: themeColors.border, + borderColor: theme.border, borderBottomLeftRadius: variables.componentBorderRadiusNormal, borderBottomRightRadius: variables.componentBorderRadiusNormal, }, borderBottom: { borderBottomWidth: 1, - borderColor: themeColors.border, + borderColor: theme.border, }, borderNone: { @@ -2115,12 +2115,12 @@ const styles = { borderRight: { borderRightWidth: 1, - borderColor: themeColors.border, + borderColor: theme.border, }, borderLeft: { borderLeftWidth: 1, - borderColor: themeColors.border, + borderColor: theme.border, }, pointerEventsNone, @@ -2145,7 +2145,7 @@ const styles = { imageModalPDF: { flex: 1, - backgroundColor: themeColors.modalBackground, + backgroundColor: theme.modalBackground, }, PDFView: { @@ -2153,7 +2153,7 @@ const styles = { // It's being used on Web/Desktop only to vertically center short PDFs, // while preventing the overflow of the top of long PDF files. display: 'grid', - backgroundColor: themeColors.modalBackground, + backgroundColor: theme.modalBackground, width: '100%', height: '100%', justifyContent: 'center', @@ -2178,7 +2178,7 @@ const styles = { flexDirection: 'column', justifyContent: 'center', alignItems: 'center', - backgroundColor: themeColors.modalBackdrop, + backgroundColor: theme.modalBackdrop, }, centeredModalStyles: (isSmallScreenWidth, isFullScreenWhenSmall) => ({ @@ -2194,10 +2194,10 @@ const styles = { }, defaultAttachmentView: { - backgroundColor: themeColors.sidebar, + backgroundColor: theme.sidebar, borderRadius: variables.componentBorderRadiusNormal, borderWidth: 1, - borderColor: themeColors.border, + borderColor: theme.border, flexDirection: 'row', padding: 20, alignItems: 'center', @@ -2205,7 +2205,7 @@ const styles = { notFoundSafeArea: { flex: 1, - backgroundColor: themeColors.heading, + backgroundColor: theme.heading, }, notFoundView: { @@ -2227,7 +2227,7 @@ const styles = { notFoundTextHeader: { ...headlineFont, - color: themeColors.heading, + color: theme.heading, fontSize: variables.fontSizeXLarge, lineHeight: variables.lineHeightXXLarge, marginTop: 20, @@ -2236,14 +2236,14 @@ const styles = { }, notFoundTextBody: { - color: themeColors.componentBG, + color: theme.componentBG, fontFamily: fontFamily.EXP_NEUE_BOLD, fontWeight: fontWeightBold, fontSize: 15, }, notFoundButtonText: { - color: themeColors.link, + color: theme.link, fontFamily: fontFamily.EXP_NEUE_BOLD, fontWeight: fontWeightBold, fontSize: 15, @@ -2254,8 +2254,8 @@ const styles = { }, defaultModalContainer: { - backgroundColor: themeColors.componentBG, - borderColor: themeColors.transparent, + backgroundColor: theme.componentBG, + borderColor: theme.transparent, }, reportActionContextMenuMiniButton: { @@ -2312,7 +2312,7 @@ const styles = { }, twoFactorAuthSection: { - backgroundColor: themeColors.appBG, + backgroundColor: theme.appBG, padding: 0, }, @@ -2330,7 +2330,7 @@ const styles = { return { alignItems: 'center', justifyContent: 'center', - backgroundColor: themeColors.highlightBG, + backgroundColor: theme.highlightBG, paddingVertical: 28, borderRadius: 16, marginTop: 32, @@ -2381,7 +2381,7 @@ const styles = { justifyContent: 'space-between', }), padding: 20, - backgroundColor: themeColors.sidebar, + backgroundColor: theme.sidebar, borderRadius: variables.componentBorderRadiusLarge, overflow: 'hidden', }), @@ -2401,7 +2401,7 @@ const styles = { anonymousRoomFooterLogoTaglineText: { fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeMedium, - color: themeColors.textLight, + color: theme.textLight, }, signInButtonAvatar: { width: 80, @@ -2417,9 +2417,9 @@ const styles = { }, roomHeaderAvatar: { - backgroundColor: themeColors.appBG, + backgroundColor: theme.appBG, borderRadius: 100, - borderColor: themeColors.componentBG, + borderColor: theme.componentBG, borderWidth: 4, }, @@ -2429,7 +2429,7 @@ const styles = { right: 0, bottom: 0, left: 0, - backgroundColor: themeColors.overlay, + backgroundColor: theme.overlay, opacity: variables.overlayOpacity, borderRadius: 88, }, @@ -2438,7 +2438,7 @@ const styles = { RHPNavigatorContainerNavigatorContainerStyles: (isSmallScreenWidth) => ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, flex: 1}), avatarInnerTextChat: { - color: themeColors.textLight, + color: theme.textLight, fontSize: variables.fontSizeXLarge, fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM, textAlign: 'center', @@ -2457,7 +2457,7 @@ const styles = { fontSize: variables.fontSizeLarge, fontFamily: fontFamily.EXP_NEUE_BOLD, fontWeight: fontWeightBold, - color: themeColors.heading, + color: theme.heading, }, pageWrapper: { @@ -2482,12 +2482,12 @@ const styles = { selectCircle: { width: variables.componentSizeSmall, height: variables.componentSizeSmall, - borderColor: themeColors.border, + borderColor: theme.border, borderWidth: 1, borderRadius: variables.componentSizeSmall / 2, justifyContent: 'center', alignItems: 'center', - backgroundColor: themeColors.componentBG, + backgroundColor: theme.componentBG, marginLeft: 8, }, @@ -2506,7 +2506,7 @@ const styles = { unreadIndicatorLine: { height: 1, - backgroundColor: themeColors.unreadIndicator, + backgroundColor: theme.unreadIndicator, flexGrow: 1, marginRight: 8, opacity: 0.5, @@ -2514,13 +2514,13 @@ const styles = { threadDividerLine: { height: 1, - backgroundColor: themeColors.border, + backgroundColor: theme.border, flexGrow: 1, marginHorizontal: 20, }, unreadIndicatorText: { - color: themeColors.unreadIndicator, + color: theme.unreadIndicator, fontFamily: fontFamily.EXP_NEUE_BOLD, fontSize: variables.fontSizeSmall, fontWeight: fontWeightBold, @@ -2532,11 +2532,11 @@ const styles = { }, navigationSceneContainer: { - backgroundColor: themeColors.appBG, + backgroundColor: theme.appBG, }, navigationScreenCardStyle: { - backgroundColor: themeColors.appBG, + backgroundColor: theme.appBG, height: '100%', }, @@ -2592,7 +2592,7 @@ const styles = { detailsPageSectionVersion: { alignSelf: 'center', - color: themeColors.textSupporting, + color: theme.textSupporting, fontSize: variables.fontSizeSmall, height: 24, lineHeight: 20, @@ -2604,11 +2604,11 @@ const styles = { justifyContent: 'center', borderRadius: 20, padding: 15, - backgroundColor: themeColors.success, + backgroundColor: theme.success, }, switchInactive: { - backgroundColor: themeColors.border, + backgroundColor: theme.border, }, switchThumb: { @@ -2617,7 +2617,7 @@ const styles = { borderRadius: 11, position: 'absolute', left: 4, - backgroundColor: themeColors.appBG, + backgroundColor: theme.appBG, }, switchThumbTransformation: (translateX) => ({ @@ -2625,11 +2625,11 @@ const styles = { }), radioButtonContainer: { - backgroundColor: themeColors.componentBG, + backgroundColor: theme.componentBG, borderRadius: 10, height: 20, width: 20, - borderColor: themeColors.icon, + borderColor: theme.icon, borderWidth: 1, justifyContent: 'center', alignItems: 'center', @@ -2643,7 +2643,7 @@ const styles = { }, checkedContainer: { - backgroundColor: themeColors.checkBox, + backgroundColor: theme.checkBox, }, magicCodeInputContainer: { @@ -2654,7 +2654,7 @@ const styles = { magicCodeInput: { fontSize: variables.fontSizeXLarge, - color: themeColors.heading, + color: theme.heading, lineHeight: variables.inputHeight, }, @@ -2678,7 +2678,7 @@ const styles = { iouAmountText: { ...headlineFont, fontSize: variables.iouAmountTextSize, - color: themeColors.heading, + color: theme.heading, lineHeight: variables.inputHeight, }, @@ -2686,7 +2686,7 @@ const styles = { { ...headlineFont, fontSize: variables.iouAmountTextSize, - color: themeColors.heading, + color: theme.heading, padding: 0, lineHeight: undefined, }, @@ -2713,7 +2713,7 @@ const styles = { }, moneyRequestPreviewBox: { - backgroundColor: themeColors.cardBG, + backgroundColor: theme.cardBG, borderRadius: variables.componentBorderRadiusLarge, maxWidth: variables.sideBarWidth, width: '100%', @@ -2739,7 +2739,7 @@ const styles = { moneyRequestPreviewAmount: { ...headlineFont, ...whiteSpace.preWrap, - color: themeColors.heading, + color: theme.heading, }, defaultCheckmarkWrapper: { @@ -2785,7 +2785,7 @@ const styles = { }, fullScreenLoading: { - backgroundColor: themeColors.componentBG, + backgroundColor: theme.componentBG, opacity: 0.8, justifyContent: 'center', alignItems: 'center', @@ -2793,12 +2793,12 @@ const styles = { }, navigatorFullScreenLoading: { - backgroundColor: themeColors.highlightBG, + backgroundColor: theme.highlightBG, opacity: 1, }, reimbursementAccountFullScreenLoading: { - backgroundColor: themeColors.componentBG, + backgroundColor: theme.componentBG, opacity: 0.8, justifyContent: 'flex-start', alignItems: 'center', @@ -2846,12 +2846,12 @@ const styles = { }), growlNotificationBox: { - backgroundColor: themeColors.inverse, + backgroundColor: theme.inverse, borderRadius: variables.componentBorderRadiusNormal, alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between', - shadowColor: themeColors.shadow, + shadowColor: theme.shadow, ...spacing.p5, }, @@ -2860,12 +2860,12 @@ const styles = { fontFamily: fontFamily.EXP_NEUE, width: '90%', lineHeight: variables.fontSizeNormalHeight, - color: themeColors.textReversed, + color: theme.textReversed, ...spacing.ml4, }, blockquote: { - borderLeftColor: themeColors.border, + borderLeftColor: theme.border, borderLeftWidth: 4, paddingLeft: 12, marginVertical: 4, @@ -2917,11 +2917,11 @@ const styles = { smallEditIcon: { alignItems: 'center', - backgroundColor: themeColors.buttonHoveredBG, - borderColor: themeColors.textReversed, + backgroundColor: theme.buttonHoveredBG, + borderColor: theme.textReversed, borderRadius: 14, borderWidth: 3, - color: themeColors.textReversed, + color: theme.textReversed, height: 28, width: 28, justifyContent: 'center', @@ -2938,7 +2938,7 @@ const styles = { height: 400, borderRadius: variables.componentBorderRadiusCard, overflow: 'hidden', - backgroundColor: themeColors.heroCard, + backgroundColor: theme.heroCard, }, workspaceCardMobile: { @@ -2981,18 +2981,18 @@ const styles = { }, peopleRowBorderBottom: { - borderColor: themeColors.border, + borderColor: theme.border, borderBottomWidth: 1, ...spacing.pb2, }, peopleBadge: { - backgroundColor: themeColors.icon, + backgroundColor: theme.icon, ...spacing.ph3, }, peopleBadgeText: { - color: themeColors.textReversed, + color: theme.textReversed, fontSize: variables.fontSizeSmall, lineHeight: variables.lineHeightNormal, ...whiteSpace.noWrap, @@ -3018,7 +3018,7 @@ const styles = { flex: 1, }, text: { - color: themeColors.textSupporting, + color: theme.textSupporting, textAlignVertical: 'center', fontSize: variables.fontSizeLabel, }, @@ -3038,7 +3038,7 @@ const styles = { }, cardOverlay: { - backgroundColor: themeColors.overlay, + backgroundColor: theme.overlay, position: 'absolute', top: 0, left: 0, @@ -3055,18 +3055,18 @@ const styles = { shortTermsBorder: { borderWidth: 1, - borderColor: themeColors.border, + borderColor: theme.border, }, shortTermsHorizontalRule: { borderBottomWidth: 1, - borderColor: themeColors.border, + borderColor: theme.border, ...spacing.mh3, }, shortTermsLargeHorizontalRule: { borderWidth: 1, - borderColor: themeColors.border, + borderColor: theme.border, ...spacing.mh3, }, @@ -3089,7 +3089,7 @@ const styles = { shortTermsHeadline: { ...headlineFont, ...whiteSpace.preWrap, - color: themeColors.heading, + color: theme.heading, fontSize: variables.fontSizeXXXLarge, lineHeight: variables.lineHeightXXXLarge, }, @@ -3101,7 +3101,7 @@ const styles = { collapsibleSectionBorder: { borderBottomWidth: 2, - borderBottomColor: themeColors.border, + borderBottomColor: theme.border, }, communicationsLinkHeight: { @@ -3152,11 +3152,11 @@ const styles = { googleSearchSeparator: { height: 1, - backgroundColor: themeColors.border, + backgroundColor: theme.border, }, googleSearchText: { - color: themeColors.text, + color: theme.text, fontSize: variables.fontSizeNormal, lineHeight: variables.fontSizeNormalHeight, fontFamily: fontFamily.EXP_NEUE, @@ -3194,7 +3194,7 @@ const styles = { keyboardShortcutTableContainer: { display: 'flex', width: '100%', - borderColor: themeColors.border, + borderColor: theme.border, height: 'auto', borderRadius: variables.componentBorderRadius, borderWidth: 1, @@ -3203,7 +3203,7 @@ const styles = { keyboardShortcutTableRow: { flex: 1, flexDirection: 'row', - borderColor: themeColors.border, + borderColor: theme.border, flexBasis: 'auto', alignSelf: 'stretch', borderTopWidth: 1, @@ -3212,7 +3212,7 @@ const styles = { keyboardShortcutTablePrefix: { width: '30%', borderRightWidth: 1, - borderColor: themeColors.border, + borderColor: theme.border, }, keyboardShortcutTableFirstRow: { @@ -3220,18 +3220,18 @@ const styles = { }, iPhoneXSafeArea: { - backgroundColor: themeColors.inverse, + backgroundColor: theme.inverse, flex: 1, }, transferBalancePayment: { borderWidth: 1, borderRadius: variables.componentBorderRadiusNormal, - borderColor: themeColors.border, + borderColor: theme.border, }, transferBalanceSelectedPayment: { - borderColor: themeColors.iconSuccessFill, + borderColor: theme.iconSuccessFill, }, transferBalanceBalance: { @@ -3246,7 +3246,7 @@ const styles = { overflow: 'hidden', alignItems: 'center', justifyContent: 'center', - backgroundColor: themeColors.imageCropBackgroundColor, + backgroundColor: theme.imageCropBackgroundColor, ...cursor.cursorMove, }, @@ -3257,7 +3257,7 @@ const styles = { }, sliderKnob: { - backgroundColor: themeColors.success, + backgroundColor: theme.success, position: 'absolute', height: variables.sliderKnobSize, width: variables.sliderKnobSize, @@ -3267,7 +3267,7 @@ const styles = { }, sliderBar: { - backgroundColor: themeColors.border, + backgroundColor: theme.border, height: variables.sliderBarHeight, borderRadius: variables.sliderBarHeight / 2, alignSelf: 'stretch', @@ -3282,7 +3282,7 @@ const styles = { }, inlineSystemMessage: { - color: themeColors.textSupporting, + color: theme.textSupporting, fontSize: variables.fontSizeLabel, fontFamily: fontFamily.EXP_NEUE, marginLeft: 6, @@ -3297,17 +3297,17 @@ const styles = { }, invisibleOverlay: { - backgroundColor: themeColors.transparent, + backgroundColor: theme.transparent, zIndex: 1000, }, reportDropOverlay: { - backgroundColor: themeColors.dropUIBG, + backgroundColor: theme.dropUIBG, zIndex: 2, }, receiptDropOverlay: { - backgroundColor: themeColors.receiptDropUIBG, + backgroundColor: theme.receiptDropUIBG, zIndex: 2, }, @@ -3317,7 +3317,7 @@ const styles = { }), cardSection: { - backgroundColor: themeColors.cardBG, + backgroundColor: theme.cardBG, borderRadius: variables.componentBorderRadiusCard, marginBottom: 20, marginHorizontal: 16, @@ -3339,7 +3339,7 @@ const styles = { }, callRequestSection: { - backgroundColor: themeColors.appBG, + backgroundColor: theme.appBG, paddingHorizontal: 0, paddingBottom: 0, marginHorizontal: 0, @@ -3361,7 +3361,7 @@ const styles = { flex: 1, alignItems: 'center', justifyContent: 'center', - backgroundColor: themeColors.appBG, + backgroundColor: theme.appBG, }, deeplinkWrapperMessage: { @@ -3386,7 +3386,7 @@ const styles = { emojiReactionListHeader: { marginTop: 8, paddingBottom: 20, - borderBottomColor: themeColors.border, + borderBottomColor: theme.border, borderBottomWidth: 1, marginHorizontal: 20, }, @@ -3394,7 +3394,7 @@ const styles = { paddingVertical: 2, paddingHorizontal: 8, borderRadius: 28, - backgroundColor: themeColors.border, + backgroundColor: theme.border, alignItems: 'center', justifyContent: 'center', flexDirection: 'row', @@ -3407,7 +3407,7 @@ const styles = { paddingHorizontal: 20, }, reactionListHeaderText: { - color: themeColors.textSupporting, + color: theme.textSupporting, marginLeft: 8, alignSelf: 'center', }, @@ -3438,7 +3438,7 @@ const styles = { }, textReactionSenders: { - color: themeColors.dark, + color: theme.dark, ...wordBreak.breakWord, }, @@ -3460,7 +3460,7 @@ const styles = { }, validateCodeDigits: { - color: themeColors.text, + color: theme.text, fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeXXLarge, letterSpacing: 4, @@ -3481,14 +3481,14 @@ const styles = { footerTitle: { fontSize: variables.fontSizeLarge, - color: themeColors.success, + color: theme.success, marginBottom: 16, }, footerRow: { paddingVertical: 4, marginBottom: 8, - color: themeColors.textLight, + color: theme.textLight, fontSize: variables.fontSizeMedium, }, @@ -3499,7 +3499,7 @@ const styles = { listPickerSeparator: { height: 1, - backgroundColor: themeColors.buttonDefaultBG, + backgroundColor: theme.buttonDefaultBG, }, datePickerRoot: { @@ -3508,7 +3508,7 @@ const styles = { }, datePickerPopover: { - backgroundColor: themeColors.appBG, + backgroundColor: theme.appBG, width: '100%', alignSelf: 'center', zIndex: 100, @@ -3517,7 +3517,7 @@ const styles = { loginHeroHeader: { fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM, - color: themeColors.success, + color: theme.success, fontWeight: '500', textAlign: 'center', }, @@ -3531,14 +3531,14 @@ const styles = { loginHeroBody: { fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeSignInHeroBody, - color: themeColors.textLight, + color: theme.textLight, textAlign: 'center', }, linkPreviewWrapper: { marginTop: 16, borderLeftWidth: 4, - borderLeftColor: themeColors.border, + borderLeftColor: theme.border, paddingLeft: 12, }, @@ -3560,7 +3560,7 @@ const styles = { }, whisper: { - backgroundColor: themeColors.cardBG, + backgroundColor: theme.cardBG, }, contextMenuItemPopoverMaxWidth: { @@ -3595,7 +3595,7 @@ const styles = { taskTitleDescription: { fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeLabel, - color: themeColors.textSupporting, + color: theme.textSupporting, lineHeight: variables.lineHeightNormal, ...spacing.mb1, }, @@ -3607,7 +3607,7 @@ const styles = { reportHorizontalRule: { borderBottomWidth: 1, - borderColor: themeColors.border, + borderColor: theme.border, ...spacing.mh5, ...spacing.mv2, }, @@ -3638,13 +3638,13 @@ const styles = { paddingVertical: 20, borderRadius: 20, overflow: 'hidden', - borderColor: themeColors.borderFocus, + borderColor: theme.borderFocus, borderWidth: 2, - backgroundColor: themeColors.highlightBG, + backgroundColor: theme.highlightBG, }, splashScreenHider: { - backgroundColor: themeColors.splashBG, + backgroundColor: theme.splashBG, alignItems: 'center', justifyContent: 'center', }, @@ -3740,7 +3740,7 @@ const styles = { marginLeft: 8, fontFamily: isSelected ? fontFamily.EXP_NEUE_BOLD : fontFamily.EXP_NEUE, fontWeight: isSelected ? fontWeightBold : 400, - color: isSelected ? themeColors.textLight : themeColors.textSupporting, + color: isSelected ? theme.textLight : theme.textSupporting, }), /** @@ -3781,7 +3781,7 @@ const styles = { emojiPickerButtonDropdown: { justifyContent: 'center', - backgroundColor: themeColors.activeComponentBG, + backgroundColor: theme.activeComponentBG, width: 86, height: 52, borderRadius: 26, @@ -3803,15 +3803,15 @@ const styles = { }, reportPreviewBox: { - backgroundColor: themeColors.cardBG, + backgroundColor: theme.cardBG, borderRadius: variables.componentBorderRadiusLarge, maxWidth: variables.sideBarWidth, width: '100%', }, reportPreviewBoxHoverBorder: { - borderColor: themeColors.border, - backgroundColor: themeColors.border, + borderColor: theme.border, + backgroundColor: theme.border, }, reportPreviewBoxBody: { @@ -3821,7 +3821,7 @@ const styles = { reportActionItemImages: { flexDirection: 'row', borderWidth: 4, - borderColor: themeColors.transparent, + borderColor: theme.transparent, borderTopLeftRadius: variables.componentBorderRadiusLarge, borderTopRightRadius: variables.componentBorderRadiusLarge, borderBottomLeftRadius: variables.componentBorderRadiusLarge, @@ -3841,13 +3841,13 @@ const styles = { reportActionItemImageBorder: { borderRightWidth: 2, - borderColor: themeColors.cardBG, + borderColor: theme.cardBG, }, reportActionItemImagesMore: { position: 'absolute', borderRadius: 18, - backgroundColor: themeColors.cardBG, + backgroundColor: theme.cardBG, width: 36, height: 36, display: 'flex', @@ -3862,7 +3862,7 @@ const styles = { display: 'flex', justifyContent: 'center', alignItems: 'center', - backgroundColor: themeColors.border, + backgroundColor: theme.border, marginRight: 12, }, @@ -3885,7 +3885,7 @@ const styles = { sidebarStatusAvatarContainer: { height: 44, width: 84, - backgroundColor: themeColors.componentBG, + backgroundColor: theme.componentBG, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', @@ -3905,7 +3905,7 @@ const styles = { ...spacing.mv3, overflow: 'hidden', borderWidth: 2, - borderColor: themeColors.cardBG, + borderColor: theme.cardBG, borderRadius: variables.componentBorderRadiusLarge, height: 200, maxWidth: 400, @@ -3947,7 +3947,7 @@ const styles = { }, mapPendingView: { - backgroundColor: themeColors.highlightBG, + backgroundColor: theme.highlightBG, ...flex.flex1, borderRadius: variables.componentBorderRadiusLarge, }, @@ -3959,6 +3959,9 @@ const styles = { height: 30, width: '100%', }, -}; +}); + +const defaultStyles = styles(defaultTheme); -export default styles; +export default defaultStyles; +export {styles}; From 7276e6dc8a6c7b7e800e1328ad52c1d5cf246fd6 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 13 Sep 2023 12:53:33 +0200 Subject: [PATCH 2/9] fix: rename ThemeStylesContext --- src/styles/ThemeStylesProvider.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/ThemeStylesProvider.tsx b/src/styles/ThemeStylesProvider.tsx index 0a32d2de1cf7..763b2febdaf0 100644 --- a/src/styles/ThemeStylesProvider.tsx +++ b/src/styles/ThemeStylesProvider.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/jsx-props-no-spreading */ import React, {useMemo} from 'react'; import useTheme from './themes/useTheme'; -import StylesContext from './ThemeStylesContext'; +import ThemeStylesContext from './ThemeStylesContext'; import {styles as stylesUntyped} from './styles'; const styles = stylesUntyped as (theme: Record) => Record; @@ -15,7 +15,7 @@ function ThemeStylesProvider({children}: ThemeStylesProviderProps) { const themeStyles = useMemo(() => styles(theme), [theme]); - return {children}; + return {children}; } ThemeStylesProvider.displayName = 'ThemeStylesProvider'; From e3ce763548e7db5b6e86c67292ee5b87442e9e9f Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 13 Sep 2023 13:13:09 +0200 Subject: [PATCH 3/9] fix: lint errors and added TODOs for after theme switching migration --- src/styles/ThemeStylesProvider.tsx | 3 ++- src/styles/styles.js | 7 ++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/styles/ThemeStylesProvider.tsx b/src/styles/ThemeStylesProvider.tsx index 763b2febdaf0..d0db784ca8ca 100644 --- a/src/styles/ThemeStylesProvider.tsx +++ b/src/styles/ThemeStylesProvider.tsx @@ -2,7 +2,8 @@ import React, {useMemo} from 'react'; import useTheme from './themes/useTheme'; import ThemeStylesContext from './ThemeStylesContext'; -import {styles as stylesUntyped} from './styles'; +// TODO: Rename this to "styles" once the app is migrated to theme switching hooks and HOCs +import {stylesGenerator as stylesUntyped} from './styles'; const styles = stylesUntyped as (theme: Record) => Record; diff --git a/src/styles/styles.js b/src/styles/styles.js index 9cc18b6c44a0..ced90e972f6a 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -3961,7 +3961,12 @@ const styles = (theme) => ({ }, }); +// For now we need to export the styles function that takes the theme as an argument +// as something named different than "styles", because a lot of files import the "defaultStyles" +// as "styles", which causes ESLint to throw an error. +// TODO: Remove this once the app is migrated to theme switching hooks and HOCs and "styles/theme/default.js" is not used anywhere anymore +const stylesGenerator = styles; const defaultStyles = styles(defaultTheme); export default defaultStyles; -export {styles}; +export {stylesGenerator}; From 7cd0eebb56ec94187dd8f6d83cb89edcdbb02c77 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 13 Sep 2023 13:36:59 +0200 Subject: [PATCH 4/9] fix: ignore eslint instead of casting --- src/styles/StyleUtils.ts | 21 +++++++++++++++++++ .../getReportActionContextMenuStyles.ts | 2 ++ src/styles/useThemeStyles.ts | 2 ++ 3 files changed, 25 insertions(+) diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts index 8945bc0be058..a0508090f774 100644 --- a/src/styles/StyleUtils.ts +++ b/src/styles/StyleUtils.ts @@ -259,9 +259,12 @@ function getSafeAreaMargins(insets?: EdgeInsets): ViewStyle | CSSProperties { function getZoomCursorStyle(isZoomed: boolean, isDragging: boolean): ViewStyle | CSSProperties { if (!isZoomed) { + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // eslint-disable-next-line @typescript-eslint/no-unsafe-return return styles.cursorZoomIn; } + // eslint-disable-next-line @typescript-eslint/no-unsafe-return return isDragging ? styles.cursorGrabbing : styles.cursorZoomOut; } @@ -336,12 +339,16 @@ function getWidthStyle(width: number): ViewStyle | CSSProperties { */ function getAutoGrowHeightInputStyle(textInputHeight: number, maxHeight: number): ViewStyle | CSSProperties { if (textInputHeight > maxHeight) { + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // eslint-disable-next-line @typescript-eslint/no-unsafe-return return { ...styles.pr0, ...styles.overflowAuto, }; } + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // eslint-disable-next-line @typescript-eslint/no-unsafe-return return { ...styles.pr0, ...styles.overflowHidden, @@ -439,11 +446,17 @@ function getBackgroundColorWithOpacityStyle(backgroundColor: string, opacity: nu function getBadgeColorStyle(success: boolean, error: boolean, isPressed = false, isAdHoc = false): ViewStyle | CSSProperties { if (success) { if (isAdHoc) { + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // eslint-disable-next-line @typescript-eslint/no-unsafe-return return isPressed ? styles.badgeAdHocSuccessPressed : styles.badgeAdHocSuccess; } + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // eslint-disable-next-line @typescript-eslint/no-unsafe-return return isPressed ? styles.badgeSuccessPressed : styles.badgeSuccess; } if (error) { + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // eslint-disable-next-line @typescript-eslint/no-unsafe-return return isPressed ? styles.badgeDangerPressed : styles.badgeDanger; } return {}; @@ -593,6 +606,8 @@ function getLoginPagePromoStyle(): ViewStyle | CSSProperties { * Generate the styles for the ReportActionItem wrapper view. */ function getReportActionItemStyle(isHovered = false, isLoading = false): ViewStyle | CSSProperties { + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // eslint-disable-next-line @typescript-eslint/no-unsafe-return return { display: 'flex', justifyContent: 'space-between', @@ -609,6 +624,8 @@ function getReportActionItemStyle(isHovered = false, isLoading = false): ViewSty * Generate the wrapper styles for the mini ReportActionContextMenu. */ function getMiniReportActionContextMenuWrapperStyle(isReportActionItemGrouped: boolean): ViewStyle | CSSProperties { + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // eslint-disable-next-line @typescript-eslint/no-unsafe-return return { ...(isReportActionItemGrouped ? positioning.tn8 : positioning.tn4), ...positioning.r4, @@ -1043,6 +1060,8 @@ function displayIfTrue(condition: boolean): ViewStyle | CSSProperties { function getGoogleListViewStyle(shouldDisplayBorder: boolean): ViewStyle | CSSProperties { if (shouldDisplayBorder) { + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // eslint-disable-next-line @typescript-eslint/no-unsafe-return return { ...styles.borderTopRounded, ...styles.borderBottomRounded, @@ -1150,6 +1169,8 @@ function getDisabledLinkStyles(isDisabled = false): ViewStyle | CSSProperties { ...cursor.cursorDisabled, }; + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // eslint-disable-next-line @typescript-eslint/no-unsafe-return return { ...styles.link, ...(isDisabled ? disabledLinkStyles : {}), diff --git a/src/styles/getReportActionContextMenuStyles.ts b/src/styles/getReportActionContextMenuStyles.ts index 17f0828ab80c..30ea9658a029 100644 --- a/src/styles/getReportActionContextMenuStyles.ts +++ b/src/styles/getReportActionContextMenuStyles.ts @@ -35,6 +35,8 @@ function getReportActionContextMenuStyles(isMini: boolean, isSmallScreenWidth: b return miniWrapperStyle; } + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // eslint-disable-next-line @typescript-eslint/no-unsafe-return return [ ...bigWrapperStyle, diff --git a/src/styles/useThemeStyles.ts b/src/styles/useThemeStyles.ts index 77ee0edb6f95..65a2309f83b7 100644 --- a/src/styles/useThemeStyles.ts +++ b/src/styles/useThemeStyles.ts @@ -8,6 +8,8 @@ function useThemeStyles() { throw new Error('StylesContext was null! Are you sure that you wrapped the component under a ?'); } + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // eslint-disable-next-line @typescript-eslint/no-unsafe-return return themeStyles; } From 97a3fe78f6d595c48b0616f05976a0c7ab7381d3 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 13 Sep 2023 02:07:34 +0700 Subject: [PATCH 5/9] fix: cannot edit money request in offline mode --- src/libs/ReportUtils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index f6f1ac234250..3b3f7b976ba6 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -2627,7 +2627,7 @@ function buildTransactionThread(reportAction, moneyRequestReportID) { participantAccountIDs, getTransactionReportName(reportAction), '', - lodashGet(getReport(reportAction.reportID), 'policyID', CONST.POLICY.OWNER_EMAIL_FAKE), + lodashGet(getReport(moneyRequestReportID), 'policyID', CONST.POLICY.OWNER_EMAIL_FAKE), CONST.POLICY.OWNER_ACCOUNT_ID_FAKE, false, '', From e5e697b4f644f2581c2433fc5f98ef9ab148e5de Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 13 Sep 2023 14:40:00 +0200 Subject: [PATCH 6/9] fix: add GH issue link to TODO comments --- src/styles/StyleUtils.ts | 20 +++++++++---------- .../getReportActionContextMenuStyles.ts | 2 +- src/styles/useThemeStyles.ts | 2 +- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts index a0508090f774..0701adb83313 100644 --- a/src/styles/StyleUtils.ts +++ b/src/styles/StyleUtils.ts @@ -259,7 +259,7 @@ function getSafeAreaMargins(insets?: EdgeInsets): ViewStyle | CSSProperties { function getZoomCursorStyle(isZoomed: boolean, isDragging: boolean): ViewStyle | CSSProperties { if (!isZoomed) { - // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337) // eslint-disable-next-line @typescript-eslint/no-unsafe-return return styles.cursorZoomIn; } @@ -339,7 +339,7 @@ function getWidthStyle(width: number): ViewStyle | CSSProperties { */ function getAutoGrowHeightInputStyle(textInputHeight: number, maxHeight: number): ViewStyle | CSSProperties { if (textInputHeight > maxHeight) { - // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337) // eslint-disable-next-line @typescript-eslint/no-unsafe-return return { ...styles.pr0, @@ -347,7 +347,7 @@ function getAutoGrowHeightInputStyle(textInputHeight: number, maxHeight: number) }; } - // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337) // eslint-disable-next-line @typescript-eslint/no-unsafe-return return { ...styles.pr0, @@ -446,16 +446,16 @@ function getBackgroundColorWithOpacityStyle(backgroundColor: string, opacity: nu function getBadgeColorStyle(success: boolean, error: boolean, isPressed = false, isAdHoc = false): ViewStyle | CSSProperties { if (success) { if (isAdHoc) { - // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337) // eslint-disable-next-line @typescript-eslint/no-unsafe-return return isPressed ? styles.badgeAdHocSuccessPressed : styles.badgeAdHocSuccess; } - // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337) // eslint-disable-next-line @typescript-eslint/no-unsafe-return return isPressed ? styles.badgeSuccessPressed : styles.badgeSuccess; } if (error) { - // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337) // eslint-disable-next-line @typescript-eslint/no-unsafe-return return isPressed ? styles.badgeDangerPressed : styles.badgeDanger; } @@ -606,7 +606,7 @@ function getLoginPagePromoStyle(): ViewStyle | CSSProperties { * Generate the styles for the ReportActionItem wrapper view. */ function getReportActionItemStyle(isHovered = false, isLoading = false): ViewStyle | CSSProperties { - // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337) // eslint-disable-next-line @typescript-eslint/no-unsafe-return return { display: 'flex', @@ -624,7 +624,7 @@ function getReportActionItemStyle(isHovered = false, isLoading = false): ViewSty * Generate the wrapper styles for the mini ReportActionContextMenu. */ function getMiniReportActionContextMenuWrapperStyle(isReportActionItemGrouped: boolean): ViewStyle | CSSProperties { - // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337) // eslint-disable-next-line @typescript-eslint/no-unsafe-return return { ...(isReportActionItemGrouped ? positioning.tn8 : positioning.tn4), @@ -1060,7 +1060,7 @@ function displayIfTrue(condition: boolean): ViewStyle | CSSProperties { function getGoogleListViewStyle(shouldDisplayBorder: boolean): ViewStyle | CSSProperties { if (shouldDisplayBorder) { - // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337) // eslint-disable-next-line @typescript-eslint/no-unsafe-return return { ...styles.borderTopRounded, @@ -1169,7 +1169,7 @@ function getDisabledLinkStyles(isDisabled = false): ViewStyle | CSSProperties { ...cursor.cursorDisabled, }; - // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337) // eslint-disable-next-line @typescript-eslint/no-unsafe-return return { ...styles.link, diff --git a/src/styles/getReportActionContextMenuStyles.ts b/src/styles/getReportActionContextMenuStyles.ts index 30ea9658a029..9c0e159eb5fe 100644 --- a/src/styles/getReportActionContextMenuStyles.ts +++ b/src/styles/getReportActionContextMenuStyles.ts @@ -35,7 +35,7 @@ function getReportActionContextMenuStyles(isMini: boolean, isSmallScreenWidth: b return miniWrapperStyle; } - // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337) // eslint-disable-next-line @typescript-eslint/no-unsafe-return return [ ...bigWrapperStyle, diff --git a/src/styles/useThemeStyles.ts b/src/styles/useThemeStyles.ts index 65a2309f83b7..a5b3baebbaec 100644 --- a/src/styles/useThemeStyles.ts +++ b/src/styles/useThemeStyles.ts @@ -8,7 +8,7 @@ function useThemeStyles() { throw new Error('StylesContext was null! Are you sure that you wrapped the component under a ?'); } - // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed + // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337) // eslint-disable-next-line @typescript-eslint/no-unsafe-return return themeStyles; } From 263a6113517f88b9f14a602574ec5c2171329420 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 13 Sep 2023 14:54:56 +0200 Subject: [PATCH 7/9] fix: add one more comment --- 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 ced90e972f6a..944a8a083b26 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -3964,7 +3964,7 @@ const styles = (theme) => ({ // For now we need to export the styles function that takes the theme as an argument // as something named different than "styles", because a lot of files import the "defaultStyles" // as "styles", which causes ESLint to throw an error. -// TODO: Remove this once the app is migrated to theme switching hooks and HOCs and "styles/theme/default.js" is not used anywhere anymore +// TODO: Remove this once the app is migrated to theme switching hooks and HOCs and "styles/theme/default.js" is not used anywhere anymore (GH issue: https://github.com/Expensify/App/issues/27337) const stylesGenerator = styles; const defaultStyles = styles(defaultTheme); From cc621524d4919c685d9e2f462ad41322829a01ff Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 13 Sep 2023 14:55:30 +0200 Subject: [PATCH 8/9] fix: update comment --- 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 944a8a083b26..e81e03726c78 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -3964,7 +3964,7 @@ const styles = (theme) => ({ // For now we need to export the styles function that takes the theme as an argument // as something named different than "styles", because a lot of files import the "defaultStyles" // as "styles", which causes ESLint to throw an error. -// TODO: Remove this once the app is migrated to theme switching hooks and HOCs and "styles/theme/default.js" is not used anywhere anymore (GH issue: https://github.com/Expensify/App/issues/27337) +// TODO: Remove "stylesGenerator" and instead only return "styles" once the app is migrated to theme switching hooks and HOCs and "styles/theme/default.js" is not used anywhere anymore (GH issue: https://github.com/Expensify/App/issues/27337) const stylesGenerator = styles; const defaultStyles = styles(defaultTheme); From 068556a32fe503f8a948d90bdfa1b7621cf46e42 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 13 Sep 2023 15:01:54 +0200 Subject: [PATCH 9/9] fix: remove weird change --- src/libs/ReportUtils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index 3b3f7b976ba6..f6f1ac234250 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -2627,7 +2627,7 @@ function buildTransactionThread(reportAction, moneyRequestReportID) { participantAccountIDs, getTransactionReportName(reportAction), '', - lodashGet(getReport(moneyRequestReportID), 'policyID', CONST.POLICY.OWNER_EMAIL_FAKE), + lodashGet(getReport(reportAction.reportID), 'policyID', CONST.POLICY.OWNER_EMAIL_FAKE), CONST.POLICY.OWNER_ACCOUNT_ID_FAKE, false, '',