From eb3e5c4314927516dcb1ad7c5e8825e7b0491ee2 Mon Sep 17 00:00:00 2001 From: Mounir Dhahri Date: Mon, 20 Jan 2025 18:33:57 +0100 Subject: [PATCH] feat: add dark mode [part 1] --- Gemfile.lock | 20 +- package.json | 2 +- src/app/Components/AbandonFlowModal.tsx | 6 +- .../AnimatableHeader/AnimatableHeader.tsx | 4 +- .../Artist/ArtistArtworks/ArtistArtworks.tsx | 7 +- .../ArtistArtworksFilterHeader.tsx | 6 +- .../ArtistArtworks/SavedSearchButtonV2.tsx | 2 +- src/app/Components/ArtsyWebView.tsx | 4 +- .../ArtworkFilter/ArtworkFilterNavigator.tsx | 11 +- .../Filters/ColorsSwatch.tests.tsx | 4 +- .../components/ArtworkFilterApplyButton.tsx | 4 +- .../ArtworkGrids/ArtworkSocialSignal.tsx | 4 +- .../ArtworkGrids/ArtworksFilterHeader.tsx | 2 +- .../InfiniteScrollArtworksGrid.tsx | 2 +- src/app/Components/AuctionResultsList.tsx | 2 +- .../AutomountedBottomSheetModal.tsx | 13 +- .../DefaultBottomSheetBackdrop.tsx | 2 +- .../Buttons/DarkNavigationButton.tsx | 7 +- src/app/Components/Cards/MediumCard.tsx | 15 +- src/app/Components/Containers/Inquiry.tsx | 2 +- .../Countdown/CountdownTimer.tests.tsx | 4 +- .../CreditCardField/CreditCardField.tsx | 16 +- src/app/Components/DarkModeClassTheme.tsx | 19 ++ src/app/Components/Expandable.tsx | 6 +- src/app/Components/FPSCounter.tsx | 7 +- .../Components/FancyModal/FancyModalCard.tsx | 7 +- .../FancyModal/FancyModalContext.tsx | 5 +- src/app/Components/Gene/Biography.tsx | 2 +- src/app/Components/HTML.tsx | 4 + .../HeaderArtworksFilter.tsx | 4 +- src/app/Components/HeaderButton.tsx | 5 +- .../Components/LineGraph/LineGraphChart.tsx | 6 +- src/app/Components/Lists/ShowItemRow.tsx | 15 +- src/app/Components/MenuItem.tsx | 4 +- src/app/Components/Modal.tsx | 3 +- src/app/Components/PaginationDots.tsx | 5 +- .../RelatedArtists/RelatedArtist.tsx | 7 +- src/app/Components/SectionTitle.tsx | 4 +- .../Select/Components/SelectButton.tsx | 19 +- .../Select/Components/SelectModal.tsx | 8 +- src/app/Components/Select/SelectV2.tsx | 2 +- .../Components/SortByModal/SortByModal.tsx | 2 +- src/app/Components/SwitchMenu.tsx | 2 +- src/app/Components/ThreeUpImageLayout.tsx | 3 +- .../Components/WorksForYou/Notification.tsx | 7 +- .../AuthenticatedRoutes/StackNavigator.tsx | 2 +- .../Navigation/AuthenticatedRoutes/Tabs.tsx | 6 +- src/app/Navigation/Navigation.tsx | 28 ++- src/app/Navigation/routes.tsx | 5 + src/app/Navigation/useNavigationTheme.tsx | 25 +++ src/app/Scenes/ArtQuiz/ArtQuizArtworks.tsx | 2 +- .../Artwork/Components/ArtworkItemCTAs.tsx | 5 +- .../Components/CascadingEndTimesBanner.tsx | 4 +- .../CommercialButtons/BidButton.tsx | 7 +- .../CommercialButtons/InquiryModal.tsx | 2 +- .../InquirySuccessNotification.tsx | 2 +- .../FullScreen/DeepZoom/DeepZoomTile.tsx | 4 +- .../FullScreen/ImageCarouselCloseButton.tsx | 6 +- .../FullScreen/ImageCarouselFullScreen.tsx | 4 +- .../ImageCarouselFullScreenAndroid.tsx | 4 +- .../FullScreen/IndexIndicator.tsx | 5 +- .../FullScreen/StatusBarOverlay.tsx | 4 +- .../ImageCarousel/FullScreen/boxShadow.ts | 2 +- .../Components/InstagramStoryViewShot.tsx | 5 +- src/app/Scenes/BottomTabs/BottomTabsIcon.tsx | 196 +++++++++--------- .../Scenes/City/Components/Event/index.tsx | 7 +- .../Components/FairEventSectionCard.tsx | 4 +- .../Components/FairEventSection/index.tsx | 11 +- .../Scenes/City/Components/LegacyTabBar.tsx | 17 +- .../City/Components/TabFairItemRow/index.tsx | 7 +- src/app/Scenes/Feature/Feature.tsx | 5 +- .../components/FeatureFeaturedLink.tsx | 4 +- .../Feature/components/FeatureHeader.tsx | 12 +- .../Scenes/HomeView/Components/HomeHeader.tsx | 2 +- src/app/Scenes/HomeView/HomeView.tsx | 3 - .../HomeView/Sections/HomeViewSectionCard.tsx | 6 +- .../Components/Conversations/Composer.tsx | 9 +- .../Conversations/ConversationSnippet.tsx | 13 +- .../Components/Conversations/Message.tsx | 7 +- .../Components/Conversations/MessageGroup.tsx | 2 +- .../Conversations/OpenInquiryModalButton.tsx | 4 +- .../Preview/Attachment/AttachmentPreview.tsx | 7 +- .../Conversations/Preview/ShowPreview.tsx | 7 +- .../Components/Typography/index.tests.tsx | 9 +- .../Inbox/Components/Typography/index.tsx | 68 +++--- .../Map/Components/CitySwitcherButton.tsx | 7 +- src/app/Scenes/Map/Components/ShowCard.tsx | 7 +- src/app/Scenes/Map/GlobalMap.tsx | 11 +- src/app/Scenes/MyAccount/MyAccount.tsx | 6 +- .../MyCollectionBottomSheetModalAdd.tsx | 2 +- .../MyCollectionBottomSheetModals.tsx | 12 +- .../Components/MyCollectionStickyHeader.tsx | 2 +- .../ArtworkForm/Components/RarityLegacy.tsx | 24 ++- .../ArtworkForm/MyCollectionArtworkForm.tsx | 9 +- .../Screens/MyCollectionArtworkFormMain.tsx | 2 +- .../Insights/CareerHighlightBottomSheet.tsx | 7 +- .../Screens/Insights/CareerHighlightCard.tsx | 11 +- .../Screens/Insights/MyCollectionInsights.tsx | 2 +- src/app/Scenes/MyProfile/DarkModeSettings.tsx | 15 +- src/app/Scenes/MyProfile/DevicePrefsModel.ts | 27 ++- src/app/Scenes/MyProfile/MyProfile.tsx | 9 +- .../Scenes/MyProfile/MyProfileEditForm.tsx | 18 +- .../MyProfile/MyProfilePushNotifications.tsx | 4 +- .../Scenes/MyProfile/MyProfileSettings.tsx | 13 +- .../Auth2/components/AuthBackground.tsx | 4 +- .../Scenes/Onboarding/ForgotPasswordForm.tsx | 2 +- .../OnboardingCreateAccount.tsx | 6 +- src/app/Scenes/Onboarding/OnboardingLogin.tsx | 2 +- .../Onboarding/OnboardingLoginWithOTP.tsx | 2 +- .../OnboardingQuiz/OnboardingFollows.tsx | 2 +- .../OnboardingMarketingCollection.tsx | 2 +- .../Onboarding/OnboardingSocialLink.tsx | 2 +- .../Scenes/Onboarding/OnboardingWelcome.tsx | 4 +- .../Animation/L5-Exercice/index.tsx | 9 +- .../Scenes/PriceDatabase/PriceDatabase.tsx | 10 +- src/app/Scenes/Sale/Components/SaleHeader.tsx | 7 +- src/app/Scenes/SaleInfo/SaleInfo.tsx | 6 +- .../CreateSavedSearchAlert.tsx | 10 +- .../SavedSearchAlert/EditSavedSearchAlert.tsx | 9 +- .../ArtworkForm/SubmitArtworkForm.tsx | 13 +- .../Components/MeetTheSpecialists.tsx | 24 ++- .../SellWithArtsy/Components/icons/Icons.tsx | 12 +- .../SellWithArtsy/SellWithArtsyHome.tsx | 7 - src/app/Scenes/Show/Show.tsx | 2 +- src/app/Scenes/Tag/TagArtworks.tsx | 2 +- .../Components/ViewingRoomHeader.tsx | 30 ++- src/app/store/config/features.ts | 1 + .../DevMenu/Components/EnvironmentOptions.tsx | 2 +- src/app/system/navigation/BackButton.tsx | 8 +- .../utils/DynamicIslandStagingIndicator.tsx | 8 +- src/app/utils/NetworkAwareProvider.tsx | 2 +- ..._legacy_do_not_use__navigator-ios-shim.tsx | 4 +- src/app/utils/renderMarkdown.tsx | 7 +- src/app/utils/useAndroidAppStyling.ts | 11 +- src/app/utils/useStatusBarStyle.ts | 7 +- src/app/utils/useStickyScrollHeader.tsx | 4 +- yarn.lock | 8 +- 137 files changed, 763 insertions(+), 461 deletions(-) create mode 100644 src/app/Components/DarkModeClassTheme.tsx create mode 100644 src/app/Navigation/useNavigationTheme.tsx diff --git a/Gemfile.lock b/Gemfile.lock index 5843b65419f..8df753e9074 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -18,20 +18,20 @@ GEM artifactory (3.0.17) atomos (0.1.3) aws-eventstream (1.3.0) - aws-partitions (1.1027.0) - aws-sdk-core (3.214.0) + aws-partitions (1.1040.0) + aws-sdk-core (3.216.0) aws-eventstream (~> 1, >= 1.3.0) aws-partitions (~> 1, >= 1.992.0) aws-sigv4 (~> 1.9) jmespath (~> 1, >= 1.6.1) - aws-sdk-kms (1.96.0) - aws-sdk-core (~> 3, >= 3.210.0) + aws-sdk-kms (1.97.0) + aws-sdk-core (~> 3, >= 3.216.0) aws-sigv4 (~> 1.5) - aws-sdk-s3 (1.176.1) - aws-sdk-core (~> 3, >= 3.210.0) + aws-sdk-s3 (1.178.0) + aws-sdk-core (~> 3, >= 3.216.0) aws-sdk-kms (~> 1) aws-sigv4 (~> 1.5) - aws-sigv4 (1.10.1) + aws-sigv4 (1.11.0) aws-eventstream (~> 1, >= 1.0.2) babosa (1.0.4) base64 (0.2.0) @@ -128,7 +128,7 @@ GEM faraday-retry (1.0.3) faraday_middleware (1.2.1) faraday (~> 1.0) - fastimage (2.3.1) + fastimage (2.4.0) fastlane (2.225.0) CFPropertyList (>= 2.3, < 4.0.0) addressable (>= 2.8, < 3.0.0) @@ -252,7 +252,7 @@ GEM nkf (0.2.0) optparse (0.6.0) os (1.1.4) - plist (3.7.1) + plist (3.7.2) public_suffix (4.0.7) rake (13.2.1) representable (3.2.0) @@ -264,7 +264,7 @@ GEM rouge (2.0.7) ruby-macho (2.5.1) ruby2_keywords (0.0.5) - rubyzip (2.3.2) + rubyzip (2.4.1) security (0.1.5) signet (0.19.0) addressable (~> 2.8) diff --git a/package.json b/package.json index 2f47f283777..a50874ac1fe 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,7 @@ }, "dependencies": { "@artsy/cohesion": "4.227.0", - "@artsy/palette-mobile": "14.0.16", + "@artsy/palette-mobile": "14.0.17--canary.299.3080.0", "@artsy/to-title-case": "1.1.0", "@braze/react-native-sdk": "13.1.1", "@expo/react-native-action-sheet": "4.0.1", diff --git a/src/app/Components/AbandonFlowModal.tsx b/src/app/Components/AbandonFlowModal.tsx index 76ebc02d753..af74d93fc95 100644 --- a/src/app/Components/AbandonFlowModal.tsx +++ b/src/app/Components/AbandonFlowModal.tsx @@ -1,4 +1,4 @@ -import { Box, Button, CloseIcon, Spacer, Text } from "@artsy/palette-mobile" +import { Box, Button, CloseIcon, Spacer, Text, useColor } from "@artsy/palette-mobile" import { NavigationHeader } from "app/Components/NavigationHeader" import { popToRoot } from "app/system/navigation/navigate" import { Modal } from "react-native" @@ -23,9 +23,11 @@ export const AbandonFlowModal: React.FC = ({ onDismiss, onLeave, }) => { + const color = useColor() + return ( - + } diff --git a/src/app/Components/AnimatableHeader/AnimatableHeader.tsx b/src/app/Components/AnimatableHeader/AnimatableHeader.tsx index 2998881d4ed..531815355fa 100644 --- a/src/app/Components/AnimatableHeader/AnimatableHeader.tsx +++ b/src/app/Components/AnimatableHeader/AnimatableHeader.tsx @@ -14,7 +14,7 @@ export interface AnimatableHeaderProps { export const AnimatableHeader = (props: AnimatableHeaderProps) => { const { title, rightButtonDisabled, rightButtonText, onRightButtonPress } = props - const { space } = useTheme() + const { space, color } = useTheme() const { headerHeight, setTitle, titleShown } = useAnimatableHeaderContext() useEffect(() => { @@ -28,7 +28,7 @@ export const AnimatableHeader = (props: AnimatableHeaderProps) => { paddingHorizontal: space(2), alignItems: "center", height: headerHeight, - backgroundColor: "white", + backgroundColor: color("white100"), }} > = ({ searchCriteria, ...props }) => { + const color = useColor() + const [isCreateAlertModalVisible, setIsCreateAlertModalVisible] = useState(false) const [isLoading, setIsLoading] = useState(false) const { showFilterArtworksModal, closeFilterArtworksModal } = useShowArtworksFilterModal({ @@ -258,7 +261,7 @@ const ArtworksGrid: React.FC = ({ } return ( - <> + = ({ onComplete={handleCompleteSavedSearch} visible={isCreateAlertModalVisible} /> - + ) } diff --git a/src/app/Components/Artist/ArtistArtworks/ArtistArtworksFilterHeader.tsx b/src/app/Components/Artist/ArtistArtworks/ArtistArtworksFilterHeader.tsx index e5894d512f3..83fa2755ad2 100644 --- a/src/app/Components/Artist/ArtistArtworks/ArtistArtworksFilterHeader.tsx +++ b/src/app/Components/Artist/ArtistArtworks/ArtistArtworksFilterHeader.tsx @@ -1,4 +1,4 @@ -import { Box } from "@artsy/palette-mobile" +import { Flex } from "@artsy/palette-mobile" import { ArtistArtworksFilterHeader_artist$key } from "__generated__/ArtistArtworksFilterHeader_artist.graphql" import { SavedSearchButtonV2 } from "app/Components/Artist/ArtistArtworks/SavedSearchButtonV2" import { useShowArtworksFilterModal } from "app/Components/Artist/ArtistArtworks/hooks/useShowArtworksFilterModal" @@ -29,7 +29,7 @@ export const ArtistArtworksFilterHeader: React.FC = ( const { openFilterArtworksModal } = useShowArtworksFilterModal({ artist: data }) return ( - + { openFilterArtworksModal("sortAndFilter") @@ -45,6 +45,6 @@ export const ArtistArtworksFilterHeader: React.FC = ( }} /> - + ) } diff --git a/src/app/Components/Artist/ArtistArtworks/SavedSearchButtonV2.tsx b/src/app/Components/Artist/ArtistArtworks/SavedSearchButtonV2.tsx index b07af1da8e1..599dfa72944 100644 --- a/src/app/Components/Artist/ArtistArtworks/SavedSearchButtonV2.tsx +++ b/src/app/Components/Artist/ArtistArtworks/SavedSearchButtonV2.tsx @@ -26,7 +26,7 @@ export const SavedSearchButtonV2: React.FC = (props) = onPress={handlePress} render={({ color }) => ( - + diff --git a/src/app/Components/ArtsyWebView.tsx b/src/app/Components/ArtsyWebView.tsx index 7a914646c9c..fb873229a69 100644 --- a/src/app/Components/ArtsyWebView.tsx +++ b/src/app/Components/ArtsyWebView.tsx @@ -2,6 +2,7 @@ import { OwnerType } from "@artsy/cohesion" import { Flex, Screen, Text } from "@artsy/palette-mobile" import * as Sentry from "@sentry/react-native" import { addBreadcrumb } from "@sentry/react-native" +import { NavigationHeader } from "app/Components/NavigationHeader" import { BottomTabRoutes } from "app/Scenes/BottomTabs/bottomTabsConfig" import { GlobalStore, getCurrentEmissionState } from "app/store/GlobalStore" import { GoBackProps, dismissModal, goBack, navigate } from "app/system/navigation/navigate" @@ -20,7 +21,6 @@ import { Edge } from "react-native-safe-area-context" import Share from "react-native-share" import WebView, { WebViewNavigation, WebViewProps } from "react-native-webview" import { useTracking } from "react-tracking" -import { NavigationHeader } from "app/Components/NavigationHeader" export interface ArtsyWebViewConfig { title?: string @@ -130,7 +130,7 @@ export const ArtsyWebViewPage = ({ return ( - + () export const ArtworkFilterNavigator: React.FC = (props) => { + const theme = useNavigationTheme() + const color = useColor() + const tracking = useTracking() const { id, mode, slug, name, query, shouldShowCreateAlertButton, closeModal, exitModal } = props const [isCreateAlertModalVisible, setIsCreateAlertModalVisible] = useState(false) @@ -312,16 +317,16 @@ export const ArtworkFilterNavigator: React.FC = (props) => { }, []) return ( - + - + { const selectedTree = renderWithWrappersLEGACY( { const unselectedTree = renderWithWrappersLEGACY( = shadowOpacity: 0.1, shadowRadius: 12, elevation: 12, - backgroundColor: "white", + backgroundColor: color("white100"), // the bottom padding that is created by safeareaview in almost all > X apple devices // is somewhere around 35px. This is a hack to make sure that the button is // displayed 40px above the bottom of the screen. paddingBottom: -15, }} > - + = ({ case curatorsPick && !hideCuratorsPick: return ( - + {" "} Curators’ Pick @@ -33,7 +33,7 @@ export const ArtworkSocialSignal: React.FC = ({ case increasedInterest && !hideIncreasedInterest: return ( - + {" "} Increased Interest diff --git a/src/app/Components/ArtworkGrids/ArtworksFilterHeader.tsx b/src/app/Components/ArtworkGrids/ArtworksFilterHeader.tsx index 64b74b4d840..9551033fb54 100644 --- a/src/app/Components/ArtworkGrids/ArtworksFilterHeader.tsx +++ b/src/app/Components/ArtworkGrids/ArtworksFilterHeader.tsx @@ -28,7 +28,7 @@ export const ArtworksFilterHeader: React.FC = ({ showSeparator = true, }) => { return ( - + = ({ style={{ opacity: localIsLoading && hasMore() ? 1 : 0 }} > {!!autoFetch && ( - + )} )} diff --git a/src/app/Components/AuctionResultsList.tsx b/src/app/Components/AuctionResultsList.tsx index 8239df73688..cecedd63bc6 100644 --- a/src/app/Components/AuctionResultsList.tsx +++ b/src/app/Components/AuctionResultsList.tsx @@ -73,7 +73,7 @@ export const AuctionResultsList: React.FC = ({ ListHeaderComponent={ListHeaderComponent} ItemSeparatorComponent={() => } renderSectionHeader={({ section: { sectionTitle } }) => ( - + {sectionTitle} diff --git a/src/app/Components/BottomSheet/AutomountedBottomSheetModal.tsx b/src/app/Components/BottomSheet/AutomountedBottomSheetModal.tsx index 029ecfc36d6..a36a778e0a3 100644 --- a/src/app/Components/BottomSheet/AutomountedBottomSheetModal.tsx +++ b/src/app/Components/BottomSheet/AutomountedBottomSheetModal.tsx @@ -1,4 +1,4 @@ -import { useScreenDimensions } from "@artsy/palette-mobile" +import { useColor, useScreenDimensions } from "@artsy/palette-mobile" import { BottomSheetBackdropProps, BottomSheetModal, @@ -18,6 +18,7 @@ export const AutomountedBottomSheetModal: FC = closeOnBackdropClick = true, ...rest }) => { + const color = useColor() const ref = useRef(null) const [modalIsPresented, setModalIsPresented] = useState(false) const { height: screenHeight, safeAreaInsets } = useScreenDimensions() @@ -78,6 +79,16 @@ export const AutomountedBottomSheetModal: FC = backdropComponent={renderBackdrop} enableDynamicSizing maxDynamicContentSize={screenHeight - safeAreaInsets.top} + backgroundStyle={{ + ...(rest?.backgroundStyle as any), + backgroundColor: color("background"), + }} + handleIndicatorStyle={{ + backgroundColor: color("black100"), + width: 40, + height: 4, + borderRadius: 2, + }} {...rest} /> ) diff --git a/src/app/Components/BottomSheet/DefaultBottomSheetBackdrop.tsx b/src/app/Components/BottomSheet/DefaultBottomSheetBackdrop.tsx index 67ae46cae84..445880a0df0 100644 --- a/src/app/Components/BottomSheet/DefaultBottomSheetBackdrop.tsx +++ b/src/app/Components/BottomSheet/DefaultBottomSheetBackdrop.tsx @@ -19,7 +19,6 @@ export const DefaultBottomSheetBackdrop: React.FC = style, }) => { const color = useColor() - // animated variables const containerAnimatedStyle = useAnimatedStyle(() => { "worklet" @@ -33,6 +32,7 @@ export const DefaultBottomSheetBackdrop: React.FC = () => [ style, { + // We intentionally want the background color to be black regardless of the theme backgroundColor: color("black100"), }, containerAnimatedStyle, diff --git a/src/app/Components/Buttons/DarkNavigationButton.tsx b/src/app/Components/Buttons/DarkNavigationButton.tsx index 4de2ae737f2..86a3250aca5 100644 --- a/src/app/Components/Buttons/DarkNavigationButton.tsx +++ b/src/app/Components/Buttons/DarkNavigationButton.tsx @@ -1,4 +1,5 @@ -import { Flex, Box, ClassTheme, Text } from "@artsy/palette-mobile" +import { Flex, Box, Text } from "@artsy/palette-mobile" +import { ThemeAwareClassTheme } from "app/Components/DarkModeClassTheme" import { navigate } from "app/system/navigation/navigate" import React from "react" import { Image, TouchableWithoutFeedback } from "react-native" @@ -13,7 +14,7 @@ export default class DarkNavigationButton extends React.Component { render() { const showNavArrow = this.props.href || this.props.onPress return ( - + {({ color }) => ( @@ -28,7 +29,7 @@ export default class DarkNavigationButton extends React.Component { )} - + ) } diff --git a/src/app/Components/Cards/MediumCard.tsx b/src/app/Components/Cards/MediumCard.tsx index 2357c2970b8..d0538a60a01 100644 --- a/src/app/Components/Cards/MediumCard.tsx +++ b/src/app/Components/Cards/MediumCard.tsx @@ -17,7 +17,7 @@ export const MEDIUM_CARD_WIDTH = 280 * at the bottom. */ export const MediumCard: React.FC = ({ image, title, subtitle, tag, ...rest }) => { - const { color, space } = useTheme() + const { space } = useTheme() return ( = ({ image, title, subtitle, right: space(6), }} > - + {title} {!!subtitle && ( - + {subtitle} )} diff --git a/src/app/Components/Containers/Inquiry.tsx b/src/app/Components/Containers/Inquiry.tsx index 1741f3610df..b6839c05052 100644 --- a/src/app/Components/Containers/Inquiry.tsx +++ b/src/app/Components/Containers/Inquiry.tsx @@ -19,7 +19,7 @@ import styled from "styled-components/native" const Container = styled.View` flex: 1; flex-direction: column; - background-color: white; + background-color: ${themeGet("colors.white100")}; ` const Header = styled.View` align-self: stretch; diff --git a/src/app/Components/Countdown/CountdownTimer.tests.tsx b/src/app/Components/Countdown/CountdownTimer.tests.tsx index fa2e95c9995..df0a010a277 100644 --- a/src/app/Components/Countdown/CountdownTimer.tests.tsx +++ b/src/app/Components/Countdown/CountdownTimer.tests.tsx @@ -17,10 +17,10 @@ const CountdownText: React.FC = ({ duration, label }) => ( } - textProps={{ color: "white", variant: "sm" }} + textProps={{ color: "white100", variant: "sm" }} duration={duration} /> - + {label} diff --git a/src/app/Components/CreditCardField/CreditCardField.tsx b/src/app/Components/CreditCardField/CreditCardField.tsx index c6ff6d4ee08..3f8cc65cb10 100644 --- a/src/app/Components/CreditCardField/CreditCardField.tsx +++ b/src/app/Components/CreditCardField/CreditCardField.tsx @@ -2,7 +2,7 @@ import { Flex, INPUT_BORDER_RADIUS, INPUT_MIN_HEIGHT, - INPUT_VARIANTS, + getInputVariants, InputState, InputVariant, Text, @@ -10,6 +10,7 @@ import { getInputVariant, useColor, useTextStyleForPalette, + useTheme, } from "@artsy/palette-mobile" import { THEME } from "@artsy/palette-tokens" import { CardField } from "@stripe/stripe-react-native" @@ -50,9 +51,13 @@ export const CreditCardField: React.FC = ({ onCardChange } cardDetails.validNumber !== "Incomplete" || !!cardDetails.expiryMonth || !!cardDetails.expiryYear) + + const { theme } = useTheme() + const inputVariants = getInputVariants(theme) + const animatedStyles = useAnimatedStyle(() => { return { - borderColor: withTiming(INPUT_VARIANTS[variant][animatedState.value].inputBorderColor), + borderColor: withTiming(inputVariants[variant][animatedState.value].inputBorderColor), } }) @@ -60,12 +65,11 @@ export const CreditCardField: React.FC = ({ onCardChange } return { zIndex: 100, position: "absolute", - backgroundColor: "white", left: withTiming( hasSelectedValue || isFocused ? 15 : STRIPE_CREDIT_CARD_ICON_CONTAINER_WIDTH ), paddingHorizontal: withTiming(hasSelectedValue || isFocused ? 5 : 0), - color: withTiming(INPUT_VARIANTS[variant][animatedState.value].labelColor), + color: withTiming(inputVariants[variant][animatedState.value].labelColor), top: withTiming(hasSelectedValue || isFocused ? -INPUT_MIN_HEIGHT / 4 : 14), fontSize: withTiming( hasSelectedValue || isFocused @@ -93,7 +97,7 @@ export const CreditCardField: React.FC = ({ onCardChange } testID="credit-card-field" cardStyle={{ borderWidth: 0, // avoid repeat border - backgroundColor: color("white100"), + backgroundColor: color("background"), fontSize: textStyle.fontSize, fontFamily: textStyle.fontFamily, textColor: color("black100"), @@ -113,7 +117,7 @@ export const CreditCardField: React.FC = ({ onCardChange } /> - + {hasSelectedValue || isFocused ? "Credit Card" : ""} diff --git a/src/app/Components/DarkModeClassTheme.tsx b/src/app/Components/DarkModeClassTheme.tsx new file mode 100644 index 00000000000..3311bdcb8eb --- /dev/null +++ b/src/app/Components/DarkModeClassTheme.tsx @@ -0,0 +1,19 @@ +import { ClassTheme, useTheme } from "@artsy/palette-mobile" +import { GlobalStore } from "app/store/GlobalStore" +import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" + +export const ThemeAwareClassTheme = ({ + children, +}: { + children: React.ReactNode | ((helpers: ReturnType) => React.ReactNode) +}) => { + const supportDarkMode = useFeatureFlag("ARDarkModeSupport") + const darkMode = GlobalStore.useAppState((state) => state.devicePrefs.colorScheme) + + return ( + // @ts-expect-error + + {typeof children === "function" ? children : children} + + ) +} diff --git a/src/app/Components/Expandable.tsx b/src/app/Components/Expandable.tsx index fadc414ee49..e7f469c10e2 100644 --- a/src/app/Components/Expandable.tsx +++ b/src/app/Components/Expandable.tsx @@ -1,4 +1,4 @@ -import { ChevronIcon, Collapse, Flex, Text, Touchable } from "@artsy/palette-mobile" +import { ChevronIcon, Collapse, Flex, Text, Touchable, useColor } from "@artsy/palette-mobile" import { MAX_WIDTH_BIO } from "app/Components/Artist/Biography" import { MotiView } from "moti" import { useState } from "react" @@ -21,6 +21,7 @@ export const Expandable: React.FC = ({ onTrack, }) => { const [expanded, setExpanded] = useState(propExpanded) + const color = useColor() const handleToggle = () => { setExpanded((prev) => !prev) @@ -35,6 +36,7 @@ export const Expandable: React.FC = ({ py={1} accessibilityHint="Toggles the accordion" maxWidth={MAX_WIDTH_BIO} + borderColor={color("black100")} > handleToggle()} @@ -52,7 +54,7 @@ export const Expandable: React.FC = ({ style={{ transform: [{ rotate: !!expanded ? "-90deg" : "90deg" }] }} transition={{ type: "timing" }} > - + diff --git a/src/app/Components/FPSCounter.tsx b/src/app/Components/FPSCounter.tsx index add9766673a..b035621d58c 100644 --- a/src/app/Components/FPSCounter.tsx +++ b/src/app/Components/FPSCounter.tsx @@ -1,3 +1,4 @@ +import { useColor } from "@artsy/palette-mobile" import { useState } from "react" import { useFps } from "react-fps" import { Text, TouchableOpacity, View, ViewStyle } from "react-native" @@ -5,6 +6,8 @@ import { Text, TouchableOpacity, View, ViewStyle } from "react-native" export function FPSCounter({ style }: { style?: ViewStyle }) { const { currentFps, avgFps, fps, maxFps } = useFps(20) const [opacity, setOpacity] = useState(1) + const color = useColor() + const textHeight = 20 const graphHeight = 40 const borderWidth = 1 @@ -18,8 +21,8 @@ export function FPSCounter({ style }: { style?: ViewStyle }) { width: 86, left: 4, bottom: 4, - backgroundColor: "white", - borderColor: "black", + backgroundColor: color("white100"), + borderColor: color("black100"), borderWidth, paddingHorizontal: 2, opacity, diff --git a/src/app/Components/FancyModal/FancyModalCard.tsx b/src/app/Components/FancyModal/FancyModalCard.tsx index af7d7403d98..a83323a5ccd 100644 --- a/src/app/Components/FancyModal/FancyModalCard.tsx +++ b/src/app/Components/FancyModal/FancyModalCard.tsx @@ -1,3 +1,4 @@ +import { useColor } from "@artsy/palette-mobile" import { useScreenDimensions } from "app/utils/hooks" import { compact } from "lodash" import React, { RefObject, useImperativeHandle, useRef } from "react" @@ -43,6 +44,8 @@ export const FancyModalCard = React.forwardRef< onBackgroundPressed(): void }> >((props, ref) => { + const color = useColor() + const animationPosition = props.animationPosition ?? "bottom" const screen = useScreenDimensions() const isRootCard = props.level === 0 @@ -174,7 +177,7 @@ export const FancyModalCard = React.forwardRef< @@ -208,7 +211,7 @@ export const FancyModalCard = React.forwardRef< diff --git a/src/app/Components/FancyModal/FancyModalContext.tsx b/src/app/Components/FancyModal/FancyModalContext.tsx index 5009be41c02..8155865967f 100644 --- a/src/app/Components/FancyModal/FancyModalContext.tsx +++ b/src/app/Components/FancyModal/FancyModalContext.tsx @@ -1,3 +1,4 @@ +import { Flex } from "@artsy/palette-mobile" import { ExecutionQueue } from "app/utils/ExecutionQueue" import { useScreenDimensions } from "app/utils/hooks" import { compact, flatten } from "lodash" @@ -48,7 +49,7 @@ class FancyModalCardStack { getRootCard(height: number, content: React.ReactNode) { return ( - + {content} - + ) } diff --git a/src/app/Components/Gene/Biography.tsx b/src/app/Components/Gene/Biography.tsx index 2d89036d44b..9a7d282baf6 100644 --- a/src/app/Components/Gene/Biography.tsx +++ b/src/app/Components/Gene/Biography.tsx @@ -17,7 +17,7 @@ const Biography: React.FC = ({ gene }) => { return ( - + {removeMarkdown(gene.description)} diff --git a/src/app/Components/HTML.tsx b/src/app/Components/HTML.tsx index 9999304f326..48bfe37706e 100644 --- a/src/app/Components/HTML.tsx +++ b/src/app/Components/HTML.tsx @@ -72,18 +72,22 @@ export const HTML: React.FC = ({ }, p: { fontFamily: FONTS.regular, + color: color("black100"), ...variantStyles, }, em: { fontFamily: FONTS.italic, + color: color("black100"), }, h2: { fontFamily: FONTS.medium, fontWeight: "normal", + color: color("black100"), }, h3: { fontFamily: FONTS.regular, fontWeight: "normal", + color: color("black100"), }, }, tagStyles diff --git a/src/app/Components/HeaderArtworksFilter/HeaderArtworksFilter.tsx b/src/app/Components/HeaderArtworksFilter/HeaderArtworksFilter.tsx index a9d4ea87278..95bedb1ddfa 100644 --- a/src/app/Components/HeaderArtworksFilter/HeaderArtworksFilter.tsx +++ b/src/app/Components/HeaderArtworksFilter/HeaderArtworksFilter.tsx @@ -115,7 +115,7 @@ export const HeaderArtworksFilter: React.FC = ({ } return ( - _onLayout(e)} testID="HeaderArtworksFilter"> + _onLayout(e)} testID="HeaderArtworksFilter"> {!!animationValue && !disableYAxisAnimation && ( )} @@ -136,7 +136,7 @@ export const HeaderArtworksFilter: React.FC = ({ ], }} > - + {hideArtworksCount ? ( diff --git a/src/app/Components/HeaderButton.tsx b/src/app/Components/HeaderButton.tsx index 9b19138a665..e0766358917 100644 --- a/src/app/Components/HeaderButton.tsx +++ b/src/app/Components/HeaderButton.tsx @@ -1,4 +1,4 @@ -import { Touchable } from "@artsy/palette-mobile" +import { Touchable, useColor } from "@artsy/palette-mobile" import { useScreenDimensions } from "app/utils/hooks" import { StyleProp, ViewProps, ViewStyle } from "react-native" import Animated, { AnimateProps, FadeIn, FadeOut } from "react-native-reanimated" @@ -26,6 +26,7 @@ export const HeaderButton: React.FC = (props) => { onPress, ...rest } = props + const color = useColor() const { safeAreaInsets } = useScreenDimensions() if (shouldHide) { @@ -42,7 +43,7 @@ export const HeaderButton: React.FC = (props) => { width: BUTTON_SIZE, height: BUTTON_SIZE, borderRadius: BUTTON_SIZE / 2, - backgroundColor: "white", + backgroundColor: color("white100"), position: "absolute", left: position === "left" ? BUTTON_HORIZONTAL_OFFSET : undefined, right: position === "right" ? BUTTON_HORIZONTAL_OFFSET : undefined, diff --git a/src/app/Components/LineGraph/LineGraphChart.tsx b/src/app/Components/LineGraph/LineGraphChart.tsx index f114790c7c4..19303eb45fe 100644 --- a/src/app/Components/LineGraph/LineGraphChart.tsx +++ b/src/app/Components/LineGraph/LineGraphChart.tsx @@ -72,7 +72,7 @@ export const LineGraphChart: React.FC = ({ // MARK:- STATES const [lastPressedDatum, setLastPressedDatum] = useState< - (typeof data[0] & { left?: number; dataTag?: string }) | null + ((typeof data)[0] & { left?: number; dataTag?: string }) | null >(null) const shadedTintColor = shadeColor(tintColor, tintColorShadeFactor) @@ -208,7 +208,7 @@ export const LineGraphChart: React.FC = ({ - + ), @@ -239,7 +239,7 @@ export const LineGraphChart: React.FC = ({ /> } style={{ - background: { fill: "white" }, + background: { fill: color("white100") }, }} padding={{ left: 40, right: 40, bottom: 20, top: 40 }} width={chartWidth} diff --git a/src/app/Components/Lists/ShowItemRow.tsx b/src/app/Components/Lists/ShowItemRow.tsx index 60ebb6d489f..a1f66672d7f 100644 --- a/src/app/Components/Lists/ShowItemRow.tsx +++ b/src/app/Components/Lists/ShowItemRow.tsx @@ -1,12 +1,13 @@ -import { Flex, Box, ClassTheme, Text, Button, Touchable, Image } from "@artsy/palette-mobile" +import { Box, Button, Flex, Image, Text, Touchable } from "@artsy/palette-mobile" import { themeGet } from "@styled-system/theme-get" import { ShowItemRowMutation } from "__generated__/ShowItemRowMutation.graphql" import { ShowItemRow_show$data } from "__generated__/ShowItemRow_show.graphql" +import { ThemeAwareClassTheme } from "app/Components/DarkModeClassTheme" import { Pin } from "app/Components/Icons/Pin" import { exhibitionDates } from "app/Scenes/Map/exhibitionPeriodParser" import { navigate } from "app/system/navigation/navigate" import { hrefForPartialShow } from "app/utils/router" -import { Schema, Track, track as _track } from "app/utils/track" +import { track as _track, Schema, Track } from "app/utils/track" import { debounce } from "lodash" import React from "react" import { TouchableWithoutFeedback } from "react-native" @@ -121,7 +122,7 @@ export class ShowItemRow extends React.Component { const imageURL = mainCoverImageURL || galleryProfileIcon return ( - + {({ color }) => ( {!imageURL ? ( @@ -138,7 +139,7 @@ export class ShowItemRow extends React.Component { { )} )} - + ) } @@ -192,7 +193,7 @@ export class ShowItemRow extends React.Component { const { show, isListItem } = this.props return isListItem ? ( - + {({ color }) => ( { {this.renderItemDetails()} )} - + ) : ( this.handleTap(show.slug, show.internalID)}> {this.renderItemDetails()} diff --git a/src/app/Components/MenuItem.tsx b/src/app/Components/MenuItem.tsx index 94984e55e37..c8551e4c002 100644 --- a/src/app/Components/MenuItem.tsx +++ b/src/app/Components/MenuItem.tsx @@ -71,7 +71,9 @@ export const MenuItem: React.FC<{ )} - {title} + + {title} + {!!description && ( {description} diff --git a/src/app/Components/Modal.tsx b/src/app/Components/Modal.tsx index e0c643fb111..83c559a15ae 100644 --- a/src/app/Components/Modal.tsx +++ b/src/app/Components/Modal.tsx @@ -1,4 +1,5 @@ import { Text, TextProps, Button } from "@artsy/palette-mobile" +import themeGet from "@styled-system/theme-get" import { defaultRules, MarkdownRules } from "app/utils/renderMarkdown" import React from "react" import { Modal as RNModal, TouchableWithoutFeedback, View, ViewProps } from "react-native" @@ -28,7 +29,7 @@ const ModalBackgroundView = styled.View` const ModalInnerView = styled.View` width: 300; - background-color: white; + background-color: ${themeGet("colors.white100")}; padding: 20px; opacity: 1; border-radius: 2px; diff --git a/src/app/Components/PaginationDots.tsx b/src/app/Components/PaginationDots.tsx index 64a2423f1c7..776c8f8d748 100644 --- a/src/app/Components/PaginationDots.tsx +++ b/src/app/Components/PaginationDots.tsx @@ -1,4 +1,4 @@ -import { Flex } from "@artsy/palette-mobile" +import { Flex, useColor } from "@artsy/palette-mobile" import { MotiView } from "moti" interface PaginationDotsProps { @@ -23,6 +23,7 @@ interface PaginationDotProps { } const PaginationDot: React.FC = (props) => { + const color = useColor() const { active } = props const diameter = 5 @@ -31,7 +32,7 @@ const PaginationDot: React.FC = (props) => { accessibilityLabel="Image Pagination Indicator" animate={{ opacity: active ? 1 : 0.1 }} style={{ - backgroundColor: "black", + backgroundColor: color("black100"), borderRadius: diameter / 2, height: diameter, marginHorizontal: diameter * 0.8, diff --git a/src/app/Components/RelatedArtists/RelatedArtist.tsx b/src/app/Components/RelatedArtists/RelatedArtist.tsx index 3f1423126a6..e14a85d08e8 100644 --- a/src/app/Components/RelatedArtists/RelatedArtist.tsx +++ b/src/app/Components/RelatedArtists/RelatedArtist.tsx @@ -1,5 +1,6 @@ -import { Spacer, ClassTheme, Text, Image } from "@artsy/palette-mobile" +import { Image, Spacer, Text } from "@artsy/palette-mobile" import { RelatedArtist_artist$data } from "__generated__/RelatedArtist_artist.graphql" +import { ThemeAwareClassTheme } from "app/Components/DarkModeClassTheme" import { navigate } from "app/system/navigation/navigate" import { Component } from "react" import { TouchableWithoutFeedback, View } from "react-native" @@ -38,13 +39,13 @@ class RelatedArtist extends Component { {artist.name} - + {({ color }) => ( {this.artworksString(artist.counts)} )} - + ) diff --git a/src/app/Components/SectionTitle.tsx b/src/app/Components/SectionTitle.tsx index 8e91dffb335..dd98fba9be5 100644 --- a/src/app/Components/SectionTitle.tsx +++ b/src/app/Components/SectionTitle.tsx @@ -5,7 +5,6 @@ import { SpacingUnit, Text, TextProps, - useTheme, } from "@artsy/palette-mobile" import { toTitleCase } from "@artsy/to-title-case" import { RouterLink } from "app/system/navigation/RouterLink" @@ -33,7 +32,6 @@ export const SectionTitle: React.FC< capitalized = true, ...flexProps }) => { - const { color } = useTheme() let titleText if (typeof title === "string") { @@ -49,7 +47,7 @@ export const SectionTitle: React.FC< {!!subtitle && ( - + {subtitle} )} diff --git a/src/app/Components/Select/Components/SelectButton.tsx b/src/app/Components/Select/Components/SelectButton.tsx index 9062926b389..2c66e793da5 100644 --- a/src/app/Components/Select/Components/SelectButton.tsx +++ b/src/app/Components/Select/Components/SelectButton.tsx @@ -3,7 +3,6 @@ import { HORIZONTAL_PADDING, INPUT_BORDER_RADIUS, INPUT_MIN_HEIGHT, - INPUT_VARIANTS, InputState, InputVariant, Text, @@ -11,7 +10,10 @@ import { TriangleDown, getInputState, getInputVariant, + getInputVariants, + useColor, useSpace, + useTheme, } from "@artsy/palette-mobile" import { THEME } from "@artsy/palette-tokens" import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated" @@ -47,6 +49,7 @@ export const SelectButton: React.FC<{ error, }) => { const space = useSpace() + const color = useColor() const variant: InputVariant = getInputVariant({ hasError: !!hasError || !!error, @@ -61,17 +64,19 @@ export const SelectButton: React.FC<{ const hasSelectedValue = !!value + const { theme } = useTheme() + const inputVariants = getInputVariants(theme) + const animatedStyles = useAnimatedStyle(() => { return { - borderColor: withTiming(INPUT_VARIANTS[variant][animatedState.value].inputBorderColor), + borderColor: withTiming(inputVariants[variant][animatedState.value].inputBorderColor), } }) const labelStyles = useAnimatedStyle(() => { return { - backgroundColor: "white", paddingHorizontal: withTiming(hasSelectedValue ? 5 : 0), - color: withTiming(INPUT_VARIANTS[variant][animatedState.value].labelColor), + color: withTiming(inputVariants[variant][animatedState.value].labelColor), top: withTiming(hasSelectedValue ? -INPUT_MIN_HEIGHT / 2 : 0), fontSize: withTiming( hasSelectedValue @@ -115,7 +120,11 @@ export const SelectButton: React.FC<{ ]} flexDirection="row" > - {!!title && {title}} + {!!title && ( + + {title} + + )} {!!value && ( + diff --git a/src/app/Components/Select/SelectV2.tsx b/src/app/Components/Select/SelectV2.tsx index e91dcf71629..d5055d10a50 100644 --- a/src/app/Components/Select/SelectV2.tsx +++ b/src/app/Components/Select/SelectV2.tsx @@ -315,7 +315,7 @@ const SelectModal: React.FC<{ justifyContent="space-between" height={ROW_HEIGHT} alignItems="center" - backgroundColor={localValue === item.value ? "black5" : "white"} + backgroundColor={localValue === item.value ? "black5" : "white100"} flexGrow={0} > {props.renderItemLabel?.(item) ?? ( diff --git a/src/app/Components/SortByModal/SortByModal.tsx b/src/app/Components/SortByModal/SortByModal.tsx index 974d2d85f0b..5930a985479 100644 --- a/src/app/Components/SortByModal/SortByModal.tsx +++ b/src/app/Components/SortByModal/SortByModal.tsx @@ -29,7 +29,7 @@ export const SortByModal: React.FC = (props) => { presentationStyle="pageSheet" animationType="slide" > - + Sort By diff --git a/src/app/Components/SwitchMenu.tsx b/src/app/Components/SwitchMenu.tsx index 8609b0202c2..889c7d68828 100644 --- a/src/app/Components/SwitchMenu.tsx +++ b/src/app/Components/SwitchMenu.tsx @@ -1,4 +1,4 @@ -import { Flex, Text, Switch } from "@artsy/palette-mobile" +import { Flex, Switch, Text } from "@artsy/palette-mobile" interface SwitchMenuProps { onChange: (value: boolean) => void diff --git a/src/app/Components/ThreeUpImageLayout.tsx b/src/app/Components/ThreeUpImageLayout.tsx index 17c1913bbae..b2d8230ce08 100644 --- a/src/app/Components/ThreeUpImageLayout.tsx +++ b/src/app/Components/ThreeUpImageLayout.tsx @@ -1,4 +1,5 @@ import { Box } from "@artsy/palette-mobile" +import themeGet from "@styled-system/theme-get" import { ImageWithFallback } from "app/Components/ImageWithFallback/ImageWithFallback" import styled from "styled-components/native" @@ -53,6 +54,6 @@ export const ArtworkImageContainer = styled.View` ` export const Division = styled.View<{ horizontal?: boolean }>` - border: 1px solid white; + border: 1px solid ${themeGet("colors.white100")}; ${({ horizontal }) => (horizontal ? "height" : "width")}: 1px; ` diff --git a/src/app/Components/WorksForYou/Notification.tsx b/src/app/Components/WorksForYou/Notification.tsx index 6c503001ff2..d83972f8024 100644 --- a/src/app/Components/WorksForYou/Notification.tsx +++ b/src/app/Components/WorksForYou/Notification.tsx @@ -1,6 +1,7 @@ -import { ClassTheme, Text } from "@artsy/palette-mobile" +import { Text } from "@artsy/palette-mobile" import { Notification_notification$data } from "__generated__/Notification_notification.graphql" import GenericGrid from "app/Components/ArtworkGrids/GenericGrid" +import { ThemeAwareClassTheme } from "app/Components/DarkModeClassTheme" import { navigate } from "app/system/navigation/navigate" import { extractNodes } from "app/utils/extractNodes" import React from "react" @@ -42,7 +43,7 @@ export class Notification extends React.Component { } return ( - + {({ color }) => ( @@ -66,7 +67,7 @@ export class Notification extends React.Component { )} - + ) } } diff --git a/src/app/Navigation/AuthenticatedRoutes/StackNavigator.tsx b/src/app/Navigation/AuthenticatedRoutes/StackNavigator.tsx index 3668fdaf928..2bb57d6e3d3 100644 --- a/src/app/Navigation/AuthenticatedRoutes/StackNavigator.tsx +++ b/src/app/Navigation/AuthenticatedRoutes/StackNavigator.tsx @@ -50,7 +50,7 @@ export const registerScreen: React.FC = ({ name, modu {isModalScreen(module) ? ( ) : ( - + )} ) diff --git a/src/app/Navigation/AuthenticatedRoutes/Tabs.tsx b/src/app/Navigation/AuthenticatedRoutes/Tabs.tsx index 6cfed8c8187..f2d1d308fcd 100644 --- a/src/app/Navigation/AuthenticatedRoutes/Tabs.tsx +++ b/src/app/Navigation/AuthenticatedRoutes/Tabs.tsx @@ -1,6 +1,5 @@ import { ActionType, OwnerType, Screen, tappedTabBar } from "@artsy/cohesion" import { Flex, Text, useColor } from "@artsy/palette-mobile" -import { THEME } from "@artsy/palette-tokens" import { createBottomTabNavigator } from "@react-navigation/bottom-tabs" import { createNativeStackNavigator } from "@react-navigation/native-stack" import { HomeTab } from "app/Navigation/AuthenticatedRoutes/HomeTab" @@ -121,14 +120,15 @@ const AppTabs: React.FC = () => { style={{ top: Platform.OS === "ios" ? -4 : 0 }} selectable={false} textAlign="center" + color="black100" > {bottomTabsConfig[route.name].name} ) }, - tabBarActiveTintColor: THEME.colors["black100"], - tabBarInactiveTintColor: THEME.colors["black60"], + tabBarActiveTintColor: color("black100"), + tabBarInactiveTintColor: color("black100"), } }} screenListeners={{ diff --git a/src/app/Navigation/Navigation.tsx b/src/app/Navigation/Navigation.tsx index 2c31dfa434b..007939b8f7e 100644 --- a/src/app/Navigation/Navigation.tsx +++ b/src/app/Navigation/Navigation.tsx @@ -1,14 +1,14 @@ -import { Flex, Text } from "@artsy/palette-mobile" -import { DefaultTheme, NavigationContainer, NavigationContainerRef } from "@react-navigation/native" +import { Flex, Spacer, Spinner, Text } from "@artsy/palette-mobile" +import { NavigationContainer, NavigationContainerRef } from "@react-navigation/native" import { createNativeStackNavigator } from "@react-navigation/native-stack" import { addBreadcrumb } from "@sentry/react-native" import { FPSCounter } from "app/Components/FPSCounter" -import { LoadingSpinner } from "app/Components/Modals/LoadingModal" import { LegacyNativeModules } from "app/NativeModules/LegacyNativeModules" import { AuthenticatedRoutes, AuthenticatedRoutesParams, } from "app/Navigation/AuthenticatedRoutes/Tabs" +import { useNavigationTheme } from "app/Navigation/useNavigationTheme" import { OnboardingWelcomeScreens } from "app/Scenes/Onboarding/Onboarding" import { GlobalStore } from "app/store/GlobalStore" import { routingInstrumentation } from "app/system/errorReporting/setupSentry" @@ -37,6 +37,8 @@ export const Navigation = () => { const isLoggedIn = GlobalStore.useAppState((state) => state.auth.userID) const fpsCounter = useDevToggle("DTFPSCounter") + const theme = useNavigationTheme() + const { setSessionState: setNavigationReady } = GlobalStore.actions // Code for Sift tracking; needs to be manually fired on Android @@ -107,24 +109,18 @@ export const Navigation = () => { ) } -const theme = { - ...DefaultTheme, - colors: { - ...DefaultTheme.colors, - background: "#FFF", - }, -} - const NavigationLoadingIndicator = () => { return ( - + {!!__DEV__ && ( - - - This spinner is only visible in DEV mode.{"\n"} + + + + + Reloadig previous navigation state )} - + ) } diff --git a/src/app/Navigation/routes.tsx b/src/app/Navigation/routes.tsx index 96655b07112..cbb05940376 100644 --- a/src/app/Navigation/routes.tsx +++ b/src/app/Navigation/routes.tsx @@ -1374,6 +1374,11 @@ export const artsyDotNetRoutes = defineRoutes([ path: "/settings/dark-mode", name: "DarkModeSettings", Component: DarkModeSettings, + options: { + screenOptions: { + headerTitle: "Dark Mode Settings", + }, + }, }, { path: "/show/:showID", diff --git a/src/app/Navigation/useNavigationTheme.tsx b/src/app/Navigation/useNavigationTheme.tsx new file mode 100644 index 00000000000..5e49b74f48e --- /dev/null +++ b/src/app/Navigation/useNavigationTheme.tsx @@ -0,0 +1,25 @@ +import { THEMES } from "@artsy/palette-mobile" +import { DarkTheme, DefaultTheme } from "@react-navigation/native" +import { GlobalStore } from "app/store/GlobalStore" + +export const useNavigationTheme = () => { + const theme = GlobalStore.useAppState((state) => state.devicePrefs.colorScheme) + + return theme === "dark" ? DefaultDarkTheme : DefaultLightTheme +} + +export const DefaultLightTheme = { + ...DefaultTheme, + colors: { + ...DefaultTheme.colors, + background: "#FFF", + }, +} + +export const DefaultDarkTheme = { + ...DarkTheme, + colors: { + ...DarkTheme.colors, + background: THEMES.v3dark.colors.background, + }, +} diff --git a/src/app/Scenes/ArtQuiz/ArtQuizArtworks.tsx b/src/app/Scenes/ArtQuiz/ArtQuizArtworks.tsx index 4d105dccea4..313336da58e 100644 --- a/src/app/Scenes/ArtQuiz/ArtQuizArtworks.tsx +++ b/src/app/Scenes/ArtQuiz/ArtQuizArtworks.tsx @@ -158,7 +158,7 @@ const ArtQuizArtworksScreen = () => { const artworkCards: Card[] = artworks.slice(activeCardIndex).map((artwork) => { return { jsx: ( - + = ({ onPress, dark, testID, children }) => { + const color = useColor() + return ( = ( return ( - + {canBeExtended ? "Closing times may be extended due to last-minute competitive bidding. " : `Lots will close at ${cascadingEndTimeInterval}-minute intervals. `} navigate(CASCADING_AUCTION_HELP_ARTICLE_LINK)} style={{ textDecorationLine: "underline" }} > diff --git a/src/app/Scenes/Artwork/Components/CommercialButtons/BidButton.tsx b/src/app/Scenes/Artwork/Components/CommercialButtons/BidButton.tsx index 2a264362419..e2fdeeb41ec 100644 --- a/src/app/Scenes/Artwork/Components/CommercialButtons/BidButton.tsx +++ b/src/app/Scenes/Artwork/Components/CommercialButtons/BidButton.tsx @@ -1,8 +1,9 @@ import { ActionType } from "@artsy/cohesion" -import { ButtonProps, ClassTheme, Text, TextProps, Button } from "@artsy/palette-mobile" +import { ButtonProps, Text, TextProps, Button } from "@artsy/palette-mobile" import { BidButton_artwork$data } from "__generated__/BidButton_artwork.graphql" import { BidButton_me$data } from "__generated__/BidButton_me.graphql" import { AuctionTimerState } from "app/Components/Bidding/Components/Timer" +import { ThemeAwareClassTheme } from "app/Components/DarkModeClassTheme" import { navigate } from "app/system/navigation/navigate" import { bidderNeedsIdentityVerification } from "app/utils/auction/bidderNeedsIdentityVerification" import { Schema } from "app/utils/track" @@ -156,13 +157,13 @@ export class BidButton extends React.Component { return ( <> {!!isWatchOnly && ( - + {({ color }) => ( Registration closed )} - + )} ) @@ -83,8 +84,8 @@ export default class TabBar extends Component { render() { return ( - - {({ space }) => { + + {({ space, color }) => { // @ts-expect-error STRICTNESS_MIGRATION --- 🚨 Unsafe legacy code 🚨 Please delete this and fix any type errors if you have time 🙏 const containerWidth = this.props.containerWidth - space(4) const numberOfTabs = this.props.tabs.length @@ -108,7 +109,7 @@ export default class TabBar extends Component { position: "absolute", width: containerWidth / numberOfTabs, height: 1, - backgroundColor: "black", + backgroundColor: color("black100"), bottom: -1, left: 0, right: 0, @@ -123,7 +124,7 @@ export default class TabBar extends Component { ) }} - + ) } } diff --git a/src/app/Scenes/City/Components/TabFairItemRow/index.tsx b/src/app/Scenes/City/Components/TabFairItemRow/index.tsx index ea3e7f30361..b8324c25ef4 100644 --- a/src/app/Scenes/City/Components/TabFairItemRow/index.tsx +++ b/src/app/Scenes/City/Components/TabFairItemRow/index.tsx @@ -1,4 +1,5 @@ -import { Flex, Box, ClassTheme, Text } from "@artsy/palette-mobile" +import { Flex, Box, Text } from "@artsy/palette-mobile" +import { ThemeAwareClassTheme } from "app/Components/DarkModeClassTheme" import { ImageWithFallback } from "app/Components/ImageWithFallback/ImageWithFallback" import { Fair } from "app/Scenes/Map/types" import { navigate } from "app/system/navigation/navigate" @@ -19,7 +20,7 @@ export class TabFairItemRow extends React.Component { const { item } = this.props const fairImage = item.image ? item.image.url : null return ( - + {({ space }) => { const boxWidth = Dimensions.get("window").width - 62 - space(4) - space(1) return ( @@ -51,7 +52,7 @@ export class TabFairItemRow extends React.Component { ) }} - + ) } } diff --git a/src/app/Scenes/Feature/Feature.tsx b/src/app/Scenes/Feature/Feature.tsx index 7a49b5a1c30..f3a9b8f8dc2 100644 --- a/src/app/Scenes/Feature/Feature.tsx +++ b/src/app/Scenes/Feature/Feature.tsx @@ -1,4 +1,4 @@ -import { Spacer, Flex, Text, Separator, Box } from "@artsy/palette-mobile" +import { Spacer, Flex, Text, Separator, Box, useColor } from "@artsy/palette-mobile" import { FeatureQuery } from "__generated__/FeatureQuery.graphql" import { Feature_feature$data } from "__generated__/Feature_feature.graphql" import { AboveTheFoldFlatList } from "app/Components/AboveTheFoldFlatList" @@ -52,6 +52,7 @@ interface FeatureAppProps { } const FeatureApp: React.FC = ({ feature }) => { + const color = useColor() const sets = extractNodes(feature.sets) const { width, orientation } = useScreenDimensions() @@ -177,7 +178,7 @@ const FeatureApp: React.FC = ({ feature }) => { addSeparatorBetweenAllSections( contentSections, "content", - + ) ), ]} diff --git a/src/app/Scenes/Feature/components/FeatureFeaturedLink.tsx b/src/app/Scenes/Feature/components/FeatureFeaturedLink.tsx index 704e2463a1f..b74d677d7bd 100644 --- a/src/app/Scenes/Feature/components/FeatureFeaturedLink.tsx +++ b/src/app/Scenes/Feature/components/FeatureFeaturedLink.tsx @@ -36,11 +36,11 @@ const FeatureFeaturedLink: React.FC = ({ featuredLink, bottom: 20, }} > - + {featuredLink.title} {!!featuredLink.subtitle && ( - + )} diff --git a/src/app/Scenes/Feature/components/FeatureHeader.tsx b/src/app/Scenes/Feature/components/FeatureHeader.tsx index 082fc711644..9295e34502f 100644 --- a/src/app/Scenes/Feature/components/FeatureHeader.tsx +++ b/src/app/Scenes/Feature/components/FeatureHeader.tsx @@ -1,4 +1,4 @@ -import { Flex, FlexProps, Image, Text } from "@artsy/palette-mobile" +import { Flex, FlexProps, Image, Text, useColor } from "@artsy/palette-mobile" import { FeatureHeader_feature$data } from "__generated__/FeatureHeader_feature.graphql" import { Stack } from "app/Components/Stack" import { useScreenDimensions } from "app/utils/hooks" @@ -13,6 +13,8 @@ export interface FeatureHeaderProps extends FlexProps { export const FeatureHeader: React.FC = ({ feature }) => { const { height, width } = useScreenDimensions() + const color = useColor() + const imageHeight = isTablet() ? height * 0.6 : width const imageWidth = isTablet() ? width / 2 : width @@ -35,7 +37,7 @@ export const FeatureHeader: React.FC = ({ feature }) => { /> ) return isTablet() ? ( - + {image} @@ -45,7 +47,7 @@ export const FeatureHeader: React.FC = ({ feature }) => { ) : ( - + {image} {title} @@ -72,7 +74,7 @@ export const FeatureHeaderPlaceholder: React.FC<{}> = ({}) => { const imageHeight = isTablet() ? height * 0.6 : width return isTablet() ? ( - + @@ -80,7 +82,7 @@ export const FeatureHeaderPlaceholder: React.FC<{}> = ({}) => { ) : ( - + diff --git a/src/app/Scenes/HomeView/Components/HomeHeader.tsx b/src/app/Scenes/HomeView/Components/HomeHeader.tsx index 81a5227da93..40492cf5cca 100644 --- a/src/app/Scenes/HomeView/Components/HomeHeader.tsx +++ b/src/app/Scenes/HomeView/Components/HomeHeader.tsx @@ -14,7 +14,7 @@ export const HomeHeader: React.FC = () => { ) return ( - + {!!showPaymentFailureBanner && ( diff --git a/src/app/Scenes/HomeView/HomeView.tsx b/src/app/Scenes/HomeView/HomeView.tsx index 4fb6e19a936..a63b8fb365c 100644 --- a/src/app/Scenes/HomeView/HomeView.tsx +++ b/src/app/Scenes/HomeView/HomeView.tsx @@ -31,7 +31,6 @@ import { ProvidePlaceholderContext } from "app/utils/placeholders" import { usePrefetch } from "app/utils/queryPrefetching" import { requestPushNotificationsPermission } from "app/utils/requestPushNotificationsPermission" import { useMaybePromptForReview } from "app/utils/useMaybePromptForReview" -import { useSwitchStatusBarStyle } from "app/utils/useStatusBarStyle" import { memo, RefObject, Suspense, useCallback, useEffect, useState } from "react" import { FlatList, Linking, RefreshControl } from "react-native" import { fetchQuery, graphql, useLazyLoadQuery, usePaginationFragment } from "react-relay" @@ -204,8 +203,6 @@ const HomeViewScreenComponent: React.FC = () => { const { isDeepLink } = useIsDeepLink() - useSwitchStatusBarStyle("dark-content", "dark-content") - useEffect(() => { if (artQuizState === "incomplete" && isNavigationReady) { // Wait for react-navigation to start drawing the screen before navigating to ArtQuiz diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionCard.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionCard.tsx index f27736af75a..e170d6312d6 100644 --- a/src/app/Scenes/HomeView/Sections/HomeViewSectionCard.tsx +++ b/src/app/Scenes/HomeView/Sections/HomeViewSectionCard.tsx @@ -15,6 +15,7 @@ import { HeroUnit } from "app/Scenes/HomeView/Components/HeroUnit" import { HomeViewSectionSentinel } from "app/Scenes/HomeView/Components/HomeViewSectionSentinel" import { SectionSharedProps } from "app/Scenes/HomeView/Sections/Section" import { useHomeViewTracking } from "app/Scenes/HomeView/hooks/useHomeViewTracking" +import { GlobalStore } from "app/store/GlobalStore" import { navigate } from "app/system/navigation/navigate" import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" import { NoFallback, withSuspense } from "app/utils/hooks/withSuspense" @@ -35,6 +36,7 @@ export const HomeViewSectionCard: React.FC = ({ ...flexProps }) => { const tracking = useHomeViewTracking() + const theme = GlobalStore.useAppState((state) => state.devicePrefs.colorScheme) const { width, height } = useScreenDimensions() const section = useFragment(HomeViewSectionCardFragment, sectionProp) @@ -48,7 +50,7 @@ export const HomeViewSectionCard: React.FC = ({ const imageHeight = height * 0.5 const hasImage = !!image?.imageURL - const textColor = hasImage ? "white100" : "black100" + const textColor = hasImage && theme !== "dark" ? "white100" : "black100" const buttonText = btnText ?? "More" const route = getRoute(section.card) @@ -111,7 +113,7 @@ export const HomeViewSectionCard: React.FC = ({ {!!route && ( diff --git a/src/app/Scenes/Onboarding/OnboardingSocialLink.tsx b/src/app/Scenes/Onboarding/OnboardingSocialLink.tsx index 76e2bbed065..756b0101701 100644 --- a/src/app/Scenes/Onboarding/OnboardingSocialLink.tsx +++ b/src/app/Scenes/Onboarding/OnboardingSocialLink.tsx @@ -241,7 +241,7 @@ export const OnboardingSocialLink: React.FC< ) } return ( - + navigation.goBack()} /> Link Accounts diff --git a/src/app/Scenes/Onboarding/OnboardingWelcome.tsx b/src/app/Scenes/Onboarding/OnboardingWelcome.tsx index 2f010140552..a5e458ddc33 100644 --- a/src/app/Scenes/Onboarding/OnboardingWelcome.tsx +++ b/src/app/Scenes/Onboarding/OnboardingWelcome.tsx @@ -143,13 +143,13 @@ export const OnboardingWelcome: React.FC = ({ navigation animate={{ opacity: 1 }} transition={{ type: "timing", duration: 1500 }} > - + Collect Art by the World’s Leading Artists - + Build your personalized profile, get market insights, buy and sell art with confidence. diff --git a/src/app/Scenes/Playground/Animation/L5-Exercice/index.tsx b/src/app/Scenes/Playground/Animation/L5-Exercice/index.tsx index ae2eef3e2b1..3c7135cca7f 100644 --- a/src/app/Scenes/Playground/Animation/L5-Exercice/index.tsx +++ b/src/app/Scenes/Playground/Animation/L5-Exercice/index.tsx @@ -1,4 +1,4 @@ -import { BellFillIcon, Flex, Separator, Text } from "@artsy/palette-mobile" +import { BellFillIcon, Flex, Separator, Text, useColor } from "@artsy/palette-mobile" import { MenuItem } from "app/Components/MenuItem" import { ScrollView, View } from "react-native" import { Gesture, GestureDetector } from "react-native-gesture-handler" @@ -10,6 +10,8 @@ import Animated, { } from "react-native-reanimated" export const Exercice: React.FC<{}> = () => { + const color = useColor() + return ( @@ -48,7 +50,7 @@ export const Exercice: React.FC<{}> = () => { description="Ephemera or Merchandise or Print, Limited Edition" onPress={() => {}} noFeedback - style={{ backgroundColor: "white" }} + style={{ backgroundColor: color("white100") }} /> @@ -97,6 +99,7 @@ const Solution1 = () => { const THRESHOLD = 50 const Solution2 = () => { + const color = useColor() const dragX = useSharedValue(0) const isIconVisible = useSharedValue(false) @@ -149,7 +152,7 @@ const Solution2 = () => { description="Ephemera or Merchandise or Print, Limited Edition" onPress={() => {}} noFeedback - style={{ backgroundColor: "white" }} + style={{ backgroundColor: color("white100") }} /> diff --git a/src/app/Scenes/PriceDatabase/PriceDatabase.tsx b/src/app/Scenes/PriceDatabase/PriceDatabase.tsx index 6d00243d447..c7a65abfd1d 100644 --- a/src/app/Scenes/PriceDatabase/PriceDatabase.tsx +++ b/src/app/Scenes/PriceDatabase/PriceDatabase.tsx @@ -1,7 +1,8 @@ import { OwnerType } from "@artsy/cohesion" -import { Screen } from "@artsy/palette-mobile" +import { Screen, useColor } from "@artsy/palette-mobile" import { NavigationContainer } from "@react-navigation/native" import { TransitionPresets, createStackNavigator } from "@react-navigation/stack" +import { useNavigationTheme } from "app/Navigation/useNavigationTheme" import { MediumOptions } from "app/Scenes/PriceDatabase/components/MediumOptions" import { PriceDatabaseSearch } from "app/Scenes/PriceDatabase/components/PriceDatabaseSearch" import { SizesOptions } from "app/Scenes/PriceDatabase/components/SizesOptions" @@ -23,6 +24,9 @@ export type PriceDatabaseNavigationStack = { const Stack = createStackNavigator() export const PriceDatabase = () => { + const theme = useNavigationTheme() + const color = useColor() + const handleSubmit = () => {} const formik = useFormik({ @@ -41,14 +45,14 @@ export const PriceDatabase = () => { })} > - + diff --git a/src/app/Scenes/Sale/Components/SaleHeader.tsx b/src/app/Scenes/Sale/Components/SaleHeader.tsx index 613ecec1813..f6359df35ee 100644 --- a/src/app/Scenes/Sale/Components/SaleHeader.tsx +++ b/src/app/Scenes/Sale/Components/SaleHeader.tsx @@ -1,4 +1,4 @@ -import { ShareIcon, Flex, Text, Touchable, Image } from "@artsy/palette-mobile" +import { ShareIcon, Flex, Text, Touchable, Image, useColor } from "@artsy/palette-mobile" import { SaleHeader_sale$data } from "__generated__/SaleHeader_sale.graphql" import { CaretButton } from "app/Components/Buttons/CaretButton" import { useShareSheet } from "app/Components/ShareSheet/ShareSheetContext" @@ -19,6 +19,7 @@ interface Props { export const SaleHeader: React.FC = ({ sale, scrollAnim }) => { const { showShareSheet } = useShareSheet() + const color = useColor() const saInsets = useSafeAreaInsets() const saleTimeDetails = saleTime(sale) @@ -74,7 +75,7 @@ export const SaleHeader: React.FC = ({ sale, scrollAnim }) => { alignItems: "center", }} > - + Auction closed @@ -84,7 +85,7 @@ export const SaleHeader: React.FC = ({ sale, scrollAnim }) => { )} diff --git a/src/app/Scenes/SaleInfo/SaleInfo.tsx b/src/app/Scenes/SaleInfo/SaleInfo.tsx index b135e6d885a..306f638806e 100644 --- a/src/app/Scenes/SaleInfo/SaleInfo.tsx +++ b/src/app/Scenes/SaleInfo/SaleInfo.tsx @@ -51,7 +51,7 @@ const AuctionIsLive = () => ( This is a live auction - + Participating in a live auction means you’ll be competing against bidders in real time on an auction room floor. You can place max bids which will be represented by Artsy in the auction room or you can bid live when the auction opens. @@ -80,10 +80,10 @@ export const SaleInfo: React.FC = ({ sale, me }) => { return ( - + Live bidding opens on - + {`${moment(sale.liveStartAt).format("dddd, MMMM, D, YYYY")} at ${moment(sale.liveStartAt) .tz(tz) .format("h:mma z")}`} diff --git a/src/app/Scenes/SavedSearchAlert/CreateSavedSearchAlert.tsx b/src/app/Scenes/SavedSearchAlert/CreateSavedSearchAlert.tsx index 1b16c3282e9..d9d63777d22 100644 --- a/src/app/Scenes/SavedSearchAlert/CreateSavedSearchAlert.tsx +++ b/src/app/Scenes/SavedSearchAlert/CreateSavedSearchAlert.tsx @@ -1,5 +1,7 @@ +import { useColor } from "@artsy/palette-mobile" import { NavigationContainer } from "@react-navigation/native" import { TransitionPresets, createStackNavigator } from "@react-navigation/stack" +import { useNavigationTheme } from "app/Navigation/useNavigationTheme" import { SavedSearchStoreProvider, savedSearchModel, @@ -25,6 +27,9 @@ import { EmailPreferencesScreen } from "./screens/EmailPreferencesScreen" const Stack = createStackNavigator() export const CreateSavedSearchAlert: React.FC = (props) => { + const theme = useNavigationTheme() + const color = useColor() + const { visible, params } = props const { attributes, entity, currentArtworkID, sizeMetric } = params const { localizedUnit } = useLocalizedUnit() @@ -57,6 +62,7 @@ export const CreateSavedSearchAlert: React.FC = (pr onStateChange={(state) => { saveSession(state) }} + theme={theme} > = (pr statusBarTranslucent animationType="slide" > - + = (pr screenOptions={{ ...TransitionPresets.SlideFromRightIOS, headerShown: false, - cardStyle: { backgroundColor: "white" }, + cardStyle: { backgroundColor: color("background") }, }} > () export const EditSavedSearchAlert: React.FC = (props) => { + const theme = useNavigationTheme() + const color = useColor() + const { me, viewer, artists, savedSearchAlertId, relay } = props const { localizedUnit } = useLocalizedUnit() @@ -145,6 +149,7 @@ export const EditSavedSearchAlert: React.FC = (props) onStateChange={(state) => { saveSession(state) }} + theme={theme} > = (props) screenOptions={{ ...TransitionPresets.SlideFromRightIOS, headerShown: false, - cardStyle: { backgroundColor: "white" }, + cardStyle: { backgroundColor: color("background") }, }} > = ({ initialStep, hasStartedFlowFromMyCollection, }) => { + const color = useColor() + const theme = useNavigationTheme() + const currentStep = SubmitArtworkFormStore.useStoreState((state) => state.currentStep) const initialValues = { @@ -152,6 +156,7 @@ const SubmitArtworkFormContent: React.FC = ({ = ({ screenOptions={{ headerShown: false, cardStyle: { - backgroundColor: "white", + backgroundColor: color("background"), ...(isTablet ? { paddingTop: 20, @@ -216,14 +221,14 @@ const SubmitArtworkFormContent: React.FC = ({ return { cardStyle: { opacity: next ? nextOpacity : opacity, - backgroundColor: "white", + backgroundColor: color("background"), }, overlayStyle: { opacity: current.progress.interpolate({ inputRange: [0, 1], outputRange: [0, 0.5], }), - backgroundColor: "white", + backgroundColor: color("background"), }, } }, diff --git a/src/app/Scenes/SellWithArtsy/Components/MeetTheSpecialists.tsx b/src/app/Scenes/SellWithArtsy/Components/MeetTheSpecialists.tsx index c1fac7387b3..2a61beeeb39 100644 --- a/src/app/Scenes/SellWithArtsy/Components/MeetTheSpecialists.tsx +++ b/src/app/Scenes/SellWithArtsy/Components/MeetTheSpecialists.tsx @@ -1,8 +1,9 @@ import { ActionType, ContextModule, OwnerType, TappedConsignmentInquiry } from "@artsy/cohesion" -import { Flex, Spacer, Text, useColor, useSpace, Button } from "@artsy/palette-mobile" +import { Button, Flex, Spacer, Text, useSpace } from "@artsy/palette-mobile" import { MeetTheSpecialists_staticContent$key } from "__generated__/MeetTheSpecialists_staticContent.graphql" import { useExtraLargeWidth } from "app/Components/ArtworkRail/useExtraLargeWidth" import { ReadMore } from "app/Components/ReadMore" +import { GlobalStore } from "app/store/GlobalStore" import { AnimateHeight } from "app/utils/animations/AnimateHeight" import { MotiView } from "moti" import { useState } from "react" @@ -87,8 +88,8 @@ interface SpecialistProps { const Specialist: React.FC = ({ specialist, onInquiryPress }) => { const [isBioExpanded, setIsBioExpanded] = useState(false) - const color = useColor() const space = useSpace() + const theme = GlobalStore.useAppState((state) => state.devicePrefs.colorScheme) const imgWidth = useExtraLargeWidth() const imgHeight = imgWidth * IMG_HEIGHT_TO_WIDTH_RATIO @@ -129,10 +130,20 @@ const Specialist: React.FC = ({ specialist, onInquiryPress }) = - + {specialist.name} - + {specialist.jobTitle} @@ -142,7 +153,8 @@ const Specialist: React.FC = ({ specialist, onInquiryPress }) = textStyle="new" textVariant="xs" linkTextVariant="xs" - color={color("white100")} + // We want to set the color to white here regardless of the theme + color="white" showReadLessButton onExpand={(isExpanded) => setIsBioExpanded(isExpanded)} /> @@ -151,7 +163,7 @@ const Specialist: React.FC = ({ specialist, onInquiryPress }) =