feat: add dark mode [part 1]

artsy · Jan 22, 2025 · eb3e5c4 · eb3e5c4
1 parent e855fcd
commit eb3e5c4
Show file tree

Hide file tree

Showing 137 changed files with 763 additions and 461 deletions.
diff --git 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
@@ -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
@@ -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<AbandonFlowModalProps> = ({
   onDismiss,
   onLeave,
 }) => {
+  const color = useColor()
+
   return (
     <Modal visible={isVisible} presentationStyle="pageSheet" animationType="slide">
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: color("background") }}>
         <NavigationHeader
           hideBottomDivider
           renderRightButton={() => <CloseIcon width={26} height={26} />}

diff --git 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"),
       }}
     >
       <TouchableOpacity

diff --git a/src/app/Components/Artist/ArtistArtworks/ArtistArtworks.tsx b/src/app/Components/Artist/ArtistArtworks/ArtistArtworks.tsx
@@ -8,6 +8,7 @@ import {
   Spacer,
   Tabs,
   Text,
+  useColor,
   useScreenDimensions,
   useSpace,
 } from "@artsy/palette-mobile"
@@ -57,6 +58,8 @@ const ArtworksGrid: React.FC<ArtworksGridProps> = ({
   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<ArtworksGridProps> = ({
   }
 
   return (
-    <>
+    <Flex backgroundColor={color("white100")} flex={1}>
       <Tabs.Masonry
         data={artworks}
         numColumns={NUM_COLUMNS_MASONRY}
@@ -317,7 +320,7 @@ const ArtworksGrid: React.FC<ArtworksGridProps> = ({
         onComplete={handleCompleteSavedSearch}
         visible={isCreateAlertModalVisible}
       />
-    </>
+    </Flex>
   )
 }
 

diff --git 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<ArtistArtworksFilterProps> = (
   const { openFilterArtworksModal } = useShowArtworksFilterModal({ artist: data })
 
   return (
-    <Box backgroundColor="white">
+    <Flex backgroundColor="background">
       <ArtworksFilterHeader
         onFilterPress={() => {
           openFilterArtworksModal("sortAndFilter")
@@ -45,6 +45,6 @@ export const ArtistArtworksFilterHeader: React.FC<ArtistArtworksFilterProps> = (
           }}
         />
       </ArtworksFilterHeader>
-    </Box>
+    </Flex>
   )
 }
diff --git 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<SavedSearchButtonV2Props> = (props) =
           onPress={handlePress}
           render={({ color }) => (
             <Flex flexDirection="row" alignItems="center">
-              <Box backgroundColor="white">
+              <Box backgroundColor="white100">
                 <BellIcon fill={color} width="16px" height="16px" />
               </Box>
               <Text variant="xs" color={color} ml={0.5} numberOfLines={1} lineHeight="16px">

diff --git 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 (
     <Screen>
-      <Flex flex={1} backgroundColor="white">
+      <Flex flex={1} backgroundColor="white100">
         <ArtsyKeyboardAvoidingView>
           <NavigationHeader
             useXButton={!!isPresentedModally && !canGoBack}

diff --git a/src/app/Components/ArtworkFilter/ArtworkFilterNavigator.tsx b/src/app/Components/ArtworkFilter/ArtworkFilterNavigator.tsx
@@ -1,4 +1,5 @@
 import { ActionType, ContextModule, OwnerType, TappedCreateAlert } from "@artsy/cohesion"
+import { useColor } from "@artsy/palette-mobile"
 import { NavigationContainer } from "@react-navigation/native"
 import { TransitionPresets, createStackNavigator } from "@react-navigation/stack"
 import { CreateSavedSearchModal } from "app/Components/Artist/ArtistArtworks/CreateSavedSearchModal"
@@ -31,6 +32,7 @@ import { TimePeriodOptionsScreen } from "app/Components/ArtworkFilter/Filters/Ti
 import { ViewAsOptionsScreen } from "app/Components/ArtworkFilter/Filters/ViewAsOptions"
 import { WaysToBuyOptionsScreen } from "app/Components/ArtworkFilter/Filters/WaysToBuyOptions"
 import { YearOptionsScreen } from "app/Components/ArtworkFilter/Filters/YearOptions"
+import { useNavigationTheme } from "app/Navigation/useNavigationTheme"
 import { GlobalStore } from "app/store/GlobalStore"
 import { OwnerEntityTypes, PageNames } from "app/utils/track/schema"
 import { useLocalizedUnit } from "app/utils/useLocalizedUnit"
@@ -105,6 +107,9 @@ export type ArtworkFilterNavigationStack = {
 const Stack = createStackNavigator<ArtworkFilterNavigationStack>()
 
 export const ArtworkFilterNavigator: React.FC<ArtworkFilterProps> = (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<ArtworkFilterProps> = (props) => {
   }, [])
 
   return (
-    <NavigationContainer independent>
+    <NavigationContainer independent theme={theme}>
       <Modal visible={props.visible} onDismiss={handleClosingModal} animationType="slide">
-        <SafeAreaView edges={["top"]} style={{ flex: 1 }}>
+        <SafeAreaView edges={["top"]} style={{ flex: 1, backgroundColor: color("white100") }}>
           <Stack.Navigator
             // force it to not use react-native-screens, which is broken inside a react-native Modal for some reason
             detachInactiveScreens={false}
             screenOptions={{
               ...TransitionPresets.SlideFromRightIOS,
               headerShown: false,
-              cardStyle: { backgroundColor: "white" },
+              cardStyle: { backgroundColor: color("background") },
             }}
           >
             <Stack.Screen

diff --git a/src/app/Components/ArtworkFilter/Filters/ColorsSwatch.tests.tsx b/src/app/Components/ArtworkFilter/Filters/ColorsSwatch.tests.tsx
@@ -7,7 +7,7 @@ describe("Colors swatch", () => {
     const selectedTree = renderWithWrappersLEGACY(
       <ColorsSwatch
         width={30}
-        backgroundColor="black"
+        backgroundColor="black100"
         foregroundColor="#fff"
         name="blue"
         selected
@@ -19,7 +19,7 @@ describe("Colors swatch", () => {
     const unselectedTree = renderWithWrappersLEGACY(
       <ColorsSwatch
         width={30}
-        backgroundColor="black"
+        backgroundColor="black100"
         foregroundColor="#fff"
         name="blue"
         selected={false}

diff --git a/src/app/Components/ArtworkFilter/components/ArtworkFilterApplyButton.tsx b/src/app/Components/ArtworkFilter/components/ArtworkFilterApplyButton.tsx
@@ -83,14 +83,14 @@ export const ArtworkFilterApplyButton: React.FC<ArtworkFilterApplyButtonProps> =
           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,
         }}
       >
-        <Box p={2} backgroundColor="white">
+        <Box p={2} backgroundColor="white100">
           <Box
             height={50}
             borderRadius={50}

diff --git a/src/app/Components/ArtworkGrids/ArtworkSocialSignal.tsx b/src/app/Components/ArtworkGrids/ArtworkSocialSignal.tsx
@@ -22,7 +22,7 @@ export const ArtworkSocialSignal: React.FC<ArtworkSocialSignalProps> = ({
     case curatorsPick && !hideCuratorsPick:
       return (
         <Box alignItems="center" flexDirection="row">
-          <FireIcon />
+          <FireIcon fill="black100" />
           <Text color={primaryColor} variant="xs" textAlign="center">
             {" "}
             Curators’ Pick
@@ -33,7 +33,7 @@ export const ArtworkSocialSignal: React.FC<ArtworkSocialSignalProps> = ({
     case increasedInterest && !hideIncreasedInterest:
       return (
         <Box flexDirection="row" alignItems="center">
-          <ArrowUpRightIcon />
+          <ArrowUpRightIcon fill="black100" />
           <Text color={primaryColor} variant="xs">
             {" "}
             Increased Interest

diff --git a/src/app/Components/ArtworkGrids/ArtworksFilterHeader.tsx b/src/app/Components/ArtworkGrids/ArtworksFilterHeader.tsx
@@ -28,7 +28,7 @@ export const ArtworksFilterHeader: React.FC<FilterHeaderProps> = ({
   showSeparator = true,
 }) => {
   return (
-    <Flex backgroundColor="white100">
+    <Flex backgroundColor="background">
       <Flex
         flexDirection="row"
         height={HEADER_HEIGHT}

diff --git a/src/app/Components/ArtworkGrids/InfiniteScrollArtworksGrid.tsx b/src/app/Components/ArtworkGrids/InfiniteScrollArtworksGrid.tsx
@@ -461,7 +461,7 @@ const InfiniteScrollArtworksGrid: React.FC<Props & PrivateProps> = ({
             style={{ opacity: localIsLoading && hasMore() ? 1 : 0 }}
           >
             {!!autoFetch && (
-              <ActivityIndicator color={Platform.OS === "android" ? "black" : undefined} />
+              <ActivityIndicator color={Platform.OS === "android" ? "black100" : undefined} />
             )}
           </Flex>
         )}

diff --git a/src/app/Components/AuctionResultsList.tsx b/src/app/Components/AuctionResultsList.tsx
@@ -73,7 +73,7 @@ export const AuctionResultsList: React.FC<AuctionResultsListProps> = ({
         ListHeaderComponent={ListHeaderComponent}
         ItemSeparatorComponent={() => <Flex mt={2} />}
         renderSectionHeader={({ section: { sectionTitle } }) => (
-          <Flex bg="white" mx={2}>
+          <Flex backgroundColor="white100" mx={2}>
             <Text my={2} variant="sm-display">
               {sectionTitle}
             </Text>

diff --git 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<AutomountedBottomSheetModalProps> =
   closeOnBackdropClick = true,
   ...rest
 }) => {
+  const color = useColor()
   const ref = useRef<BottomSheetModal>(null)
   const [modalIsPresented, setModalIsPresented] = useState(false)
   const { height: screenHeight, safeAreaInsets } = useScreenDimensions()
@@ -78,6 +79,16 @@ export const AutomountedBottomSheetModal: FC<AutomountedBottomSheetModalProps> =
       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
@@ -19,7 +19,6 @@ export const DefaultBottomSheetBackdrop: React.FC<DefaultBottomSheetBackdrop> =
   style,
 }) => {
   const color = useColor()
-
   // animated variables
   const containerAnimatedStyle = useAnimatedStyle(() => {
     "worklet"
@@ -33,6 +32,7 @@ export const DefaultBottomSheetBackdrop: React.FC<DefaultBottomSheetBackdrop> =
     () => [
       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
@@ -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<Props, any> {
   render() {
     const showNavArrow = this.props.href || this.props.onPress
     return (
-      <ClassTheme>
+      <ThemeAwareClassTheme>
         {({ color }) => (
           <Box px={2} py={1} style={{ backgroundColor: color("black100") }}>
             <TouchableWithoutFeedback onPress={this.openLink.bind(this)}>
@@ -28,7 +29,7 @@ export default class DarkNavigationButton extends React.Component<Props, any> {
             </TouchableWithoutFeedback>
           </Box>
         )}
-      </ClassTheme>
+      </ThemeAwareClassTheme>
     )
   }