Feat/31678 theme switching migration selectionlist batch

src/components/Icon/index.tsx

@@ -1,6 +1,6 @@
 import React, {PureComponent} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
-import styles from '@styles/styles';
+import withThemeStyles, {ThemeStylesProps} from '@components/withThemeStyles';
 import * as StyleUtils from '@styles/StyleUtils';
 import themeColors from '@styles/themes/default';
 import variables from '@styles/variables';
@@ -41,7 +41,7 @@ type IconProps = {
 
     /** Additional styles to add to the Icon */
     additionalStyles?: StyleProp<ViewStyle>;
-};
+} & ThemeStylesProps;
 
 // We must use a class component to create an animatable component with the Animated API
 // eslint-disable-next-line react/prefer-stateless-function
@@ -61,13 +61,13 @@ class Icon extends PureComponent<IconProps> {
     render() {
         const width = this.props.small ? variables.iconSizeSmall : this.props.width;
         const height = this.props.small ? variables.iconSizeSmall : this.props.height;
-        const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, styles.pAbsolute, this.props.additionalStyles];
+        const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, this.props.themeStyles.pAbsolute, this.props.additionalStyles];
 
         if (this.props.inline) {
             return (
                 <View
                     testID={`${this.props.src.name} Icon`}
-                    style={[StyleUtils.getWidthAndHeightStyle(width ?? 0, height), styles.bgTransparent, styles.overflowVisible]}
+                    style={[StyleUtils.getWidthAndHeightStyle(width ?? 0, height), this.props.themeStyles.bgTransparent, this.props.themeStyles.overflowVisible]}
                 >
                     <View style={iconStyles}>
                         <this.props.src
@@ -99,4 +99,4 @@ class Icon extends PureComponent<IconProps> {
     }
 }
 
-export default Icon;
+export default withThemeStyles(Icon);

src/components/LHNOptionsList/OptionRowLHN.js

@@ -103,7 +103,7 @@ function OptionRowLHN(props) {
         props.style,
     );
     const contentContainerStyles =
-        props.viewMode === CONST.OPTION_MODE.COMPACT ? [styles.flex1, styles.flexRow, styles.overflowHidden, optionRowStyles.compactContentContainerStyles] : [styles.flex1];
+        props.viewMode === CONST.OPTION_MODE.COMPACT ? [styles.flex1, styles.flexRow, styles.overflowHidden, optionRowStyles.compactContentContainerStyles(styles)] : [styles.flex1];
     const sidebarInnerRowStyle = StyleSheet.flatten(
         props.viewMode === CONST.OPTION_MODE.COMPACT
             ? [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRowCompact, styles.justifyContentCenter]

src/components/MultipleAvatars.tsx

@@ -2,9 +2,9 @@ import React, {memo, useMemo} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import {ValueOf} from 'type-fest';
 import {AvatarSource} from '@libs/UserUtils';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
@@ -63,26 +63,11 @@ type AvatarSizeToStyles = typeof CONST.AVATAR_SIZE.SMALL | typeof CONST.AVATAR_S
 
 type AvatarSizeToStylesMap = Record<AvatarSizeToStyles, AvatarStyles>;
 
-const avatarSizeToStylesMap: AvatarSizeToStylesMap = {
-    [CONST.AVATAR_SIZE.SMALL]: {
-        singleAvatarStyle: styles.singleAvatarSmall,
-        secondAvatarStyles: styles.secondAvatarSmall,
-    },
-    [CONST.AVATAR_SIZE.LARGE]: {
-        singleAvatarStyle: styles.singleAvatarMedium,
-        secondAvatarStyles: styles.secondAvatarMedium,
-    },
-    [CONST.AVATAR_SIZE.DEFAULT]: {
-        singleAvatarStyle: styles.singleAvatar,
-        secondAvatarStyles: styles.secondAvatar,
-    },
-};
-
 function MultipleAvatars({
     fallbackIcon,
     icons = [],
     size = CONST.AVATAR_SIZE.DEFAULT,
-    secondAvatarStyle = [StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)],
+    secondAvatarStyle: secondAvatarStyleProp,
     shouldStackHorizontally = false,
     shouldDisplayAvatarsInRows = false,
     isHovered = false,
@@ -93,8 +78,31 @@ function MultipleAvatars({
     shouldUseCardBackground = false,
     maxAvatarsInRow = CONST.AVATAR_ROW_SIZE.DEFAULT,
 }: MultipleAvatarsProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+
+    const avatarSizeToStylesMap: AvatarSizeToStylesMap = useMemo(
+        () => ({
+            [CONST.AVATAR_SIZE.SMALL]: {
+                singleAvatarStyle: styles.singleAvatarSmall,
+                secondAvatarStyles: styles.secondAvatarSmall,
+            },
+            [CONST.AVATAR_SIZE.LARGE]: {
+                singleAvatarStyle: styles.singleAvatarMedium,
+                secondAvatarStyles: styles.secondAvatarMedium,
+            },
+            [CONST.AVATAR_SIZE.DEFAULT]: {
+                singleAvatarStyle: styles.singleAvatar,
+                secondAvatarStyles: styles.secondAvatar,
+            },
+        }),
+        [styles],
+    );
+
+    const secondAvatarStyle = secondAvatarStyleProp ?? [StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)];
+
     let avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
-    const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size]);
+    const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size, avatarSizeToStylesMap]);
 
     const tooltipTexts = useMemo(() => (shouldShowTooltip ? icons.map((icon) => icon.name) : ['']), [shouldShowTooltip, icons]);
     const avatarSize = useMemo(() => {
@@ -143,7 +151,7 @@ function MultipleAvatars({
                     <Avatar
                         source={icons[0].source}
                         size={size}
-                        fill={themeColors.iconSuccessFill}
+                        fill={theme.iconSuccessFill}
                         name={icons[0].name}
                         type={icons[0].type}
                         fallbackIcon={icons[0].fallbackIcon}
@@ -193,7 +201,7 @@ function MultipleAvatars({
                                             StyleUtils.getAvatarBorderWidth(size),
                                         ]}
                                         source={icon.source ?? fallbackIcon}
-                                        fill={themeColors.iconSuccessFill}
+                                        fill={theme.iconSuccessFill}
                                         size={size}
                                         name={icon.name}
                                         type={icon.type}
@@ -219,7 +227,7 @@ function MultipleAvatars({
                                         }),
 
                                         // Set overlay background color with RGBA value so that the text will not inherit opacity
-                                        StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.overlay, variables.overlayOpacity),
+                                        StyleUtils.getBackgroundColorWithOpacityStyle(theme.overlay, variables.overlayOpacity),
                                         StyleUtils.getHorizontalStackedOverlayAvatarStyle(oneAvatarSize, oneAvatarBorderWidth),
                                         icons[3].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(size, icons[3].type) : {},
                                     ]}
@@ -256,7 +264,7 @@ function MultipleAvatars({
                             <View>
                                 <Avatar
                                     source={icons[0].source ?? fallbackIcon}
-                                    fill={themeColors.iconSuccessFill}
+                                    fill={theme.iconSuccessFill}
                                     size={avatarSize}
                                     imageStyles={[singleAvatarStyle]}
                                     name={icons[0].name}
@@ -277,7 +285,7 @@ function MultipleAvatars({
                                     <View>
                                         <Avatar
                                             source={icons[1].source ?? fallbackIcon}
-                                            fill={themeColors.iconSuccessFill}
+                                            fill={theme.iconSuccessFill}
                                             size={avatarSize}
                                             imageStyles={[singleAvatarStyle]}
                                             name={icons[1].name}

src/components/OfflineWithFeedback.js

@@ -5,8 +5,8 @@ import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
 import shouldRenderOffscreen from '@libs/shouldRenderOffscreen';
 import stylePropTypes from '@styles/stylePropTypes';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import MessagesRow from './MessagesRow';
 
@@ -76,22 +76,24 @@ const defaultProps = {
 /**
  * This method applies the strikethrough to all the children passed recursively
  * @param {Array} children
+ * @param {Object} styles
  * @return {Array}
  */
-function applyStrikeThrough(children) {
+function applyStrikeThrough(children, styles) {
     return React.Children.map(children, (child) => {
         if (!React.isValidElement(child)) {
             return child;
         }
         const props = {style: StyleUtils.combineStyles(child.props.style, styles.offlineFeedback.deleted, styles.userSelectNone)};
         if (child.props.children) {
-            props.children = applyStrikeThrough(child.props.children);
+            props.children = applyStrikeThrough(child.props.children, styles);
         }
         return React.cloneElement(child, props);
     });
 }
 
 function OfflineWithFeedback(props) {
+    const styles = useThemeStyles();
     const {isOffline} = useNetwork();
 
     const hasErrors = !_.isEmpty(props.errors);
@@ -109,7 +111,7 @@ function OfflineWithFeedback(props) {
 
     // Apply strikethrough to children if needed, but skip it if we are not going to render them
     if (needsStrikeThrough && !hideChildren) {
-        children = applyStrikeThrough(children);
+        children = applyStrikeThrough(children, styles);
     }
     return (
         <View style={props.style}>