Merge pull request #32247 from koko57/fix/31677-amend-themecolors-imp…

…orts fix: amend missed imports
Expensify · Nov 30, 2023 · 6777aef · 6777aef
2 parents f1a3095 + c5d677e
commit 6777aef
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 26 deletions.
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -9,7 +9,6 @@ import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import HapticFeedback from '@libs/HapticFeedback';
-import themeColors from '@styles/themes/default';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
@@ -118,7 +117,7 @@ function Button(
         allowBubble = false,
 
         iconRight = Expensicons.ArrowRight,
-        iconFill = themeColors.textLight,
+        iconFill,
         iconStyles = [],
         iconRightStyles = [],
 
@@ -214,7 +213,7 @@ function Button(
                             <View style={[styles.mr1, iconStyles]}>
                                 <Icon
                                     src={icon}
-                                    fill={iconFill || theme.textLight}
+                                    fill={iconFill ?? theme.textLight}
                                     small={small}
                                 />
                             </View>
@@ -225,7 +224,7 @@ function Button(
                         <View style={[styles.justifyContentCenter, styles.ml1, iconRightStyles]}>
                             <Icon
                                 src={iconRight}
-                                fill={iconFill || theme.textLight}
+                                fill={iconFill ?? theme.textLight}
                                 small={small}
                             />
                         </View>

diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -1,8 +1,8 @@
 import React, {PureComponent} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
+import withTheme, {ThemeProps} from '@components/withTheme';
 import withThemeStyles, {ThemeStylesProps} from '@components/withThemeStyles';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
 import variables from '@styles/variables';
 import IconWrapperStyles from './IconWrapperStyles';
 
@@ -41,7 +41,8 @@ type IconProps = {
 
     /** Additional styles to add to the Icon */
     additionalStyles?: StyleProp<ViewStyle>;
-} & ThemeStylesProps;
+} & ThemeStylesProps &
+    ThemeProps;
 
 // We must use a class component to create an animatable component with the Animated API
 // eslint-disable-next-line react/prefer-stateless-function
@@ -50,7 +51,7 @@ class Icon extends PureComponent<IconProps> {
     public static defaultProps = {
         width: variables.iconSizeNormal,
         height: variables.iconSizeNormal,
-        fill: themeColors.icon,
+        fill: undefined,
         small: false,
         inline: false,
         additionalStyles: [],
@@ -62,6 +63,7 @@ class Icon extends PureComponent<IconProps> {
         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, this.props.themeStyles.pAbsolute, this.props.additionalStyles];
+        const fill = this.props.fill ?? this.props.theme.icon;
 
         if (this.props.inline) {
             return (
@@ -73,7 +75,7 @@ class Icon extends PureComponent<IconProps> {
                         <this.props.src
                             width={width}
                             height={height}
-                            fill={this.props.fill}
+                            fill={fill}
                             hovered={this.props.hovered?.toString()}
                             pressed={this.props.pressed?.toString()}
                         />
@@ -90,7 +92,7 @@ class Icon extends PureComponent<IconProps> {
                 <this.props.src
                     width={width}
                     height={height}
-                    fill={this.props.fill}
+                    fill={fill}
                     hovered={this.props.hovered?.toString()}
                     pressed={this.props.pressed?.toString()}
                 />
@@ -99,4 +101,4 @@ class Icon extends PureComponent<IconProps> {
     }
 }
 
-export default withThemeStyles(Icon);
+export default withTheme(withThemeStyles(Icon));
diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
@@ -6,7 +6,7 @@ import {withOnyx} from 'react-native-onyx';
 import setUserLocation from '@libs/actions/UserLocation';
 import compose from '@libs/compose';
 import getCurrentPosition from '@libs/getCurrentPosition';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import useLocalize from '@src/hooks/useLocalize';
 import useNetwork from '@src/hooks/useNetwork';
@@ -23,6 +23,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         const navigation = useNavigation();
         const {isOffline} = useNetwork();
         const {translate} = useLocalize();
+        const styles = useThemeStyles();
 
         const cameraRef = useRef<Mapbox.Camera>(null);
         const [isIdle, setIsIdle] = useState(false);

diff --git a/src/components/MapView/MapView.web.tsx b/src/components/MapView/MapView.web.tsx
@@ -10,14 +10,14 @@ import Map, {MapRef, Marker} from 'react-map-gl';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import setUserLocation from '@userActions/UserLocation';
 import CONST from '@src/CONST';
 import useLocalize from '@src/hooks/useLocalize';
 import useNetwork from '@src/hooks/useNetwork';
 import getCurrentPosition from '@src/libs/getCurrentPosition';
 import ONYXKEYS from '@src/ONYXKEYS';
-import styles from '@src/styles/styles';
 import Direction from './Direction';
 import './mapbox.css';
 import {MapViewHandle} from './MapViewTypes';
@@ -43,6 +43,9 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         const {isOffline} = useNetwork();
         const {translate} = useLocalize();
 
+        const theme = useTheme();
+        const styles = useThemeStyles();
+
         const [mapRef, setMapRef] = useState<MapRef | null>(null);
         const [currentPosition, setCurrentPosition] = useState(cachedUserLocation);
         const [userInteractedWithMap, setUserInteractedWithMap] = useState(false);
@@ -179,7 +182,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                                 latitude: currentPosition?.latitude,
                                 zoom: initialState.zoom,
                             }}
-                            style={StyleUtils.getTextColorStyle(themeColors.mapAttributionText) as React.CSSProperties}
+                            style={StyleUtils.getTextColorStyle(theme.mapAttributionText) as React.CSSProperties}
                             mapStyle={styleURL}
                         >
                             {waypoints?.map(({coordinate, markerComponent, id}) => {

diff --git a/src/components/ShowMoreButton/index.js b/src/components/ShowMoreButton/index.js
@@ -7,8 +7,8 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import useLocalize from '@hooks/useLocalize';
 import * as NumberFormatUtils from '@libs/NumberFormatUtils';
 import stylePropTypes from '@styles/stylePropTypes';
-import styles from '@styles/styles';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Additional styles for container */
@@ -32,6 +32,8 @@ const defaultProps = {
 
 function ShowMoreButton({containerStyle, currentCount, totalCount, onPress}) {
     const {translate, preferredLocale} = useLocalize();
+    const theme = useTheme();
+    const styles = useThemeStyles();
 
     const shouldShowCounter = _.isNumber(currentCount) && _.isNumber(totalCount);
 
@@ -51,7 +53,7 @@ function ShowMoreButton({containerStyle, currentCount, totalCount, onPress}) {
                     style={styles.mh0}
                     small
                     shouldShowRightIcon
-                    iconFill={themeColors.icon}
+                    iconFill={theme.icon}
                     iconRight={Expensicons.DownArrow}
                     text={translate('common.showMore')}
                     accessibilityLabel={translate('common.showMore')}

diff --git a/src/components/withTheme.tsx b/src/components/withTheme.tsx
@@ -29,4 +29,4 @@ export default function withTheme<TProps extends ThemeProps, TRef>(
     return forwardRef(WithTheme);
 }
 
-export {withThemePropTypes};
+export {withThemePropTypes, type ThemeProps};
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
@@ -45,9 +45,9 @@ import SelectionScraper from '@libs/SelectionScraper';
 import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes';
 import {ReactionListContext} from '@pages/home/ReportScreenContext';
 import reportPropTypes from '@pages/reportPropTypes';
-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 * as BankAccounts from '@userActions/BankAccounts';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import * as store from '@userActions/ReimbursementAccount/store';
@@ -142,13 +142,15 @@ 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(themeColors.highlightBG) : {}), [isReportActionLinked]);
+    const highlightedBackgroundColorIfNeeded = useMemo(() => (isReportActionLinked ? StyleUtils.getBackgroundColorStyle(theme.highlightBG) : {}), [isReportActionLinked, theme.highlightBG]);
     const originalMessage = lodashGet(props.action, 'originalMessage', {});
 
     // IOUDetails only exists when we are sending money

diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
@@ -21,7 +21,7 @@ import * as UserUtils from '@libs/UserUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 import stylePropTypes from '@styles/stylePropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
@@ -80,6 +80,7 @@ const showWorkspaceDetails = (reportID) => {
 
 function ReportActionItemSingle(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const actorAccountID = props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && props.iouReport ? props.iouReport.managerID : props.action.actorAccountID;
     let displayName = ReportUtils.getDisplayNameForParticipant(actorAccountID);
@@ -166,10 +167,7 @@ function ReportActionItemSingle(props) {
                     icons={[icon, secondaryAvatar]}
                     isInReportAction
                     shouldShowTooltip
-                    secondAvatarStyle={[
-                        StyleUtils.getBackgroundAndBorderStyle(themeColors.appBG),
-                        props.isHovered ? StyleUtils.getBackgroundAndBorderStyle(themeColors.highlightBG) : undefined,
-                    ]}
+                    secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(theme.appBG), props.isHovered ? StyleUtils.getBackgroundAndBorderStyle(theme.highlightBG) : undefined]}
                 />
             );
         }