Rerun migration after adding aliases

src/components/AddPlaidBankAccount.js

@@ -9,12 +9,12 @@ import useNetwork from '@hooks/useNetwork';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import Log from '@libs/Log';
 import {plaidDataPropTypes} from '@pages/ReimbursementAccount/plaidDataPropTypes';
-import styles from '@styles/styles';
-import themeColors from '@styles/themes/default';
 import * as App from '@userActions/App';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlockingView';
 import Icon from './Icon';
 import getBankIcon from './Icon/BankIcons';
@@ -83,6 +83,8 @@ function AddPlaidBankAccount({
     allowDebit,
     isPlaidDisabled,
 }) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
     const subscribedKeyboardShortcuts = useRef([]);
     const previousNetworkState = useRef();
 
@@ -186,7 +188,7 @@ function AddPlaidBankAccount({
                 {lodashGet(plaidData, 'isLoading') && (
                     <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
                         <ActivityIndicator
-                            color={themeColors.spinner}
+                            color={theme.spinner}
                             size="large"
                         />
                     </View>

src/components/AddressSearch/CurrentLocationButton.js

@@ -7,8 +7,8 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
 import getButtonState from '@libs/getButtonState';
 import colors from '@styles/colors';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Callback that runs when location button is clicked */
@@ -24,6 +24,7 @@ const defaultProps = {
 };
 
 function CurrentLocationButton({onPress, isDisabled}) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
 
     return (

src/components/AddressSearch/index.js

@@ -14,11 +14,11 @@ import * as ApiUtils from '@libs/ApiUtils';
 import compose from '@libs/compose';
 import getCurrentPosition from '@libs/getCurrentPosition';
 import * as GooglePlacesUtils from '@libs/GooglePlacesUtils';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import CurrentLocationButton from './CurrentLocationButton';
 import isCurrentTargetInsideContainer from './isCurrentTargetInsideContainer';
 
@@ -163,6 +163,8 @@ function AddressSearch({
     translate,
     value,
 }) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
     const [displayListViewBorder, setDisplayListViewBorder] = useState(false);
     const [isTyping, setIsTyping] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
@@ -377,7 +379,7 @@ function AddressSearch({
         () => (
             <View style={[styles.pv4]}>
                 <ActivityIndicator
-                    color={themeColors.spinner}
+                    color={theme.spinner}
                     size="small"
                 />
             </View>
@@ -502,8 +504,8 @@ function AddressSearch({
                         }}
                         numberOfLines={2}
                         isRowScrollable={false}
-                        listHoverColor={themeColors.border}
-                        listUnderlayColor={themeColors.buttonPressedBG}
+                        listHoverColor={theme.border}
+                        listUnderlayColor={theme.buttonPressedBG}
                         onLayout={(event) => {
                             // We use the height of the element to determine if we should hide the border of the listView dropdown
                             // to prevent a lingering border when there are no address suggestions.

src/components/AmountTextInput.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styles from '@styles/styles';
 import CONST from '@src/CONST';
+import useThemeStyles from '@styles/useThemeStyles';
 import refPropTypes from './refPropTypes';
 import TextInput from './TextInput';
 
@@ -39,6 +39,7 @@ const defaultProps = {
 };
 
 function AmountTextInput(props) {
+    const styles = useThemeStyles();
     return (
         <TextInput
             disableKeyboard

src/components/AnchorForAttachmentsOnly/index.native.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import * as anchorForAttachmentsOnlyPropTypes from './anchorForAttachmentsOnlyPropTypes';
 import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly';
 
 function AnchorForAttachmentsOnly(props) {
+    const styles = useThemeStyles();
     return (
         <BaseAnchorForAttachmentsOnly
             // eslint-disable-next-line react/jsx-props-no-spreading

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js

@@ -11,9 +11,9 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
 import CONST from '@src/CONST';
+import useThemeStyles from '@styles/useThemeStyles';
 import {propTypes as anchorForCommentsOnlyPropTypes} from './anchorForCommentsOnlyPropTypes';
 
 const propTypes = {
@@ -32,6 +32,7 @@ const propTypes = {
  * This is a default anchor component for regular links.
  */
 function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '', target = '', children = null, style = {}, onPress, ...rest}) {
+    const styles = useThemeStyles();
     useEffect(
         () => () => {
             ReportActionContextMenu.hideContextMenu();

src/components/AnimatedStep/index.js

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import * as Animatable from 'react-native-animatable';
 import useNativeDriver from '@libs/useNativeDriver';
-import styles from '@styles/styles';
 import CONST from '@src/CONST';
+import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Children to wrap in AnimatedStep. */
@@ -38,6 +38,7 @@ function getAnimationStyle(direction) {
 }
 
 function AnimatedStep(props) {
+    const styles = useThemeStyles();
     return (
         <Animatable.View
             onAnimationEnd={() => {

src/components/AnonymousReportFooter.js

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {Text, View} from 'react-native';
 import reportPropTypes from '@pages/reportPropTypes';
-import styles from '@styles/styles';
 import * as Session from '@userActions/Session';
+import useThemeStyles from '@styles/useThemeStyles';
 import AvatarWithDisplayName from './AvatarWithDisplayName';
 import Button from './Button';
 import ExpensifyWordmark from './ExpensifyWordmark';
@@ -29,6 +29,7 @@ const defaultProps = {
 };
 
 function AnonymousReportFooter(props) {
+    const styles = useThemeStyles();
     return (
         <View style={styles.anonymousRoomFooter(props.isSmallSizeLayout)}>
             <View style={[styles.flexRow, styles.flexShrink1]}>

src/components/ArchivedReportFooter.js

@@ -9,9 +9,9 @@ import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
-import styles from '@styles/styles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import useThemeStyles from '@styles/useThemeStyles';
 import Banner from './Banner';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
@@ -50,6 +50,7 @@ const defaultProps = {
 };
 
 function ArchivedReportFooter(props) {
+    const styles = useThemeStyles();
     const archiveReason = lodashGet(props.reportClosedAction, 'originalMessage.reason', CONST.REPORT.ARCHIVE_REASON.DEFAULT);
     let displayName = PersonalDetailsUtils.getDisplayNameOrDefault(props.personalDetails, [props.report.ownerAccountID, 'displayName']);
 

src/components/AttachmentModal.js

@@ -19,14 +19,14 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import useNativeDriver from '@libs/useNativeDriver';
 import reportPropTypes from '@pages/reportPropTypes';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
 import * as IOU from '@userActions/IOU';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import AttachmentCarousel from './Attachments/AttachmentCarousel';
 import AttachmentView from './Attachments/AttachmentView';
 import Button from './Button';
@@ -111,6 +111,8 @@ const defaultProps = {
 };
 
 function AttachmentModal(props) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
     const onModalHideCallbackRef = useRef(null);
     const [isModalOpen, setIsModalOpen] = useState(props.defaultOpen);
     const [shouldLoadAttachment, setShouldLoadAttachment] = useState(false);
@@ -400,7 +402,7 @@ function AttachmentModal(props) {
                 onSubmit={submitAndClose}
                 onClose={closeModal}
                 isVisible={isModalOpen}
-                backgroundColor={themeColors.componentBG}
+                backgroundColor={theme.componentBG}
                 onModalShow={() => {
                     props.onModalShow();
                     setShouldLoadAttachment(true);

src/components/AttachmentPicker/index.native.js

@@ -14,8 +14,8 @@ import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
-import styles from '@styles/styles';
 import CONST from '@src/CONST';
+import useThemeStyles from '@styles/useThemeStyles';
 import {defaultProps as baseDefaultProps, propTypes as basePropTypes} from './attachmentPickerPropTypes';
 import launchCamera from './launchCamera';
 
@@ -101,6 +101,7 @@ const getDataForUpload = (fileData) => {
  * @returns {JSX.Element}
  */
 function AttachmentPicker({type, children, shouldHideCameraOption}) {
+    const styles = useThemeStyles();
     const [isVisible, setIsVisible] = useState(false);
 
     const completeAttachmentSelection = useRef();

src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {PixelRatio, View} from 'react-native';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Cell Container styles */
@@ -14,6 +14,7 @@ const defaultProps = {
 };
 
 function AttachmentCarouselCellRenderer(props) {
+    const styles = useThemeStyles();
     const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
     const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, true);
     const style = [props.style, styles.h100, {width: PixelRatio.roundToNearestPixel(windowWidth - (modalStyles.marginHorizontal + modalStyles.borderWidth) * 2)}];

src/components/Attachments/AttachmentView/index.js

@@ -15,12 +15,12 @@ import useNetwork from '@hooks/useNetwork';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
 import compose from '@libs/compose';
 import * as TransactionUtils from '@libs/TransactionUtils';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
 import cursor from '@styles/utilities/cursor';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import AttachmentViewImage from './AttachmentViewImage';
 import AttachmentViewPdf from './AttachmentViewPdf';
 import {attachmentViewDefaultProps, attachmentViewPropTypes} from './propTypes';
@@ -78,6 +78,8 @@ function AttachmentView({
     transaction,
     isUsedInAttachmentModal,
 }) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
     const [loadComplete, setLoadComplete] = useState(false);
     const [imageError, setImageError] = useState(false);
 
@@ -186,7 +188,7 @@ function AttachmentView({
                     <Tooltip text={translate('common.downloading')}>
                         <ActivityIndicator
                             size="small"
-                            color={themeColors.textSupporting}
+                            color={theme.textSupporting}
                         />
                     </Tooltip>
                 </View>

src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js

@@ -3,9 +3,9 @@ import React, {useEffect, useRef} from 'react';
 import {FlatList} from 'react-native-gesture-handler';
 import Animated, {Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
 import CONST from '@src/CONST';
+import useThemeStyles from '@styles/useThemeStyles';
 import {propTypes} from './autoCompleteSuggestionsPropTypes';
 
 /**
@@ -29,6 +29,7 @@ const measureHeightOfSuggestionRows = (numRows, isSuggestionPickerLarge) => {
 };
 
 function BaseAutoCompleteSuggestions(props) {
+    const styles = useThemeStyles();
     const rowHeight = useSharedValue(0);
     const scrollRef = useRef(null);
     /**

src/components/AutoEmailLink.js

@@ -2,7 +2,7 @@ import {CONST} from 'expensify-common/lib/CONST';
 import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'underscore';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import Text from './Text';
 import TextLink from './TextLink';
 
@@ -22,6 +22,7 @@ const defaultProps = {
  */
 
 function AutoEmailLink(props) {
+    const styles = useThemeStyles();
     return (
         <Text style={props.style}>
             {_.map(props.text.split(CONST.REG_EXP.EXTRACT_EMAIL), (str, index) => {

src/components/AutoUpdateTime.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import DateUtils from '@libs/DateUtils';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import Text from './Text';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
@@ -23,6 +23,7 @@ const propTypes = {
 };
 
 function AutoUpdateTime(props) {
+    const styles = useThemeStyles();
     /**
      * @returns {Date} Returns the locale Date object
      */