diff --git a/src/components/AddressSearch/CurrentLocationButton.js b/src/components/AddressSearch/CurrentLocationButton.js index 3c7feb8fb70c..a955cf821f7f 100644 --- a/src/components/AddressSearch/CurrentLocationButton.js +++ b/src/components/AddressSearch/CurrentLocationButton.js @@ -8,6 +8,7 @@ import useLocalize from '@hooks/useLocalize'; import getButtonState from '@libs/getButtonState'; import colors from '@styles/colors'; import * as StyleUtils from '@styles/StyleUtils'; +import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; const propTypes = { @@ -25,12 +26,13 @@ const defaultProps = { function CurrentLocationButton({onPress, isDisabled}) { const styles = useThemeStyles(); + const theme = useTheme(); const {translate} = useLocalize(); return ( + ( ref: ForwardedRef, ) { const styles = useThemeStyles(); + const theme = useTheme(); const rowHeight = useSharedValue(0); const scrollRef = useRef>(null); /** @@ -47,7 +49,7 @@ function BaseAutoCompleteSuggestions( const renderItem = useCallback( ({item, index}: RenderSuggestionMenuItemProps): ReactElement => ( StyleUtils.getAutoCompleteSuggestionItemStyle(highlightedSuggestionIndex, CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT, hovered, index)} + style={({hovered}) => StyleUtils.getAutoCompleteSuggestionItemStyle(theme, highlightedSuggestionIndex, CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT, hovered, index)} hoverDimmingValue={1} onMouseDown={(e) => e.preventDefault()} onPress={() => onSelect(index)} @@ -57,7 +59,7 @@ function BaseAutoCompleteSuggestions( {renderSuggestionMenuItem(item, index)} ), - [highlightedSuggestionIndex, renderSuggestionMenuItem, onSelect, accessibilityLabelExtractor], + [highlightedSuggestionIndex, renderSuggestionMenuItem, onSelect, accessibilityLabelExtractor, theme], ); const innerHeight = CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT * suggestions.length; diff --git a/src/components/Avatar.js b/src/components/Avatar.js index 0052400bf51a..0e173f856593 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -81,10 +81,10 @@ function Avatar(props) { const imageStyle = props.imageStyles && props.imageStyles.length - ? [StyleUtils.getAvatarStyle(props.size), ...props.imageStyles, styles.noBorderRadius] - : [StyleUtils.getAvatarStyle(props.size), styles.noBorderRadius]; + ? [StyleUtils.getAvatarStyle(theme, props.size), ...props.imageStyles, styles.noBorderRadius] + : [StyleUtils.getAvatarStyle(theme, props.size), styles.noBorderRadius]; - const iconStyle = props.imageStyles && props.imageStyles.length ? [StyleUtils.getAvatarStyle(props.size), styles.bgTransparent, ...props.imageStyles] : undefined; + const iconStyle = props.imageStyles && props.imageStyles.length ? [StyleUtils.getAvatarStyle(theme, props.size), styles.bgTransparent, ...props.imageStyles] : undefined; const iconFillColor = isWorkspace ? StyleUtils.getDefaultWorkspaceAvatarColor(props.name).fill : props.fill || theme.icon; const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(props.name) : props.fallbackIcon || Expensicons.FallbackAvatar; diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx index 575646f7dd9c..ff963589d80f 100644 --- a/src/components/Badge.tsx +++ b/src/components/Badge.tsx @@ -38,8 +38,8 @@ function Badge({success = false, error = false, pressable = false, text, environ const Wrapper = pressable ? PressableWithoutFeedback : View; const wrapperStyles: (state: PressableStateCallbackType) => StyleProp = useCallback( - ({pressed}) => [styles.badge, styles.ml2, StyleUtils.getBadgeColorStyle(success, error, pressed, environment === CONST.ENVIRONMENT.ADHOC), badgeStyles], - [styles.badge, styles.ml2, success, error, environment, badgeStyles], + ({pressed}) => [styles.badge, styles.ml2, StyleUtils.getBadgeColorStyle(styles, success, error, pressed, environment === CONST.ENVIRONMENT.ADHOC), badgeStyles], + [success, error, environment, badgeStyles, styles], ); return ( diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx index 1c92208a7aa2..e97d73d28c8c 100644 --- a/src/components/Banner.tsx +++ b/src/components/Banner.tsx @@ -3,6 +3,7 @@ import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import getButtonState from '@libs/getButtonState'; import * as StyleUtils from '@styles/StyleUtils'; +import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import Hoverable from './Hoverable'; @@ -41,6 +42,7 @@ type BannerProps = { function Banner({text, onClose, onPress, containerStyles, textStyles, shouldRenderHTML = false, shouldShowIcon = false, shouldShowCloseButton = false}: BannerProps) { const styles = useThemeStyles(); + const theme = useTheme(); const {translate} = useLocalize(); return ( @@ -65,7 +67,7 @@ function Banner({text, onClose, onPress, containerStyles, textStyles, shouldRend )} diff --git a/src/components/BaseMiniContextMenuItem.js b/src/components/BaseMiniContextMenuItem.js index 04a569ba7f36..035d8bf4b981 100644 --- a/src/components/BaseMiniContextMenuItem.js +++ b/src/components/BaseMiniContextMenuItem.js @@ -6,6 +6,7 @@ import DomUtils from '@libs/DomUtils'; import getButtonState from '@libs/getButtonState'; import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager'; import * as StyleUtils from '@styles/StyleUtils'; +import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; @@ -51,6 +52,7 @@ const defaultProps = { */ function BaseMiniContextMenuItem(props) { const styles = useThemeStyles(); + const theme = useTheme(); return ( [ styles.reportActionContextMenuMiniButton, - StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, props.isDelayButtonStateComplete)), + StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(hovered, pressed, props.isDelayButtonStateComplete)), props.isDelayButtonStateComplete && styles.cursorDefault, ]} > diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx index 6ee5ed1c558f..22577ec2b7f9 100644 --- a/src/components/Checkbox.tsx +++ b/src/components/Checkbox.tsx @@ -98,7 +98,7 @@ function Checkbox( {children ?? ( )} diff --git a/src/components/DotIndicatorMessage.tsx b/src/components/DotIndicatorMessage.tsx index 112feab166cf..b90093e20fc3 100644 --- a/src/components/DotIndicatorMessage.tsx +++ b/src/components/DotIndicatorMessage.tsx @@ -92,7 +92,7 @@ function DotIndicatorMessage({messages = {}, style, type, textStyles}: DotIndica {message} diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js index 6ced702b316c..aeb31dd87397 100644 --- a/src/components/EmojiPicker/CategoryShortcutButton.js +++ b/src/components/EmojiPicker/CategoryShortcutButton.js @@ -38,7 +38,11 @@ function CategoryShortcutButton(props) { onPress={props.onPress} onHoverIn={() => setIsHighlighted(true)} onHoverOut={() => setIsHighlighted(false)} - style={({pressed}) => [StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)), styles.categoryShortcutButton, isHighlighted && styles.emojiItemHighlighted]} + style={({pressed}) => [ + StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(false, pressed)), + styles.categoryShortcutButton, + isHighlighted && styles.emojiItemHighlighted, + ]} accessibilityLabel={`emojiPicker.headers.${props.code}`} role={CONST.ACCESSIBILITY_ROLE.BUTTON} > diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js index db1834296a52..f61c4624db32 100644 --- a/src/components/EmojiPicker/EmojiPickerButton.js +++ b/src/components/EmojiPicker/EmojiPickerButton.js @@ -7,6 +7,7 @@ import Tooltip from '@components/Tooltip/PopoverAnchorTooltip'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import getButtonState from '@libs/getButtonState'; import * as StyleUtils from '@styles/StyleUtils'; +import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import * as EmojiPickerAction from '@userActions/EmojiPickerAction'; @@ -31,6 +32,7 @@ const defaultProps = { function EmojiPickerButton(props) { const styles = useThemeStyles(); + const theme = useTheme(); const emojiPopoverAnchor = useRef(null); useEffect(() => EmojiPickerAction.resetEmojiPopoverAnchor, []); @@ -39,7 +41,7 @@ function EmojiPickerButton(props) { [styles.chatItemEmojiButton, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed))]} + style={({hovered, pressed}) => [styles.chatItemEmojiButton, StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(hovered, pressed))]} disabled={props.isDisabled} onPress={() => { if (!EmojiPickerAction.emojiPickerRef.current.isEmojiPickerVisible) { @@ -54,7 +56,7 @@ function EmojiPickerButton(props) { {({hovered, pressed}) => ( )} diff --git a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js index 7b4f4066593c..fe659612c846 100644 --- a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js +++ b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js @@ -9,6 +9,7 @@ import Tooltip from '@components/Tooltip'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import getButtonState from '@libs/getButtonState'; import * as StyleUtils from '@styles/StyleUtils'; +import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import * as EmojiPickerAction from '@userActions/EmojiPickerAction'; import CONST from '@src/CONST'; @@ -26,6 +27,7 @@ const defaultProps = { function EmojiPickerButtonDropdown(props) { const styles = useThemeStyles(); + const theme = useTheme(); const emojiPopoverAnchor = useRef(null); useEffect(() => EmojiPickerAction.resetEmojiPopoverAnchor, []); @@ -64,7 +66,7 @@ function EmojiPickerButtonDropdown(props) { diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem/index.js b/src/components/EmojiPicker/EmojiPickerMenuItem/index.js index 24f876841ff7..f674d3c4fa0e 100644 --- a/src/components/EmojiPicker/EmojiPickerMenuItem/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenuItem/index.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import React, {PureComponent} from 'react'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import Text from '@components/Text'; +import withTheme, {withThemePropTypes} from '@components/withTheme'; import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles'; import * as Browser from '@libs/Browser'; import getButtonState from '@libs/getButtonState'; @@ -32,7 +33,9 @@ const propTypes = { /** Whether the menu item should be highlighted or not */ isHighlighted: PropTypes.bool, + ...withThemeStylesPropTypes, + ...withThemePropTypes, }; class EmojiPickerMenuItem extends PureComponent { @@ -97,7 +100,7 @@ class EmojiPickerMenuItem extends PureComponent { style={({pressed}) => [ this.props.isFocused ? this.props.themeStyles.emojiItemKeyboardHighlighted : {}, this.state.isHovered || this.props.isHighlighted ? this.props.themeStyles.emojiItemHighlighted : {}, - Browser.isMobile() && StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)), + Browser.isMobile() && StyleUtils.getButtonBackgroundColorStyle(this.props.theme, getButtonState(false, pressed)), this.props.themeStyles.emojiItem, ]} accessibilityLabel={this.props.emoji} @@ -121,9 +124,11 @@ EmojiPickerMenuItem.defaultProps = { // Significantly speeds up re-renders of the EmojiPickerMenu's FlatList // by only re-rendering at most two EmojiPickerMenuItems that are highlighted/un-highlighted per user action. -export default withThemeStyles( - React.memo( - EmojiPickerMenuItem, - (prevProps, nextProps) => prevProps.isFocused === nextProps.isFocused && prevProps.isHighlighted === nextProps.isHighlighted && prevProps.emoji === nextProps.emoji, +export default withTheme( + withThemeStyles( + React.memo( + EmojiPickerMenuItem, + (prevProps, nextProps) => prevProps.isFocused === nextProps.isFocused && prevProps.isHighlighted === nextProps.isHighlighted && prevProps.emoji === nextProps.emoji, + ), ), ); diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js b/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js index 151fabf85be3..ca24dde6b861 100644 --- a/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js +++ b/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import React, {PureComponent} from 'react'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import Text from '@components/Text'; +import withTheme, {withThemePropTypes} from '@components/withTheme'; import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles'; import getButtonState from '@libs/getButtonState'; import * as StyleUtils from '@styles/StyleUtils'; @@ -34,7 +35,9 @@ const propTypes = { /** Whether the emoji is highlighted by the keyboard/mouse */ isUsingKeyboardMovement: PropTypes.bool, + ...withThemeStylesPropTypes, + ...withThemePropTypes, }; class EmojiPickerMenuItem extends PureComponent { @@ -72,7 +75,7 @@ class EmojiPickerMenuItem extends PureComponent { onBlur={this.props.onBlur} ref={(ref) => (this.ref = ref)} style={({pressed}) => [ - StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)), + StyleUtils.getButtonBackgroundColorStyle(this.props.theme, getButtonState(false, pressed)), this.props.isHighlighted && this.props.isUsingKeyboardMovement ? this.props.themeStyles.emojiItemKeyboardHighlighted : {}, this.props.isHighlighted && !this.props.isUsingKeyboardMovement ? this.props.themeStyles.emojiItemHighlighted : {}, this.props.themeStyles.emojiItem, @@ -99,10 +102,12 @@ EmojiPickerMenuItem.defaultProps = { // Significantly speeds up re-renders of the EmojiPickerMenu's FlatList // by only re-rendering at most two EmojiPickerMenuItems that are highlighted/un-highlighted per user action. -export default withThemeStyles( - React.memo( - EmojiPickerMenuItem, - (prevProps, nextProps) => - prevProps.isHighlighted === nextProps.isHighlighted && prevProps.emoji === nextProps.emoji && prevProps.isUsingKeyboardMovement === nextProps.isUsingKeyboardMovement, +export default withTheme( + withThemeStyles( + React.memo( + EmojiPickerMenuItem, + (prevProps, nextProps) => + prevProps.isHighlighted === nextProps.isHighlighted && prevProps.emoji === nextProps.emoji && prevProps.isUsingKeyboardMovement === nextProps.isUsingKeyboardMovement, + ), ), ); diff --git a/src/components/EmojiSuggestions.tsx b/src/components/EmojiSuggestions.tsx index bb983a680af8..1f14a63462bd 100644 --- a/src/components/EmojiSuggestions.tsx +++ b/src/components/EmojiSuggestions.tsx @@ -4,6 +4,7 @@ import type {SimpleEmoji} from '@libs/EmojiTrie'; import * as EmojiUtils from '@libs/EmojiUtils'; import getStyledTextArray from '@libs/GetStyledTextArray'; import * as StyleUtils from '@styles/StyleUtils'; +import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import AutoCompleteSuggestions from './AutoCompleteSuggestions'; import Text from './Text'; @@ -43,6 +44,7 @@ const keyExtractor = (item: SimpleEmoji, index: number): string => `${item.name} function EmojiSuggestions({emojis, onSelect, prefix, isEmojiPickerLarge, preferredSkinToneIndex, highlightedEmojiIndex = 0, measureParentContainer = () => {}}: EmojiSuggestionsProps) { const styles = useThemeStyles(); + const theme = useTheme(); /** * Render an emoji suggestion menu item component. */ @@ -60,7 +62,7 @@ function EmojiSuggestions({emojis, onSelect, prefix, isEmojiPickerLarge, preferr {styledTextArray.map(({text, isColored}) => ( {text} diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js index eb238ec0dd7d..65c287b8e86b 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js @@ -3,15 +3,17 @@ import {TNodeChildrenRenderer} from 'react-native-render-html'; import _ from 'underscore'; import Text from '@components/Text'; import * as StyleUtils from '@styles/StyleUtils'; +import useTheme from '@styles/themes/useTheme'; import htmlRendererPropTypes from './htmlRendererPropTypes'; function MentionHereRenderer(props) { + const theme = useTheme(); return ( diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js index a60be614d9bc..9e11bd5444e2 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js @@ -15,6 +15,7 @@ import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import personalDetailsPropType from '@pages/personalDetailsPropType'; import * as StyleUtils from '@styles/StyleUtils'; +import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -33,6 +34,7 @@ const propTypes = { function MentionUserRenderer(props) { const styles = useThemeStyles(); + const theme = useTheme(); const {translate} = useLocalize(); const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'style']); const htmlAttribAccountID = lodashGet(props.tnode.attributes, 'accountid'); @@ -79,7 +81,7 @@ function MentionUserRenderer(props) { }} > diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts index 5144948c7c51..fa8ebdf9c3eb 100644 --- a/src/components/Icon/BankIcons.ts +++ b/src/components/Icon/BankIcons.ts @@ -41,7 +41,7 @@ import SunTrustCard from '@assets/images/cardicons/suntrust.svg'; import TdBankCard from '@assets/images/cardicons/td-bank.svg'; import USBankCard from '@assets/images/cardicons/us-bank.svg'; import USAACard from '@assets/images/cardicons/usaa.svg'; -import styles from '@styles/styles'; +import {ThemeStyles} from '@styles/styles'; import variables from '@styles/variables'; type BankIcon = { @@ -53,7 +53,7 @@ type BankIcon = { }; type BankIconParams = { - themeStyles: typeof styles; + themeStyles: ThemeStyles; bankName?: string; isCard?: boolean; }; diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js index 61243eb90969..fd607a0e81a9 100644 --- a/src/components/ImageView/index.js +++ b/src/components/ImageView/index.js @@ -257,7 +257,7 @@ function ImageView({isAuthTokenRequired, url, fileName, onError}) { = 1 ? styles.pRelative : styles.pAbsolute), ...styles.flex1, }} diff --git a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js index ee12a9699c3e..4e4912322bb1 100644 --- a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js +++ b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js @@ -44,14 +44,14 @@ function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationEr {isPermissionDenied ? ( - {`${translate('location.permissionDenied')} ${translate('location.please')}`} + {`${translate('location.permissionDenied')} ${translate('location.please')}`} {` ${translate('location.allowPermission')} `} - {translate('location.tryAgain')} + {translate('location.tryAgain')} ) : ( {translate('location.notFound')} diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index 1f3dd061a4bd..c40962c8e631 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -407,7 +407,7 @@ function MagicCodeInput(props) { {text} @@ -98,7 +98,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe {text} diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index ed6ea1274dfc..a551d4a9205a 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -181,7 +181,7 @@ const MenuItem = React.forwardRef((props, ref) => { style={({pressed}) => [ style, !props.interactive && styles.cursorDefault, - StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive), true), + StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive), true), (isHovered || pressed) && props.hoverAndPressStyle, ...(_.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle]), props.shouldGreyOutWhenDisabled && props.disabled && styles.buttonOpacityDisabled, @@ -227,6 +227,7 @@ const MenuItem = React.forwardRef((props, ref) => { fill={ props.iconFill || StyleUtils.getIconFillColor( + theme, getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive), true, ) @@ -261,7 +262,11 @@ const MenuItem = React.forwardRef((props, ref) => { height={props.iconHeight} fill={ props.secondaryIconFill || - StyleUtils.getIconFillColor(getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive), true) + StyleUtils.getIconFillColor( + theme, + getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive), + true, + ) } /> @@ -377,7 +382,7 @@ const MenuItem = React.forwardRef((props, ref) => { )} diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index 4945b4b62ad6..7aeef4d97e31 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/src/components/Modal/BaseModal.tsx @@ -140,11 +140,12 @@ function BaseModal( isSmallScreenWidth, }, theme, + styles, popoverAnchorPosition, innerContainerStyle, outerStyle, ), - [innerContainerStyle, isSmallScreenWidth, outerStyle, popoverAnchorPosition, theme, type, windowHeight, windowWidth], + [innerContainerStyle, isSmallScreenWidth, outerStyle, popoverAnchorPosition, theme, type, windowHeight, windowWidth, styles], ); const { diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index f760d3c0244e..bc683b6f6311 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -25,14 +25,14 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = ( }; const showModal = () => { - const statusBarColor = StatusBar.getBackgroundColor(); + const statusBarColor = StatusBar.getBackgroundColor() ?? theme.appBG; const isFullScreenModal = type === CONST.MODAL.MODAL_TYPE.CENTERED || type === CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE || type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED; if (statusBarColor) { setPreviousStatusBarColor(statusBarColor); // If it is a full screen modal then match it with appBG, otherwise we use the backdrop color - setStatusBarColor(isFullScreenModal ? theme.appBG : StyleUtils.getThemeBackgroundColor(statusBarColor)); + setStatusBarColor(isFullScreenModal ? theme.appBG : StyleUtils.getThemeBackgroundColor(theme, statusBarColor)); } onModalShow?.(); diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx index 6f15612736ef..179b9bc0f5a1 100644 --- a/src/components/MultipleAvatars.tsx +++ b/src/components/MultipleAvatars.tsx @@ -101,7 +101,7 @@ function MultipleAvatars({ const secondAvatarStyle = secondAvatarStyleProp ?? [StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)]; - let avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction); + let avatarContainerStyles = StyleUtils.getContainerStyles(styles, size, isInReportAction); const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size, avatarSizeToStylesMap]); const tooltipTexts = useMemo(() => (shouldShowTooltip ? icons.map((icon) => icon.name) : ['']), [shouldShowTooltip, icons]); @@ -161,7 +161,7 @@ function MultipleAvatars({ ); } - const oneAvatarSize = StyleUtils.getAvatarStyle(size); + const oneAvatarSize = StyleUtils.getAvatarStyle(theme, size); const oneAvatarBorderWidth = StyleUtils.getAvatarBorderWidth(size).borderWidth ?? 0; const overlapSize = oneAvatarSize.width / 3; @@ -197,6 +197,7 @@ function MultipleAvatars({ isPressed, isInReportAction, shouldUseCardBackground, + theme, }), StyleUtils.getAvatarBorderWidth(size), ]} @@ -224,6 +225,7 @@ function MultipleAvatars({ isPressed, isInReportAction, shouldUseCardBackground, + theme, }), // Set overlay background color with RGBA value so that the text will not inherit opacity diff --git a/src/components/NewDatePicker/CalendarPicker/index.js b/src/components/NewDatePicker/CalendarPicker/index.js index 42904ba1a8c2..82204e095f4a 100644 --- a/src/components/NewDatePicker/CalendarPicker/index.js +++ b/src/components/NewDatePicker/CalendarPicker/index.js @@ -1,3 +1,4 @@ +import {withTheme} from '@storybook/theming'; import {addMonths, endOfDay, endOfMonth, format, getYear, isSameDay, parseISO, setDate, setYear, startOfDay, startOfMonth, subMonths} from 'date-fns'; import Str from 'expensify-common/lib/str'; import PropTypes from 'prop-types'; @@ -8,6 +9,7 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import {withThemePropTypes} from '@components/withTheme'; import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles'; import compose from '@libs/compose'; import DateUtils from '@libs/DateUtils'; @@ -33,6 +35,7 @@ const propTypes = { ...withLocalizePropTypes, ...withThemeStylesPropTypes, + ...withThemePropTypes, }; const defaultProps = { @@ -236,7 +239,7 @@ class CalendarPicker extends React.PureComponent { style={[ this.props.themeStyles.calendarDayContainer, isSelected ? this.props.themeStyles.calendarDayContainerSelected : {}, - !isDisabled ? StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed)) : {}, + !isDisabled ? StyleUtils.getButtonBackgroundColorStyle(this.props.theme, getButtonState(hovered, pressed)) : {}, ]} > {day} @@ -262,4 +265,4 @@ class CalendarPicker extends React.PureComponent { CalendarPicker.propTypes = propTypes; CalendarPicker.defaultProps = defaultProps; -export default compose(withLocalize, withThemeStyles)(CalendarPicker); +export default compose(withLocalize, withThemeStyles, withTheme)(CalendarPicker); diff --git a/src/components/OptionsList/optionsListPropTypes.js b/src/components/OptionsList/optionsListPropTypes.js index 2485ad1558ac..19bb43fbcc78 100644 --- a/src/components/OptionsList/optionsListPropTypes.js +++ b/src/components/OptionsList/optionsListPropTypes.js @@ -2,7 +2,6 @@ import PropTypes from 'prop-types'; import optionPropTypes from '@components/optionPropTypes'; import SectionList from '@components/SectionList'; import stylePropTypes from '@styles/stylePropTypes'; -import styles from '@styles/styles'; const propTypes = { /** option flexStyle for the options list container */ @@ -109,7 +108,7 @@ const defaultProps = { optionHoveredStyle: undefined, contentContainerStyles: [], sectionHeaderStyle: undefined, - listContainerStyles: [styles.flex1], + listContainerStyles: [{flex: 1}], sections: [], focusedIndex: 0, selectedOptions: [], diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index ba6a3067284f..9c8b76515fe8 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -493,7 +493,7 @@ class BaseOptionsSelector extends Component { const optionsList = ( (this.list = el)} - optionHoveredStyle={this.props.optionHoveredStyle} + optionHoveredStyle={this.props.optionHoveredStyle || this.props.themeStyles.hoveredComponentBG} onSelectRow={this.props.onSelectRow ? this.selectRow : undefined} sections={this.state.sections} focusedIndex={this.state.focusedIndex} diff --git a/src/components/OptionsSelector/optionsSelectorPropTypes.js b/src/components/OptionsSelector/optionsSelectorPropTypes.js index ba4f5beb55cd..8593569dfafd 100644 --- a/src/components/OptionsSelector/optionsSelectorPropTypes.js +++ b/src/components/OptionsSelector/optionsSelectorPropTypes.js @@ -1,7 +1,6 @@ import PropTypes from 'prop-types'; import optionPropTypes from '@components/optionPropTypes'; import stylePropTypes from '@styles/stylePropTypes'; -import styles from '@styles/styles'; import CONST from '@src/CONST'; const propTypes = { @@ -162,7 +161,7 @@ const defaultProps = { onConfirmSelection: () => {}, shouldTextInputAppearBelowOptions: false, footerContent: undefined, - optionHoveredStyle: styles.hoveredComponentBG, + optionHoveredStyle: undefined, sectionHeaderStyle: undefined, shouldShowOptions: true, disableArrowKeysActions: false, diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js index 2a5d9265144a..fd162c78fe2c 100644 --- a/src/components/PopoverWithoutOverlay/index.js +++ b/src/components/PopoverWithoutOverlay/index.js @@ -22,6 +22,7 @@ function Popover(props) { isSmallScreenWidth: false, }, theme, + styles, props.anchorPosition, props.innerContainerStyle, props.outerStyle, diff --git a/src/components/Pressable/PressableWithDelayToggle.tsx b/src/components/Pressable/PressableWithDelayToggle.tsx index 92affb1e862e..914b9dc674c3 100644 --- a/src/components/Pressable/PressableWithDelayToggle.tsx +++ b/src/components/Pressable/PressableWithDelayToggle.tsx @@ -9,6 +9,7 @@ import Tooltip from '@components/Tooltip'; import useThrottledButtonState from '@hooks/useThrottledButtonState'; import getButtonState from '@libs/getButtonState'; import * as StyleUtils from '@styles/StyleUtils'; +import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import PressableProps from './GenericPressable/types'; @@ -67,6 +68,7 @@ function PressableWithDelayToggle( ref: ForwardedRef, ) { const styles = useThemeStyles(); + const theme = useTheme(); const [isActive, temporarilyDisableInteractions] = useThrottledButtonState(); const updatePressState = () => { @@ -120,7 +122,7 @@ function PressableWithDelayToggle( {icon && ( EmojiPickerAction.resetEmojiPopoverAnchor, []); @@ -87,7 +89,11 @@ function AddReactionBubble(props) { [styles.emojiReactionBubble, styles.userSelectNone, StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, false, props.isContextMenu)]} + style={({hovered, pressed}) => [ + styles.emojiReactionBubble, + styles.userSelectNone, + StyleUtils.getEmojiReactionBubbleStyle(theme, hovered || pressed, false, props.isContextMenu), + ]} onPress={Session.checkIfActionIsAllowed(onPress)} onMouseDown={(e) => { // Allow text input blur when Add reaction is right clicked @@ -115,7 +121,7 @@ function AddReactionBubble(props) { src={Expensicons.AddReaction} width={props.isContextMenu ? variables.iconSizeNormal : variables.iconSizeSmall} height={props.isContextMenu ? variables.iconSizeNormal : variables.iconSizeSmall} - fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))} + fill={StyleUtils.getIconFillColor(theme, getButtonState(hovered, pressed))} /> diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js index 58b66ee64719..2487f9d0c73c 100644 --- a/src/components/Reactions/EmojiReactionBubble.js +++ b/src/components/Reactions/EmojiReactionBubble.js @@ -5,6 +5,7 @@ import Text from '@components/Text'; import {withCurrentUserPersonalDetailsDefaultProps} from '@components/withCurrentUserPersonalDetails'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; import * as StyleUtils from '@styles/StyleUtils'; +import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; @@ -55,11 +56,12 @@ const defaultProps = { function EmojiReactionBubble(props) { const styles = useThemeStyles(); + const theme = useTheme(); return ( [ styles.emojiReactionBubble, - StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, props.hasUserReacted, props.isContextMenu), + StyleUtils.getEmojiReactionBubbleStyle(theme, hovered || pressed, props.hasUserReacted, props.isContextMenu), props.shouldBlockReactions && styles.cursorDisabled, styles.userSelectNone, ]} @@ -88,7 +90,7 @@ function EmojiReactionBubble(props) { dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} > {props.emojiCodes.join('')} - {props.count > 0 && {props.count}} + {props.count > 0 && {props.count}} ); } diff --git a/src/components/Reactions/MiniQuickEmojiReactions.js b/src/components/Reactions/MiniQuickEmojiReactions.js index 8ddf41f4a89a..2226573a196e 100644 --- a/src/components/Reactions/MiniQuickEmojiReactions.js +++ b/src/components/Reactions/MiniQuickEmojiReactions.js @@ -12,6 +12,7 @@ import compose from '@libs/compose'; import * as EmojiUtils from '@libs/EmojiUtils'; import getButtonState from '@libs/getButtonState'; import * as StyleUtils from '@styles/StyleUtils'; +import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import * as EmojiPickerAction from '@userActions/EmojiPickerAction'; import * as Session from '@userActions/Session'; @@ -56,6 +57,7 @@ const defaultProps = { */ function MiniQuickEmojiReactions(props) { const styles = useThemeStyles(); + const theme = useTheme(); const ref = useRef(); const openEmojiPicker = () => { @@ -105,7 +107,7 @@ function MiniQuickEmojiReactions(props) { )} diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js index 4e405098a2ea..5790d04845be 100644 --- a/src/components/ReportActionItem/TaskPreview.js +++ b/src/components/ReportActionItem/TaskPreview.js @@ -23,6 +23,7 @@ import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; import reportActionPropTypes from '@pages/home/report/reportActionPropTypes'; import * as StyleUtils from '@styles/StyleUtils'; +import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import * as Session from '@userActions/Session'; import * as Task from '@userActions/Task'; @@ -76,6 +77,7 @@ const defaultProps = { function TaskPreview(props) { const styles = useThemeStyles(); + const theme = useTheme(); const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; // The reportAction might not contain details regarding the taskReport // Only the direct parent reportAction will contain details about the taskReport @@ -128,7 +130,7 @@ function TaskPreview(props) { diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js index ac82f310f3f8..ae568b0e1eec 100644 --- a/src/components/ReportActionItem/TaskView.js +++ b/src/components/ReportActionItem/TaskView.js @@ -23,6 +23,7 @@ import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; import reportPropTypes from '@pages/reportPropTypes'; import * as StyleUtils from '@styles/StyleUtils'; +import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import * as Session from '@userActions/Session'; import * as Task from '@userActions/Task'; @@ -43,6 +44,7 @@ const propTypes = { function TaskView(props) { const styles = useThemeStyles(); + const theme = useTheme(); useEffect(() => { Task.setTaskReport({...props.report}); }, [props.report]); @@ -79,7 +81,7 @@ function TaskView(props) { style={({pressed}) => [ styles.ph5, styles.pv2, - StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, false, disableState, !isDisableInteractive), true), + StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(hovered, pressed, false, disableState, !isDisableInteractive), true), isDisableInteractive && !disableState && styles.cursorDefault, ]} ref={props.forwardedRef} @@ -119,7 +121,7 @@ function TaskView(props) { )} diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js index 0bb0f11d747c..bd7a24d15f1f 100644 --- a/src/components/RoomHeaderAvatars.js +++ b/src/components/RoomHeaderAvatars.js @@ -65,7 +65,7 @@ function RoomHeaderAvatars(props) { styles.roomHeaderAvatar, // Due to border-box box-sizing, the Avatars have to be larger when bordered to visually match size with non-bordered Avatars - StyleUtils.getAvatarStyle(CONST.AVATAR_SIZE.LARGE_BORDERED), + StyleUtils.getAvatarStyle(theme, CONST.AVATAR_SIZE.LARGE_BORDERED), ]; return ( diff --git a/src/components/SelectionList/BaseListItem.js b/src/components/SelectionList/BaseListItem.js index a37f2fe4ddc0..3a58b63954bd 100644 --- a/src/components/SelectionList/BaseListItem.js +++ b/src/components/SelectionList/BaseListItem.js @@ -62,7 +62,7 @@ function BaseListItem({ diff --git a/src/components/TextInput/BaseTextInput/index.js b/src/components/TextInput/BaseTextInput/index.js index a28365480c7a..9a51bf5baa68 100644 --- a/src/components/TextInput/BaseTextInput/index.js +++ b/src/components/TextInput/BaseTextInput/index.js @@ -333,7 +333,7 @@ function BaseTextInput(props) { !isMultiline && Browser.isMobileChrome() && {boxSizing: 'content-box', height: undefined}, // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled. - props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, maxHeight), + props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(styles, textInputHeight, maxHeight), // Add disabled color theme when field is not editable. props.disabled && styles.textInputDisabled, styles.pointerEventsAuto, diff --git a/src/components/TextInput/BaseTextInput/index.native.js b/src/components/TextInput/BaseTextInput/index.native.js index c30f932fb3a6..347a1b0dce4d 100644 --- a/src/components/TextInput/BaseTextInput/index.native.js +++ b/src/components/TextInput/BaseTextInput/index.native.js @@ -312,7 +312,7 @@ function BaseTextInput(props) { !isMultiline && {height, lineHeight: undefined}, // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled. - props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, maxHeight), + props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(styles, textInputHeight, maxHeight), // Add disabled color theme when field is not editable. props.disabled && styles.textInputDisabled, styles.pointerEventsAuto, diff --git a/src/components/Tooltip/TooltipRenderedOnPageBody.js b/src/components/Tooltip/TooltipRenderedOnPageBody.js index 69d06775ae2a..c3898a4fe983 100644 --- a/src/components/Tooltip/TooltipRenderedOnPageBody.js +++ b/src/components/Tooltip/TooltipRenderedOnPageBody.js @@ -5,6 +5,8 @@ import {Animated, View} from 'react-native'; import Text from '@components/Text'; import Log from '@libs/Log'; import getTooltipStyles from '@styles/getTooltipStyles'; +import useTheme from '@styles/themes/useTheme'; +import useThemeStyles from '@styles/useThemeStyles'; const propTypes = { /** Window width */ @@ -59,7 +61,20 @@ const defaultProps = { // We also update the state on layout changes which will be triggered often. // There will be n number of tooltip components in the page. // It's good to memoize this one. -function TooltipRenderedOnPageBody(props) { +function TooltipRenderedOnPageBody({ + animation, + windowWidth, + xOffset, + yOffset, + targetWidth, + targetHeight, + maxWidth, + shiftHorizontal, + shiftVertical, + text, + numberOfLines, + renderTooltipContent, +}) { // The width of tooltip's inner content. Has to be undefined in the beginning // as a width of 0 will cause the content to be rendered of a width of 0, // which prevents us from measuring it correctly. @@ -69,12 +84,15 @@ function TooltipRenderedOnPageBody(props) { const contentRef = useRef(); const rootWrapper = useRef(); + const theme = useTheme(); + const styles = useThemeStyles(); + useEffect(() => { - if (!props.renderTooltipContent || !props.text) { + if (!renderTooltipContent || !text) { return; } Log.warn('Developer error: Cannot use both text and renderTooltipContent props at the same time in !'); - }, [props.text, props.renderTooltipContent]); + }, [text, renderTooltipContent]); useLayoutEffect(() => { // Calculate the tooltip width and height before the browser repaints the screen to prevent flicker @@ -85,49 +103,39 @@ function TooltipRenderedOnPageBody(props) { const {animationStyle, rootWrapperStyle, textStyle, pointerWrapperStyle, pointerStyle} = useMemo( () => - getTooltipStyles( - rootWrapper.current, - props.animation, - props.windowWidth, - props.xOffset, - props.yOffset, - props.targetWidth, - props.targetHeight, - props.maxWidth, - contentMeasuredWidth, - wrapperMeasuredHeight, - props.shiftHorizontal, - props.shiftVertical, - ), - [ - props.animation, - props.windowWidth, - props.xOffset, - props.yOffset, - props.targetWidth, - props.targetHeight, - props.maxWidth, - contentMeasuredWidth, - wrapperMeasuredHeight, - props.shiftHorizontal, - props.shiftVertical, - ], + getTooltipStyles({ + tooltip: rootWrapper.current, + currentSize: animation, + windowWidth, + xOffset, + yOffset, + tooltipTargetWidth: targetWidth, + tooltipTargetHeight: targetHeight, + maxWidth, + tooltipContentWidth: contentMeasuredWidth, + tooltipWrapperHeight: wrapperMeasuredHeight, + theme, + themeStyles: styles, + shiftHorizontal, + shiftVertical, + }), + [animation, windowWidth, xOffset, yOffset, targetWidth, targetHeight, maxWidth, contentMeasuredWidth, wrapperMeasuredHeight, shiftHorizontal, shiftVertical, theme, styles], ); let content; - if (props.renderTooltipContent) { - content = {props.renderTooltipContent()}; + if (renderTooltipContent) { + content = {renderTooltipContent()}; } else { content = ( - {props.text} + {text} ); diff --git a/src/libs/PaymentUtils.ts b/src/libs/PaymentUtils.ts index cbeb44eb6bbc..456cd21c81af 100644 --- a/src/libs/PaymentUtils.ts +++ b/src/libs/PaymentUtils.ts @@ -1,5 +1,5 @@ import getBankIcon from '@components/Icon/BankIcons'; -import styles from '@styles/styles'; +import {ThemeStyles} from '@styles/styles'; import CONST from '@src/CONST'; import BankAccount from '@src/types/onyx/BankAccount'; import Fund from '@src/types/onyx/Fund'; @@ -40,7 +40,7 @@ function getPaymentMethodDescription(accountType: AccountType, account: BankAcco /** * Get the PaymentMethods list */ -function formatPaymentMethods(bankAccountList: Record, fundList: Record, themeStyles: typeof styles): PaymentMethod[] { +function formatPaymentMethods(bankAccountList: Record, fundList: Record, themeStyles: ThemeStyles): PaymentMethod[] { const combinedPaymentMethods: PaymentMethod[] = []; Object.values(bankAccountList).forEach((bankAccount) => { diff --git a/src/pages/ErrorPage/GenericErrorPage.js b/src/pages/ErrorPage/GenericErrorPage.js index 7b627a8e18d5..ba9bd783752b 100644 --- a/src/pages/ErrorPage/GenericErrorPage.js +++ b/src/pages/ErrorPage/GenericErrorPage.js @@ -29,7 +29,7 @@ function GenericErrorPage({translate}) { return ( {({paddingBottom}) => ( - + diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js index 4044ea2396db..051e559c34b6 100755 --- a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js +++ b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js @@ -14,6 +14,7 @@ import useNetwork from '@hooks/useNetwork'; import compose from '@libs/compose'; import getReportActionContextMenuStyles from '@styles/getReportActionContextMenuStyles'; import useTheme from '@styles/themes/useTheme'; +import useThemeStyles from '@styles/useThemeStyles'; import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -51,9 +52,10 @@ const defaultProps = { }; function BaseReportActionContextMenu(props) { const theme = useTheme(); + const styles = useThemeStyles(); const menuItemRefs = useRef({}); const [shouldKeepOpen, setShouldKeepOpen] = useState(false); - const wrapperStyle = getReportActionContextMenuStyles(props.isMini, props.isSmallScreenWidth, theme); + const wrapperStyle = getReportActionContextMenuStyles(styles, props.isMini, props.isSmallScreenWidth, theme); const {isOffline} = useNetwork(); const reportAction = useMemo(() => { diff --git a/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js b/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js index ef28a2690af4..37901db09954 100644 --- a/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js +++ b/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js @@ -8,6 +8,7 @@ import { propTypes as genericReportActionContextMenuPropTypes, } from '@pages/home/report/ContextMenu/genericReportActionContextMenuPropTypes'; import * as StyleUtils from '@styles/StyleUtils'; +import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; const propTypes = { @@ -24,9 +25,11 @@ const defaultProps = { }; function MiniReportActionContextMenu(props) { + const styles = useThemeStyles(); + return ( - + {props.emojiCodes.join('')} - {props.emojiCount} + {props.emojiCount} {`:${EmojiUtils.getLocalizedEmojiName(props.emojiName, props.preferredLocale)}:`} diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index ae07503b6e9c..48a92ce4af0c 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -134,6 +134,8 @@ const defaultProps = { }; function ReportActionItem(props) { + const theme = useTheme(); + const styles = useThemeStyles(); const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; const [isContextMenuActive, setIsContextMenuActive] = useState(() => ReportActionContextMenu.isActiveReportAction(props.action.reportActionID)); const [isHidden, setIsHidden] = useState(false); @@ -142,15 +144,13 @@ function ReportActionItem(props) { const {updateHiddenAttachments} = useContext(ReportAttachmentsContext); const textInputRef = useRef(); const popoverAnchorRef = useRef(); - const styles = useThemeStyles(); - const theme = useTheme(); const downloadedPreviews = useRef([]); const prevDraftMessage = usePrevious(props.draftMessage); const originalReportID = ReportUtils.getOriginalReportID(props.report.reportID, props.action); const originalReport = props.report.reportID === originalReportID ? props.report : ReportUtils.getReport(originalReportID); const isReportActionLinked = props.linkedReportActionID === props.action.reportActionID; - const highlightedBackgroundColorIfNeeded = useMemo(() => (isReportActionLinked ? StyleUtils.getBackgroundColorStyle(theme.highlightBG) : {}), [isReportActionLinked, theme.highlightBG]); + const highlightedBackgroundColorIfNeeded = useMemo(() => (isReportActionLinked ? StyleUtils.getBackgroundColorStyle(theme.highlightBG) : {}), [isReportActionLinked, theme]); const originalMessage = lodashGet(props.action, 'originalMessage', {}); // IOUDetails only exists when we are sending money @@ -687,7 +687,7 @@ function ReportActionItem(props) { draftMessage={props.draftMessage} isChronosReport={ReportUtils.chatIncludesChronos(originalReport)} /> - + ReportActions.clearReportActionErrors(props.report.reportID, props.action)} pendingAction={props.draftMessage ? null : props.action.pendingAction} diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js index 3bb999261d44..f0aea2301383 100644 --- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js @@ -209,7 +209,7 @@ function BaseValidateCodeForm(props) { role={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')} > - {props.translate('validateCodeForm.magicCodeNotReceived')} + {props.translate('validateCodeForm.magicCodeNotReceived')} {props.hasMagicCodeBeenSent && ( onPress(e, paymentMethod.accountType, paymentMethod.accountData, paymentMethod.isDefault, paymentMethod.methodID), - iconFill: isMethodActive ? StyleUtils.getIconFillColor(CONST.BUTTON_STATES.PRESSED) : null, - wrapperStyle: isMethodActive ? [StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)] : null, + iconFill: isMethodActive ? StyleUtils.getIconFillColor(theme, CONST.BUTTON_STATES.PRESSED) : null, + wrapperStyle: isMethodActive ? [StyleUtils.getButtonBackgroundColorStyle(theme, CONST.BUTTON_STATES.PRESSED)] : null, disabled: paymentMethod.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE, }; }); return combinedPaymentMethods; - }, [shouldShowAssignedCards, fundList, bankAccountList, filterType, isOffline, cardList, translate, actionPaymentMethodType, activePaymentMethodID, onPress, styles]); + }, [shouldShowAssignedCards, fundList, bankAccountList, filterType, isOffline, cardList, translate, actionPaymentMethodType, activePaymentMethodID, onPress, styles, theme]); /** * Render placeholder when there are no payments methods diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index f5651e45aeb8..e409836005c4 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js @@ -383,7 +383,7 @@ function BaseValidateCodeForm(props) { role={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')} > - + {hasError ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccurred') : props.translate('validateCodeForm.magicCodeNotReceived')} diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts index aada3a1f70e4..9a131dad48cd 100644 --- a/src/styles/StyleUtils.ts +++ b/src/styles/StyleUtils.ts @@ -8,8 +8,8 @@ import CONST from '@src/CONST'; import {Transaction} from '@src/types/onyx'; import colors from './colors'; import fontFamily from './fontFamily'; -import styles from './styles'; -import themeColors from './themes/default'; +import {ThemeStyles} from './styles'; +import {ThemeColors} from './themes/types'; import cursor from './utilities/cursor'; import positioning from './utilities/positioning'; import spacing from './utilities/spacing'; @@ -46,7 +46,6 @@ type AvatarSizeValue = ValueOf< > >; type ButtonSizeValue = ValueOf; -type EmptyAvatarSizeName = ValueOf>; type ButtonStateName = ValueOf; type AvatarSize = {width: number}; @@ -74,6 +73,7 @@ type AvatarBorderStyleParams = { isPressed: boolean; isInReportAction: boolean; shouldUseCardBackground: boolean; + theme: ThemeColors; }; type GetBaseAutoCompleteSuggestionContainerStyleParams = { @@ -152,12 +152,6 @@ const avatarSizes: Record = { [CONST.AVATAR_SIZE.SMALL_NORMAL]: variables.avatarSizeSmallNormal, }; -const emptyAvatarStyles: Record = { - [CONST.AVATAR_SIZE.SMALL]: styles.emptyAvatarSmall, - [CONST.AVATAR_SIZE.MEDIUM]: styles.emptyAvatarMedium, - [CONST.AVATAR_SIZE.LARGE]: styles.emptyAvatarLarge, -}; - const avatarFontSizes: Partial> = { [CONST.AVATAR_SIZE.DEFAULT]: variables.fontSizeNormal, [CONST.AVATAR_SIZE.SMALL_SUBSCRIPT]: variables.fontSizeExtraSmall, @@ -192,17 +186,10 @@ function getAvatarSize(size: AvatarSizeName): number { /** * Return the height of magic code input container */ -function getHeightOfMagicCodeInput(): ViewStyle { +function getHeightOfMagicCodeInput(styles: ThemeStyles): ViewStyle { return {height: styles.magicCodeInputContainer.minHeight - styles.textInputContainer.borderBottomWidth}; } -/** - * Return the style from an empty avatar size constant - */ -function getEmptyAvatarStyle(size: EmptyAvatarSizeName): ViewStyle | undefined { - return emptyAvatarStyles[size]; -} - /** * Return the width style from an avatar size constant */ @@ -216,13 +203,13 @@ function getAvatarWidthStyle(size: AvatarSizeName): ViewStyle { /** * Return the style from an avatar size constant */ -function getAvatarStyle(size: AvatarSizeName): AvatarStyle { +function getAvatarStyle(theme: ThemeColors, size: AvatarSizeName): AvatarStyle { const avatarSize = getAvatarSize(size); return { height: avatarSize, width: avatarSize, borderRadius: avatarSize, - backgroundColor: themeColors.offline, + backgroundColor: theme.offline, }; } @@ -320,7 +307,7 @@ function getSafeAreaMargins(insets?: EdgeInsets): ViewStyle { return {marginBottom: (insets?.bottom ?? 0) * variables.safeInsertPercentage}; } -function getZoomCursorStyle(isZoomed: boolean, isDragging: boolean): ViewStyle { +function getZoomCursorStyle(styles: ThemeStyles, isZoomed: boolean, isDragging: boolean): ViewStyle { if (!isZoomed) { // 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 @@ -401,7 +388,7 @@ function getWidthStyle(width: number): ViewStyle { /** * Returns auto grow height text input style */ -function getAutoGrowHeightInputStyle(textInputHeight: number, maxHeight: number): ViewStyle { +function getAutoGrowHeightInputStyle(styles: ThemeStyles, textInputHeight: number, maxHeight: number): ViewStyle { if (textInputHeight > maxHeight) { // 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 @@ -507,7 +494,7 @@ function getBackgroundColorWithOpacityStyle(backgroundColor: string, opacity: nu /** * Generate a style for the background color of the Badge */ -function getBadgeColorStyle(isSuccess: boolean, isError: boolean, isPressed = false, isAdHoc = false): ViewStyle { +function getBadgeColorStyle(styles: ThemeStyles, isSuccess: boolean, isError: boolean, isPressed = false, isAdHoc = false): ViewStyle { if (isSuccess) { if (isAdHoc) { // 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) @@ -532,12 +519,12 @@ function getBadgeColorStyle(isSuccess: boolean, isError: boolean, isPressed = fa * @param buttonState - One of {'default', 'hovered', 'pressed'} * @param isMenuItem - whether this button is apart of a list */ -function getButtonBackgroundColorStyle(buttonState: ButtonStateName = CONST.BUTTON_STATES.DEFAULT, isMenuItem = false): ViewStyle { +function getButtonBackgroundColorStyle(theme: ThemeColors, buttonState: ButtonStateName = CONST.BUTTON_STATES.DEFAULT, isMenuItem = false): ViewStyle { switch (buttonState) { case CONST.BUTTON_STATES.PRESSED: - return {backgroundColor: themeColors.buttonPressedBG}; + return {backgroundColor: theme.buttonPressedBG}; case CONST.BUTTON_STATES.ACTIVE: - return isMenuItem ? {backgroundColor: themeColors.border} : {backgroundColor: themeColors.buttonHoveredBG}; + return isMenuItem ? {backgroundColor: theme.border} : {backgroundColor: theme.buttonHoveredBG}; case CONST.BUTTON_STATES.DISABLED: case CONST.BUTTON_STATES.DEFAULT: default: @@ -551,20 +538,20 @@ function getButtonBackgroundColorStyle(buttonState: ButtonStateName = CONST.BUTT * @param buttonState - One of {'default', 'hovered', 'pressed'} * @param isMenuIcon - whether this icon is apart of a list */ -function getIconFillColor(buttonState: ButtonStateName = CONST.BUTTON_STATES.DEFAULT, isMenuIcon = false): string { +function getIconFillColor(theme: ThemeColors, buttonState: ButtonStateName = CONST.BUTTON_STATES.DEFAULT, isMenuIcon = false): string { switch (buttonState) { case CONST.BUTTON_STATES.ACTIVE: case CONST.BUTTON_STATES.PRESSED: - return themeColors.iconHovered; + return theme.iconHovered; case CONST.BUTTON_STATES.COMPLETE: - return themeColors.iconSuccessFill; + return theme.iconSuccessFill; case CONST.BUTTON_STATES.DEFAULT: case CONST.BUTTON_STATES.DISABLED: default: if (isMenuIcon) { - return themeColors.iconMenu; + return theme.iconMenu; } - return themeColors.icon; + return theme.icon; } } @@ -661,16 +648,16 @@ function getEmojiPickerStyle(isSmallScreenWidth: boolean): ViewStyle { /** * Generate the styles for the ReportActionItem wrapper view. */ -function getReportActionItemStyle(isHovered = false): ViewStyle { +function getReportActionItemStyle(theme: ThemeColors, styles: ThemeStyles, isHovered = false): ViewStyle { // 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', justifyContent: 'space-between', backgroundColor: isHovered - ? themeColors.hoverComponentBG + ? theme.hoverComponentBG : // Warning: Setting this to a non-transparent color will cause unread indicator to break on Android - themeColors.transparent, + theme.transparent, opacity: 1, ...styles.cursorInitial, }; @@ -679,7 +666,7 @@ function getReportActionItemStyle(isHovered = false): ViewStyle { /** * Generate the wrapper styles for the mini ReportActionContextMenu. */ -function getMiniReportActionContextMenuWrapperStyle(isReportActionItemGrouped: boolean): ViewStyle { +function getMiniReportActionContextMenuWrapperStyle(styles: ThemeStyles, isReportActionItemGrouped: boolean): ViewStyle { // 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 { @@ -761,11 +748,11 @@ function extractValuesFromRGB(color: string): number[] | null { * @param bgColor - theme background color * @returns The theme color as an RGB value. */ -function getThemeBackgroundColor(bgColor: string = themeColors.appBG): string { +function getThemeBackgroundColor(theme: ThemeColors, bgColor: string): string { const backdropOpacity = variables.overlayOpacity; const [backgroundRed, backgroundGreen, backgroundBlue] = extractValuesFromRGB(bgColor) ?? hexadecimalToRGBArray(bgColor) ?? []; - const [backdropRed, backdropGreen, backdropBlue] = hexadecimalToRGBArray(themeColors.overlay) ?? []; + const [backdropRed, backdropGreen, backdropBlue] = hexadecimalToRGBArray(theme.overlay) ?? []; const normalizedBackdropRGB = convertRGBToUnitValues(backdropRed, backdropGreen, backdropBlue); const normalizedBackgroundRGB = convertRGBToUnitValues(backgroundRed, backgroundGreen, backgroundBlue); const [red, green, blue] = convertRGBAToRGB(normalizedBackdropRGB, normalizedBackgroundRGB, backdropOpacity); @@ -870,15 +857,15 @@ function fade(fadeAnimation: Animated.Value): Animated.WithAnimatedValue { - return {backgroundColor: isColored ? themeColors.link : undefined}; +function getColoredBackgroundStyle(theme: ThemeColors, isColored: boolean): StyleProp { + return {backgroundColor: isColored ? theme.link : undefined}; } -function getEmojiReactionBubbleStyle(isHovered: boolean, hasUserReacted: boolean, isContextMenu = false): ViewStyle { - let backgroundColor = themeColors.border; +function getEmojiReactionBubbleStyle(theme: ThemeColors, isHovered: boolean, hasUserReacted: boolean, isContextMenu = false): ViewStyle { + let backgroundColor = theme.border; if (isHovered) { - backgroundColor = themeColors.buttonHoveredBG; + backgroundColor = theme.buttonHoveredBG; } if (hasUserReacted) { - backgroundColor = themeColors.reactionActiveBackground; + backgroundColor = theme.reactionActiveBackground; } if (isContextMenu) { @@ -1092,12 +1079,12 @@ function getEmojiReactionBubbleTextStyle(isContextMenu = false): TextStyle { }; } -function getEmojiReactionCounterTextStyle(hasUserReacted: boolean): TextStyle { +function getEmojiReactionCounterTextStyle(theme: ThemeColors, hasUserReacted: boolean): TextStyle { if (hasUserReacted) { - return {color: themeColors.reactionActiveText}; + return {color: theme.reactionActiveText}; } - return {color: themeColors.text}; + return {color: theme.text}; } /** @@ -1120,7 +1107,7 @@ function displayIfTrue(condition: boolean): ViewStyle { return {display: condition ? 'flex' : 'none'}; } -function getGoogleListViewStyle(shouldDisplayBorder: boolean): ViewStyle { +function getGoogleListViewStyle(styles: ThemeStyles, shouldDisplayBorder: boolean): ViewStyle { if (shouldDisplayBorder) { // 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 @@ -1160,8 +1147,8 @@ function getEmojiPickerListHeight(hasAdditionalSpace: boolean, windowHeight: num /** * Returns style object for the user mention component based on whether the mention is ours or not. */ -function getMentionStyle(isOurMention: boolean): ViewStyle { - const backgroundColor = isOurMention ? themeColors.ourMentionBG : themeColors.mentionBG; +function getMentionStyle(theme: ThemeColors, isOurMention: boolean): ViewStyle { + const backgroundColor = isOurMention ? theme.ourMentionBG : theme.mentionBG; return { backgroundColor, borderRadius: variables.componentBorderRadiusSmall, @@ -1172,8 +1159,8 @@ function getMentionStyle(isOurMention: boolean): ViewStyle { /** * Returns text color for the user mention text based on whether the mention is ours or not. */ -function getMentionTextColor(isOurMention: boolean): string { - return isOurMention ? themeColors.ourMentionText : themeColors.mentionText; +function getMentionTextColor(theme: ThemeColors, isOurMention: boolean): string { + return isOurMention ? theme.ourMentionText : theme.mentionText; } /** @@ -1225,9 +1212,9 @@ function getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu: boolean): Vie /** * Returns link styles based on whether the link is disabled or not */ -function getDisabledLinkStyles(isDisabled = false): ViewStyle { +function getDisabledLinkStyles(theme: ThemeColors, styles: ThemeStyles, isDisabled = false): ViewStyle { const disabledLinkStyles = { - color: themeColors.textSupporting, + color: theme.textSupporting, ...cursor.cursorDisabled, }; @@ -1262,12 +1249,12 @@ function getCheckboxPressableStyle(borderRadius = 6): ViewStyle { /** * Returns the checkbox container style */ -function getCheckboxContainerStyle(size: number, borderRadius = 4): ViewStyle { +function getCheckboxContainerStyle(theme: ThemeColors, size: number, borderRadius = 4): ViewStyle { return { - backgroundColor: themeColors.componentBG, + backgroundColor: theme.componentBG, height: size, width: size, - borderColor: themeColors.borderLighter, + borderColor: theme.borderLighter, borderWidth: 2, justifyContent: 'center', alignItems: 'center', @@ -1353,7 +1340,7 @@ function getAmountFontSizeAndLineHeight(isSmallScreenWidth: boolean, windowWidth /** * Returns container styles for showing the icons in MultipleAvatars/SubscriptAvatar */ -function getContainerStyles(size: string, isInReportAction = false): ViewStyle[] { +function getContainerStyles(styles: ThemeStyles, size: string, isInReportAction = false): ViewStyle[] { let containerStyles: ViewStyle[]; switch (size) { @@ -1386,7 +1373,7 @@ function getTransparentColor(color: string) { /** * Get the styles of the text next to dot indicators */ -function getDotIndicatorTextStyles(isErrorText = true): TextStyle { +function getDotIndicatorTextStyles(styles: ThemeStyles, isErrorText = true): TextStyle { return isErrorText ? {...styles.offlineFeedback.text, color: styles.formError.color} : {...styles.offlineFeedback.text}; } @@ -1441,7 +1428,6 @@ export { getEmojiReactionBubbleStyle, getEmojiReactionBubbleTextStyle, getEmojiReactionCounterTextStyle, - getEmptyAvatarStyle, getErrorPageContainerStyle, getFontFamilyMonospace, getCodeFontSize, diff --git a/src/styles/addOutlineWidth/index.ts b/src/styles/addOutlineWidth/index.ts index 5d99e369b79a..7063d610cf11 100644 --- a/src/styles/addOutlineWidth/index.ts +++ b/src/styles/addOutlineWidth/index.ts @@ -2,17 +2,16 @@ * Web and desktop platforms support the "addOutlineWidth" property, so it * can be added to the object */ -import themeDefault from '@styles/themes/default'; import AddOutlineWidth from './types'; /** * Adds the addOutlineWidth property to an object to be used when styling */ -const addOutlineWidth: AddOutlineWidth = (obj, val, hasError = false) => ({ +const addOutlineWidth: AddOutlineWidth = (obj, theme, val, hasError = false) => ({ ...obj, outlineWidth: val, outlineStyle: val ? 'auto' : 'none', - boxShadow: val !== 0 ? `0px 0px 0px ${val}px ${hasError ? themeDefault.danger : themeDefault.borderFocus}` : 'none', + boxShadow: val !== 0 ? `0px 0px 0px ${val}px ${hasError ? theme?.danger : theme?.borderFocus}` : 'none', }); export default addOutlineWidth; diff --git a/src/styles/addOutlineWidth/types.ts b/src/styles/addOutlineWidth/types.ts index 7a3a86506959..35b6bc97a631 100644 --- a/src/styles/addOutlineWidth/types.ts +++ b/src/styles/addOutlineWidth/types.ts @@ -1,5 +1,6 @@ import {TextStyle} from 'react-native'; +import {ThemeColors} from '@styles/themes/types'; -type AddOutlineWidth = (obj: TextStyle, val?: number, hasError?: boolean) => TextStyle; +type AddOutlineWidth = (obj: TextStyle, theme?: ThemeColors, val?: number, hasError?: boolean) => TextStyle; export default AddOutlineWidth; diff --git a/src/styles/getContextMenuItemStyles/types.ts b/src/styles/getContextMenuItemStyles/types.ts index 5393a630b79a..6a101fdae413 100644 --- a/src/styles/getContextMenuItemStyles/types.ts +++ b/src/styles/getContextMenuItemStyles/types.ts @@ -1,6 +1,6 @@ import {ViewStyle} from 'react-native'; -import styles from '@styles/styles'; +import {ThemeStyles} from '@styles/styles'; -type GetContextMenuItemStyle = (themeStyles: typeof styles, windowWidth?: number) => ViewStyle[]; +type GetContextMenuItemStyle = (themeStyles: ThemeStyles, windowWidth?: number) => ViewStyle[]; export default GetContextMenuItemStyle; diff --git a/src/styles/getModalStyles.ts b/src/styles/getModalStyles.ts index eb87cc005f8b..1c28de3bb5e2 100644 --- a/src/styles/getModalStyles.ts +++ b/src/styles/getModalStyles.ts @@ -2,11 +2,11 @@ import {ViewStyle} from 'react-native'; import {ModalProps} from 'react-native-modal'; import {ValueOf} from 'type-fest'; import CONST from '@src/CONST'; -import styles from './styles'; +import {ThemeStyles} from './styles'; import {ThemeColors} from './themes/types'; import variables from './variables'; -function getCenteredModalStyles(windowWidth: number, isSmallScreenWidth: boolean, isFullScreenWhenSmall = false): ViewStyle { +function getCenteredModalStyles(styles: ThemeStyles, windowWidth: number, isSmallScreenWidth: boolean, isFullScreenWhenSmall = false): ViewStyle { const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, isFullScreenWhenSmall); return { @@ -40,6 +40,7 @@ export default function getModalStyles( type: ModalType | undefined, windowDimensions: WindowDimensions, theme: ThemeColors, + styles: ThemeStyles, popoverAnchorPosition: ViewStyle = {}, innerContainerStyle: ViewStyle = {}, outerStyle: ViewStyle = {}, @@ -102,7 +103,7 @@ export default function getModalStyles( marginBottom: isSmallScreenWidth ? 0 : 20, borderRadius: isSmallScreenWidth ? 0 : 12, overflow: 'hidden', - ...getCenteredModalStyles(windowWidth, isSmallScreenWidth), + ...getCenteredModalStyles(styles, windowWidth, isSmallScreenWidth), }; // Allow this modal to be dismissed with a swipe down or swipe right @@ -129,7 +130,7 @@ export default function getModalStyles( marginBottom: isSmallScreenWidth ? 0 : 20, borderRadius: isSmallScreenWidth ? 0 : 12, overflow: 'hidden', - ...getCenteredModalStyles(windowWidth, isSmallScreenWidth, true), + ...getCenteredModalStyles(styles, windowWidth, isSmallScreenWidth, true), }; swipeDirection = undefined; animationIn = isSmallScreenWidth ? 'slideInRight' : 'fadeIn'; diff --git a/src/styles/getReportActionContextMenuStyles.ts b/src/styles/getReportActionContextMenuStyles.ts index e26f8de94919..781d0cc11549 100644 --- a/src/styles/getReportActionContextMenuStyles.ts +++ b/src/styles/getReportActionContextMenuStyles.ts @@ -1,5 +1,5 @@ import {ViewStyle} from 'react-native'; -import styles from './styles'; +import {ThemeStyles} from './styles'; import {ThemeColors} from './themes/types'; import variables from './variables'; @@ -7,7 +7,7 @@ const getDefaultWrapperStyle = (theme: ThemeColors): ViewStyle => ({ backgroundColor: theme.componentBG, }); -const getMiniWrapperStyle = (theme: ThemeColors): ViewStyle[] => [ +const getMiniWrapperStyle = (theme: ThemeColors, styles: ThemeStyles): ViewStyle[] => [ styles.flexRow, getDefaultWrapperStyle(theme), { @@ -27,9 +27,9 @@ const getMiniWrapperStyle = (theme: ThemeColors): ViewStyle[] => [ * @param isSmallScreenWidth * @param theme */ -function getReportActionContextMenuStyles(isMini: boolean, isSmallScreenWidth: boolean, theme: ThemeColors): ViewStyle[] { +function getReportActionContextMenuStyles(styles: ThemeStyles, isMini: boolean, isSmallScreenWidth: boolean, theme: ThemeColors): ViewStyle[] { if (isMini) { - return getMiniWrapperStyle(theme); + return getMiniWrapperStyle(theme, styles); } return [ diff --git a/src/styles/getTooltipStyles.ts b/src/styles/getTooltipStyles.ts index 5c90027e10fd..c47659c4f80c 100644 --- a/src/styles/getTooltipStyles.ts +++ b/src/styles/getTooltipStyles.ts @@ -1,8 +1,8 @@ import {TextStyle, View, ViewStyle} from 'react-native'; import fontFamily from './fontFamily'; import roundToNearestMultipleOfFour from './roundToNearestMultipleOfFour'; -import styles from './styles'; -import themeColors from './themes/default'; +import {ThemeStyles} from './styles'; +import {ThemeColors} from './themes/types'; import positioning from './utilities/positioning'; import spacing from './utilities/spacing'; import variables from './variables'; @@ -101,6 +101,23 @@ type TooltipStyles = { pointerStyle: ViewStyle; }; +type TooltipParams = { + tooltip: View | HTMLDivElement; + currentSize: number; + windowWidth: number; + xOffset: number; + yOffset: number; + tooltipTargetWidth: number; + tooltipTargetHeight: number; + maxWidth: number; + tooltipContentWidth: number; + tooltipWrapperHeight: number; + theme: ThemeColors; + themeStyles: ThemeStyles; + manualShiftHorizontal?: number; + manualShiftVertical?: number; +}; + /** * Generate styles for the tooltip component. * @@ -122,20 +139,22 @@ type TooltipStyles = { * @param [manualShiftVertical] - Any additional amount to manually shift the tooltip up or down. * A positive value shifts it down, and a negative value shifts it up. */ -export default function getTooltipStyles( - tooltip: View | HTMLDivElement, - currentSize: number, - windowWidth: number, - xOffset: number, - yOffset: number, - tooltipTargetWidth: number, - tooltipTargetHeight: number, - maxWidth: number, - tooltipContentWidth: number, - tooltipWrapperHeight: number, +export default function getTooltipStyles({ + tooltip, + currentSize, + windowWidth, + xOffset, + yOffset, + tooltipTargetWidth, + tooltipTargetHeight, + maxWidth, + tooltipContentWidth, + tooltipWrapperHeight, + theme, + themeStyles, manualShiftHorizontal = 0, manualShiftVertical = 0, -): TooltipStyles { +}: TooltipParams): TooltipStyles { const tooltipVerticalPadding = spacing.pv1; // We calculate tooltip width based on the tooltip's content width @@ -226,7 +245,7 @@ export default function getTooltipStyles( // at the center of the hovered component. pointerWrapperLeft = horizontalShiftPointer + (tooltipWidth / 2 - POINTER_WIDTH / 2); - pointerAdditionalStyle = shouldShowBelow ? styles.flipUpsideDown : {}; + pointerAdditionalStyle = shouldShowBelow ? themeStyles.flipUpsideDown : {}; } return { @@ -238,7 +257,7 @@ export default function getTooltipStyles( }, rootWrapperStyle: { ...positioning.pFixed, - backgroundColor: themeColors.heading, + backgroundColor: theme.heading, borderRadius: variables.componentBorderRadiusSmall, ...tooltipVerticalPadding, ...spacing.ph2, @@ -249,11 +268,11 @@ export default function getTooltipStyles( left: rootWrapperLeft, // We are adding this to prevent the tooltip text from being selected and copied on CTRL + A. - ...styles.userSelectNone, - ...styles.pointerEventsNone, + ...themeStyles.userSelectNone, + ...themeStyles.pointerEventsNone, }, textStyle: { - color: themeColors.textReversed, + color: theme.textReversed, fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeSmall, overflow: 'hidden', @@ -268,14 +287,14 @@ export default function getTooltipStyles( pointerStyle: { width: 0, height: 0, - backgroundColor: themeColors.transparent, + backgroundColor: theme.transparent, borderStyle: 'solid', borderLeftWidth: POINTER_WIDTH / 2, borderRightWidth: POINTER_WIDTH / 2, borderTopWidth: POINTER_HEIGHT, - borderLeftColor: themeColors.transparent, - borderRightColor: themeColors.transparent, - borderTopColor: themeColors.heading, + borderLeftColor: theme.transparent, + borderRightColor: theme.transparent, + borderTopColor: theme.heading, ...pointerAdditionalStyle, }, }; diff --git a/src/styles/optionRowStyles/types.ts b/src/styles/optionRowStyles/types.ts index a9f9358521b8..68eb91975f8e 100644 --- a/src/styles/optionRowStyles/types.ts +++ b/src/styles/optionRowStyles/types.ts @@ -1,6 +1,6 @@ import {ViewStyle} from 'react-native'; -import styles from '@styles/styles'; +import {ThemeStyles} from '@styles/styles'; -type CompactContentContainerStyles = (themeStyles: typeof styles) => ViewStyle; +type CompactContentContainerStyles = (themeStyles: ThemeStyles) => ViewStyle; export default CompactContentContainerStyles; diff --git a/src/styles/styles.ts b/src/styles/styles.ts index c7e1988c7b05..983f1ba82caa 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -1016,7 +1016,7 @@ const styles = (theme: ThemeColors) => flexDirection: 'row', }, - textInputDesktop: addOutlineWidth({}, 0), + textInputDesktop: addOutlineWidth({}, theme, 0), textInputIconContainer: { paddingHorizontal: 11, @@ -1133,7 +1133,7 @@ const styles = (theme: ThemeColors) => color: theme.icon, }, - noOutline: addOutlineWidth({}, 0), + noOutline: addOutlineWidth({}, theme, 0), textLabelSupporting: { fontFamily: fontFamily.EXP_NEUE, @@ -1799,6 +1799,7 @@ const styles = (theme: ThemeColors) => alignSelf: 'center', verticalAlign: 'middle', }, + theme, 0, ), @@ -2625,6 +2626,7 @@ const styles = (theme: ThemeColors) => padding: 0, lineHeight: undefined, }, + theme, 0, ), @@ -3991,10 +3993,10 @@ const styles = (theme: ThemeColors) => colorSchemeStyle: (colorScheme: ColorScheme) => ({colorScheme}), } satisfies Styles); -type ThemeStyle = ReturnType; +type ThemeStyles = ReturnType; const stylesGenerator = styles; const defaultStyles = styles(defaultTheme); export default defaultStyles; -export {stylesGenerator, type Styles, type ThemeStyle, type StatusBarStyle, type ColorScheme}; +export {stylesGenerator, type Styles, type ThemeStyles, type StatusBarStyle, type ColorScheme};