fix(DIA-1068): make the artwork card match the design specs more clos…

…ely (#11518) * made the artwork card match design specs * Revert "made the artwork card match design specs" This reverts commit 236835b. * Reapply "made the artwork card match design specs" This reverts commit d770102. * Revert "Reapply "made the artwork card match design specs"" This reverts commit 2835b45. * Reapply "Reapply "made the artwork card match design specs"" This reverts commit 7a64ab8. * made artwork card height consistent * removed incorrect view * made the screen height consistent for different screen sizes * rebased
artsy · Feb 7, 2025 · ce1a95f · ce1a95f
1 parent 248aa06
commit ce1a95f
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 52 deletions.
diff --git a/src/app/Components/ArtistListItem.tsx b/src/app/Components/ArtistListItem.tsx
@@ -32,6 +32,7 @@ interface Props {
   disableNavigation?: boolean
   onFollowFinish?: () => void
   onPress?: () => void
+  includeTombstone?: boolean
   isPrivate?: boolean
   relay: RelayProp
   RightButton?: JSX.Element
@@ -69,6 +70,7 @@ const ArtistListItem: React.FC<Props> = ({
   disableNavigation,
   onFollowFinish,
   onPress,
+  includeTombstone = true,
   isPrivate,
   relay,
   RightButton,
@@ -104,33 +106,44 @@ const ArtistListItem: React.FC<Props> = ({
     navigate(href)
   }
 
-  const getMeta = () => {
-    const tombstoneText = formatTombstoneText(nationality, birthday, deathday)
+  let meta
 
-    if (tombstoneText || Number.isInteger(uploadsCount)) {
-      return (
-        <Flex>
-          {!!tombstoneText && (
-            <Text variant="xs" color={theme === "light" ? "black60" : "white100"} numberOfLines={1}>
-              {tombstoneText}
-            </Text>
-          )}
+  if (includeTombstone) {
+    const getMeta = () => {
+      const tombstoneText = formatTombstoneText(nationality, birthday, deathday)
 
-          {Number.isInteger(uploadsCount) && (
-            <Text
-              variant="xs"
-              color={theme === "light" ? (uploadsCount === 0 ? "black60" : "black100") : "white100"}
-            >
-              {uploadsCount} {pluralize("artwork", uploadsCount || 0)} uploaded
-            </Text>
-          )}
-        </Flex>
-      )
+      if (tombstoneText || Number.isInteger(uploadsCount)) {
+        return (
+          <Flex>
+            {!!tombstoneText && (
+              <Text
+                variant="xs"
+                color={theme === "light" ? "black60" : "white100"}
+                numberOfLines={1}
+              >
+                {tombstoneText}
+              </Text>
+            )}
+
+            {Number.isInteger(uploadsCount) && (
+              <Text
+                variant="xs"
+                color={
+                  theme === "light" ? (uploadsCount === 0 ? "black60" : "black100") : "white100"
+                }
+              >
+                {uploadsCount} {pluralize("artwork", uploadsCount || 0)} uploaded
+              </Text>
+            )}
+          </Flex>
+        )
+      }
+
+      return undefined
     }
 
-    return undefined
+    meta = getMeta()
   }
-  const meta = getMeta()
 
   if (!name) {
     return null

diff --git a/src/app/Scenes/InfiniteDiscovery/Components/InfiniteDiscoveryArtworkCard.tsx b/src/app/Scenes/InfiniteDiscovery/Components/InfiniteDiscoveryArtworkCard.tsx
@@ -3,15 +3,14 @@ import {
   HeartFillIcon,
   HeartIcon,
   Image,
-  Spacer,
   Text,
   Touchable,
+  useColor,
   useScreenDimensions,
 } from "@artsy/palette-mobile"
 import { InfiniteDiscoveryArtworkCard_artwork$key } from "__generated__/InfiniteDiscoveryArtworkCard_artwork.graphql"
 import { ArtistListItemContainer } from "app/Components/ArtistListItem"
 import { useSaveArtworkToArtworkLists } from "app/Components/ArtworkLists/useSaveArtworkToArtworkLists"
-import { HEART_ICON_SIZE } from "app/Components/constants"
 import { GlobalStore } from "app/store/GlobalStore"
 import { Schema } from "app/utils/track"
 import { sizeToFit } from "app/utils/useSizeToFit"
@@ -25,8 +24,9 @@ interface InfiniteDiscoveryArtworkCardProps {
 export const InfiniteDiscoveryArtworkCard: React.FC<InfiniteDiscoveryArtworkCardProps> = ({
   artwork: artworkProp,
 }) => {
-  const { width: screenWidth } = useScreenDimensions()
+  const { width: screenWidth, height: screenHeight } = useScreenDimensions()
   const { trackEvent } = useTracking()
+  const color = useColor()
   const { incrementSavedArtworksCount, decrementSavedArtworksCount } =
     GlobalStore.actions.infiniteDiscovery
 
@@ -58,32 +58,31 @@ export const InfiniteDiscoveryArtworkCard: React.FC<InfiniteDiscoveryArtworkCard
     return null
   }
 
-  const MAX_ARTWORK_HEIGHT = 500
-  const CARD_HEIGHT = 800
+  const MAX_ARTWORK_HEIGHT = screenHeight * 0.6
 
   const src = artwork.images?.[0]?.url
   const width = artwork.images?.[0]?.width ?? 0
   const height = artwork.images?.[0]?.height ?? 0
 
-  const size = sizeToFit(
-    { width: width, height: height },
-    { width: screenWidth, height: MAX_ARTWORK_HEIGHT }
-  )
+  const size = sizeToFit({ width, height }, { width: screenWidth, height: MAX_ARTWORK_HEIGHT })
 
   return (
-    <Flex backgroundColor="white100" width="100%" height={CARD_HEIGHT} style={{ borderRadius: 10 }}>
-      <ArtistListItemContainer artist={artwork.artists?.[0]} />
-      <Spacer y={2} />
+    <Flex backgroundColor="white100" width="100%" style={{ borderRadius: 10 }}>
+      <Flex mx={2} my={1}>
+        <ArtistListItemContainer
+          artist={artwork.artists?.[0]}
+          avatarSize="xxs"
+          includeTombstone={false}
+        />
+      </Flex>
 
-      <Flex alignItems="center" backgroundColor="purple60">
+      <Flex alignItems="center" minHeight={MAX_ARTWORK_HEIGHT} justifyContent="center">
         {!!src && <Image src={src} height={size.height} width={size.width} />}
       </Flex>
-      <Flex flexDirection="row" justifyContent="space-between" p={1}>
+
+      <Flex flexDirection="row" justifyContent="space-between" p={1} mx={2}>
         <Flex>
           <Flex flexDirection="row" maxWidth={screenWidth - 200}>
-            {/* TODO: maxWidth above and ellipsizeMode + numberOfLines below are used to */}
-            {/* prevent long artwork titles from pushing the save button off of the card, */}
-            {/* it doesn't work as expected on Android. */}
             <Text
               color="black60"
               italic
@@ -106,19 +105,41 @@ export const InfiniteDiscoveryArtworkCard: React.FC<InfiniteDiscoveryArtworkCard
           testID="save-artwork-icon"
         >
           {!!isSaved ? (
-            <HeartFillIcon
-              testID="filled-heart-icon"
-              height={HEART_ICON_SIZE}
-              width={HEART_ICON_SIZE}
-              fill="blue100"
-            />
+            <Flex
+              style={{
+                width: HEART_CIRCLE_SIZE,
+                height: HEART_CIRCLE_SIZE,
+                borderRadius: HEART_CIRCLE_SIZE,
+                backgroundColor: color("black5"),
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <HeartFillIcon
+                testID="filled-heart-icon"
+                height={HEART_ICON_SIZE}
+                width={HEART_ICON_SIZE}
+                fill="blue100"
+              />
+            </Flex>
           ) : (
-            <HeartIcon
-              testID="empty-heart-icon"
-              height={HEART_ICON_SIZE}
-              width={HEART_ICON_SIZE}
-              fill="black100"
-            />
+            <Flex
+              style={{
+                width: HEART_CIRCLE_SIZE,
+                height: HEART_CIRCLE_SIZE,
+                borderRadius: HEART_CIRCLE_SIZE,
+                backgroundColor: color("black5"),
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <HeartIcon
+                testID="empty-heart-icon"
+                height={HEART_ICON_SIZE}
+                width={HEART_ICON_SIZE}
+                fill="black100"
+              />
+            </Flex>
           )}
         </Touchable>
       </Flex>
@@ -146,3 +167,6 @@ const infiniteDiscoveryArtworkCardFragment = graphql`
     ...useSaveArtworkToArtworkLists_artwork
   }
 `
+
+const HEART_ICON_SIZE = 18
+const HEART_CIRCLE_SIZE = 50
diff --git a/src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx b/src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx
@@ -1,4 +1,12 @@
-import { ArrowBackIcon, CloseIcon, Flex, Screen, Spinner, Touchable } from "@artsy/palette-mobile"
+import {
+  ArrowBackIcon,
+  CloseIcon,
+  Flex,
+  Screen,
+  Spacer,
+  Spinner,
+  Touchable,
+} from "@artsy/palette-mobile"
 import { FancySwiper } from "app/Components/FancySwiper/FancySwiper"
 import { useToast } from "app/Components/Toast/toastHook"
 import { InfiniteDiscoveryArtworkCard } from "app/Scenes/InfiniteDiscovery/Components/InfiniteDiscoveryArtworkCard"
@@ -115,6 +123,7 @@ export const InfiniteDiscovery: React.FC<InfiniteDiscoveryProps> = ({
             }
           />
         </Flex>
+        <Spacer y={1} />
         <FancySwiper cards={unswipedCards} hideActionButtons onSwipeAnywhere={handleCardSwiped} />
 
         {!!artworks.length && (