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..a6e830ba34a 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.3060.0", "@artsy/to-title-case": "1.1.0", "@braze/react-native-sdk": "13.1.1", "@expo/react-native-action-sheet": "4.0.1", @@ -223,6 +223,7 @@ "@react-native/eslint-config": "0.76.5", "@react-native/metro-config": "0.76.5", "@react-native/typescript-config": "0.76.5", + "@sentry/cli": "2.41.1", "@testing-library/react-hooks": "8.0.1", "@testing-library/react-native": "12.9.0", "@types/argparse": "2.0.10", 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/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..a6518609bd1 100644 --- a/src/app/Components/CreditCardField/CreditCardField.tsx +++ b/src/app/Components/CreditCardField/CreditCardField.tsx @@ -60,7 +60,6 @@ export const CreditCardField: React.FC = ({ onCardChange } return { zIndex: 100, position: "absolute", - backgroundColor: "white", left: withTiming( hasSelectedValue || isFocused ? 15 : STRIPE_CREDIT_CARD_ICON_CONTAINER_WIDTH ), @@ -93,7 +92,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 +112,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/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..adebc446f07 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 ? ( @@ -184,7 +185,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/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..91c370f844e 100644 --- a/src/app/Components/Select/Components/SelectButton.tsx +++ b/src/app/Components/Select/Components/SelectButton.tsx @@ -11,6 +11,7 @@ import { TriangleDown, getInputState, getInputVariant, + useColor, useSpace, } from "@artsy/palette-mobile" import { THEME } from "@artsy/palette-tokens" @@ -47,6 +48,7 @@ export const SelectButton: React.FC<{ error, }) => { const space = useSpace() + const color = useColor() const variant: InputVariant = getInputVariant({ hasError: !!hasError || !!error, @@ -69,7 +71,6 @@ export const SelectButton: React.FC<{ const labelStyles = useAnimatedStyle(() => { return { - backgroundColor: "white", paddingHorizontal: withTiming(hasSelectedValue ? 5 : 0), color: withTiming(INPUT_VARIANTS[variant][animatedState.value].labelColor), top: withTiming(hasSelectedValue ? -INPUT_MIN_HEIGHT / 2 : 0), @@ -115,7 +116,11 @@ export const SelectButton: React.FC<{ ]} flexDirection="row" > - {!!title && {title}} + {!!title && ( + + {title} + + )} {!!value && ( {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/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/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/SavedSearchAlert/CreateSavedSearchAlert.tsx b/src/app/Scenes/SavedSearchAlert/CreateSavedSearchAlert.tsx index 8ceb0499e1a..0993e9cb6fb 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,9 +62,10 @@ export const CreateSavedSearchAlert: React.FC = (pr onStateChange={(state) => { saveSession(state) }} + theme={theme} > - + = (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..ce522fa992c 100644 --- a/src/app/Scenes/SellWithArtsy/Components/MeetTheSpecialists.tsx +++ b/src/app/Scenes/SellWithArtsy/Components/MeetTheSpecialists.tsx @@ -3,6 +3,7 @@ import { Flex, Spacer, Text, useColor, useSpace, Button } from "@artsy/palette-m 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" @@ -89,6 +90,7 @@ const Specialist: React.FC = ({ specialist, onInquiryPress }) = 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 +131,10 @@ const Specialist: React.FC = ({ specialist, onInquiryPress }) = - + {specialist.name} - + {specialist.jobTitle} @@ -142,7 +144,7 @@ const Specialist: React.FC = ({ specialist, onInquiryPress }) = textStyle="new" textVariant="xs" linkTextVariant="xs" - color={color("white100")} + color={color("white")} showReadLessButton onExpand={(isExpanded) => setIsBioExpanded(isExpanded)} /> @@ -151,7 +153,7 @@ const Specialist: React.FC = ({ specialist, onInquiryPress }) =