From 2da64c96f217b7090765a57161a224ed5d7b7644 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Sat, 5 Aug 2023 12:52:15 +0200 Subject: [PATCH 01/30] add ts type for theme --- src/styles/themes/ThemeColors.ts | 85 ++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 src/styles/themes/ThemeColors.ts diff --git a/src/styles/themes/ThemeColors.ts b/src/styles/themes/ThemeColors.ts new file mode 100644 index 000000000000..19fcf76819b0 --- /dev/null +++ b/src/styles/themes/ThemeColors.ts @@ -0,0 +1,85 @@ +type HexColor = `#${string}`; +type Color = HexColor | `rgba(${number}, ${number}, ${number})` | `rgba(${number}, ${number}, ${number}, ${number})` | 'transparent'; + +type ThemeColors = { + appBG: Color; + splashBG: Color; + highlightBG: Color; + border: Color; + borderLighter: Color; + borderFocus: Color; + icon: Color; + iconMenu: Color; + iconHovered: Color; + iconSuccessFill: Color; + iconReversed: Color; + iconColorfulBackground: Color; + textSupporting: Color; + text: Color; + textColorfulBackground: Color; + link: Color; + linkHover: Color; + buttonDefaultBG: Color; + buttonHoveredBG: Color; + buttonPressedBG: Color; + danger: Color; + dangerHover: Color; + dangerPressed: Color; + warning: Color; + success: Color; + successHover: Color; + successPressed: Color; + transparent: Color; + signInPage: Color; + + // Additional keys + overlay: Color; + inverse: Color; + shadow: Color; + componentBG: Color; + hoverComponentBG: Color; + activeComponentBG: Color; + signInSidebar: Color; + sidebar: Color; + sidebarHover: Color; + heading: Color; + textLight: Color; + textDark: Color; + textReversed: Color; + textBackground: Color; + textMutedReversed: Color; + textError: Color; + offline: Color; + modalBackdrop: Color; + modalBackground: Color; + cardBG: Color; + cardBorder: Color; + spinner: Color; + unreadIndicator: Color; + placeholderText: Color; + heroCard: Color; + uploadPreviewActivityIndicator: Color; + dropUIBG: Color; + receiptDropUIBG: Color; + checkBox: Color; + pickerOptionsTextColor: Color; + imageCropBackgroundColor: Color; + fallbackIconColor: Color; + reactionActiveBackground: Color; + reactionActiveText: Color; + badgeAdHoc: Color; + badgeAdHocHover: Color; + mentionText: Color; + mentionBG: Color; + ourMentionText: Color; + ourMentionBG: Color; + tooltipSupportingText: Color; + tooltipPrimaryText: Color; + skeletonLHNIn: Color; + skeletonLHNOut: Color; + QRLogo: Color; + + PAGE_BACKGROUND_COLORS: Record; +}; + +export {type HexColor, type Color, type ThemeColors}; From 899d38e7e6d8c72bda02919a9d0d795c7ded3f44 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Sat, 5 Aug 2023 12:52:36 +0200 Subject: [PATCH 02/30] adapt light and dark theme to ts type --- src/styles/themes/{default.js => dark.ts} | 17 +++++++++-------- src/styles/themes/{light.js => light.ts} | 8 ++++---- 2 files changed, 13 insertions(+), 12 deletions(-) rename src/styles/themes/{default.js => dark.ts} (88%) rename src/styles/themes/{light.js => light.ts} (95%) diff --git a/src/styles/themes/default.js b/src/styles/themes/dark.ts similarity index 88% rename from src/styles/themes/default.js rename to src/styles/themes/dark.ts index 8347a7b74cc8..c816693d41e5 100644 --- a/src/styles/themes/default.js +++ b/src/styles/themes/dark.ts @@ -1,8 +1,9 @@ /* eslint-disable no-unused-vars */ import colors from '../colors'; import SCREENS from '../../SCREENS'; +import {HexColor, ThemeColors} from './ThemeColors'; -const darkTheme = { +const darkTheme: ThemeColors = { // Figma keys appBG: colors.darkAppBackground, splashBG: colors.green400, @@ -15,7 +16,7 @@ const darkTheme = { iconHovered: colors.darkPrimaryText, iconSuccessFill: colors.green400, iconReversed: colors.darkAppBackground, - iconColorfulBackground: `${colors.ivory}cc`, + iconColorfulBackground: `${colors.ivory as HexColor}cc`, textSupporting: colors.darkSupportingText, text: colors.darkPrimaryText, textColorfulBackground: colors.ivory, @@ -61,7 +62,7 @@ const darkTheme = { placeholderText: colors.darkIcons, heroCard: colors.blue400, uploadPreviewActivityIndicator: colors.darkHighlightBackground, - dropUIBG: 'rgba(6,27,9,0.92)', + dropUIBG: 'rgba(6, 27, 9, 0.92)', receiptDropUIBG: 'rgba(3, 212, 124, 0.84)', checkBox: colors.green400, pickerOptionsTextColor: colors.darkPrimaryText, @@ -80,12 +81,12 @@ const darkTheme = { skeletonLHNIn: colors.darkBorders, skeletonLHNOut: colors.darkDefaultButton, QRLogo: colors.green400, -}; -darkTheme.PAGE_BACKGROUND_COLORS = { - [SCREENS.HOME]: darkTheme.sidebar, - [SCREENS.SETTINGS.PREFERENCES]: colors.blue500, - [SCREENS.SETTINGS.WORKSPACES]: colors.pink800, + PAGE_BACKGROUND_COLORS: { + [SCREENS.HOME]: colors.darkHighlightBackground, + [SCREENS.SETTINGS.PREFERENCES]: colors.blue500, + [SCREENS.SETTINGS.WORKSPACES]: colors.pink800, + }, }; export default darkTheme; diff --git a/src/styles/themes/light.js b/src/styles/themes/light.ts similarity index 95% rename from src/styles/themes/light.js rename to src/styles/themes/light.ts index 82717f35f124..c320c14ac6b8 100644 --- a/src/styles/themes/light.js +++ b/src/styles/themes/light.ts @@ -79,11 +79,11 @@ const lightTheme = { skeletonLHNIn: colors.lightBorders, skeletonLHNOut: colors.lightDefaultButtonPressed, QRLogo: colors.green400, -}; -lightTheme.PAGE_BACKGROUND_COLORS = { - [SCREENS.HOME]: lightTheme.sidebar, - [SCREENS.SETTINGS.PREFERENCES]: colors.blue500, + PAGE_BACKGROUND_COLORS: { + [SCREENS.HOME]: colors.lightHighlightBackground, + [SCREENS.SETTINGS.PREFERENCES]: colors.blue500, + }, }; export default lightTheme; From e089833582ba9dbca8b50f99fe175b4769ec0981 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Sat, 5 Aug 2023 12:53:10 +0200 Subject: [PATCH 03/30] use light theme in ThemeProvider --- src/styles/themes/ThemeContext.js | 4 ++-- src/styles/themes/ThemeProvider.js | 7 +++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/styles/themes/ThemeContext.js b/src/styles/themes/ThemeContext.js index 30d476c22d9c..e75c48bcab1e 100644 --- a/src/styles/themes/ThemeContext.js +++ b/src/styles/themes/ThemeContext.js @@ -1,6 +1,6 @@ import React from 'react'; -import defaultColors from './default'; +import darkTheme from './dark'; -const ThemeContext = React.createContext(defaultColors); +const ThemeContext = React.createContext(darkTheme); export default ThemeContext; diff --git a/src/styles/themes/ThemeProvider.js b/src/styles/themes/ThemeProvider.js index f4601712a0bc..2dd92e8be729 100644 --- a/src/styles/themes/ThemeProvider.js +++ b/src/styles/themes/ThemeProvider.js @@ -4,9 +4,8 @@ import PropTypes from 'prop-types'; import ThemeContext from './ThemeContext'; import useThemePreference from './useThemePreference'; import CONST from '../../CONST'; - -// Going to eventually import the light theme here too -import darkTheme from './default'; +import darkTheme from './dark'; +import lightTheme from './light'; const propTypes = { /** Rendered child component */ @@ -16,7 +15,7 @@ const propTypes = { function ThemeProvider(props) { const themePreference = useThemePreference(); - const theme = useMemo(() => (themePreference === CONST.THEME.LIGHT ? /* TODO: replace with light theme */ darkTheme : darkTheme), [themePreference]); + const theme = useMemo(() => (themePreference === CONST.THEME.LIGHT ? lightTheme : darkTheme), [themePreference]); return {props.children}; } From b32f538a84fe6b4a9101d39cb05ff274f5c2d623 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Sat, 5 Aug 2023 12:53:40 +0200 Subject: [PATCH 04/30] adapt colors to new ts type --- src/styles/{colors.js => colors.ts} | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) rename src/styles/{colors.js => colors.ts} (95%) diff --git a/src/styles/colors.js b/src/styles/colors.ts similarity index 95% rename from src/styles/colors.js rename to src/styles/colors.ts index 9ac3226a1b80..b17f7fb4cb96 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.ts @@ -1,7 +1,9 @@ +import {Color} from './themes/ThemeColors'; + /** * DO NOT import colors.js into files. Use ../themes/default.js instead. */ -export default { +const colors: Record = { black: '#000000', white: '#FFFFFF', ivory: '#fffaf0', @@ -91,3 +93,5 @@ export default { ice700: '#28736D', ice800: '#134038', }; + +export default colors; From 21787ba652659da893e3d2b3267aaf986bfc86e3 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Sat, 5 Aug 2023 12:53:54 +0200 Subject: [PATCH 05/30] change usage of "default.js" to "dark.js" --- src/components/AddPlaidBankAccount.js | 2 +- src/components/AddressSearch/index.js | 2 +- src/components/AttachmentCarousel/index.js | 2 +- src/components/AttachmentModal.js | 2 +- src/components/AttachmentView.js | 2 +- src/components/Avatar.js | 2 +- src/components/AvatarCropModal/AvatarCropModal.js | 2 +- src/components/AvatarWithDisplayName.js | 2 +- src/components/AvatarWithImagePicker.js | 2 +- src/components/BlockingViews/BlockingView.js | 2 +- src/components/Button/index.js | 2 +- src/components/ButtonWithDropdownMenu.js | 2 +- src/components/Checkbox.js | 2 +- src/components/Composer/index.android.js | 2 +- src/components/Composer/index.ios.js | 2 +- src/components/Composer/index.js | 2 +- src/components/CurrentUserPersonalDetailsSkeletonView/index.js | 2 +- src/components/CustomStatusBar/index.js | 2 +- src/components/DatePicker/index.ios.js | 2 +- src/components/EmojiPicker/CategoryShortcutButton.js | 2 +- src/components/ExpensifyWordmark.js | 2 +- src/components/FloatingActionButton.js | 2 +- src/components/FullscreenLoadingIndicator.js | 2 +- src/components/GrowlNotification/index.js | 2 +- .../HTMLEngineProvider/HTMLRenderers/EditedRenderer.js | 2 +- src/components/Icon/index.js | 2 +- src/components/IllustratedHeaderPageLayout.js | 2 +- src/components/Indicator.js | 2 +- src/components/InlineSystemMessage.js | 2 +- src/components/LHNOptionsList/OptionRowLHN.js | 2 +- src/components/LocalePicker.js | 2 +- src/components/MenuItem.js | 2 +- src/components/Modal/BaseModal.js | 2 +- src/components/Modal/index.web.js | 2 +- src/components/MoneyRequestConfirmationList.js | 2 +- src/components/MoneyRequestDetails.js | 2 +- src/components/MultipleAvatars.js | 2 +- src/components/Onfido/BaseOnfidoWeb.js | 2 +- src/components/OptionRow.js | 2 +- src/components/OptionsListSkeletonView.js | 2 +- src/components/Picker/BasePicker.js | 2 +- src/components/PinButton.js | 2 +- src/components/QRCode/index.js | 2 +- src/components/QRShare/index.js | 2 +- src/components/ReportActionItem/IOUPreview.js | 2 +- src/components/ReportActionItem/ReportPreview.js | 2 +- src/components/ReportActionsSkeletonView/SkeletonViewLines.js | 2 +- src/components/ReportHeaderSkeletonView.js | 2 +- src/components/RoomHeaderAvatars.js | 2 +- src/components/SelectCircle.js | 2 +- src/components/SelectionListRadio/RadioListItem.js | 2 +- src/components/SubscriptAvatar.js | 2 +- src/components/TabSelector/TabSelectorItem.js | 2 +- src/components/Text.js | 2 +- src/components/TextInput/BaseTextInput.js | 2 +- .../VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js | 2 +- .../createResponsiveStackNavigator/ThreePaneView.js | 2 +- src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js | 2 +- src/libs/Navigation/NavigationRoot.js | 2 +- src/pages/ErrorPage/GenericErrorPage.js | 2 +- src/pages/home/report/FloatingMessageCounter/index.js | 2 +- src/pages/home/report/LinkPreviewer.js | 2 +- src/pages/home/report/ReportActionCompose.js | 2 +- src/pages/home/report/ReportActionItemFragment.js | 2 +- src/pages/home/report/ReportActionItemMessageEdit.js | 2 +- src/pages/home/sidebar/SidebarLinks.js | 2 +- src/pages/home/sidebar/SidebarScreen/index.js | 2 +- src/pages/iou/IOUCurrencySelection.js | 2 +- src/pages/iou/ReceiptSelector/index.native.js | 2 +- src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js | 2 +- src/pages/settings/Preferences/PreferencesPage.js | 2 +- src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js | 2 +- .../Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js | 2 +- src/pages/settings/Report/NotificationPreferencePage.js | 2 +- src/pages/settings/Report/WriteCapabilityPage.js | 2 +- src/pages/settings/Security/TwoFactorAuth/CodesPage.js | 2 +- src/pages/settings/Security/TwoFactorAuth/IsEnabledPage.js | 2 +- src/pages/signin/SignInPageLayout/Footer.js | 2 +- src/pages/signin/SignInPageLayout/index.js | 2 +- src/pages/signin/Socials.js | 2 +- src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js | 2 +- src/pages/workspace/WorkspacesListPage.js | 2 +- src/pages/workspace/reimburse/WorkspaceReimburseSection.js | 2 +- src/stories/Composer.stories.js | 2 +- src/stories/PopoverMenu.stories.js | 2 +- src/styles/StyleUtils.js | 2 +- src/styles/addOutlineWidth/index.js | 2 +- src/styles/getModalStyles/getBaseModalStyles.js | 2 +- src/styles/getReportActionContextMenuStyles.js | 2 +- src/styles/getTooltipStyles.js | 2 +- src/styles/styles.js | 2 +- 91 files changed, 91 insertions(+), 91 deletions(-) diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js index ff97c9be24a6..d1d8c42abffa 100644 --- a/src/components/AddPlaidBankAccount.js +++ b/src/components/AddPlaidBankAccount.js @@ -9,7 +9,7 @@ import PlaidLink from './PlaidLink'; import * as BankAccounts from '../libs/actions/BankAccounts'; import ONYXKEYS from '../ONYXKEYS'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import compose from '../libs/compose'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import Picker from './Picker'; diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js index e8a41ec35435..a29fd4002077 100644 --- a/src/components/AddressSearch/index.js +++ b/src/components/AddressSearch/index.js @@ -6,7 +6,7 @@ import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete' import lodashGet from 'lodash/get'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import styles from '../../styles/styles'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import TextInput from '../TextInput'; import * as ApiUtils from '../../libs/ApiUtils'; import * as GooglePlacesUtils from '../../libs/GooglePlacesUtils'; diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js index 3f2524a2992e..b15c8a0b7c7e 100644 --- a/src/components/AttachmentCarousel/index.js +++ b/src/components/AttachmentCarousel/index.js @@ -4,7 +4,7 @@ import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import * as Expensicons from '../Icon/Expensicons'; import styles from '../../styles/styles'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import CarouselActions from './CarouselActions'; import Button from '../Button'; import AttachmentView from '../AttachmentView'; diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 1b87799d4f5b..1e768d2eefd3 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -12,7 +12,7 @@ import AttachmentCarousel from './AttachmentCarousel'; import styles from '../styles/styles'; import * as StyleUtils from '../styles/StyleUtils'; import * as FileUtils from '../libs/fileDownload/FileUtils'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import compose from '../libs/compose'; import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; import Button from './Button'; diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js index d880ac9b9076..7cf77c08e5e2 100755 --- a/src/components/AttachmentView.js +++ b/src/components/AttachmentView.js @@ -12,7 +12,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize'; import compose from '../libs/compose'; import Text from './Text'; import Tooltip from './Tooltip'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import variables from '../styles/variables'; import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL'; import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; diff --git a/src/components/Avatar.js b/src/components/Avatar.js index 8dcf7f08c1d1..f4502ddb6a03 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import _ from 'underscore'; import stylePropTypes from '../styles/stylePropTypes'; import Icon from './Icon'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import CONST from '../CONST'; import * as StyleUtils from '../styles/StyleUtils'; import * as Expensicons from './Icon/Expensicons'; diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js index 99262bf12938..f0e7b4ed74be 100644 --- a/src/components/AvatarCropModal/AvatarCropModal.js +++ b/src/components/AvatarCropModal/AvatarCropModal.js @@ -6,7 +6,7 @@ import {runOnUI, interpolate, useAnimatedGestureHandler, useSharedValue, useWork import CONST from '../../CONST'; import compose from '../../libs/compose'; import styles from '../../styles/styles'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import Button from '../Button'; import HeaderWithBackButton from '../HeaderWithBackButton'; import Icon from '../Icon'; diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js index 0f1300ebf03d..52ae459bca7a 100644 --- a/src/components/AvatarWithDisplayName.js +++ b/src/components/AvatarWithDisplayName.js @@ -8,7 +8,7 @@ import participantPropTypes from './participantPropTypes'; import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import SubscriptAvatar from './SubscriptAvatar'; import * as ReportUtils from '../libs/ReportUtils'; import MultipleAvatars from './MultipleAvatars'; diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index fcbfe4f4c4c4..8452afcc0616 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -8,7 +8,7 @@ import Icon from './Icon'; import PopoverMenu from './PopoverMenu'; import * as Expensicons from './Icon/Expensicons'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import AttachmentPicker from './AttachmentPicker'; import AvatarCropModal from './AvatarCropModal/AvatarCropModal'; import OfflineWithFeedback from './OfflineWithFeedback'; diff --git a/src/components/BlockingViews/BlockingView.js b/src/components/BlockingViews/BlockingView.js index d02fa55a6434..a4af9754bbe5 100644 --- a/src/components/BlockingViews/BlockingView.js +++ b/src/components/BlockingViews/BlockingView.js @@ -5,7 +5,7 @@ import styles from '../../styles/styles'; import variables from '../../styles/variables'; import Icon from '../Icon'; import Text from '../Text'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import TextLink from '../TextLink'; import Navigation from '../../libs/Navigation/Navigation'; import AutoEmailLink from '../AutoEmailLink'; diff --git a/src/components/Button/index.js b/src/components/Button/index.js index a850a43d2fb0..03e98b56d5c6 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -2,7 +2,7 @@ import React, {Component} from 'react'; import {ActivityIndicator, View} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../styles/styles'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import Text from '../Text'; import KeyboardShortcut from '../../libs/KeyboardShortcut'; import Icon from '../Icon'; diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js index 1396ab601330..eb1729a45614 100644 --- a/src/components/ButtonWithDropdownMenu.js +++ b/src/components/ButtonWithDropdownMenu.js @@ -8,7 +8,7 @@ import Button from './Button'; import PopoverMenu from './PopoverMenu'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import CONST from '../CONST'; const propTypes = { diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index 86b6e05d5ed7..6150e5134e19 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -2,7 +2,7 @@ import React from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import stylePropTypes from '../styles/stylePropTypes'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; diff --git a/src/components/Composer/index.android.js b/src/components/Composer/index.android.js index d0805cbcc7c3..c252d3dcfa62 100644 --- a/src/components/Composer/index.android.js +++ b/src/components/Composer/index.android.js @@ -3,7 +3,7 @@ import {StyleSheet} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; import RNTextInput from '../RNTextInput'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import * as ComposerUtils from '../../libs/ComposerUtils'; const propTypes = { diff --git a/src/components/Composer/index.ios.js b/src/components/Composer/index.ios.js index c0a3859e6d01..a0e372403310 100644 --- a/src/components/Composer/index.ios.js +++ b/src/components/Composer/index.ios.js @@ -3,7 +3,7 @@ import {StyleSheet} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; import RNTextInput from '../RNTextInput'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import * as ComposerUtils from '../../libs/ComposerUtils'; const propTypes = { diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js index d32246529b6c..4b8144745119 100755 --- a/src/components/Composer/index.js +++ b/src/components/Composer/index.js @@ -6,7 +6,7 @@ import ExpensiMark from 'expensify-common/lib/ExpensiMark'; import RNTextInput from '../RNTextInput'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import Growl from '../../libs/Growl'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import updateIsFullComposerAvailable from '../../libs/ComposerUtils/updateIsFullComposerAvailable'; import * as ComposerUtils from '../../libs/ComposerUtils'; import * as Browser from '../../libs/Browser'; diff --git a/src/components/CurrentUserPersonalDetailsSkeletonView/index.js b/src/components/CurrentUserPersonalDetailsSkeletonView/index.js index 6e6c46e971c0..8e63be848e91 100644 --- a/src/components/CurrentUserPersonalDetailsSkeletonView/index.js +++ b/src/components/CurrentUserPersonalDetailsSkeletonView/index.js @@ -5,7 +5,7 @@ import {Circle, Rect} from 'react-native-svg'; import {View} from 'react-native'; import * as StyleUtils from '../../styles/StyleUtils'; import CONST from '../../CONST'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import variables from '../../styles/variables'; import styles from '../../styles/styles'; diff --git a/src/components/CustomStatusBar/index.js b/src/components/CustomStatusBar/index.js index 76752cb549e1..4f77691046bd 100644 --- a/src/components/CustomStatusBar/index.js +++ b/src/components/CustomStatusBar/index.js @@ -1,6 +1,6 @@ import React, {useEffect} from 'react'; import StatusBar from '../../libs/StatusBar'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; function CustomStatusBar() { useEffect(() => { diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index 5d87636a9365..410376a387dd 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -10,7 +10,7 @@ import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import Popover from '../Popover'; import CONST from '../../CONST'; import styles from '../../styles/styles'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import {propTypes, defaultProps} from './datepickerPropTypes'; import withKeyboardState, {keyboardStatePropTypes} from '../withKeyboardState'; diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js index a7658ae0542d..ac7f1991ec6a 100644 --- a/src/components/EmojiPicker/CategoryShortcutButton.js +++ b/src/components/EmojiPicker/CategoryShortcutButton.js @@ -7,7 +7,7 @@ import variables from '../../styles/variables'; import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; import getButtonState from '../../libs/getButtonState'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; import CONST from '../../CONST'; diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.js index dde792e87e22..25ff571a7c01 100644 --- a/src/components/ExpensifyWordmark.js +++ b/src/components/ExpensifyWordmark.js @@ -8,7 +8,7 @@ import StagingLogo from '../../assets/images/expensify-logo--staging.svg'; import AdHocLogo from '../../assets/images/expensify-logo--adhoc.svg'; import CONST from '../CONST'; import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import styles from '../styles/styles'; import * as StyleUtils from '../styles/StyleUtils'; import variables from '../styles/variables'; diff --git a/src/components/FloatingActionButton.js b/src/components/FloatingActionButton.js index 706bad59f7b7..4a2db6e2bcfb 100644 --- a/src/components/FloatingActionButton.js +++ b/src/components/FloatingActionButton.js @@ -5,7 +5,7 @@ import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import styles from '../styles/styles'; import * as StyleUtils from '../styles/StyleUtils'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import Tooltip from './Tooltip'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; diff --git a/src/components/FullscreenLoadingIndicator.js b/src/components/FullscreenLoadingIndicator.js index 5c212b6dc29e..96c1246f33c5 100644 --- a/src/components/FullscreenLoadingIndicator.js +++ b/src/components/FullscreenLoadingIndicator.js @@ -2,7 +2,7 @@ import _ from 'underscore'; import React from 'react'; import {ActivityIndicator, StyleSheet, View} from 'react-native'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import stylePropTypes from '../styles/stylePropTypes'; const propTypes = { diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js index 70cadd5efd8e..750063847ead 100644 --- a/src/components/GrowlNotification/index.js +++ b/src/components/GrowlNotification/index.js @@ -1,7 +1,7 @@ import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; import {Directions, FlingGestureHandler, State} from 'react-native-gesture-handler'; import {View, Animated} from 'react-native'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import Text from '../Text'; import Icon from '../Icon'; import * as Expensicons from '../Icon/Expensicons'; diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js index d91510c3ec6a..3f5ff9a72dc2 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js @@ -4,7 +4,7 @@ import htmlRendererPropTypes from './htmlRendererPropTypes'; import withLocalize, {withLocalizePropTypes} from '../../withLocalize'; import Text from '../../Text'; import variables from '../../../styles/variables'; -import themeColors from '../../../styles/themes/default'; +import themeColors from '../../../styles/themes/dark'; import styles from '../../../styles/styles'; import editedLabelStyles from '../../../styles/editedLabelStyles'; diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index 8c6559451215..044baee944b3 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -2,7 +2,7 @@ import React, {PureComponent} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../styles/styles'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import variables from '../../styles/variables'; import * as StyleUtils from '../../styles/StyleUtils'; import IconWrapperStyles from './IconWrapperStyles'; diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js index 7fc340426d69..d1563c500671 100644 --- a/src/components/IllustratedHeaderPageLayout.js +++ b/src/components/IllustratedHeaderPageLayout.js @@ -7,7 +7,7 @@ import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBack import HeaderWithBackButton from './HeaderWithBackButton'; import ScreenWrapper from './ScreenWrapper'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import * as StyleUtils from '../styles/StyleUtils'; import useWindowDimensions from '../hooks/useWindowDimensions'; import FixedFooter from './FixedFooter'; diff --git a/src/components/Indicator.js b/src/components/Indicator.js index 765d79e156af..cd66de22f57d 100644 --- a/src/components/Indicator.js +++ b/src/components/Indicator.js @@ -15,7 +15,7 @@ import * as PolicyUtils from '../libs/PolicyUtils'; import * as PaymentMethods from '../libs/actions/PaymentMethods'; import * as ReimbursementAccountProps from '../pages/ReimbursementAccount/reimbursementAccountPropTypes'; import * as UserUtils from '../libs/UserUtils'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; const propTypes = { /* Onyx Props */ diff --git a/src/components/InlineSystemMessage.js b/src/components/InlineSystemMessage.js index a6866fb5a887..ea21c5f65352 100644 --- a/src/components/InlineSystemMessage.js +++ b/src/components/InlineSystemMessage.js @@ -2,7 +2,7 @@ import React from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../styles/styles'; -import theme from '../styles/themes/default'; +import theme from '../styles/themes/dark'; import Text from './Text'; import * as Expensicons from './Icon/Expensicons'; import Icon from './Icon'; diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index e17cf71e5d06..51045cd8876f 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -14,7 +14,7 @@ import colors from '../../styles/colors'; import Text from '../Text'; import SubscriptAvatar from '../SubscriptAvatar'; import CONST from '../../CONST'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import OfflineWithFeedback from '../OfflineWithFeedback'; import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteraction'; import * as ReportActionContextMenu from '../../pages/home/report/ContextMenu/ReportActionContextMenu'; diff --git a/src/components/LocalePicker.js b/src/components/LocalePicker.js index 532c29535e50..af191080a4ca 100644 --- a/src/components/LocalePicker.js +++ b/src/components/LocalePicker.js @@ -9,7 +9,7 @@ import ONYXKEYS from '../ONYXKEYS'; import CONST from '../CONST'; import Picker from './Picker'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; const propTypes = { /** Indicates which locale the user currently has selected */ diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index c280a75a8ef3..b470b11171f8 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -3,7 +3,7 @@ import React from 'react'; import {View} from 'react-native'; import Text from './Text'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import * as StyleUtils from '../styles/StyleUtils'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js index 6d5bd5390416..a9116faa3460 100644 --- a/src/components/Modal/BaseModal.js +++ b/src/components/Modal/BaseModal.js @@ -5,7 +5,7 @@ import ReactNativeModal from 'react-native-modal'; import {SafeAreaInsetsContext} from 'react-native-safe-area-context'; import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import {propTypes as modalPropTypes, defaultProps as modalDefaultProps} from './modalPropTypes'; import * as Modal from '../../libs/actions/Modal'; import getModalStyles from '../../styles/getModalStyles'; diff --git a/src/components/Modal/index.web.js b/src/components/Modal/index.web.js index 065b3a9f210f..8fc5a4ee22fe 100644 --- a/src/components/Modal/index.web.js +++ b/src/components/Modal/index.web.js @@ -3,7 +3,7 @@ import withWindowDimensions from '../withWindowDimensions'; import BaseModal from './BaseModal'; import {propTypes, defaultProps} from './modalPropTypes'; import * as StyleUtils from '../../styles/StyleUtils'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import StatusBar from '../../libs/StatusBar'; import CONST from '../../CONST'; diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index e421dae4e37e..76620c7a0863 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -23,7 +23,7 @@ import optionPropTypes from './optionPropTypes'; import * as CurrencyUtils from '../libs/CurrencyUtils'; import Button from './Button'; import * as Expensicons from './Icon/Expensicons'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import Image from './Image'; import ReceiptHTML from '../../assets/images/receipt-html.png'; import ReceiptDoc from '../../assets/images/receipt-doc.png'; diff --git a/src/components/MoneyRequestDetails.js b/src/components/MoneyRequestDetails.js index a690c31c000c..fe6d7afdfe7a 100644 --- a/src/components/MoneyRequestDetails.js +++ b/src/components/MoneyRequestDetails.js @@ -11,7 +11,7 @@ import Text from './Text'; import participantPropTypes from './participantPropTypes'; import Avatar from './Avatar'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import CONST from '../CONST'; import withWindowDimensions from './withWindowDimensions'; import compose from '../libs/compose'; diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index ceb1c5371c7e..c89613c90e19 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -6,7 +6,7 @@ import styles from '../styles/styles'; import Avatar from './Avatar'; import Tooltip from './Tooltip'; import Text from './Text'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import * as StyleUtils from '../styles/StyleUtils'; import CONST from '../CONST'; import variables from '../styles/variables'; diff --git a/src/components/Onfido/BaseOnfidoWeb.js b/src/components/Onfido/BaseOnfidoWeb.js index 394996331d5e..54fb2abba2bf 100644 --- a/src/components/Onfido/BaseOnfidoWeb.js +++ b/src/components/Onfido/BaseOnfidoWeb.js @@ -6,7 +6,7 @@ import * as OnfidoSDK from 'onfido-sdk-ui'; import onfidoPropTypes from './onfidoPropTypes'; import CONST from '../../CONST'; import variables from '../../styles/variables'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import fontWeightBold from '../../styles/fontWeight/bold'; import fontFamily from '../../styles/fontFamily'; import Log from '../../libs/Log'; diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index adaa4457bbd9..d341710945d7 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -11,7 +11,7 @@ import * as Expensicons from './Icon/Expensicons'; import MultipleAvatars from './MultipleAvatars'; import Hoverable from './Hoverable'; import DisplayNames from './DisplayNames'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import Text from './Text'; import SelectCircle from './SelectCircle'; diff --git a/src/components/OptionsListSkeletonView.js b/src/components/OptionsListSkeletonView.js index 15c66affe84d..1cf6a97f8c97 100644 --- a/src/components/OptionsListSkeletonView.js +++ b/src/components/OptionsListSkeletonView.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import {Rect, Circle} from 'react-native-svg'; import SkeletonViewContentLoader from 'react-content-loader/native'; import CONST from '../CONST'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import styles from '../styles/styles'; const propTypes = { diff --git a/src/components/Picker/BasePicker.js b/src/components/Picker/BasePicker.js index 173b863edfcc..c64aad3d0c1a 100644 --- a/src/components/Picker/BasePicker.js +++ b/src/components/Picker/BasePicker.js @@ -8,7 +8,7 @@ import * as Expensicons from '../Icon/Expensicons'; import FormHelpMessage from '../FormHelpMessage'; import Text from '../Text'; import styles from '../../styles/styles'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import {ScrollContext} from '../ScrollViewWithContext'; const propTypes = { diff --git a/src/components/PinButton.js b/src/components/PinButton.js index 84ad6e22f50b..2074996cfb7b 100644 --- a/src/components/PinButton.js +++ b/src/components/PinButton.js @@ -1,6 +1,6 @@ import React from 'react'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import Icon from './Icon'; import Tooltip from './Tooltip'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; diff --git a/src/components/QRCode/index.js b/src/components/QRCode/index.js index f27cf28066ef..7bc0829d399d 100644 --- a/src/components/QRCode/index.js +++ b/src/components/QRCode/index.js @@ -1,7 +1,7 @@ import React from 'react'; import QRCodeLibrary from 'react-native-qrcode-svg'; import PropTypes from 'prop-types'; -import defaultTheme from '../../styles/themes/default'; +import defaultTheme from '../../styles/themes/dark'; import CONST from '../../CONST'; const propTypes = { diff --git a/src/components/QRShare/index.js b/src/components/QRShare/index.js index d96024ad1046..580151554d63 100644 --- a/src/components/QRShare/index.js +++ b/src/components/QRShare/index.js @@ -2,7 +2,7 @@ import React, {Component} from 'react'; import {View} from 'react-native'; import _ from 'underscore'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; -import defaultTheme from '../../styles/themes/default'; +import defaultTheme from '../../styles/themes/dark'; import styles from '../../styles/styles'; import Text from '../Text'; import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js index 85a0b22ac327..fe207476627b 100644 --- a/src/components/ReportActionItem/IOUPreview.js +++ b/src/components/ReportActionItem/IOUPreview.js @@ -10,7 +10,7 @@ import ONYXKEYS from '../../ONYXKEYS'; import MultipleAvatars from '../MultipleAvatars'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import * as Report from '../../libs/actions/Report'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import Icon from '../Icon'; import CONST from '../../CONST'; import * as Expensicons from '../Icon/Expensicons'; diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js index d5d85df5e7ee..89b7616d081a 100644 --- a/src/components/ReportActionItem/ReportPreview.js +++ b/src/components/ReportActionItem/ReportPreview.js @@ -23,7 +23,7 @@ import SettlementButton from '../SettlementButton'; import * as IOU from '../../libs/actions/IOU'; import refPropTypes from '../refPropTypes'; import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import reportPropTypes from '../../pages/reportPropTypes'; const propTypes = { diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js index ddaa46e0b731..f8dcaf4de34c 100644 --- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js +++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import {Rect, Circle} from 'react-native-svg'; import SkeletonViewContentLoader from 'react-content-loader/native'; import CONST from '../../CONST'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import styles from '../../styles/styles'; const propTypes = { diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js index 5f2d5379419d..c6e712417577 100644 --- a/src/components/ReportHeaderSkeletonView.js +++ b/src/components/ReportHeaderSkeletonView.js @@ -8,7 +8,7 @@ import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; import variables from '../styles/variables'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; import compose from '../libs/compose'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js index 6f78e6ace66d..cb18973e287c 100644 --- a/src/components/RoomHeaderAvatars.js +++ b/src/components/RoomHeaderAvatars.js @@ -6,7 +6,7 @@ import styles from '../styles/styles'; import Text from './Text'; import CONST from '../CONST'; import Avatar from './Avatar'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import * as StyleUtils from '../styles/StyleUtils'; import avatarPropTypes from './avatarPropTypes'; diff --git a/src/components/SelectCircle.js b/src/components/SelectCircle.js index 93cf285eab59..60e449479d11 100644 --- a/src/components/SelectCircle.js +++ b/src/components/SelectCircle.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import styles from '../styles/styles'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; const propTypes = { /** Should we show the checkmark inside the circle */ diff --git a/src/components/SelectionListRadio/RadioListItem.js b/src/components/SelectionListRadio/RadioListItem.js index c5c4b3aeaf2c..41928c50e05d 100644 --- a/src/components/SelectionListRadio/RadioListItem.js +++ b/src/components/SelectionListRadio/RadioListItem.js @@ -6,7 +6,7 @@ import styles from '../../styles/styles'; import Text from '../Text'; import Icon from '../Icon'; import * as Expensicons from '../Icon/Expensicons'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import {radioListItemPropTypes} from './selectionListRadioPropTypes'; const propTypes = { diff --git a/src/components/SubscriptAvatar.js b/src/components/SubscriptAvatar.js index 05202e720bd4..5ca496025f1f 100644 --- a/src/components/SubscriptAvatar.js +++ b/src/components/SubscriptAvatar.js @@ -4,7 +4,7 @@ import {View} from 'react-native'; import _ from 'underscore'; import lodashGet from 'lodash/get'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import Avatar from './Avatar'; import CONST from '../CONST'; import * as StyleUtils from '../styles/StyleUtils'; diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js index cea59bc2ee65..f96d9f2d621e 100644 --- a/src/components/TabSelector/TabSelectorItem.js +++ b/src/components/TabSelector/TabSelectorItem.js @@ -2,7 +2,7 @@ import {Text} from 'react-native'; import React from 'react'; import PropTypes from 'prop-types'; import Icon from '../Icon'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import styles from '../../styles/styles'; import PressableWithFeedback from '../Pressable/PressableWithFeedback'; diff --git a/src/components/Text.js b/src/components/Text.js index 83b6be8fffb0..3c44183cd17b 100644 --- a/src/components/Text.js +++ b/src/components/Text.js @@ -4,7 +4,7 @@ import _ from 'underscore'; // eslint-disable-next-line no-restricted-imports import {Text as RNText} from 'react-native'; import fontFamily from '../styles/fontFamily'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import variables from '../styles/variables'; const propTypes = { diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index 68c09e3a7f82..b075672d492e 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -5,7 +5,7 @@ import Str from 'expensify-common/lib/str'; import RNTextInput from '../RNTextInput'; import TextInputLabel from './TextInputLabel'; import * as baseTextInputPropTypes from './baseTextInputPropTypes'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import styles from '../../styles/styles'; import Icon from '../Icon'; import * as Expensicons from '../Icon/Expensicons'; diff --git a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js index 4c0e2b551382..23ad19f53d37 100755 --- a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js +++ b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js @@ -10,7 +10,7 @@ import ZoomIcon from '../../../assets/images/zoom-icon.svg'; import GoogleMeetIcon from '../../../assets/images/google-meet.svg'; import CONST from '../../CONST'; import styles from '../../styles/styles'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import compose from '../../libs/compose'; diff --git a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js index 2f9a899191bf..bc6ba2cfb3cd 100644 --- a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js +++ b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js @@ -3,7 +3,7 @@ import _ from 'underscore'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import SCREENS from '../../../../SCREENS'; -import themeColors from '../../../../styles/themes/default'; +import themeColors from '../../../../styles/themes/dark'; import NAVIGATORS from '../../../../NAVIGATORS'; import * as StyleUtils from '../../../../styles/StyleUtils'; import {withNavigationPropTypes} from '../../../../components/withNavigation'; diff --git a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js index d2de1ba23a01..63aca125dc27 100644 --- a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js +++ b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js @@ -1,7 +1,7 @@ import {Animated} from 'react-native'; import variables from '../../../styles/variables'; import getCardStyles from '../../../styles/cardStyles'; -import themeColors from '../../../styles/themes/default'; +import themeColors from '../../../styles/themes/dark'; export default (isSmallScreenWidth, isFullScreenModal, {current: {progress}, inverted, layouts: {screen}}) => { const translateX = Animated.multiply( diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js index 23c320eb991c..c22c459b54ab 100644 --- a/src/libs/Navigation/NavigationRoot.js +++ b/src/libs/Navigation/NavigationRoot.js @@ -6,7 +6,7 @@ import {useSharedValue, useAnimatedReaction, interpolateColor, withTiming, withD import Navigation, {navigationRef} from './Navigation'; import linkingConfig from './linkingConfig'; import AppNavigator from './AppNavigator'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import Log from '../Log'; import StatusBar from '../StatusBar'; import useCurrentReportID from '../../hooks/useCurrentReportID'; diff --git a/src/pages/ErrorPage/GenericErrorPage.js b/src/pages/ErrorPage/GenericErrorPage.js index 3ff3bc686419..05dddf273547 100644 --- a/src/pages/ErrorPage/GenericErrorPage.js +++ b/src/pages/ErrorPage/GenericErrorPage.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {View} from 'react-native'; import Icon from '../../components/Icon'; -import defaultTheme from '../../styles/themes/default'; +import defaultTheme from '../../styles/themes/dark'; import * as Expensicons from '../../components/Icon/Expensicons'; import Text from '../../components/Text'; import Button from '../../components/Button'; diff --git a/src/pages/home/report/FloatingMessageCounter/index.js b/src/pages/home/report/FloatingMessageCounter/index.js index 73fe02df129b..4178502a1368 100644 --- a/src/pages/home/report/FloatingMessageCounter/index.js +++ b/src/pages/home/report/FloatingMessageCounter/index.js @@ -6,7 +6,7 @@ import Button from '../../../../components/Button'; import Text from '../../../../components/Text'; import Icon from '../../../../components/Icon'; import * as Expensicons from '../../../../components/Icon/Expensicons'; -import themeColors from '../../../../styles/themes/default'; +import themeColors from '../../../../styles/themes/dark'; import useLocalize from '../../../../hooks/useLocalize'; import FloatingMessageCounterContainer from './FloatingMessageCounterContainer'; diff --git a/src/pages/home/report/LinkPreviewer.js b/src/pages/home/report/LinkPreviewer.js index 4fcbb0dc0569..3859299ea1a7 100644 --- a/src/pages/home/report/LinkPreviewer.js +++ b/src/pages/home/report/LinkPreviewer.js @@ -8,7 +8,7 @@ import TextLink from '../../../components/TextLink'; import * as StyleUtils from '../../../styles/StyleUtils'; import styles from '../../../styles/styles'; import variables from '../../../styles/variables'; -import themeColors from '../../../styles/themes/default'; +import themeColors from '../../../styles/themes/dark'; const IMAGE_TYPES = ['jpg', 'jpeg', 'png']; const MAX_IMAGE_HEIGHT = 180; diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 1146e3b382f5..e8d26edb40e5 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -7,7 +7,7 @@ import _ from 'underscore'; import lodashGet from 'lodash/get'; import {withOnyx} from 'react-native-onyx'; import styles from '../../../styles/styles'; -import themeColors from '../../../styles/themes/default'; +import themeColors from '../../../styles/themes/dark'; import Composer from '../../../components/Composer'; import ONYXKEYS from '../../../ONYXKEYS'; import Icon from '../../../components/Icon'; diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index 009c1118400b..6863e75ab894 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.js @@ -5,7 +5,7 @@ import Str from 'expensify-common/lib/str'; import reportActionFragmentPropTypes from './reportActionFragmentPropTypes'; import styles from '../../../styles/styles'; import variables from '../../../styles/variables'; -import themeColors from '../../../styles/themes/default'; +import themeColors from '../../../styles/themes/dark'; import RenderHTML from '../../../components/RenderHTML'; import Text from '../../../components/Text'; import * as EmojiUtils from '../../../libs/EmojiUtils'; diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 54c5fec4533e..5c7e71d0a877 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -7,7 +7,7 @@ import ExpensiMark from 'expensify-common/lib/ExpensiMark'; import Str from 'expensify-common/lib/str'; import reportActionPropTypes from './reportActionPropTypes'; import styles from '../../../styles/styles'; -import themeColors from '../../../styles/themes/default'; +import themeColors from '../../../styles/themes/dark'; import * as StyleUtils from '../../../styles/StyleUtils'; import containerComposeStyles from '../../../styles/containerComposeStyles'; import Composer from '../../../components/Composer'; diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 132b767a7f70..dc917b1f6c6a 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -24,7 +24,7 @@ import LHNOptionsList from '../../../components/LHNOptionsList/LHNOptionsList'; import SidebarUtils from '../../../libs/SidebarUtils'; import OfflineWithFeedback from '../../../components/OfflineWithFeedback'; import Header from '../../../components/Header'; -import defaultTheme from '../../../styles/themes/default'; +import defaultTheme from '../../../styles/themes/dark'; import OptionsListSkeletonView from '../../../components/OptionsListSkeletonView'; import variables from '../../../styles/variables'; import LogoComponent from '../../../../assets/images/expensify-wordmark.svg'; diff --git a/src/pages/home/sidebar/SidebarScreen/index.js b/src/pages/home/sidebar/SidebarScreen/index.js index 705d9d1e2d08..20f7e7098f1c 100755 --- a/src/pages/home/sidebar/SidebarScreen/index.js +++ b/src/pages/home/sidebar/SidebarScreen/index.js @@ -7,7 +7,7 @@ import FloatingActionButtonAndPopover from './FloatingActionButtonAndPopover'; import FreezeWrapper from '../../../../libs/Navigation/FreezeWrapper'; import withWindowDimensions from '../../../../components/withWindowDimensions'; import StatusBar from '../../../../libs/StatusBar'; -import themeColors from '../../../../styles/themes/default'; +import themeColors from '../../../../styles/themes/dark'; function SidebarScreen(props) { const popoverModal = useRef(null); diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js index 44a7fba5d487..b46919127fb3 100644 --- a/src/pages/iou/IOUCurrencySelection.js +++ b/src/pages/iou/IOUCurrencySelection.js @@ -15,7 +15,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize import {withNetwork} from '../../components/OnyxProvider'; import * as CurrencyUtils from '../../libs/CurrencyUtils'; import ROUTES from '../../ROUTES'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import * as Expensicons from '../../components/Icon/Expensicons'; import reportPropTypes from '../reportPropTypes'; import * as ReportUtils from '../../libs/ReportUtils'; diff --git a/src/pages/iou/ReceiptSelector/index.native.js b/src/pages/iou/ReceiptSelector/index.native.js index 7eeab6e493bd..06f692fa1b33 100644 --- a/src/pages/iou/ReceiptSelector/index.native.js +++ b/src/pages/iou/ReceiptSelector/index.native.js @@ -13,7 +13,7 @@ import styles from '../../../styles/styles'; import Shutter from '../../../../assets/images/shutter.svg'; import Hand from '../../../../assets/images/hand.svg'; import * as IOU from '../../../libs/actions/IOU'; -import themeColors from '../../../styles/themes/default'; +import themeColors from '../../../styles/themes/dark'; import reportPropTypes from '../../reportPropTypes'; import CONST from '../../../CONST'; import Button from '../../../components/Button'; diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index 346738574da3..c2690e27dd55 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -28,7 +28,7 @@ import * as PaymentUtils from '../../../../libs/PaymentUtils'; import OfflineWithFeedback from '../../../../components/OfflineWithFeedback'; import ConfirmContent from '../../../../components/ConfirmContent'; import Button from '../../../../components/Button'; -import themeColors from '../../../../styles/themes/default'; +import themeColors from '../../../../styles/themes/dark'; import variables from '../../../../styles/variables'; import useLocalize from '../../../../hooks/useLocalize'; import useWindowDimensions from '../../../../hooks/useWindowDimensions'; diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js index b8bb74295567..e91fcdacaf0e 100755 --- a/src/pages/settings/Preferences/PreferencesPage.js +++ b/src/pages/settings/Preferences/PreferencesPage.js @@ -7,7 +7,7 @@ import Navigation from '../../../libs/Navigation/Navigation'; import ROUTES from '../../../ROUTES'; import ONYXKEYS from '../../../ONYXKEYS'; import styles from '../../../styles/styles'; -import themeColors from '../../../styles/themes/default'; +import themeColors from '../../../styles/themes/dark'; import Text from '../../../components/Text'; import CONST from '../../../CONST'; import * as User from '../../../libs/actions/User'; diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js index 2289e68e7bd1..dd6f5cf90c4a 100644 --- a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js +++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js @@ -21,7 +21,7 @@ import ConfirmModal from '../../../../components/ConfirmModal'; import * as User from '../../../../libs/actions/User'; import CONST from '../../../../CONST'; import * as ErrorUtils from '../../../../libs/ErrorUtils'; -import themeColors from '../../../../styles/themes/default'; +import themeColors from '../../../../styles/themes/dark'; import NotFoundPage from '../../../ErrorPage/NotFoundPage'; import ValidateCodeForm from './ValidateCodeForm'; import ROUTES from '../../../../ROUTES'; diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js index ea81413fcbb5..6cf47d37e3af 100644 --- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js @@ -20,7 +20,7 @@ import shouldDelayFocus from '../../../../../libs/shouldDelayFocus'; import Text from '../../../../../components/Text'; import {withNetwork} from '../../../../../components/OnyxProvider'; import PressableWithFeedback from '../../../../../components/Pressable/PressableWithFeedback'; -import themeColors from '../../../../../styles/themes/default'; +import themeColors from '../../../../../styles/themes/dark'; import * as StyleUtils from '../../../../../styles/StyleUtils'; import CONST from '../../../../../CONST'; diff --git a/src/pages/settings/Report/NotificationPreferencePage.js b/src/pages/settings/Report/NotificationPreferencePage.js index 9765cf1ae0b4..6b625f3e13b9 100644 --- a/src/pages/settings/Report/NotificationPreferencePage.js +++ b/src/pages/settings/Report/NotificationPreferencePage.js @@ -14,7 +14,7 @@ import ROUTES from '../../../ROUTES'; import * as Report from '../../../libs/actions/Report'; import * as ReportUtils from '../../../libs/ReportUtils'; import * as Expensicons from '../../../components/Icon/Expensicons'; -import themeColors from '../../../styles/themes/default'; +import themeColors from '../../../styles/themes/dark'; const propTypes = { ...withLocalizePropTypes, diff --git a/src/pages/settings/Report/WriteCapabilityPage.js b/src/pages/settings/Report/WriteCapabilityPage.js index 59ad90a2cd1f..5e1d1192824b 100644 --- a/src/pages/settings/Report/WriteCapabilityPage.js +++ b/src/pages/settings/Report/WriteCapabilityPage.js @@ -15,7 +15,7 @@ import reportPropTypes from '../../reportPropTypes'; import ROUTES from '../../../ROUTES'; import * as Report from '../../../libs/actions/Report'; import * as Expensicons from '../../../components/Icon/Expensicons'; -import themeColors from '../../../styles/themes/default'; +import themeColors from '../../../styles/themes/dark'; import * as ReportUtils from '../../../libs/ReportUtils'; import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView'; import * as PolicyUtils from '../../../libs/PolicyUtils'; diff --git a/src/pages/settings/Security/TwoFactorAuth/CodesPage.js b/src/pages/settings/Security/TwoFactorAuth/CodesPage.js index 6780080ff382..8e2b0cff5b69 100644 --- a/src/pages/settings/Security/TwoFactorAuth/CodesPage.js +++ b/src/pages/settings/Security/TwoFactorAuth/CodesPage.js @@ -22,7 +22,7 @@ import Text from '../../../../components/Text'; import Section from '../../../../components/Section'; import ONYXKEYS from '../../../../ONYXKEYS'; import Clipboard from '../../../../libs/Clipboard'; -import themeColors from '../../../../styles/themes/default'; +import themeColors from '../../../../styles/themes/dark'; import localFileDownload from '../../../../libs/localFileDownload'; import * as TwoFactorAuthActions from '../../../../libs/actions/TwoFactorAuthActions'; diff --git a/src/pages/settings/Security/TwoFactorAuth/IsEnabledPage.js b/src/pages/settings/Security/TwoFactorAuth/IsEnabledPage.js index 4d49edac1fe4..b5bc98005170 100644 --- a/src/pages/settings/Security/TwoFactorAuth/IsEnabledPage.js +++ b/src/pages/settings/Security/TwoFactorAuth/IsEnabledPage.js @@ -9,7 +9,7 @@ import ROUTES from '../../../../ROUTES'; import Section from '../../../../components/Section'; import * as Illustrations from '../../../../components/Icon/Illustrations'; import * as Expensicons from '../../../../components/Icon/Expensicons'; -import themeColors from '../../../../styles/themes/default'; +import themeColors from '../../../../styles/themes/dark'; import styles from '../../../../styles/styles'; import ConfirmModal from '../../../../components/ConfirmModal'; import FullPageOfflineBlockingView from '../../../../components/BlockingViews/FullPageOfflineBlockingView'; diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js index 35e63b0699b3..0cb5a8dd45b3 100644 --- a/src/pages/signin/SignInPageLayout/Footer.js +++ b/src/pages/signin/SignInPageLayout/Footer.js @@ -5,7 +5,7 @@ import _ from 'underscore'; import Text from '../../../components/Text'; import styles from '../../../styles/styles'; import * as StyleUtils from '../../../styles/StyleUtils'; -import themeColors from '../../../styles/themes/default'; +import themeColors from '../../../styles/themes/dark'; import variables from '../../../styles/variables'; import * as Expensicons from '../../../components/Icon/Expensicons'; import TextLink from '../../../components/TextLink'; diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js index 7acd08a6c693..9f73b828c5e9 100644 --- a/src/pages/signin/SignInPageLayout/index.js +++ b/src/pages/signin/SignInPageLayout/index.js @@ -11,7 +11,7 @@ import styles from '../../../styles/styles'; import SignInPageHero from '../SignInPageHero'; import * as StyleUtils from '../../../styles/StyleUtils'; import scrollViewContentContainerStyles from './signInPageStyles'; -import themeColors from '../../../styles/themes/default'; +import themeColors from '../../../styles/themes/dark'; import BackgroundImage from './BackgroundImage'; import SignInGradient from '../../../../assets/images/home-fade-gradient.svg'; import variables from '../../../styles/variables'; diff --git a/src/pages/signin/Socials.js b/src/pages/signin/Socials.js index f7a866d2023b..be6305cf1bc6 100644 --- a/src/pages/signin/Socials.js +++ b/src/pages/signin/Socials.js @@ -5,7 +5,7 @@ import * as Link from '../../libs/actions/Link'; import Icon from '../../components/Icon'; import PressableWithoutFeedback from '../../components/Pressable/PressableWithoutFeedback'; import * as Expensicons from '../../components/Icon/Expensicons'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import styles from '../../styles/styles'; import variables from '../../styles/variables'; import CONST from '../../CONST'; diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index a68f99df6d24..e0ccdca636ab 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js @@ -7,7 +7,7 @@ import lodashGet from 'lodash/get'; import styles from '../../../styles/styles'; import Button from '../../../components/Button'; import Text from '../../../components/Text'; -import themeColors from '../../../styles/themes/default'; +import themeColors from '../../../styles/themes/dark'; import * as Session from '../../../libs/actions/Session'; import ONYXKEYS from '../../../ONYXKEYS'; import CONST from '../../../CONST'; diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js index 98ef04836f76..6073836c6e9a 100755 --- a/src/pages/workspace/WorkspacesListPage.js +++ b/src/pages/workspace/WorkspacesListPage.js @@ -10,7 +10,7 @@ import styles from '../../styles/styles'; import compose from '../../libs/compose'; import OfflineWithFeedback from '../../components/OfflineWithFeedback'; import * as Expensicons from '../../components/Icon/Expensicons'; -import themeColors from '../../styles/themes/default'; +import themeColors from '../../styles/themes/dark'; import * as PolicyUtils from '../../libs/PolicyUtils'; import MenuItem from '../../components/MenuItem'; import * as Policy from '../../libs/actions/Policy'; diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js index eb8305f23140..8f48fc216bfd 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js +++ b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js @@ -5,7 +5,7 @@ import lodashGet from 'lodash/get'; import _ from 'underscore'; import Text from '../../../components/Text'; import styles from '../../../styles/styles'; -import themeColors from '../../../styles/themes/default'; +import themeColors from '../../../styles/themes/dark'; import * as Expensicons from '../../../components/Icon/Expensicons'; import * as Illustrations from '../../../components/Icon/Illustrations'; import Section from '../../../components/Section'; diff --git a/src/stories/Composer.stories.js b/src/stories/Composer.stories.js index 3dfc5b0e3ead..632901df582f 100644 --- a/src/stories/Composer.stories.js +++ b/src/stories/Composer.stories.js @@ -5,7 +5,7 @@ import Composer from '../components/Composer'; import RenderHTML from '../components/RenderHTML'; import Text from '../components/Text'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; import * as StyleUtils from '../styles/StyleUtils'; import CONST from '../CONST'; diff --git a/src/stories/PopoverMenu.stories.js b/src/stories/PopoverMenu.stories.js index 1098fa9ce226..198c7ef28e83 100644 --- a/src/stories/PopoverMenu.stories.js +++ b/src/stories/PopoverMenu.stories.js @@ -3,7 +3,7 @@ import {SafeAreaProvider} from 'react-native-safe-area-context'; import PopoverMenu from '../components/PopoverMenu'; import * as Expensicons from '../components/Icon/Expensicons'; import MenuItem from '../components/MenuItem'; -import themeColors from '../styles/themes/default'; +import themeColors from '../styles/themes/dark'; /** * We use the Component Story Format for writing stories. Follow the docs here: diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index f8db7272e93f..676796751dc3 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -1,7 +1,7 @@ import _ from 'underscore'; import CONST from '../CONST'; import fontFamily from './fontFamily'; -import themeColors from './themes/default'; +import themeColors from './themes/dark'; import variables from './variables'; import colors from './colors'; import positioning from './utilities/positioning'; diff --git a/src/styles/addOutlineWidth/index.js b/src/styles/addOutlineWidth/index.js index 2a2657b24910..cdb7dce7f926 100644 --- a/src/styles/addOutlineWidth/index.js +++ b/src/styles/addOutlineWidth/index.js @@ -3,7 +3,7 @@ * can be added to the object */ -import themeDefault from '../themes/default'; +import themeDefault from '../themes/dark'; /** * Adds the addOutlineWidth property to an object to be used when styling diff --git a/src/styles/getModalStyles/getBaseModalStyles.js b/src/styles/getModalStyles/getBaseModalStyles.js index b7a3317963ca..7daf944225c5 100644 --- a/src/styles/getModalStyles/getBaseModalStyles.js +++ b/src/styles/getModalStyles/getBaseModalStyles.js @@ -1,6 +1,6 @@ import CONST from '../../CONST'; import variables from '../variables'; -import themeColors from '../themes/default'; +import themeColors from '../themes/dark'; import styles from '../styles'; const getCenteredModalStyles = (windowWidth, isSmallScreenWidth, isFullScreenWhenSmall = false) => ({ diff --git a/src/styles/getReportActionContextMenuStyles.js b/src/styles/getReportActionContextMenuStyles.js index 026306084ce4..b8084abad976 100644 --- a/src/styles/getReportActionContextMenuStyles.js +++ b/src/styles/getReportActionContextMenuStyles.js @@ -1,6 +1,6 @@ import styles from './styles'; import variables from './variables'; -import themeColors from './themes/default'; +import themeColors from './themes/dark'; const defaultWrapperStyle = { backgroundColor: themeColors.componentBG, diff --git a/src/styles/getTooltipStyles.js b/src/styles/getTooltipStyles.js index bc5fcfe807aa..58ec3f200b2d 100644 --- a/src/styles/getTooltipStyles.js +++ b/src/styles/getTooltipStyles.js @@ -1,7 +1,7 @@ import spacing from './utilities/spacing'; import styles from './styles'; import colors from './colors'; -import themeColors from './themes/default'; +import themeColors from './themes/dark'; import fontFamily from './fontFamily'; import variables from './variables'; import roundToNearestMultipleOfFour from './roundToNearestMultipleOfFour'; diff --git a/src/styles/styles.js b/src/styles/styles.js index 835082ba98c9..fe47cc70c66a 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2,7 +2,7 @@ import {defaultStyles as defaultPickerStyles} from 'react-native-picker-select/s import lodashClamp from 'lodash/clamp'; import fontFamily from './fontFamily'; import addOutlineWidth from './addOutlineWidth'; -import themeColors from './themes/default'; +import themeColors from './themes/dark'; import fontWeightBold from './fontWeight/bold'; import variables from './variables'; import spacing from './utilities/spacing'; From 0e02b13875976b5bc64bc69da4cc6a302408f5a1 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Sat, 16 Sep 2023 11:33:56 +0200 Subject: [PATCH 06/30] fix: rename back dark.ts --- src/components/AddPlaidBankAccount.js | 2 +- src/components/AddressSearch/index.js | 2 +- src/components/AttachmentCarousel/index.js | 2 +- src/components/AttachmentModal.js | 2 +- src/components/AttachmentView.js | 2 +- src/components/Avatar.js | 2 +- src/components/AvatarCropModal/AvatarCropModal.js | 2 +- src/components/AvatarWithDisplayName.js | 2 +- src/components/AvatarWithImagePicker.js | 2 +- src/components/BlockingViews/BlockingView.js | 2 +- src/components/Button/index.js | 2 +- src/components/ButtonWithDropdownMenu.js | 2 +- src/components/Checkbox.js | 2 +- src/components/Composer/index.android.js | 2 +- src/components/Composer/index.ios.js | 2 +- src/components/Composer/index.js | 2 +- src/components/CurrentUserPersonalDetailsSkeletonView/index.js | 2 +- src/components/CustomStatusBar/index.js | 2 +- src/components/DatePicker/index.ios.js | 2 +- src/components/EmojiPicker/CategoryShortcutButton.js | 2 +- src/components/ExpensifyWordmark.js | 2 +- src/components/FloatingActionButton.js | 2 +- src/components/FullscreenLoadingIndicator.js | 2 +- src/components/GrowlNotification/index.js | 2 +- .../HTMLEngineProvider/HTMLRenderers/EditedRenderer.js | 2 +- src/components/Icon/index.js | 2 +- src/components/IllustratedHeaderPageLayout.js | 2 +- src/components/Indicator.js | 2 +- src/components/InlineSystemMessage.js | 2 +- src/components/LHNOptionsList/OptionRowLHN.js | 2 +- src/components/LocalePicker.js | 2 +- src/components/MenuItem.js | 2 +- src/components/Modal/BaseModal.js | 2 +- src/components/Modal/index.web.js | 2 +- src/components/MoneyRequestConfirmationList.js | 2 +- src/components/MoneyRequestDetails.js | 2 +- src/components/MultipleAvatars.js | 2 +- src/components/Onfido/BaseOnfidoWeb.js | 2 +- src/components/OptionRow.js | 2 +- src/components/OptionsListSkeletonView.js | 2 +- src/components/Picker/BasePicker.js | 2 +- src/components/PinButton.js | 2 +- src/components/QRCode/index.js | 2 +- src/components/QRShare/index.js | 2 +- src/components/ReportActionItem/IOUPreview.js | 2 +- src/components/ReportActionItem/ReportPreview.js | 2 +- src/components/ReportActionsSkeletonView/SkeletonViewLines.js | 2 +- src/components/ReportHeaderSkeletonView.js | 2 +- src/components/RoomHeaderAvatars.js | 2 +- src/components/SelectCircle.js | 2 +- src/components/SelectionListRadio/RadioListItem.js | 2 +- src/components/SubscriptAvatar.js | 2 +- src/components/TabSelector/TabSelectorItem.js | 2 +- src/components/Text.js | 2 +- src/components/TextInput/BaseTextInput.js | 2 +- .../VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js | 2 +- .../createResponsiveStackNavigator/ThreePaneView.js | 2 +- src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js | 2 +- src/libs/Navigation/NavigationRoot.js | 2 +- src/pages/ErrorPage/GenericErrorPage.js | 2 +- src/pages/home/report/FloatingMessageCounter/index.js | 2 +- src/pages/home/report/LinkPreviewer.js | 2 +- src/pages/home/report/ReportActionCompose.js | 2 +- src/pages/home/report/ReportActionItemFragment.js | 2 +- src/pages/home/report/ReportActionItemMessageEdit.js | 2 +- src/pages/home/sidebar/SidebarLinks.js | 2 +- src/pages/home/sidebar/SidebarScreen/index.js | 2 +- src/pages/iou/IOUCurrencySelection.js | 2 +- src/pages/iou/ReceiptSelector/index.native.js | 2 +- src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js | 2 +- src/pages/settings/Preferences/PreferencesPage.js | 2 +- src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js | 2 +- .../Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js | 2 +- src/pages/settings/Report/NotificationPreferencePage.js | 2 +- src/pages/settings/Report/WriteCapabilityPage.js | 2 +- src/pages/settings/Security/TwoFactorAuth/CodesPage.js | 2 +- src/pages/settings/Security/TwoFactorAuth/IsEnabledPage.js | 2 +- src/pages/signin/SignInPageLayout/Footer.js | 2 +- src/pages/signin/SignInPageLayout/index.js | 2 +- src/pages/signin/Socials.js | 2 +- src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js | 2 +- src/pages/workspace/WorkspacesListPage.js | 2 +- src/pages/workspace/reimburse/WorkspaceReimburseSection.js | 2 +- src/stories/Composer.stories.js | 2 +- src/stories/PopoverMenu.stories.js | 2 +- src/styles/StyleUtils.js | 2 +- src/styles/addOutlineWidth/index.js | 2 +- src/styles/getModalStyles/getBaseModalStyles.js | 2 +- src/styles/getReportActionContextMenuStyles.js | 2 +- src/styles/getTooltipStyles.js | 2 +- src/styles/styles.js | 2 +- src/styles/themes/ThemeContext.js | 2 +- src/styles/themes/ThemeProvider.js | 2 +- src/styles/themes/{dark.ts => default.ts} | 0 94 files changed, 93 insertions(+), 93 deletions(-) rename src/styles/themes/{dark.ts => default.ts} (100%) diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js index d1d8c42abffa..ff97c9be24a6 100644 --- a/src/components/AddPlaidBankAccount.js +++ b/src/components/AddPlaidBankAccount.js @@ -9,7 +9,7 @@ import PlaidLink from './PlaidLink'; import * as BankAccounts from '../libs/actions/BankAccounts'; import ONYXKEYS from '../ONYXKEYS'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import compose from '../libs/compose'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import Picker from './Picker'; diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js index a29fd4002077..e8a41ec35435 100644 --- a/src/components/AddressSearch/index.js +++ b/src/components/AddressSearch/index.js @@ -6,7 +6,7 @@ import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete' import lodashGet from 'lodash/get'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import styles from '../../styles/styles'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import TextInput from '../TextInput'; import * as ApiUtils from '../../libs/ApiUtils'; import * as GooglePlacesUtils from '../../libs/GooglePlacesUtils'; diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js index b15c8a0b7c7e..3f2524a2992e 100644 --- a/src/components/AttachmentCarousel/index.js +++ b/src/components/AttachmentCarousel/index.js @@ -4,7 +4,7 @@ import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import * as Expensicons from '../Icon/Expensicons'; import styles from '../../styles/styles'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import CarouselActions from './CarouselActions'; import Button from '../Button'; import AttachmentView from '../AttachmentView'; diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 1e768d2eefd3..1b87799d4f5b 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -12,7 +12,7 @@ import AttachmentCarousel from './AttachmentCarousel'; import styles from '../styles/styles'; import * as StyleUtils from '../styles/StyleUtils'; import * as FileUtils from '../libs/fileDownload/FileUtils'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import compose from '../libs/compose'; import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; import Button from './Button'; diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js index 7cf77c08e5e2..d880ac9b9076 100755 --- a/src/components/AttachmentView.js +++ b/src/components/AttachmentView.js @@ -12,7 +12,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize'; import compose from '../libs/compose'; import Text from './Text'; import Tooltip from './Tooltip'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import variables from '../styles/variables'; import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL'; import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; diff --git a/src/components/Avatar.js b/src/components/Avatar.js index f4502ddb6a03..8dcf7f08c1d1 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import _ from 'underscore'; import stylePropTypes from '../styles/stylePropTypes'; import Icon from './Icon'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import CONST from '../CONST'; import * as StyleUtils from '../styles/StyleUtils'; import * as Expensicons from './Icon/Expensicons'; diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js index f0e7b4ed74be..99262bf12938 100644 --- a/src/components/AvatarCropModal/AvatarCropModal.js +++ b/src/components/AvatarCropModal/AvatarCropModal.js @@ -6,7 +6,7 @@ import {runOnUI, interpolate, useAnimatedGestureHandler, useSharedValue, useWork import CONST from '../../CONST'; import compose from '../../libs/compose'; import styles from '../../styles/styles'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import Button from '../Button'; import HeaderWithBackButton from '../HeaderWithBackButton'; import Icon from '../Icon'; diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js index 52ae459bca7a..0f1300ebf03d 100644 --- a/src/components/AvatarWithDisplayName.js +++ b/src/components/AvatarWithDisplayName.js @@ -8,7 +8,7 @@ import participantPropTypes from './participantPropTypes'; import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import SubscriptAvatar from './SubscriptAvatar'; import * as ReportUtils from '../libs/ReportUtils'; import MultipleAvatars from './MultipleAvatars'; diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index 8452afcc0616..fcbfe4f4c4c4 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -8,7 +8,7 @@ import Icon from './Icon'; import PopoverMenu from './PopoverMenu'; import * as Expensicons from './Icon/Expensicons'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import AttachmentPicker from './AttachmentPicker'; import AvatarCropModal from './AvatarCropModal/AvatarCropModal'; import OfflineWithFeedback from './OfflineWithFeedback'; diff --git a/src/components/BlockingViews/BlockingView.js b/src/components/BlockingViews/BlockingView.js index a4af9754bbe5..d02fa55a6434 100644 --- a/src/components/BlockingViews/BlockingView.js +++ b/src/components/BlockingViews/BlockingView.js @@ -5,7 +5,7 @@ import styles from '../../styles/styles'; import variables from '../../styles/variables'; import Icon from '../Icon'; import Text from '../Text'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import TextLink from '../TextLink'; import Navigation from '../../libs/Navigation/Navigation'; import AutoEmailLink from '../AutoEmailLink'; diff --git a/src/components/Button/index.js b/src/components/Button/index.js index 03e98b56d5c6..a850a43d2fb0 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -2,7 +2,7 @@ import React, {Component} from 'react'; import {ActivityIndicator, View} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../styles/styles'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import Text from '../Text'; import KeyboardShortcut from '../../libs/KeyboardShortcut'; import Icon from '../Icon'; diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js index eb1729a45614..1396ab601330 100644 --- a/src/components/ButtonWithDropdownMenu.js +++ b/src/components/ButtonWithDropdownMenu.js @@ -8,7 +8,7 @@ import Button from './Button'; import PopoverMenu from './PopoverMenu'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import CONST from '../CONST'; const propTypes = { diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index 6150e5134e19..86b6e05d5ed7 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -2,7 +2,7 @@ import React from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import stylePropTypes from '../styles/stylePropTypes'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; diff --git a/src/components/Composer/index.android.js b/src/components/Composer/index.android.js index c252d3dcfa62..d0805cbcc7c3 100644 --- a/src/components/Composer/index.android.js +++ b/src/components/Composer/index.android.js @@ -3,7 +3,7 @@ import {StyleSheet} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; import RNTextInput from '../RNTextInput'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import * as ComposerUtils from '../../libs/ComposerUtils'; const propTypes = { diff --git a/src/components/Composer/index.ios.js b/src/components/Composer/index.ios.js index a0e372403310..c0a3859e6d01 100644 --- a/src/components/Composer/index.ios.js +++ b/src/components/Composer/index.ios.js @@ -3,7 +3,7 @@ import {StyleSheet} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; import RNTextInput from '../RNTextInput'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import * as ComposerUtils from '../../libs/ComposerUtils'; const propTypes = { diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js index 4b8144745119..d32246529b6c 100755 --- a/src/components/Composer/index.js +++ b/src/components/Composer/index.js @@ -6,7 +6,7 @@ import ExpensiMark from 'expensify-common/lib/ExpensiMark'; import RNTextInput from '../RNTextInput'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import Growl from '../../libs/Growl'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import updateIsFullComposerAvailable from '../../libs/ComposerUtils/updateIsFullComposerAvailable'; import * as ComposerUtils from '../../libs/ComposerUtils'; import * as Browser from '../../libs/Browser'; diff --git a/src/components/CurrentUserPersonalDetailsSkeletonView/index.js b/src/components/CurrentUserPersonalDetailsSkeletonView/index.js index 8e63be848e91..6e6c46e971c0 100644 --- a/src/components/CurrentUserPersonalDetailsSkeletonView/index.js +++ b/src/components/CurrentUserPersonalDetailsSkeletonView/index.js @@ -5,7 +5,7 @@ import {Circle, Rect} from 'react-native-svg'; import {View} from 'react-native'; import * as StyleUtils from '../../styles/StyleUtils'; import CONST from '../../CONST'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import variables from '../../styles/variables'; import styles from '../../styles/styles'; diff --git a/src/components/CustomStatusBar/index.js b/src/components/CustomStatusBar/index.js index 4f77691046bd..76752cb549e1 100644 --- a/src/components/CustomStatusBar/index.js +++ b/src/components/CustomStatusBar/index.js @@ -1,6 +1,6 @@ import React, {useEffect} from 'react'; import StatusBar from '../../libs/StatusBar'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; function CustomStatusBar() { useEffect(() => { diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index 410376a387dd..5d87636a9365 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -10,7 +10,7 @@ import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import Popover from '../Popover'; import CONST from '../../CONST'; import styles from '../../styles/styles'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import {propTypes, defaultProps} from './datepickerPropTypes'; import withKeyboardState, {keyboardStatePropTypes} from '../withKeyboardState'; diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js index ac7f1991ec6a..a7658ae0542d 100644 --- a/src/components/EmojiPicker/CategoryShortcutButton.js +++ b/src/components/EmojiPicker/CategoryShortcutButton.js @@ -7,7 +7,7 @@ import variables from '../../styles/variables'; import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; import getButtonState from '../../libs/getButtonState'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; import CONST from '../../CONST'; diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.js index 25ff571a7c01..dde792e87e22 100644 --- a/src/components/ExpensifyWordmark.js +++ b/src/components/ExpensifyWordmark.js @@ -8,7 +8,7 @@ import StagingLogo from '../../assets/images/expensify-logo--staging.svg'; import AdHocLogo from '../../assets/images/expensify-logo--adhoc.svg'; import CONST from '../CONST'; import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import styles from '../styles/styles'; import * as StyleUtils from '../styles/StyleUtils'; import variables from '../styles/variables'; diff --git a/src/components/FloatingActionButton.js b/src/components/FloatingActionButton.js index 4a2db6e2bcfb..706bad59f7b7 100644 --- a/src/components/FloatingActionButton.js +++ b/src/components/FloatingActionButton.js @@ -5,7 +5,7 @@ import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import styles from '../styles/styles'; import * as StyleUtils from '../styles/StyleUtils'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import Tooltip from './Tooltip'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; diff --git a/src/components/FullscreenLoadingIndicator.js b/src/components/FullscreenLoadingIndicator.js index 96c1246f33c5..5c212b6dc29e 100644 --- a/src/components/FullscreenLoadingIndicator.js +++ b/src/components/FullscreenLoadingIndicator.js @@ -2,7 +2,7 @@ import _ from 'underscore'; import React from 'react'; import {ActivityIndicator, StyleSheet, View} from 'react-native'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import stylePropTypes from '../styles/stylePropTypes'; const propTypes = { diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js index 750063847ead..70cadd5efd8e 100644 --- a/src/components/GrowlNotification/index.js +++ b/src/components/GrowlNotification/index.js @@ -1,7 +1,7 @@ import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; import {Directions, FlingGestureHandler, State} from 'react-native-gesture-handler'; import {View, Animated} from 'react-native'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import Text from '../Text'; import Icon from '../Icon'; import * as Expensicons from '../Icon/Expensicons'; diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js index 3f5ff9a72dc2..d91510c3ec6a 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js @@ -4,7 +4,7 @@ import htmlRendererPropTypes from './htmlRendererPropTypes'; import withLocalize, {withLocalizePropTypes} from '../../withLocalize'; import Text from '../../Text'; import variables from '../../../styles/variables'; -import themeColors from '../../../styles/themes/dark'; +import themeColors from '../../../styles/themes/default'; import styles from '../../../styles/styles'; import editedLabelStyles from '../../../styles/editedLabelStyles'; diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index 044baee944b3..8c6559451215 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -2,7 +2,7 @@ import React, {PureComponent} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../styles/styles'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import variables from '../../styles/variables'; import * as StyleUtils from '../../styles/StyleUtils'; import IconWrapperStyles from './IconWrapperStyles'; diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js index d1563c500671..7fc340426d69 100644 --- a/src/components/IllustratedHeaderPageLayout.js +++ b/src/components/IllustratedHeaderPageLayout.js @@ -7,7 +7,7 @@ import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBack import HeaderWithBackButton from './HeaderWithBackButton'; import ScreenWrapper from './ScreenWrapper'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import * as StyleUtils from '../styles/StyleUtils'; import useWindowDimensions from '../hooks/useWindowDimensions'; import FixedFooter from './FixedFooter'; diff --git a/src/components/Indicator.js b/src/components/Indicator.js index cd66de22f57d..765d79e156af 100644 --- a/src/components/Indicator.js +++ b/src/components/Indicator.js @@ -15,7 +15,7 @@ import * as PolicyUtils from '../libs/PolicyUtils'; import * as PaymentMethods from '../libs/actions/PaymentMethods'; import * as ReimbursementAccountProps from '../pages/ReimbursementAccount/reimbursementAccountPropTypes'; import * as UserUtils from '../libs/UserUtils'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; const propTypes = { /* Onyx Props */ diff --git a/src/components/InlineSystemMessage.js b/src/components/InlineSystemMessage.js index ea21c5f65352..a6866fb5a887 100644 --- a/src/components/InlineSystemMessage.js +++ b/src/components/InlineSystemMessage.js @@ -2,7 +2,7 @@ import React from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../styles/styles'; -import theme from '../styles/themes/dark'; +import theme from '../styles/themes/default'; import Text from './Text'; import * as Expensicons from './Icon/Expensicons'; import Icon from './Icon'; diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 51045cd8876f..e17cf71e5d06 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -14,7 +14,7 @@ import colors from '../../styles/colors'; import Text from '../Text'; import SubscriptAvatar from '../SubscriptAvatar'; import CONST from '../../CONST'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import OfflineWithFeedback from '../OfflineWithFeedback'; import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteraction'; import * as ReportActionContextMenu from '../../pages/home/report/ContextMenu/ReportActionContextMenu'; diff --git a/src/components/LocalePicker.js b/src/components/LocalePicker.js index af191080a4ca..532c29535e50 100644 --- a/src/components/LocalePicker.js +++ b/src/components/LocalePicker.js @@ -9,7 +9,7 @@ import ONYXKEYS from '../ONYXKEYS'; import CONST from '../CONST'; import Picker from './Picker'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; const propTypes = { /** Indicates which locale the user currently has selected */ diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index b470b11171f8..c280a75a8ef3 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -3,7 +3,7 @@ import React from 'react'; import {View} from 'react-native'; import Text from './Text'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import * as StyleUtils from '../styles/StyleUtils'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js index a9116faa3460..6d5bd5390416 100644 --- a/src/components/Modal/BaseModal.js +++ b/src/components/Modal/BaseModal.js @@ -5,7 +5,7 @@ import ReactNativeModal from 'react-native-modal'; import {SafeAreaInsetsContext} from 'react-native-safe-area-context'; import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import {propTypes as modalPropTypes, defaultProps as modalDefaultProps} from './modalPropTypes'; import * as Modal from '../../libs/actions/Modal'; import getModalStyles from '../../styles/getModalStyles'; diff --git a/src/components/Modal/index.web.js b/src/components/Modal/index.web.js index 8fc5a4ee22fe..065b3a9f210f 100644 --- a/src/components/Modal/index.web.js +++ b/src/components/Modal/index.web.js @@ -3,7 +3,7 @@ import withWindowDimensions from '../withWindowDimensions'; import BaseModal from './BaseModal'; import {propTypes, defaultProps} from './modalPropTypes'; import * as StyleUtils from '../../styles/StyleUtils'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import StatusBar from '../../libs/StatusBar'; import CONST from '../../CONST'; diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 76620c7a0863..e421dae4e37e 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -23,7 +23,7 @@ import optionPropTypes from './optionPropTypes'; import * as CurrencyUtils from '../libs/CurrencyUtils'; import Button from './Button'; import * as Expensicons from './Icon/Expensicons'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import Image from './Image'; import ReceiptHTML from '../../assets/images/receipt-html.png'; import ReceiptDoc from '../../assets/images/receipt-doc.png'; diff --git a/src/components/MoneyRequestDetails.js b/src/components/MoneyRequestDetails.js index fe6d7afdfe7a..a690c31c000c 100644 --- a/src/components/MoneyRequestDetails.js +++ b/src/components/MoneyRequestDetails.js @@ -11,7 +11,7 @@ import Text from './Text'; import participantPropTypes from './participantPropTypes'; import Avatar from './Avatar'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import CONST from '../CONST'; import withWindowDimensions from './withWindowDimensions'; import compose from '../libs/compose'; diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index c89613c90e19..ceb1c5371c7e 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -6,7 +6,7 @@ import styles from '../styles/styles'; import Avatar from './Avatar'; import Tooltip from './Tooltip'; import Text from './Text'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import * as StyleUtils from '../styles/StyleUtils'; import CONST from '../CONST'; import variables from '../styles/variables'; diff --git a/src/components/Onfido/BaseOnfidoWeb.js b/src/components/Onfido/BaseOnfidoWeb.js index 54fb2abba2bf..394996331d5e 100644 --- a/src/components/Onfido/BaseOnfidoWeb.js +++ b/src/components/Onfido/BaseOnfidoWeb.js @@ -6,7 +6,7 @@ import * as OnfidoSDK from 'onfido-sdk-ui'; import onfidoPropTypes from './onfidoPropTypes'; import CONST from '../../CONST'; import variables from '../../styles/variables'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import fontWeightBold from '../../styles/fontWeight/bold'; import fontFamily from '../../styles/fontFamily'; import Log from '../../libs/Log'; diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index d341710945d7..adaa4457bbd9 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -11,7 +11,7 @@ import * as Expensicons from './Icon/Expensicons'; import MultipleAvatars from './MultipleAvatars'; import Hoverable from './Hoverable'; import DisplayNames from './DisplayNames'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import Text from './Text'; import SelectCircle from './SelectCircle'; diff --git a/src/components/OptionsListSkeletonView.js b/src/components/OptionsListSkeletonView.js index 1cf6a97f8c97..15c66affe84d 100644 --- a/src/components/OptionsListSkeletonView.js +++ b/src/components/OptionsListSkeletonView.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import {Rect, Circle} from 'react-native-svg'; import SkeletonViewContentLoader from 'react-content-loader/native'; import CONST from '../CONST'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import styles from '../styles/styles'; const propTypes = { diff --git a/src/components/Picker/BasePicker.js b/src/components/Picker/BasePicker.js index c64aad3d0c1a..173b863edfcc 100644 --- a/src/components/Picker/BasePicker.js +++ b/src/components/Picker/BasePicker.js @@ -8,7 +8,7 @@ import * as Expensicons from '../Icon/Expensicons'; import FormHelpMessage from '../FormHelpMessage'; import Text from '../Text'; import styles from '../../styles/styles'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import {ScrollContext} from '../ScrollViewWithContext'; const propTypes = { diff --git a/src/components/PinButton.js b/src/components/PinButton.js index 2074996cfb7b..84ad6e22f50b 100644 --- a/src/components/PinButton.js +++ b/src/components/PinButton.js @@ -1,6 +1,6 @@ import React from 'react'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import Icon from './Icon'; import Tooltip from './Tooltip'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; diff --git a/src/components/QRCode/index.js b/src/components/QRCode/index.js index 7bc0829d399d..f27cf28066ef 100644 --- a/src/components/QRCode/index.js +++ b/src/components/QRCode/index.js @@ -1,7 +1,7 @@ import React from 'react'; import QRCodeLibrary from 'react-native-qrcode-svg'; import PropTypes from 'prop-types'; -import defaultTheme from '../../styles/themes/dark'; +import defaultTheme from '../../styles/themes/default'; import CONST from '../../CONST'; const propTypes = { diff --git a/src/components/QRShare/index.js b/src/components/QRShare/index.js index 580151554d63..d96024ad1046 100644 --- a/src/components/QRShare/index.js +++ b/src/components/QRShare/index.js @@ -2,7 +2,7 @@ import React, {Component} from 'react'; import {View} from 'react-native'; import _ from 'underscore'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; -import defaultTheme from '../../styles/themes/dark'; +import defaultTheme from '../../styles/themes/default'; import styles from '../../styles/styles'; import Text from '../Text'; import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js index fe207476627b..85a0b22ac327 100644 --- a/src/components/ReportActionItem/IOUPreview.js +++ b/src/components/ReportActionItem/IOUPreview.js @@ -10,7 +10,7 @@ import ONYXKEYS from '../../ONYXKEYS'; import MultipleAvatars from '../MultipleAvatars'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import * as Report from '../../libs/actions/Report'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import Icon from '../Icon'; import CONST from '../../CONST'; import * as Expensicons from '../Icon/Expensicons'; diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js index 89b7616d081a..d5d85df5e7ee 100644 --- a/src/components/ReportActionItem/ReportPreview.js +++ b/src/components/ReportActionItem/ReportPreview.js @@ -23,7 +23,7 @@ import SettlementButton from '../SettlementButton'; import * as IOU from '../../libs/actions/IOU'; import refPropTypes from '../refPropTypes'; import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import reportPropTypes from '../../pages/reportPropTypes'; const propTypes = { diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js index f8dcaf4de34c..ddaa46e0b731 100644 --- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js +++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import {Rect, Circle} from 'react-native-svg'; import SkeletonViewContentLoader from 'react-content-loader/native'; import CONST from '../../CONST'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import styles from '../../styles/styles'; const propTypes = { diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js index c6e712417577..5f2d5379419d 100644 --- a/src/components/ReportHeaderSkeletonView.js +++ b/src/components/ReportHeaderSkeletonView.js @@ -8,7 +8,7 @@ import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; import variables from '../styles/variables'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; import compose from '../libs/compose'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js index cb18973e287c..6f78e6ace66d 100644 --- a/src/components/RoomHeaderAvatars.js +++ b/src/components/RoomHeaderAvatars.js @@ -6,7 +6,7 @@ import styles from '../styles/styles'; import Text from './Text'; import CONST from '../CONST'; import Avatar from './Avatar'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import * as StyleUtils from '../styles/StyleUtils'; import avatarPropTypes from './avatarPropTypes'; diff --git a/src/components/SelectCircle.js b/src/components/SelectCircle.js index 60e449479d11..93cf285eab59 100644 --- a/src/components/SelectCircle.js +++ b/src/components/SelectCircle.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import styles from '../styles/styles'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; const propTypes = { /** Should we show the checkmark inside the circle */ diff --git a/src/components/SelectionListRadio/RadioListItem.js b/src/components/SelectionListRadio/RadioListItem.js index 41928c50e05d..c5c4b3aeaf2c 100644 --- a/src/components/SelectionListRadio/RadioListItem.js +++ b/src/components/SelectionListRadio/RadioListItem.js @@ -6,7 +6,7 @@ import styles from '../../styles/styles'; import Text from '../Text'; import Icon from '../Icon'; import * as Expensicons from '../Icon/Expensicons'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import {radioListItemPropTypes} from './selectionListRadioPropTypes'; const propTypes = { diff --git a/src/components/SubscriptAvatar.js b/src/components/SubscriptAvatar.js index 5ca496025f1f..05202e720bd4 100644 --- a/src/components/SubscriptAvatar.js +++ b/src/components/SubscriptAvatar.js @@ -4,7 +4,7 @@ import {View} from 'react-native'; import _ from 'underscore'; import lodashGet from 'lodash/get'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import Avatar from './Avatar'; import CONST from '../CONST'; import * as StyleUtils from '../styles/StyleUtils'; diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js index f96d9f2d621e..cea59bc2ee65 100644 --- a/src/components/TabSelector/TabSelectorItem.js +++ b/src/components/TabSelector/TabSelectorItem.js @@ -2,7 +2,7 @@ import {Text} from 'react-native'; import React from 'react'; import PropTypes from 'prop-types'; import Icon from '../Icon'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import styles from '../../styles/styles'; import PressableWithFeedback from '../Pressable/PressableWithFeedback'; diff --git a/src/components/Text.js b/src/components/Text.js index 3c44183cd17b..83b6be8fffb0 100644 --- a/src/components/Text.js +++ b/src/components/Text.js @@ -4,7 +4,7 @@ import _ from 'underscore'; // eslint-disable-next-line no-restricted-imports import {Text as RNText} from 'react-native'; import fontFamily from '../styles/fontFamily'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import variables from '../styles/variables'; const propTypes = { diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index b075672d492e..68c09e3a7f82 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -5,7 +5,7 @@ import Str from 'expensify-common/lib/str'; import RNTextInput from '../RNTextInput'; import TextInputLabel from './TextInputLabel'; import * as baseTextInputPropTypes from './baseTextInputPropTypes'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import styles from '../../styles/styles'; import Icon from '../Icon'; import * as Expensicons from '../Icon/Expensicons'; diff --git a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js index 23ad19f53d37..4c0e2b551382 100755 --- a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js +++ b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js @@ -10,7 +10,7 @@ import ZoomIcon from '../../../assets/images/zoom-icon.svg'; import GoogleMeetIcon from '../../../assets/images/google-meet.svg'; import CONST from '../../CONST'; import styles from '../../styles/styles'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import compose from '../../libs/compose'; diff --git a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js index bc6ba2cfb3cd..2f9a899191bf 100644 --- a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js +++ b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js @@ -3,7 +3,7 @@ import _ from 'underscore'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import SCREENS from '../../../../SCREENS'; -import themeColors from '../../../../styles/themes/dark'; +import themeColors from '../../../../styles/themes/default'; import NAVIGATORS from '../../../../NAVIGATORS'; import * as StyleUtils from '../../../../styles/StyleUtils'; import {withNavigationPropTypes} from '../../../../components/withNavigation'; diff --git a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js index 63aca125dc27..d2de1ba23a01 100644 --- a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js +++ b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js @@ -1,7 +1,7 @@ import {Animated} from 'react-native'; import variables from '../../../styles/variables'; import getCardStyles from '../../../styles/cardStyles'; -import themeColors from '../../../styles/themes/dark'; +import themeColors from '../../../styles/themes/default'; export default (isSmallScreenWidth, isFullScreenModal, {current: {progress}, inverted, layouts: {screen}}) => { const translateX = Animated.multiply( diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js index c22c459b54ab..23c320eb991c 100644 --- a/src/libs/Navigation/NavigationRoot.js +++ b/src/libs/Navigation/NavigationRoot.js @@ -6,7 +6,7 @@ import {useSharedValue, useAnimatedReaction, interpolateColor, withTiming, withD import Navigation, {navigationRef} from './Navigation'; import linkingConfig from './linkingConfig'; import AppNavigator from './AppNavigator'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import Log from '../Log'; import StatusBar from '../StatusBar'; import useCurrentReportID from '../../hooks/useCurrentReportID'; diff --git a/src/pages/ErrorPage/GenericErrorPage.js b/src/pages/ErrorPage/GenericErrorPage.js index 05dddf273547..3ff3bc686419 100644 --- a/src/pages/ErrorPage/GenericErrorPage.js +++ b/src/pages/ErrorPage/GenericErrorPage.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {View} from 'react-native'; import Icon from '../../components/Icon'; -import defaultTheme from '../../styles/themes/dark'; +import defaultTheme from '../../styles/themes/default'; import * as Expensicons from '../../components/Icon/Expensicons'; import Text from '../../components/Text'; import Button from '../../components/Button'; diff --git a/src/pages/home/report/FloatingMessageCounter/index.js b/src/pages/home/report/FloatingMessageCounter/index.js index 4178502a1368..73fe02df129b 100644 --- a/src/pages/home/report/FloatingMessageCounter/index.js +++ b/src/pages/home/report/FloatingMessageCounter/index.js @@ -6,7 +6,7 @@ import Button from '../../../../components/Button'; import Text from '../../../../components/Text'; import Icon from '../../../../components/Icon'; import * as Expensicons from '../../../../components/Icon/Expensicons'; -import themeColors from '../../../../styles/themes/dark'; +import themeColors from '../../../../styles/themes/default'; import useLocalize from '../../../../hooks/useLocalize'; import FloatingMessageCounterContainer from './FloatingMessageCounterContainer'; diff --git a/src/pages/home/report/LinkPreviewer.js b/src/pages/home/report/LinkPreviewer.js index 3859299ea1a7..4fcbb0dc0569 100644 --- a/src/pages/home/report/LinkPreviewer.js +++ b/src/pages/home/report/LinkPreviewer.js @@ -8,7 +8,7 @@ import TextLink from '../../../components/TextLink'; import * as StyleUtils from '../../../styles/StyleUtils'; import styles from '../../../styles/styles'; import variables from '../../../styles/variables'; -import themeColors from '../../../styles/themes/dark'; +import themeColors from '../../../styles/themes/default'; const IMAGE_TYPES = ['jpg', 'jpeg', 'png']; const MAX_IMAGE_HEIGHT = 180; diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index e8d26edb40e5..1146e3b382f5 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -7,7 +7,7 @@ import _ from 'underscore'; import lodashGet from 'lodash/get'; import {withOnyx} from 'react-native-onyx'; import styles from '../../../styles/styles'; -import themeColors from '../../../styles/themes/dark'; +import themeColors from '../../../styles/themes/default'; import Composer from '../../../components/Composer'; import ONYXKEYS from '../../../ONYXKEYS'; import Icon from '../../../components/Icon'; diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index 6863e75ab894..009c1118400b 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.js @@ -5,7 +5,7 @@ import Str from 'expensify-common/lib/str'; import reportActionFragmentPropTypes from './reportActionFragmentPropTypes'; import styles from '../../../styles/styles'; import variables from '../../../styles/variables'; -import themeColors from '../../../styles/themes/dark'; +import themeColors from '../../../styles/themes/default'; import RenderHTML from '../../../components/RenderHTML'; import Text from '../../../components/Text'; import * as EmojiUtils from '../../../libs/EmojiUtils'; diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 5c7e71d0a877..54c5fec4533e 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -7,7 +7,7 @@ import ExpensiMark from 'expensify-common/lib/ExpensiMark'; import Str from 'expensify-common/lib/str'; import reportActionPropTypes from './reportActionPropTypes'; import styles from '../../../styles/styles'; -import themeColors from '../../../styles/themes/dark'; +import themeColors from '../../../styles/themes/default'; import * as StyleUtils from '../../../styles/StyleUtils'; import containerComposeStyles from '../../../styles/containerComposeStyles'; import Composer from '../../../components/Composer'; diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index dc917b1f6c6a..132b767a7f70 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -24,7 +24,7 @@ import LHNOptionsList from '../../../components/LHNOptionsList/LHNOptionsList'; import SidebarUtils from '../../../libs/SidebarUtils'; import OfflineWithFeedback from '../../../components/OfflineWithFeedback'; import Header from '../../../components/Header'; -import defaultTheme from '../../../styles/themes/dark'; +import defaultTheme from '../../../styles/themes/default'; import OptionsListSkeletonView from '../../../components/OptionsListSkeletonView'; import variables from '../../../styles/variables'; import LogoComponent from '../../../../assets/images/expensify-wordmark.svg'; diff --git a/src/pages/home/sidebar/SidebarScreen/index.js b/src/pages/home/sidebar/SidebarScreen/index.js index 20f7e7098f1c..705d9d1e2d08 100755 --- a/src/pages/home/sidebar/SidebarScreen/index.js +++ b/src/pages/home/sidebar/SidebarScreen/index.js @@ -7,7 +7,7 @@ import FloatingActionButtonAndPopover from './FloatingActionButtonAndPopover'; import FreezeWrapper from '../../../../libs/Navigation/FreezeWrapper'; import withWindowDimensions from '../../../../components/withWindowDimensions'; import StatusBar from '../../../../libs/StatusBar'; -import themeColors from '../../../../styles/themes/dark'; +import themeColors from '../../../../styles/themes/default'; function SidebarScreen(props) { const popoverModal = useRef(null); diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js index b46919127fb3..44a7fba5d487 100644 --- a/src/pages/iou/IOUCurrencySelection.js +++ b/src/pages/iou/IOUCurrencySelection.js @@ -15,7 +15,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize import {withNetwork} from '../../components/OnyxProvider'; import * as CurrencyUtils from '../../libs/CurrencyUtils'; import ROUTES from '../../ROUTES'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import * as Expensicons from '../../components/Icon/Expensicons'; import reportPropTypes from '../reportPropTypes'; import * as ReportUtils from '../../libs/ReportUtils'; diff --git a/src/pages/iou/ReceiptSelector/index.native.js b/src/pages/iou/ReceiptSelector/index.native.js index 06f692fa1b33..7eeab6e493bd 100644 --- a/src/pages/iou/ReceiptSelector/index.native.js +++ b/src/pages/iou/ReceiptSelector/index.native.js @@ -13,7 +13,7 @@ import styles from '../../../styles/styles'; import Shutter from '../../../../assets/images/shutter.svg'; import Hand from '../../../../assets/images/hand.svg'; import * as IOU from '../../../libs/actions/IOU'; -import themeColors from '../../../styles/themes/dark'; +import themeColors from '../../../styles/themes/default'; import reportPropTypes from '../../reportPropTypes'; import CONST from '../../../CONST'; import Button from '../../../components/Button'; diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index c2690e27dd55..346738574da3 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -28,7 +28,7 @@ import * as PaymentUtils from '../../../../libs/PaymentUtils'; import OfflineWithFeedback from '../../../../components/OfflineWithFeedback'; import ConfirmContent from '../../../../components/ConfirmContent'; import Button from '../../../../components/Button'; -import themeColors from '../../../../styles/themes/dark'; +import themeColors from '../../../../styles/themes/default'; import variables from '../../../../styles/variables'; import useLocalize from '../../../../hooks/useLocalize'; import useWindowDimensions from '../../../../hooks/useWindowDimensions'; diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js index e91fcdacaf0e..b8bb74295567 100755 --- a/src/pages/settings/Preferences/PreferencesPage.js +++ b/src/pages/settings/Preferences/PreferencesPage.js @@ -7,7 +7,7 @@ import Navigation from '../../../libs/Navigation/Navigation'; import ROUTES from '../../../ROUTES'; import ONYXKEYS from '../../../ONYXKEYS'; import styles from '../../../styles/styles'; -import themeColors from '../../../styles/themes/dark'; +import themeColors from '../../../styles/themes/default'; import Text from '../../../components/Text'; import CONST from '../../../CONST'; import * as User from '../../../libs/actions/User'; diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js index dd6f5cf90c4a..2289e68e7bd1 100644 --- a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js +++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js @@ -21,7 +21,7 @@ import ConfirmModal from '../../../../components/ConfirmModal'; import * as User from '../../../../libs/actions/User'; import CONST from '../../../../CONST'; import * as ErrorUtils from '../../../../libs/ErrorUtils'; -import themeColors from '../../../../styles/themes/dark'; +import themeColors from '../../../../styles/themes/default'; import NotFoundPage from '../../../ErrorPage/NotFoundPage'; import ValidateCodeForm from './ValidateCodeForm'; import ROUTES from '../../../../ROUTES'; diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js index 6cf47d37e3af..ea81413fcbb5 100644 --- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js @@ -20,7 +20,7 @@ import shouldDelayFocus from '../../../../../libs/shouldDelayFocus'; import Text from '../../../../../components/Text'; import {withNetwork} from '../../../../../components/OnyxProvider'; import PressableWithFeedback from '../../../../../components/Pressable/PressableWithFeedback'; -import themeColors from '../../../../../styles/themes/dark'; +import themeColors from '../../../../../styles/themes/default'; import * as StyleUtils from '../../../../../styles/StyleUtils'; import CONST from '../../../../../CONST'; diff --git a/src/pages/settings/Report/NotificationPreferencePage.js b/src/pages/settings/Report/NotificationPreferencePage.js index 6b625f3e13b9..9765cf1ae0b4 100644 --- a/src/pages/settings/Report/NotificationPreferencePage.js +++ b/src/pages/settings/Report/NotificationPreferencePage.js @@ -14,7 +14,7 @@ import ROUTES from '../../../ROUTES'; import * as Report from '../../../libs/actions/Report'; import * as ReportUtils from '../../../libs/ReportUtils'; import * as Expensicons from '../../../components/Icon/Expensicons'; -import themeColors from '../../../styles/themes/dark'; +import themeColors from '../../../styles/themes/default'; const propTypes = { ...withLocalizePropTypes, diff --git a/src/pages/settings/Report/WriteCapabilityPage.js b/src/pages/settings/Report/WriteCapabilityPage.js index 5e1d1192824b..59ad90a2cd1f 100644 --- a/src/pages/settings/Report/WriteCapabilityPage.js +++ b/src/pages/settings/Report/WriteCapabilityPage.js @@ -15,7 +15,7 @@ import reportPropTypes from '../../reportPropTypes'; import ROUTES from '../../../ROUTES'; import * as Report from '../../../libs/actions/Report'; import * as Expensicons from '../../../components/Icon/Expensicons'; -import themeColors from '../../../styles/themes/dark'; +import themeColors from '../../../styles/themes/default'; import * as ReportUtils from '../../../libs/ReportUtils'; import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView'; import * as PolicyUtils from '../../../libs/PolicyUtils'; diff --git a/src/pages/settings/Security/TwoFactorAuth/CodesPage.js b/src/pages/settings/Security/TwoFactorAuth/CodesPage.js index 8e2b0cff5b69..6780080ff382 100644 --- a/src/pages/settings/Security/TwoFactorAuth/CodesPage.js +++ b/src/pages/settings/Security/TwoFactorAuth/CodesPage.js @@ -22,7 +22,7 @@ import Text from '../../../../components/Text'; import Section from '../../../../components/Section'; import ONYXKEYS from '../../../../ONYXKEYS'; import Clipboard from '../../../../libs/Clipboard'; -import themeColors from '../../../../styles/themes/dark'; +import themeColors from '../../../../styles/themes/default'; import localFileDownload from '../../../../libs/localFileDownload'; import * as TwoFactorAuthActions from '../../../../libs/actions/TwoFactorAuthActions'; diff --git a/src/pages/settings/Security/TwoFactorAuth/IsEnabledPage.js b/src/pages/settings/Security/TwoFactorAuth/IsEnabledPage.js index b5bc98005170..4d49edac1fe4 100644 --- a/src/pages/settings/Security/TwoFactorAuth/IsEnabledPage.js +++ b/src/pages/settings/Security/TwoFactorAuth/IsEnabledPage.js @@ -9,7 +9,7 @@ import ROUTES from '../../../../ROUTES'; import Section from '../../../../components/Section'; import * as Illustrations from '../../../../components/Icon/Illustrations'; import * as Expensicons from '../../../../components/Icon/Expensicons'; -import themeColors from '../../../../styles/themes/dark'; +import themeColors from '../../../../styles/themes/default'; import styles from '../../../../styles/styles'; import ConfirmModal from '../../../../components/ConfirmModal'; import FullPageOfflineBlockingView from '../../../../components/BlockingViews/FullPageOfflineBlockingView'; diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js index 0cb5a8dd45b3..35e63b0699b3 100644 --- a/src/pages/signin/SignInPageLayout/Footer.js +++ b/src/pages/signin/SignInPageLayout/Footer.js @@ -5,7 +5,7 @@ import _ from 'underscore'; import Text from '../../../components/Text'; import styles from '../../../styles/styles'; import * as StyleUtils from '../../../styles/StyleUtils'; -import themeColors from '../../../styles/themes/dark'; +import themeColors from '../../../styles/themes/default'; import variables from '../../../styles/variables'; import * as Expensicons from '../../../components/Icon/Expensicons'; import TextLink from '../../../components/TextLink'; diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js index 9f73b828c5e9..7acd08a6c693 100644 --- a/src/pages/signin/SignInPageLayout/index.js +++ b/src/pages/signin/SignInPageLayout/index.js @@ -11,7 +11,7 @@ import styles from '../../../styles/styles'; import SignInPageHero from '../SignInPageHero'; import * as StyleUtils from '../../../styles/StyleUtils'; import scrollViewContentContainerStyles from './signInPageStyles'; -import themeColors from '../../../styles/themes/dark'; +import themeColors from '../../../styles/themes/default'; import BackgroundImage from './BackgroundImage'; import SignInGradient from '../../../../assets/images/home-fade-gradient.svg'; import variables from '../../../styles/variables'; diff --git a/src/pages/signin/Socials.js b/src/pages/signin/Socials.js index be6305cf1bc6..f7a866d2023b 100644 --- a/src/pages/signin/Socials.js +++ b/src/pages/signin/Socials.js @@ -5,7 +5,7 @@ import * as Link from '../../libs/actions/Link'; import Icon from '../../components/Icon'; import PressableWithoutFeedback from '../../components/Pressable/PressableWithoutFeedback'; import * as Expensicons from '../../components/Icon/Expensicons'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import styles from '../../styles/styles'; import variables from '../../styles/variables'; import CONST from '../../CONST'; diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index e0ccdca636ab..a68f99df6d24 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js @@ -7,7 +7,7 @@ import lodashGet from 'lodash/get'; import styles from '../../../styles/styles'; import Button from '../../../components/Button'; import Text from '../../../components/Text'; -import themeColors from '../../../styles/themes/dark'; +import themeColors from '../../../styles/themes/default'; import * as Session from '../../../libs/actions/Session'; import ONYXKEYS from '../../../ONYXKEYS'; import CONST from '../../../CONST'; diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js index 6073836c6e9a..98ef04836f76 100755 --- a/src/pages/workspace/WorkspacesListPage.js +++ b/src/pages/workspace/WorkspacesListPage.js @@ -10,7 +10,7 @@ import styles from '../../styles/styles'; import compose from '../../libs/compose'; import OfflineWithFeedback from '../../components/OfflineWithFeedback'; import * as Expensicons from '../../components/Icon/Expensicons'; -import themeColors from '../../styles/themes/dark'; +import themeColors from '../../styles/themes/default'; import * as PolicyUtils from '../../libs/PolicyUtils'; import MenuItem from '../../components/MenuItem'; import * as Policy from '../../libs/actions/Policy'; diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js index 8f48fc216bfd..eb8305f23140 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js +++ b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js @@ -5,7 +5,7 @@ import lodashGet from 'lodash/get'; import _ from 'underscore'; import Text from '../../../components/Text'; import styles from '../../../styles/styles'; -import themeColors from '../../../styles/themes/dark'; +import themeColors from '../../../styles/themes/default'; import * as Expensicons from '../../../components/Icon/Expensicons'; import * as Illustrations from '../../../components/Icon/Illustrations'; import Section from '../../../components/Section'; diff --git a/src/stories/Composer.stories.js b/src/stories/Composer.stories.js index 632901df582f..3dfc5b0e3ead 100644 --- a/src/stories/Composer.stories.js +++ b/src/stories/Composer.stories.js @@ -5,7 +5,7 @@ import Composer from '../components/Composer'; import RenderHTML from '../components/RenderHTML'; import Text from '../components/Text'; import styles from '../styles/styles'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; import * as StyleUtils from '../styles/StyleUtils'; import CONST from '../CONST'; diff --git a/src/stories/PopoverMenu.stories.js b/src/stories/PopoverMenu.stories.js index 198c7ef28e83..1098fa9ce226 100644 --- a/src/stories/PopoverMenu.stories.js +++ b/src/stories/PopoverMenu.stories.js @@ -3,7 +3,7 @@ import {SafeAreaProvider} from 'react-native-safe-area-context'; import PopoverMenu from '../components/PopoverMenu'; import * as Expensicons from '../components/Icon/Expensicons'; import MenuItem from '../components/MenuItem'; -import themeColors from '../styles/themes/dark'; +import themeColors from '../styles/themes/default'; /** * We use the Component Story Format for writing stories. Follow the docs here: diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 676796751dc3..f8db7272e93f 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -1,7 +1,7 @@ import _ from 'underscore'; import CONST from '../CONST'; import fontFamily from './fontFamily'; -import themeColors from './themes/dark'; +import themeColors from './themes/default'; import variables from './variables'; import colors from './colors'; import positioning from './utilities/positioning'; diff --git a/src/styles/addOutlineWidth/index.js b/src/styles/addOutlineWidth/index.js index cdb7dce7f926..2a2657b24910 100644 --- a/src/styles/addOutlineWidth/index.js +++ b/src/styles/addOutlineWidth/index.js @@ -3,7 +3,7 @@ * can be added to the object */ -import themeDefault from '../themes/dark'; +import themeDefault from '../themes/default'; /** * Adds the addOutlineWidth property to an object to be used when styling diff --git a/src/styles/getModalStyles/getBaseModalStyles.js b/src/styles/getModalStyles/getBaseModalStyles.js index 7daf944225c5..b7a3317963ca 100644 --- a/src/styles/getModalStyles/getBaseModalStyles.js +++ b/src/styles/getModalStyles/getBaseModalStyles.js @@ -1,6 +1,6 @@ import CONST from '../../CONST'; import variables from '../variables'; -import themeColors from '../themes/dark'; +import themeColors from '../themes/default'; import styles from '../styles'; const getCenteredModalStyles = (windowWidth, isSmallScreenWidth, isFullScreenWhenSmall = false) => ({ diff --git a/src/styles/getReportActionContextMenuStyles.js b/src/styles/getReportActionContextMenuStyles.js index b8084abad976..026306084ce4 100644 --- a/src/styles/getReportActionContextMenuStyles.js +++ b/src/styles/getReportActionContextMenuStyles.js @@ -1,6 +1,6 @@ import styles from './styles'; import variables from './variables'; -import themeColors from './themes/dark'; +import themeColors from './themes/default'; const defaultWrapperStyle = { backgroundColor: themeColors.componentBG, diff --git a/src/styles/getTooltipStyles.js b/src/styles/getTooltipStyles.js index 58ec3f200b2d..bc5fcfe807aa 100644 --- a/src/styles/getTooltipStyles.js +++ b/src/styles/getTooltipStyles.js @@ -1,7 +1,7 @@ import spacing from './utilities/spacing'; import styles from './styles'; import colors from './colors'; -import themeColors from './themes/dark'; +import themeColors from './themes/default'; import fontFamily from './fontFamily'; import variables from './variables'; import roundToNearestMultipleOfFour from './roundToNearestMultipleOfFour'; diff --git a/src/styles/styles.js b/src/styles/styles.js index fe47cc70c66a..835082ba98c9 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2,7 +2,7 @@ import {defaultStyles as defaultPickerStyles} from 'react-native-picker-select/s import lodashClamp from 'lodash/clamp'; import fontFamily from './fontFamily'; import addOutlineWidth from './addOutlineWidth'; -import themeColors from './themes/dark'; +import themeColors from './themes/default'; import fontWeightBold from './fontWeight/bold'; import variables from './variables'; import spacing from './utilities/spacing'; diff --git a/src/styles/themes/ThemeContext.js b/src/styles/themes/ThemeContext.js index e75c48bcab1e..12877a40ab96 100644 --- a/src/styles/themes/ThemeContext.js +++ b/src/styles/themes/ThemeContext.js @@ -1,5 +1,5 @@ import React from 'react'; -import darkTheme from './dark'; +import darkTheme from './default'; const ThemeContext = React.createContext(darkTheme); diff --git a/src/styles/themes/ThemeProvider.js b/src/styles/themes/ThemeProvider.js index 2dd92e8be729..d32a6d203cc5 100644 --- a/src/styles/themes/ThemeProvider.js +++ b/src/styles/themes/ThemeProvider.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import ThemeContext from './ThemeContext'; import useThemePreference from './useThemePreference'; import CONST from '../../CONST'; -import darkTheme from './dark'; +import darkTheme from './default'; import lightTheme from './light'; const propTypes = { diff --git a/src/styles/themes/dark.ts b/src/styles/themes/default.ts similarity index 100% rename from src/styles/themes/dark.ts rename to src/styles/themes/default.ts From 2ba934cdcf327b814af931971348f1c55d0d36d1 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Sat, 16 Sep 2023 11:56:37 +0200 Subject: [PATCH 07/30] add TODO comment about renaming default.ts --- src/styles/themes/default.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts index 70f8a9f77b8f..f7087ad558b5 100644 --- a/src/styles/themes/default.ts +++ b/src/styles/themes/default.ts @@ -1,3 +1,5 @@ +// TODO: For consistency reasons, rename this file to "dark.ts" after theme switching migration is done (GH issue:) + /* eslint-disable no-unused-vars */ import colors from '../colors'; import SCREENS from '../../SCREENS'; From 4b10b95afb44061921d9a1482d540dbbf45cf4f2 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Sat, 16 Sep 2023 12:00:20 +0200 Subject: [PATCH 08/30] fix: update outdated comment --- src/styles/colors.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/styles/colors.ts b/src/styles/colors.ts index b17f7fb4cb96..2d13f930ff0e 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -1,7 +1,9 @@ import {Color} from './themes/ThemeColors'; /** - * DO NOT import colors.js into files. Use ../themes/default.js instead. + * DO NOT import colors.js into files. Use the theme switching hooks and HOCs instead. + * For functional components, you can use the `useTheme` and `useThemeStyles` hooks + * For class components, you can use the `withTheme` and `withThemeStyles` HOCs */ const colors: Record = { black: '#000000', From 84c47315178f4ea68b1a59438084834e7dfce367 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Sat, 16 Sep 2023 12:01:54 +0200 Subject: [PATCH 09/30] fix: add TODO comment --- src/styles/colors.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/colors.ts b/src/styles/colors.ts index 2d13f930ff0e..5b05d16bb9b3 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -6,6 +6,7 @@ import {Color} from './themes/ThemeColors'; * For class components, you can use the `withTheme` and `withThemeStyles` HOCs */ const colors: Record = { + // TODO: Find a good name/description for this block of colors. black: '#000000', white: '#FFFFFF', ivory: '#fffaf0', From 429e2b664ea9a3632ba771f12fd8e1dbd3a51727 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Sat, 16 Sep 2023 12:28:03 +0200 Subject: [PATCH 10/30] fix: add types for the rest of theme switching logic --- ...StylesContext.ts => ThemeStylesContext.js} | 0 src/styles/ThemeStylesProvider.tsx | 3 ++- src/styles/themes/ThemeColors.ts | 4 +++- src/styles/themes/ThemeContext.js | 6 ------ src/styles/themes/ThemeContext.ts | 7 +++++++ .../{ThemeProvider.js => ThemeProvider.tsx} | 2 +- src/styles/themes/default.ts | 2 +- src/styles/themes/light.ts | 2 +- src/styles/themes/useTheme.js | 14 ------------- src/styles/themes/useTheme.ts | 15 +++++++++++++ ...emePreference.js => useThemePreference.ts} | 21 ++++++++++++------- 11 files changed, 43 insertions(+), 33 deletions(-) rename src/styles/{ThemeStylesContext.ts => ThemeStylesContext.js} (100%) delete mode 100644 src/styles/themes/ThemeContext.js create mode 100644 src/styles/themes/ThemeContext.ts rename src/styles/themes/{ThemeProvider.js => ThemeProvider.tsx} (93%) delete mode 100644 src/styles/themes/useTheme.js create mode 100644 src/styles/themes/useTheme.ts rename src/styles/themes/{useThemePreference.js => useThemePreference.ts} (53%) diff --git a/src/styles/ThemeStylesContext.ts b/src/styles/ThemeStylesContext.js similarity index 100% rename from src/styles/ThemeStylesContext.ts rename to src/styles/ThemeStylesContext.js diff --git a/src/styles/ThemeStylesProvider.tsx b/src/styles/ThemeStylesProvider.tsx index d0db784ca8ca..1c5c8cf3437a 100644 --- a/src/styles/ThemeStylesProvider.tsx +++ b/src/styles/ThemeStylesProvider.tsx @@ -4,8 +4,9 @@ import useTheme from './themes/useTheme'; import ThemeStylesContext from './ThemeStylesContext'; // TODO: Rename this to "styles" once the app is migrated to theme switching hooks and HOCs import {stylesGenerator as stylesUntyped} from './styles'; +import ThemeColors from './themes/ThemeColors'; -const styles = stylesUntyped as (theme: Record) => Record; +const styles = stylesUntyped as (theme: ThemeColors) => Record; type ThemeStylesProviderProps = { children: React.ReactNode; diff --git a/src/styles/themes/ThemeColors.ts b/src/styles/themes/ThemeColors.ts index 555e7ccb2274..382449ebdf62 100644 --- a/src/styles/themes/ThemeColors.ts +++ b/src/styles/themes/ThemeColors.ts @@ -83,4 +83,6 @@ type ThemeColors = ThemeColorsWithoutPageBackgroundColors & { PAGE_BACKGROUND_COLORS: Record; }; -export {type Color, type ThemeColors, type ThemeColorsWithoutPageBackgroundColors}; +export default ThemeColors; + +export {type Color, type ThemeColorsWithoutPageBackgroundColors}; diff --git a/src/styles/themes/ThemeContext.js b/src/styles/themes/ThemeContext.js deleted file mode 100644 index 12877a40ab96..000000000000 --- a/src/styles/themes/ThemeContext.js +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import darkTheme from './default'; - -const ThemeContext = React.createContext(darkTheme); - -export default ThemeContext; diff --git a/src/styles/themes/ThemeContext.ts b/src/styles/themes/ThemeContext.ts new file mode 100644 index 000000000000..98bed9ce822c --- /dev/null +++ b/src/styles/themes/ThemeContext.ts @@ -0,0 +1,7 @@ +import React from 'react'; +import darkTheme from './default'; +import ThemeColors from './ThemeColors'; + +const ThemeContext = React.createContext(darkTheme); + +export default ThemeContext; diff --git a/src/styles/themes/ThemeProvider.js b/src/styles/themes/ThemeProvider.tsx similarity index 93% rename from src/styles/themes/ThemeProvider.js rename to src/styles/themes/ThemeProvider.tsx index d32a6d203cc5..e4e316a16af1 100644 --- a/src/styles/themes/ThemeProvider.js +++ b/src/styles/themes/ThemeProvider.tsx @@ -12,7 +12,7 @@ const propTypes = { children: PropTypes.node.isRequired, }; -function ThemeProvider(props) { +function ThemeProvider(props: React.PropsWithChildren) { const themePreference = useThemePreference(); const theme = useMemo(() => (themePreference === CONST.THEME.LIGHT ? lightTheme : darkTheme), [themePreference]); diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts index f7087ad558b5..f8b8e7df10b9 100644 --- a/src/styles/themes/default.ts +++ b/src/styles/themes/default.ts @@ -3,7 +3,7 @@ /* eslint-disable no-unused-vars */ import colors from '../colors'; import SCREENS from '../../SCREENS'; -import {ThemeColors, ThemeColorsWithoutPageBackgroundColors} from './ThemeColors'; +import ThemeColors, {ThemeColorsWithoutPageBackgroundColors} from './ThemeColors'; const darkThemeWithoutPageBackgroundColors = { // Figma keys diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts index 499e1bbf127c..9b9b897acb1e 100644 --- a/src/styles/themes/light.ts +++ b/src/styles/themes/light.ts @@ -1,6 +1,6 @@ import colors from '../colors'; import SCREENS from '../../SCREENS'; -import {ThemeColors, ThemeColorsWithoutPageBackgroundColors} from './ThemeColors'; +import ThemeColors, {ThemeColorsWithoutPageBackgroundColors} from './ThemeColors'; const lightThemeWithoutPageBackgroundColors = { // Figma keys diff --git a/src/styles/themes/useTheme.js b/src/styles/themes/useTheme.js deleted file mode 100644 index 8e88b23a7688..000000000000 --- a/src/styles/themes/useTheme.js +++ /dev/null @@ -1,14 +0,0 @@ -import {useContext} from 'react'; -import ThemeContext from './ThemeContext'; - -function useTheme() { - const theme = useContext(ThemeContext); - - if (!theme) { - throw new Error('StylesContext was null! Are you sure that you wrapped the component under a ?'); - } - - return theme; -} - -export default useTheme; diff --git a/src/styles/themes/useTheme.ts b/src/styles/themes/useTheme.ts new file mode 100644 index 000000000000..51ee044d59c1 --- /dev/null +++ b/src/styles/themes/useTheme.ts @@ -0,0 +1,15 @@ +import {useContext} from 'react'; +import ThemeContext from './ThemeContext'; +import ThemeColors from './ThemeColors'; + +function useTheme(): ThemeColors { + const theme = useContext(ThemeContext); + + if (!theme) { + throw new Error('ThemeContext was null! Are you sure that you wrapped the component under a ?'); + } + + return theme; +} + +export default useTheme; diff --git a/src/styles/themes/useThemePreference.js b/src/styles/themes/useThemePreference.ts similarity index 53% rename from src/styles/themes/useThemePreference.js rename to src/styles/themes/useThemePreference.ts index fbb557423f10..8f68d55143a5 100644 --- a/src/styles/themes/useThemePreference.js +++ b/src/styles/themes/useThemePreference.ts @@ -1,26 +1,31 @@ import {useState, useEffect, useContext} from 'react'; -import {Appearance} from 'react-native'; +import {Appearance, ColorSchemeName} from 'react-native'; import CONST from '../../CONST'; import {PreferredThemeContext} from '../../components/OnyxProvider'; +// TODO: Remove this once "OnyxProvider" is typed +type PreferredThemeContextType = React.Context<(typeof CONST.THEME)[keyof typeof CONST.THEME]>; + +type ThemePreference = typeof CONST.THEME.LIGHT | typeof CONST.THEME.DARK; + function useThemePreference() { - const [themePreference, setThemePreference] = useState(CONST.THEME.DEFAULT); - const [systemTheme, setSystemTheme] = useState(); - const preferredThemeContext = useContext(PreferredThemeContext); + const [themePreference, setThemePreference] = useState(CONST.THEME.DEFAULT); + const [systemTheme, setSystemTheme] = useState(); + const preferredThemeFromStorage = useContext(PreferredThemeContext as PreferredThemeContextType); useEffect(() => { // This is used for getting the system theme, that can be set in the OS's theme settings. This will always return either "light" or "dark" and will update automatically if the OS theme changes. const systemThemeSubscription = Appearance.addChangeListener(({colorScheme}) => setSystemTheme(colorScheme)); - return systemThemeSubscription.remove; + return () => systemThemeSubscription.remove(); }, []); useEffect(() => { - const theme = preferredThemeContext || CONST.THEME.DEFAULT; + const theme = preferredThemeFromStorage || CONST.THEME.DEFAULT; // If the user chooses to use the device theme settings, we need to set the theme preference to the system theme - if (theme === CONST.THEME.SYSTEM) setThemePreference(systemTheme); + if (theme === CONST.THEME.SYSTEM) setThemePreference(systemTheme ?? CONST.THEME.DEFAULT); else setThemePreference(theme); - }, [preferredThemeContext, systemTheme]); + }, [preferredThemeFromStorage, systemTheme]); return themePreference; } From b7b1179f4bce3f0ca23ad471f14875d1f424a3a4 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Sat, 16 Sep 2023 12:28:48 +0200 Subject: [PATCH 11/30] fix: type remaining file with TODO --- src/styles/ThemeStylesContext.js | 6 ------ src/styles/ThemeStylesContext.ts | 7 +++++++ 2 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 src/styles/ThemeStylesContext.js create mode 100644 src/styles/ThemeStylesContext.ts diff --git a/src/styles/ThemeStylesContext.js b/src/styles/ThemeStylesContext.js deleted file mode 100644 index 1c81ab3b39a5..000000000000 --- a/src/styles/ThemeStylesContext.js +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import styles from './styles'; - -const ThemeStylesContext = React.createContext(styles); - -export default ThemeStylesContext; diff --git a/src/styles/ThemeStylesContext.ts b/src/styles/ThemeStylesContext.ts new file mode 100644 index 000000000000..c32f994e16da --- /dev/null +++ b/src/styles/ThemeStylesContext.ts @@ -0,0 +1,7 @@ +import React from 'react'; +import styles from './styles'; + +// TODO: Change "uknown" once "styles.js" is typed +const ThemeStylesContext = React.createContext(styles); + +export default ThemeStylesContext; From f69116a29911d67ea1257b90392164e70aa32d2e Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Tue, 19 Sep 2023 10:23:30 +0200 Subject: [PATCH 12/30] fix: remove theme spreading and abstraction --- src/styles/themes/ThemeColors.ts | 6 ++---- src/styles/themes/default.ts | 9 +++------ src/styles/themes/light.ts | 9 +++------ 3 files changed, 8 insertions(+), 16 deletions(-) diff --git a/src/styles/themes/ThemeColors.ts b/src/styles/themes/ThemeColors.ts index 382449ebdf62..19840a05491b 100644 --- a/src/styles/themes/ThemeColors.ts +++ b/src/styles/themes/ThemeColors.ts @@ -1,6 +1,6 @@ type Color = string; -type ThemeColorsWithoutPageBackgroundColors = { +type ThemeColors = { // Figma keys appBG: Color; splashBG: Color; @@ -77,12 +77,10 @@ type ThemeColorsWithoutPageBackgroundColors = { skeletonLHNIn: Color; skeletonLHNOut: Color; QRLogo: Color; -}; -type ThemeColors = ThemeColorsWithoutPageBackgroundColors & { PAGE_BACKGROUND_COLORS: Record; }; export default ThemeColors; -export {type Color, type ThemeColorsWithoutPageBackgroundColors}; +export {type Color}; diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts index f8b8e7df10b9..b8eccb761bfa 100644 --- a/src/styles/themes/default.ts +++ b/src/styles/themes/default.ts @@ -3,9 +3,9 @@ /* eslint-disable no-unused-vars */ import colors from '../colors'; import SCREENS from '../../SCREENS'; -import ThemeColors, {ThemeColorsWithoutPageBackgroundColors} from './ThemeColors'; +import ThemeColors from './ThemeColors'; -const darkThemeWithoutPageBackgroundColors = { +const darkTheme = { // Figma keys appBG: colors.darkAppBackground, splashBG: colors.green400, @@ -82,12 +82,9 @@ const darkThemeWithoutPageBackgroundColors = { skeletonLHNIn: colors.darkBorders, skeletonLHNOut: colors.darkDefaultButton, QRLogo: colors.green400, -} satisfies ThemeColorsWithoutPageBackgroundColors; -const darkTheme = { - ...darkThemeWithoutPageBackgroundColors, PAGE_BACKGROUND_COLORS: { - [SCREENS.HOME]: darkThemeWithoutPageBackgroundColors.sidebar, + [SCREENS.HOME]: colors.darkHighlightBackground, [SCREENS.SETTINGS.PREFERENCES]: colors.blue500, }, } satisfies ThemeColors; diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts index 9b9b897acb1e..f5edb41e6094 100644 --- a/src/styles/themes/light.ts +++ b/src/styles/themes/light.ts @@ -1,8 +1,8 @@ import colors from '../colors'; import SCREENS from '../../SCREENS'; -import ThemeColors, {ThemeColorsWithoutPageBackgroundColors} from './ThemeColors'; +import ThemeColors from './ThemeColors'; -const lightThemeWithoutPageBackgroundColors = { +const lightTheme = { // Figma keys appBG: colors.lightAppBackground, splashBG: colors.green400, @@ -79,12 +79,9 @@ const lightThemeWithoutPageBackgroundColors = { skeletonLHNIn: colors.lightBorders, skeletonLHNOut: colors.lightDefaultButtonPressed, QRLogo: colors.green500, -} satisfies ThemeColorsWithoutPageBackgroundColors; -const lightTheme = { - ...lightThemeWithoutPageBackgroundColors, PAGE_BACKGROUND_COLORS: { - [SCREENS.HOME]: lightThemeWithoutPageBackgroundColors.sidebar, + [SCREENS.HOME]: colors.lightBorders, [SCREENS.SETTINGS.PREFERENCES]: colors.blue500, }, } satisfies ThemeColors; From 08f5b4fd9101053e38db965c839acbe576fa6e17 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Tue, 19 Sep 2023 10:37:51 +0200 Subject: [PATCH 13/30] fix: changed colors --- src/styles/themes/ThemeColors.ts | 5 ++++- src/styles/themes/default.ts | 4 +++- src/styles/themes/light.ts | 4 +++- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/styles/themes/ThemeColors.ts b/src/styles/themes/ThemeColors.ts index 19840a05491b..f4cdc3445c1f 100644 --- a/src/styles/themes/ThemeColors.ts +++ b/src/styles/themes/ThemeColors.ts @@ -16,6 +16,7 @@ type ThemeColors = { iconColorfulBackground: Color; textSupporting: Color; text: Color; + textColorfulBackground: Color; link: Color; linkHover: Color; buttonDefaultBG: Color; @@ -59,7 +60,8 @@ type ThemeColors = { heroCard: Color; uploadPreviewActivityIndicator: Color; dropUIBG: Color; - dropTransparentOverlay: Color; + receiptDropUIBG?: Color; + dropTransparentOverlay?: Color; checkBox: Color; pickerOptionsTextColor: Color; imageCropBackgroundColor: Color; @@ -77,6 +79,7 @@ type ThemeColors = { skeletonLHNIn: Color; skeletonLHNOut: Color; QRLogo: Color; + starDefaultBG: Color; PAGE_BACKGROUND_COLORS: Record; }; diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts index b8eccb761bfa..f521efba6047 100644 --- a/src/styles/themes/default.ts +++ b/src/styles/themes/default.ts @@ -21,6 +21,7 @@ const darkTheme = { iconColorfulBackground: `${colors.ivory}cc`, textSupporting: colors.darkSupportingText, text: colors.darkPrimaryText, + textColorfulBackground: colors.ivory, link: colors.blue300, linkHover: colors.blue100, buttonDefaultBG: colors.darkDefaultButton, @@ -64,7 +65,7 @@ const darkTheme = { heroCard: colors.blue400, uploadPreviewActivityIndicator: colors.darkHighlightBackground, dropUIBG: 'rgba(6,27,9,0.92)', - dropTransparentOverlay: 'rgba(255,255,255,0)', + receiptDropUIBG: 'rgba(3, 212, 124, 0.84)', checkBox: colors.green400, pickerOptionsTextColor: colors.darkPrimaryText, imageCropBackgroundColor: colors.darkIcons, @@ -82,6 +83,7 @@ const darkTheme = { skeletonLHNIn: colors.darkBorders, skeletonLHNOut: colors.darkDefaultButton, QRLogo: colors.green400, + starDefaultBG: 'rgb(254, 228, 94)', PAGE_BACKGROUND_COLORS: { [SCREENS.HOME]: colors.darkHighlightBackground, diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts index f5edb41e6094..d9c2eef42840 100644 --- a/src/styles/themes/light.ts +++ b/src/styles/themes/light.ts @@ -18,6 +18,7 @@ const lightTheme = { iconColorfulBackground: `${colors.ivory}cc`, textSupporting: colors.lightSupportingText, text: colors.lightPrimaryText, + textColorfulBackground: colors.ivory, link: colors.blue600, linkHover: colors.blue500, buttonDefaultBG: colors.lightDefaultButton, @@ -78,7 +79,8 @@ const lightTheme = { tooltipPrimaryText: colors.darkPrimaryText, skeletonLHNIn: colors.lightBorders, skeletonLHNOut: colors.lightDefaultButtonPressed, - QRLogo: colors.green500, + QRLogo: colors.green400, + starDefaultBG: 'rgb(254, 228, 94)', PAGE_BACKGROUND_COLORS: { [SCREENS.HOME]: colors.lightBorders, From fd4e5aa701d0400d9e7393fabaa086bea3b46ee3 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Tue, 19 Sep 2023 10:41:24 +0200 Subject: [PATCH 14/30] fix: remove more diffs to main --- src/styles/themes/default.ts | 5 +++++ src/styles/themes/light.ts | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts index f521efba6047..ce96213a6bd5 100644 --- a/src/styles/themes/default.ts +++ b/src/styles/themes/default.ts @@ -4,6 +4,7 @@ import colors from '../colors'; import SCREENS from '../../SCREENS'; import ThemeColors from './ThemeColors'; +import ROUTES from '../../ROUTES'; const darkTheme = { // Figma keys @@ -88,6 +89,10 @@ const darkTheme = { PAGE_BACKGROUND_COLORS: { [SCREENS.HOME]: colors.darkHighlightBackground, [SCREENS.SETTINGS.PREFERENCES]: colors.blue500, + [SCREENS.SETTINGS.WORKSPACES]: colors.pink800, + [ROUTES.SETTINGS_STATUS]: colors.green700, + [ROUTES.I_KNOW_A_TEACHER]: colors.tangerine800, + [ROUTES.SETTINGS_SECURITY]: colors.ice500, }, } satisfies ThemeColors; diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts index d9c2eef42840..154c717dee89 100644 --- a/src/styles/themes/light.ts +++ b/src/styles/themes/light.ts @@ -1,6 +1,7 @@ import colors from '../colors'; import SCREENS from '../../SCREENS'; import ThemeColors from './ThemeColors'; +import ROUTES from '../../ROUTES'; const lightTheme = { // Figma keys @@ -85,6 +86,10 @@ const lightTheme = { PAGE_BACKGROUND_COLORS: { [SCREENS.HOME]: colors.lightBorders, [SCREENS.SETTINGS.PREFERENCES]: colors.blue500, + [SCREENS.SETTINGS.WORKSPACES]: colors.pink800, + [ROUTES.SETTINGS_STATUS]: colors.green700, + [ROUTES.I_KNOW_A_TEACHER]: colors.tangerine800, + [ROUTES.SETTINGS_SECURITY]: colors.ice500, }, } satisfies ThemeColors; From c794fd19a17285281137c4b59c02b154e628c2af Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Tue, 19 Sep 2023 10:43:49 +0200 Subject: [PATCH 15/30] fix: typo --- src/styles/ThemeStylesContext.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/ThemeStylesContext.ts b/src/styles/ThemeStylesContext.ts index c32f994e16da..49f9eb127af9 100644 --- a/src/styles/ThemeStylesContext.ts +++ b/src/styles/ThemeStylesContext.ts @@ -1,7 +1,7 @@ import React from 'react'; import styles from './styles'; -// TODO: Change "uknown" once "styles.js" is typed +// TODO: Change "unknown" once "styles.js" is typed const ThemeStylesContext = React.createContext(styles); export default ThemeStylesContext; From 10f4778e1a75132a4864400192dcf8b770219f10 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Tue, 19 Sep 2023 10:44:48 +0200 Subject: [PATCH 16/30] update todo comments --- src/styles/ThemeStylesProvider.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/ThemeStylesProvider.tsx b/src/styles/ThemeStylesProvider.tsx index 1c5c8cf3437a..37f43c2c4f3f 100644 --- a/src/styles/ThemeStylesProvider.tsx +++ b/src/styles/ThemeStylesProvider.tsx @@ -2,10 +2,11 @@ import React, {useMemo} from 'react'; import useTheme from './themes/useTheme'; import ThemeStylesContext from './ThemeStylesContext'; -// TODO: Rename this to "styles" once the app is migrated to theme switching hooks and HOCs +// TODO: Rename this to "styles" once the styles are fully typed import {stylesGenerator as stylesUntyped} from './styles'; import ThemeColors from './themes/ThemeColors'; +// TODO: Remove this once the styles are fully typed const styles = stylesUntyped as (theme: ThemeColors) => Record; type ThemeStylesProviderProps = { From dba25a2a693737b6261cd6e73a46d07cdd9fc253 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Tue, 19 Sep 2023 10:45:43 +0200 Subject: [PATCH 17/30] fix: naming --- src/styles/useThemeStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/useThemeStyles.ts b/src/styles/useThemeStyles.ts index a5b3baebbaec..69ba43692f49 100644 --- a/src/styles/useThemeStyles.ts +++ b/src/styles/useThemeStyles.ts @@ -5,7 +5,7 @@ function useThemeStyles() { const themeStyles = useContext(ThemeStylesContext); if (!themeStyles) { - throw new Error('StylesContext was null! Are you sure that you wrapped the component under a ?'); + throw new Error('ThemeStylesContext was null! Are you sure that you wrapped the component under a ?'); } // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337) From 0bbcd568dced2640225b31ec018dc39e278aa345 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Tue, 19 Sep 2023 16:31:53 +0200 Subject: [PATCH 18/30] fix: update styles.ts --- src/styles/styles.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/styles/styles.ts b/src/styles/styles.ts index 632c02530e23..aa66d1a51c58 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -18,7 +18,6 @@ import overflowXHidden from './overflowXHidden'; import pointerEventsAuto from './pointerEventsAuto'; import pointerEventsNone from './pointerEventsNone'; import defaultTheme from './themes/default'; -import {ThemeDefault} from './themes/types'; import cursor from './utilities/cursor'; import display from './utilities/display'; import flex from './utilities/flex'; @@ -33,6 +32,7 @@ import whiteSpace from './utilities/whiteSpace'; import wordBreak from './utilities/wordBreak'; import writingDirection from './utilities/writingDirection'; import variables from './variables'; +import ThemeColors from './themes/ThemeColors'; type AnchorPosition = { horizontal: number; @@ -76,7 +76,7 @@ const touchCalloutNone: Pick = Browser.isMobile // to prevent vertical text offset in Safari for badges, new lineHeight values have been added const lineHeightBadge: Pick = Browser.isSafari() ? {lineHeight: variables.lineHeightXSmall} : {lineHeight: variables.lineHeightNormal}; -const picker = (theme: ThemeDefault) => +const picker = (theme: ThemeColors) => ({ backgroundColor: theme.transparent, color: theme.text, @@ -92,14 +92,14 @@ const picker = (theme: ThemeDefault) => textAlign: 'left', } satisfies TextStyle); -const link = (theme: ThemeDefault) => +const link = (theme: ThemeColors) => ({ color: theme.link, textDecorationColor: theme.link, fontFamily: fontFamily.EXP_NEUE, } satisfies ViewStyle & MixedStyleDeclaration); -const baseCodeTagStyles = (theme: ThemeDefault) => +const baseCodeTagStyles = (theme: ThemeColors) => ({ borderWidth: 1, borderRadius: 5, @@ -112,7 +112,7 @@ const headlineFont = { fontWeight: '500', } satisfies TextStyle; -const webViewStyles = (theme: ThemeDefault) => +const webViewStyles = (theme: ThemeColors) => ({ // As of react-native-render-html v6, don't declare distinct styles for // custom renderers, the API for custom renderers has changed. Declare the @@ -206,7 +206,7 @@ const webViewStyles = (theme: ThemeDefault) => }, } satisfies WebViewStyle); -const styles = (theme: ThemeDefault) => +const styles = (theme: ThemeColors) => ({ // Add all of our utility and helper styles ...spacing, From 2b6f41222ca7190095b2be743558e046c0089c6f Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Tue, 19 Sep 2023 16:37:00 +0200 Subject: [PATCH 19/30] feat: update types int ThemeStylesProvider logic --- src/styles/ThemeStylesContext.ts | 5 ++--- src/styles/ThemeStylesProvider.tsx | 3 +-- src/styles/styles.ts | 2 +- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/styles/ThemeStylesContext.ts b/src/styles/ThemeStylesContext.ts index 49f9eb127af9..3df2b19b31bf 100644 --- a/src/styles/ThemeStylesContext.ts +++ b/src/styles/ThemeStylesContext.ts @@ -1,7 +1,6 @@ import React from 'react'; -import styles from './styles'; +import styles, {type Styles} from './styles'; -// TODO: Change "unknown" once "styles.js" is typed -const ThemeStylesContext = React.createContext(styles); +const ThemeStylesContext = React.createContext(styles); export default ThemeStylesContext; diff --git a/src/styles/ThemeStylesProvider.tsx b/src/styles/ThemeStylesProvider.tsx index 09b7fd2837be..581edab55f3f 100644 --- a/src/styles/ThemeStylesProvider.tsx +++ b/src/styles/ThemeStylesProvider.tsx @@ -2,9 +2,8 @@ import React, {useMemo} from 'react'; import useTheme from './themes/useTheme'; import ThemeStylesContext from './ThemeStylesContext'; -// TODO: Rename this to "styles" once the styles are fully typed +// TODO: Replace this import with "styles" once the static style export from "styles.js" isn't used anymore import {stylesGenerator} from './styles'; -import ThemeColors from './themes/ThemeColors'; type ThemeStylesProviderProps = { children: React.ReactNode; diff --git a/src/styles/styles.ts b/src/styles/styles.ts index aa66d1a51c58..e2db4989661c 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -4054,4 +4054,4 @@ const stylesGenerator = styles; const defaultStyles = styles(defaultTheme); export default defaultStyles; -export {stylesGenerator}; +export {stylesGenerator, type Styles}; From e4d4a107a271619e8746bb0ba82441b95a06b57f Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 20 Sep 2023 08:30:55 +0200 Subject: [PATCH 20/30] fix: merge main --- src/styles/styles.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/styles/styles.ts b/src/styles/styles.ts index e2db4989661c..e15779f78d0d 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -3743,27 +3743,26 @@ const styles = (theme: ThemeColors) => }, loginButtonRow: { - justifyContent: 'center', width: '100%', + gap: 12, ...flex.flexRow, + ...flex.justifyContentCenter, }, loginButtonRowSmallScreen: { - justifyContent: 'center', width: '100%', - marginBottom: 10, + gap: 12, ...flex.flexRow, + ...flex.justifyContentCenter, + marginBottom: 10, }, - appleButtonContainer: { + desktopSignInButtonContainer: { width: 40, height: 40, - marginRight: 20, }, signInIconButton: { - margin: 10, - marginTop: 0, padding: 2, }, @@ -3771,7 +3770,6 @@ const styles = (theme: ThemeColors) => colorScheme: 'light', width: 40, height: 40, - marginLeft: 12, alignItems: 'center', overflow: 'hidden', }, From 3f2830063ab69f0e0aa8ea2bc03e25189215e287 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 20 Sep 2023 08:31:01 +0200 Subject: [PATCH 21/30] enforce consistent themes --- src/styles/themes/ThemeColors.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/themes/ThemeColors.ts b/src/styles/themes/ThemeColors.ts index f4cdc3445c1f..2347cbd3633f 100644 --- a/src/styles/themes/ThemeColors.ts +++ b/src/styles/themes/ThemeColors.ts @@ -61,7 +61,6 @@ type ThemeColors = { uploadPreviewActivityIndicator: Color; dropUIBG: Color; receiptDropUIBG?: Color; - dropTransparentOverlay?: Color; checkBox: Color; pickerOptionsTextColor: Color; imageCropBackgroundColor: Color; From fb20af781e1c2c8425fadd49cad2f248a4e6d0b1 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 20 Sep 2023 08:39:36 +0200 Subject: [PATCH 22/30] fix: move ThemeColors to types.ts --- src/styles/colors.ts | 2 +- src/styles/styles.ts | 2 +- src/styles/themes/ThemeColors.ts | 88 ------------------------------- src/styles/themes/ThemeContext.ts | 2 +- src/styles/themes/default.ts | 2 +- src/styles/themes/light.ts | 2 +- src/styles/themes/types.ts | 88 +++++++++++++++++++++++++++++-- src/styles/themes/useTheme.ts | 2 +- 8 files changed, 89 insertions(+), 99 deletions(-) delete mode 100644 src/styles/themes/ThemeColors.ts diff --git a/src/styles/colors.ts b/src/styles/colors.ts index 5b05d16bb9b3..aa12699ebdea 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -1,4 +1,4 @@ -import {Color} from './themes/ThemeColors'; +import {Color} from './themes/types'; /** * DO NOT import colors.js into files. Use the theme switching hooks and HOCs instead. diff --git a/src/styles/styles.ts b/src/styles/styles.ts index e15779f78d0d..ce3e2938d26d 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -32,7 +32,7 @@ import whiteSpace from './utilities/whiteSpace'; import wordBreak from './utilities/wordBreak'; import writingDirection from './utilities/writingDirection'; import variables from './variables'; -import ThemeColors from './themes/ThemeColors'; +import {ThemeColors} from './themes/types'; type AnchorPosition = { horizontal: number; diff --git a/src/styles/themes/ThemeColors.ts b/src/styles/themes/ThemeColors.ts deleted file mode 100644 index 2347cbd3633f..000000000000 --- a/src/styles/themes/ThemeColors.ts +++ /dev/null @@ -1,88 +0,0 @@ -type Color = string; - -type ThemeColors = { - // Figma keys - appBG: Color; - splashBG: Color; - highlightBG: Color; - border: Color; - borderLighter: Color; - borderFocus: Color; - icon: Color; - iconMenu: Color; - iconHovered: Color; - iconSuccessFill: Color; - iconReversed: Color; - iconColorfulBackground: Color; - textSupporting: Color; - text: Color; - textColorfulBackground: Color; - link: Color; - linkHover: Color; - buttonDefaultBG: Color; - buttonHoveredBG: Color; - buttonPressedBG: Color; - danger: Color; - dangerHover: Color; - dangerPressed: Color; - warning: Color; - success: Color; - successHover: Color; - successPressed: Color; - transparent: Color; - signInPage: Color; - - // Additional keys - overlay: Color; - inverse: Color; - shadow: Color; - componentBG: Color; - hoverComponentBG: Color; - activeComponentBG: Color; - signInSidebar: Color; - sidebar: Color; - sidebarHover: Color; - heading: Color; - textLight: Color; - textDark: Color; - textReversed: Color; - textBackground: Color; - textMutedReversed: Color; - textError: Color; - offline: Color; - modalBackdrop: Color; - modalBackground: Color; - cardBG: Color; - cardBorder: Color; - spinner: Color; - unreadIndicator: Color; - placeholderText: Color; - heroCard: Color; - uploadPreviewActivityIndicator: Color; - dropUIBG: Color; - receiptDropUIBG?: Color; - checkBox: Color; - pickerOptionsTextColor: Color; - imageCropBackgroundColor: Color; - fallbackIconColor: Color; - reactionActiveBackground: Color; - reactionActiveText: Color; - badgeAdHoc: Color; - badgeAdHocHover: Color; - mentionText: Color; - mentionBG: Color; - ourMentionText: Color; - ourMentionBG: Color; - tooltipSupportingText: Color; - tooltipPrimaryText: Color; - skeletonLHNIn: Color; - skeletonLHNOut: Color; - QRLogo: Color; - starDefaultBG: Color; - - PAGE_BACKGROUND_COLORS: Record; -}; - -export default ThemeColors; - -export {type Color}; diff --git a/src/styles/themes/ThemeContext.ts b/src/styles/themes/ThemeContext.ts index 98bed9ce822c..8c57cc9c7e9f 100644 --- a/src/styles/themes/ThemeContext.ts +++ b/src/styles/themes/ThemeContext.ts @@ -1,6 +1,6 @@ import React from 'react'; import darkTheme from './default'; -import ThemeColors from './ThemeColors'; +import {ThemeColors} from './types'; const ThemeContext = React.createContext(darkTheme); diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts index ce96213a6bd5..2fa17b832a72 100644 --- a/src/styles/themes/default.ts +++ b/src/styles/themes/default.ts @@ -3,7 +3,7 @@ /* eslint-disable no-unused-vars */ import colors from '../colors'; import SCREENS from '../../SCREENS'; -import ThemeColors from './ThemeColors'; +import {ThemeColors} from './types'; import ROUTES from '../../ROUTES'; const darkTheme = { diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts index 0a9fda7344b8..9b39a94f02a6 100644 --- a/src/styles/themes/light.ts +++ b/src/styles/themes/light.ts @@ -1,6 +1,6 @@ import colors from '../colors'; import SCREENS from '../../SCREENS'; -import ThemeColors from './ThemeColors'; +import {ThemeColors} from './types'; import ROUTES from '../../ROUTES'; const lightTheme = { diff --git a/src/styles/themes/types.ts b/src/styles/themes/types.ts index 40b8da361654..1ffe3e776a7e 100644 --- a/src/styles/themes/types.ts +++ b/src/styles/themes/types.ts @@ -1,8 +1,86 @@ -import DeepRecord from '../../types/utils/DeepRecord'; -import defaultTheme from './default'; +type Color = string; -type ThemeBase = DeepRecord; +type ThemeColors = { + // Figma keys + appBG: Color; + splashBG: Color; + highlightBG: Color; + border: Color; + borderLighter: Color; + borderFocus: Color; + icon: Color; + iconMenu: Color; + iconHovered: Color; + iconSuccessFill: Color; + iconReversed: Color; + iconColorfulBackground: Color; + textSupporting: Color; + text: Color; + textColorfulBackground: Color; + link: Color; + linkHover: Color; + buttonDefaultBG: Color; + buttonHoveredBG: Color; + buttonPressedBG: Color; + danger: Color; + dangerHover: Color; + dangerPressed: Color; + warning: Color; + success: Color; + successHover: Color; + successPressed: Color; + transparent: Color; + signInPage: Color; -type ThemeDefault = typeof defaultTheme; + // Additional keys + overlay: Color; + inverse: Color; + shadow: Color; + componentBG: Color; + hoverComponentBG: Color; + activeComponentBG: Color; + signInSidebar: Color; + sidebar: Color; + sidebarHover: Color; + heading: Color; + textLight: Color; + textDark: Color; + textReversed: Color; + textBackground: Color; + textMutedReversed: Color; + textError: Color; + offline: Color; + modalBackdrop: Color; + modalBackground: Color; + cardBG: Color; + cardBorder: Color; + spinner: Color; + unreadIndicator: Color; + placeholderText: Color; + heroCard: Color; + uploadPreviewActivityIndicator: Color; + dropUIBG: Color; + receiptDropUIBG?: Color; + checkBox: Color; + pickerOptionsTextColor: Color; + imageCropBackgroundColor: Color; + fallbackIconColor: Color; + reactionActiveBackground: Color; + reactionActiveText: Color; + badgeAdHoc: Color; + badgeAdHocHover: Color; + mentionText: Color; + mentionBG: Color; + ourMentionText: Color; + ourMentionBG: Color; + tooltipSupportingText: Color; + tooltipPrimaryText: Color; + skeletonLHNIn: Color; + skeletonLHNOut: Color; + QRLogo: Color; + starDefaultBG: Color; -export type {ThemeBase, ThemeDefault}; + PAGE_BACKGROUND_COLORS: Record; +}; + +export {type ThemeColors, type Color}; diff --git a/src/styles/themes/useTheme.ts b/src/styles/themes/useTheme.ts index 51ee044d59c1..8bb4fe73c106 100644 --- a/src/styles/themes/useTheme.ts +++ b/src/styles/themes/useTheme.ts @@ -1,6 +1,6 @@ import {useContext} from 'react'; import ThemeContext from './ThemeContext'; -import ThemeColors from './ThemeColors'; +import {ThemeColors} from './types'; function useTheme(): ThemeColors { const theme = useContext(ThemeContext); From 33d0bc8e0d69338e1a337a54ed52aa1f953f351d Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 20 Sep 2023 08:40:30 +0200 Subject: [PATCH 23/30] fix: make colors non optional --- src/styles/themes/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/themes/types.ts b/src/styles/themes/types.ts index 1ffe3e776a7e..eb72685bbd80 100644 --- a/src/styles/themes/types.ts +++ b/src/styles/themes/types.ts @@ -60,7 +60,7 @@ type ThemeColors = { heroCard: Color; uploadPreviewActivityIndicator: Color; dropUIBG: Color; - receiptDropUIBG?: Color; + receiptDropUIBG: Color; checkBox: Color; pickerOptionsTextColor: Color; imageCropBackgroundColor: Color; From 0b7a8724bcc2295e00915181e9b868c7770785d3 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 20 Sep 2023 08:45:31 +0200 Subject: [PATCH 24/30] fix: add remaining color in light theme --- src/styles/themes/light.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts index 9b39a94f02a6..fb1747b2d77b 100644 --- a/src/styles/themes/light.ts +++ b/src/styles/themes/light.ts @@ -63,7 +63,7 @@ const lightTheme = { heroCard: colors.blue400, uploadPreviewActivityIndicator: colors.lightHighlightBackground, dropUIBG: 'rgba(252, 251, 249, 0.92)', - receiptDropUIBG: '', // TODO: add color + receiptDropUIBG: 'rgba(3, 212, 124, 0.84)', checkBox: colors.green400, pickerOptionsTextColor: colors.lightPrimaryText, imageCropBackgroundColor: colors.lightIcons, From 58a59de71799c2c9e2208d20bb72a79719ef6f39 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Thu, 19 Oct 2023 09:16:41 +0200 Subject: [PATCH 25/30] remove TODO --- src/styles/ThemeStylesProvider.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/ThemeStylesProvider.tsx b/src/styles/ThemeStylesProvider.tsx index 581edab55f3f..2ef9a8521e4d 100644 --- a/src/styles/ThemeStylesProvider.tsx +++ b/src/styles/ThemeStylesProvider.tsx @@ -2,7 +2,6 @@ import React, {useMemo} from 'react'; import useTheme from './themes/useTheme'; import ThemeStylesContext from './ThemeStylesContext'; -// TODO: Replace this import with "styles" once the static style export from "styles.js" isn't used anymore import {stylesGenerator} from './styles'; type ThemeStylesProviderProps = { From 2caad032d15b66b39fe3ca6e21046a0023add5a7 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Thu, 19 Oct 2023 09:17:28 +0200 Subject: [PATCH 26/30] replace comment --- src/styles/colors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/colors.ts b/src/styles/colors.ts index aa12699ebdea..fbe694e051ee 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -6,7 +6,7 @@ import {Color} from './themes/types'; * For class components, you can use the `withTheme` and `withThemeStyles` HOCs */ const colors: Record = { - // TODO: Find a good name/description for this block of colors. + // Brand Colors black: '#000000', white: '#FFFFFF', ivory: '#fffaf0', From ef2771c22e51956bb195eb259176b22ffe9d7929 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Thu, 19 Oct 2023 09:17:48 +0200 Subject: [PATCH 27/30] remove TODO --- src/styles/themes/default.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts index 0edd7f90e1df..f8be30a9d881 100644 --- a/src/styles/themes/default.ts +++ b/src/styles/themes/default.ts @@ -1,4 +1,3 @@ -// TODO: For consistency reasons, rename this file to "dark.ts" after theme switching migration is done (GH issue:) import colors from '../colors'; import SCREENS from '../../SCREENS'; import {ThemeColors} from './types'; From 23bcb925508d4a2e56d25195f1c2876bb1b5c37d Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Thu, 19 Oct 2023 09:25:27 +0200 Subject: [PATCH 28/30] remove TODO block --- src/styles/themes/useThemePreference.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/styles/themes/useThemePreference.ts b/src/styles/themes/useThemePreference.ts index 4a7dd067f0d5..6e07ab35f65c 100644 --- a/src/styles/themes/useThemePreference.ts +++ b/src/styles/themes/useThemePreference.ts @@ -3,15 +3,12 @@ import {Appearance, ColorSchemeName} from 'react-native'; import CONST from '../../CONST'; import {PreferredThemeContext} from '../../components/OnyxProvider'; -// TODO: Remove this once "OnyxProvider" is typed -type PreferredThemeContextType = React.Context<(typeof CONST.THEME)[keyof typeof CONST.THEME]>; - type ThemePreference = typeof CONST.THEME.LIGHT | typeof CONST.THEME.DARK; function useThemePreference() { const [themePreference, setThemePreference] = useState(CONST.THEME.DEFAULT); const [systemTheme, setSystemTheme] = useState(); - const preferredThemeFromStorage = useContext(PreferredThemeContext as PreferredThemeContextType); + const preferredThemeFromStorage = useContext(PreferredThemeContext); useEffect(() => { // This is used for getting the system theme, that can be set in the OS's theme settings. This will always return either "light" or "dark" and will update automatically if the OS theme changes. @@ -20,7 +17,7 @@ function useThemePreference() { }, []); useEffect(() => { - const theme = preferredThemeFromStorage || CONST.THEME.DEFAULT; + const theme = preferredThemeFromStorage ?? CONST.THEME.DEFAULT; // If the user chooses to use the device theme settings, we need to set the theme preference to the system theme if (theme === CONST.THEME.SYSTEM) { From 0c74c178d1a6d89640edb706512f8c9db93a2e27 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Thu, 2 Nov 2023 17:40:35 +0100 Subject: [PATCH 29/30] fix: imports and remove TODO blocks --- src/styles/ThemeStylesProvider.tsx | 3 --- src/styles/styles.ts | 4 ---- src/styles/themes/default.ts | 2 +- src/styles/themes/light.ts | 2 +- 4 files changed, 2 insertions(+), 9 deletions(-) diff --git a/src/styles/ThemeStylesProvider.tsx b/src/styles/ThemeStylesProvider.tsx index 78bea4d413c3..2ef9a8521e4d 100644 --- a/src/styles/ThemeStylesProvider.tsx +++ b/src/styles/ThemeStylesProvider.tsx @@ -3,9 +3,6 @@ import React, {useMemo} from 'react'; import useTheme from './themes/useTheme'; import ThemeStylesContext from './ThemeStylesContext'; import {stylesGenerator} from './styles'; -import {stylesGenerator as stylesUntyped} from './styles'; - -const styles = stylesUntyped; type ThemeStylesProviderProps = { children: React.ReactNode; diff --git a/src/styles/styles.ts b/src/styles/styles.ts index 54b2f8280a44..cda2545a9178 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -4013,10 +4013,6 @@ const styles = (theme: ThemeColors) => }, } satisfies Styles); -// For now we need to export the styles function that takes the theme as an argument -// as something named different than "styles", because a lot of files import the "defaultStyles" -// as "styles", which causes ESLint to throw an error. -// TODO: Remove "stylesGenerator" and instead only return "styles" once the app is migrated to theme switching hooks and HOCs and "styles/theme/default.js" is not used anywhere anymore (GH issue: https://github.com/Expensify/App/issues/27337) const stylesGenerator = styles; const defaultStyles = styles(defaultTheme); diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts index bbeb720edbab..dd92b1ce71d9 100644 --- a/src/styles/themes/default.ts +++ b/src/styles/themes/default.ts @@ -1,6 +1,6 @@ -import {ThemeColors} from './types'; import colors from '@styles/colors'; import SCREENS from '@src/SCREENS'; +import {ThemeColors} from './types'; const darkTheme = { // Figma keys diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts index 33b1851e343f..97fe2322945a 100644 --- a/src/styles/themes/light.ts +++ b/src/styles/themes/light.ts @@ -1,6 +1,6 @@ -import {ThemeColors} from './types'; import colors from '@styles/colors'; import SCREENS from '@src/SCREENS'; +import {ThemeColors} from './types'; const lightTheme = { // Figma keys From b46f0b20912aa2f2161d2bdbc7bf9e838d449e4a Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Sun, 5 Nov 2023 16:38:28 +0100 Subject: [PATCH 30/30] fix: prettier --- src/styles/ThemeStylesProvider.tsx | 2 +- src/styles/themes/ThemeProvider.tsx | 4 ++-- src/styles/themes/useThemePreference.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/ThemeStylesProvider.tsx b/src/styles/ThemeStylesProvider.tsx index 2ef9a8521e4d..7f26422e98ce 100644 --- a/src/styles/ThemeStylesProvider.tsx +++ b/src/styles/ThemeStylesProvider.tsx @@ -1,8 +1,8 @@ /* eslint-disable react/jsx-props-no-spreading */ import React, {useMemo} from 'react'; +import {stylesGenerator} from './styles'; import useTheme from './themes/useTheme'; import ThemeStylesContext from './ThemeStylesContext'; -import {stylesGenerator} from './styles'; type ThemeStylesProviderProps = { children: React.ReactNode; diff --git a/src/styles/themes/ThemeProvider.tsx b/src/styles/themes/ThemeProvider.tsx index 68413ab944a1..50bfb3b045f4 100644 --- a/src/styles/themes/ThemeProvider.tsx +++ b/src/styles/themes/ThemeProvider.tsx @@ -2,10 +2,10 @@ import PropTypes from 'prop-types'; import React, {useMemo} from 'react'; import CONST from '@src/CONST'; -import ThemeContext from './ThemeContext'; -import useThemePreference from './useThemePreference'; import darkTheme from './default'; import lightTheme from './light'; +import ThemeContext from './ThemeContext'; +import useThemePreference from './useThemePreference'; const propTypes = { /** Rendered child component */ diff --git a/src/styles/themes/useThemePreference.ts b/src/styles/themes/useThemePreference.ts index 725ad72b2e7d..ac6ac02933c7 100644 --- a/src/styles/themes/useThemePreference.ts +++ b/src/styles/themes/useThemePreference.ts @@ -1,4 +1,4 @@ -import {useState, useEffect, useContext} from 'react'; +import {useContext, useEffect, useState} from 'react'; import {Appearance, ColorSchemeName} from 'react-native'; import {PreferredThemeContext} from '@components/OnyxProvider'; import CONST from '@src/CONST';