fix: address new save and follow issues (#11102)

* chore: remove italic font style from artwork meta

* fix: adjust icon and likes count alignment

* chore: do not use italic on artwork grid item

* fix: use black fill colour if experiment b or c

* chore: hide follow cta on notigications grids

* chore: update palette-mobile

* chore: increase icon size

* chore: address review comments

src/app/Components/ArtworkGrids/ArtworkGridItem.tests.tsx

@@ -628,6 +628,14 @@ describe("ArtworkGridItem", () => {
         expect(screen.queryByTestId("follow-icon-empty")).not.toBeOnTheScreen()
         expect(screen.queryByTestId("follow-icon-filled")).not.toBeOnTheScreen()
       })
+
+      it("does not render Follow CTA if hideSaveIcon is true", () => {
+        renderWithRelay({}, { hideFollowIcon: true })
+
+        // do not render Follow CTA
+        expect(screen.queryByTestId("follow-icon-empty")).not.toBeOnTheScreen()
+        expect(screen.queryByTestId("follow-icon-filled")).not.toBeOnTheScreen()
+      })
     })
   })
 

src/app/Components/ArtworkGrids/ArtworkGridItem.tsx

@@ -66,6 +66,7 @@ export interface ArtworkProps extends ArtworkActionTrackingProps {
   hideRegisterBySignal?: boolean
   hideSaleInfo?: boolean
   hideSaveIcon?: boolean
+  hideFollowIcon?: boolean
   /** Pass Tap to override generic ing, used for home tracking in rails */
   itemIndex?: number
   lotLabelTextStyle?: TextProps
@@ -103,6 +104,7 @@ export const Artwork: React.FC<ArtworkProps> = ({
   hideRegisterBySignal = false,
   hideSaleInfo = false,
   hideSaveIcon = false,
+  hideFollowIcon = false,
   itemIndex,
   lotLabelTextStyle,
   onPress,
@@ -359,7 +361,7 @@ export const Artwork: React.FC<ArtworkProps> = ({
                     numberOfLines={1}
                     {...titleTextStyle}
                   >
-                    <Text lineHeight="18px" variant="xs" weight="regular" italic>
+                    <Text lineHeight="18px" variant="xs" weight="regular">
                       {artwork.title}
                     </Text>
                     {artwork.date ? `, ${artwork.date}` : ""}
@@ -442,6 +444,7 @@ export const Artwork: React.FC<ArtworkProps> = ({
               <ArtworkItemCTAs
                 artwork={artwork}
                 showSaveIcon={!hideSaveIcon}
+                showFollowIcon={!hideFollowIcon}
                 contextModule={contextModule}
                 contextScreen={contextScreen}
                 contextScreenOwnerId={contextScreenOwnerId}

src/app/Components/ArtworkGrids/MasonryArtworkGridItem.tsx

@@ -34,6 +34,7 @@ interface MasonryArtworkGridItemProps {
   partnerOffer?: PartnerOffer | null
   priceOfferMessage?: PriceOfferMessage
   hideSaveIcon?: boolean
+  hideFollowIcon?: boolean
   hideSaleInfo?: boolean
 }
 

src/app/Components/ArtworkGrids/MasonryInfiniteScrollArtworkGrid.tsx

@@ -32,6 +32,7 @@ interface MasonryInfiniteScrollArtworkGridProps extends MasonryFlashListOmittedP
   hasMore?: boolean
   hideSaleInfo?: boolean
   hideSaveIcon?: boolean
+  hideFollowIcon?: boolean
   isLoading?: boolean
   loadMore?: (pageSize: number) => void
   onPress?: (artworkID: string) => void
@@ -46,6 +47,7 @@ interface MasonryInfiniteScrollArtworkGridProps extends MasonryFlashListOmittedP
  * a masonry grid in a Tab surface, use Tabs.Masonry instead.
  *
  */
+
 export const MasonryInfiniteScrollArtworkGrid: React.FC<MasonryInfiniteScrollArtworkGridProps> = ({
   animated = false,
   artworks,
@@ -57,6 +59,7 @@ export const MasonryInfiniteScrollArtworkGrid: React.FC<MasonryInfiniteScrollArt
   hasMore,
   hideSaleInfo,
   hideSaveIcon,
+  hideFollowIcon,
   isLoading,
   ListEmptyComponent,
   ListHeaderComponent,
@@ -102,6 +105,7 @@ export const MasonryInfiniteScrollArtworkGrid: React.FC<MasonryInfiniteScrollArt
         onPress={onPress}
         hideSaleInfo={hideSaleInfo}
         hideSaveIcon={hideSaveIcon}
+        hideFollowIcon={hideFollowIcon}
       />
     ),
     [rest.numColumns]

src/app/Components/ArtworkRail/ArtworkRailCardMeta.tsx

@@ -152,7 +152,7 @@ export const ArtworkRailCardMeta: React.FC<ArtworkRailCardMetaProps> = ({
 
         {!!title && (
           <RNText numberOfLines={1} ellipsizeMode="tail">
-            <Text lineHeight="20px" color={secondaryTextColor} variant="xs" fontStyle="italic">
+            <Text lineHeight="20px" color={secondaryTextColor} variant="xs">
               {title}
               {!!date && (
                 <Text lineHeight="20px" color={secondaryTextColor} variant="xs">

src/app/Components/constants.ts

@@ -4,7 +4,7 @@ export const FAIR2_EXHIBITORS_PAGE_SIZE = 10
 export const SHOW2_ARTWORKS_PAGE_SIZE = 30
 export const SAVED_SERCHES_PAGE_SIZE = 20
 export const HEART_ICON_SIZE = 22
-export const ARTWORK_RAIL_CARD_CTA_ICON_SIZE = 16
+export const ARTWORK_RAIL_CARD_CTA_ICON_SIZE = 18
 export const ICON_HIT_SLOP = {
   top: 5,
   right: 5,

src/app/Scenes/Activity/components/NotificationArtworkList.tsx

@@ -39,6 +39,7 @@ export const NotificationArtworkList: FC<NotificationArtworkListProps> = ({
         onScroll={scrollHandler}
         partnerOffer={partnerOffer}
         priceOfferMessage={priceOfferMessage}
+        hideFollowIcon
       />
     </Flex>
   )

src/app/Scenes/Artwork/Components/ArtworkItemCTAs.tests.tsx

@@ -94,6 +94,14 @@ describe("ArtworkItemCTAs", () => {
       expect(screen.queryByTestId("follow-icon-empty")).not.toBeOnTheScreen()
       expect(screen.queryByTestId("follow-icon-filled")).not.toBeOnTheScreen()
     })
+
+    it("does not render Follow CTA if showFollowIcon is false", () => {
+      renderWithRelay({}, { showFollowIcon: false })
+
+      // do not render Follow CTA
+      expect(screen.queryByTestId("follow-icon-empty")).not.toBeOnTheScreen()
+      expect(screen.queryByTestId("follow-icon-filled")).not.toBeOnTheScreen()
+    })
   })
 
   describe("variant-c", () => {

src/app/Scenes/Artwork/Components/ArtworkItemCTAs.tsx

@@ -26,11 +26,16 @@ import { useTracking } from "react-tracking"
 interface ArtworkItemCTAsProps extends ArtworkActionTrackingProps {
   artwork: ArtworkItemCTAs_artwork$key
   showSaveIcon?: boolean
+  showFollowIcon?: boolean
 }
 
 export const ArtworkItemCTAs: React.FC<ArtworkItemCTAsProps> = ({
   artwork: artworkProp,
   showSaveIcon = false,
+  /**
+   * Show follow icon by default, but allow it to be hidden on specific grids
+   */
+  showFollowIcon = true,
   contextModule,
   contextScreen,
   contextScreenOwnerId,
@@ -112,7 +117,7 @@ export const ArtworkItemCTAs: React.FC<ArtworkItemCTAsProps> = ({
       )}
 
       {!!sale?.isAuction && !!collectorSignals?.auction?.lotWatcherCount && (
-        <Text pl={0.5} variant="xxs" numberOfLines={1} textAlign="center">
+        <Text lineHeight="12px" pl={0.5} variant="xxs" numberOfLines={1} textAlign="center">
           {collectorSignals.auction.lotWatcherCount}
         </Text>
       )}
@@ -148,7 +153,7 @@ export const ArtworkItemCTAs: React.FC<ArtworkItemCTAsProps> = ({
       <Flex flexDirection="row">
         <Join separator={<Spacer x={1} />}>
           {saveCTA}
-          {followCTA}
+          {!!showFollowIcon && followCTA}
         </Join>
       </Flex>
     )

src/app/Scenes/Artwork/Components/ArtworkSaveButton.tsx

@@ -46,7 +46,7 @@ const SaveButtonIcon: React.FC<IconProps> = ({ isSaved }) => {
     return (
       <HeartFillIcon
         accessibilityLabel="Saved icon"
-        fill={!showNewSaveCTA ? "black100" : "blue100"}
+        fill={showNewSaveCTA ? "black100" : "blue100"}
       />
     )
   }