fix(ONYX-1380): Activity Item screen spacing (#10988)

* fix: Activity Item screen spacing * min height * Update src/app/Scenes/Activity/components/NotificationArtworkList.tsx Co-authored-by: Mounir Dhahri <[email protected]> --------- Co-authored-by: Mounir Dhahri <[email protected]>
artsy · Oct 29, 2024 · 12f85be · 12f85be
1 parent b25c2ca
commit 12f85be
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 17 deletions.
diff --git a/.secrets.baseline b/.secrets.baseline
@@ -1134,5 +1134,5 @@
       }
     ]
   },
-  "generated_at": "2024-10-24T13:23:36Z"
+  "generated_at": "2024-10-28T12:12:54Z"
 }
diff --git a/src/app/Components/ArtworkGrids/MasonryInfiniteScrollArtworkGrid.tsx b/src/app/Components/ArtworkGrids/MasonryInfiniteScrollArtworkGrid.tsx
@@ -127,7 +127,6 @@ export const MasonryInfiniteScrollArtworkGrid: React.FC<MasonryInfiniteScrollArt
       contentContainerStyle={{
         // No paddings are needed for single column grids
         paddingHorizontal: getAdjustedNumColumns() === 1 ? 0 : space(2),
-        paddingBottom: artworks.length === 1 ? 0 : space(6),
       }}
       data={artworks}
       keyExtractor={(item) => item.id}
@@ -140,7 +139,7 @@ export const MasonryInfiniteScrollArtworkGrid: React.FC<MasonryInfiniteScrollArt
       refreshControl={refreshControl}
       renderItem={renderItem}
       ListFooterComponent={
-        <AnimatedMasonryListFooter shouldDisplaySpinner={shouldDisplaySpinner} />
+        hasMore ? <AnimatedMasonryListFooter shouldDisplaySpinner={shouldDisplaySpinner} /> : null
       }
       onScroll={rest.onScroll}
     />

diff --git a/src/app/Scenes/Activity/components/AlertNotification.tsx b/src/app/Scenes/Activity/components/AlertNotification.tsx
@@ -1,21 +1,21 @@
 import {
+  ArrowRightIcon,
   Button,
+  DEFAULT_HIT_SLOP,
   Flex,
-  Text,
+  Pill,
   Screen,
   Spacer,
-  ArrowRightIcon,
+  Text,
   Touchable,
-  Pill,
-  DEFAULT_HIT_SLOP,
 } from "@artsy/palette-mobile"
 import { AlertNotification_notification$key } from "__generated__/AlertNotification_notification.graphql"
 import { ActivityErrorScreen } from "app/Scenes/Activity/components/ActivityErrorScreen"
 import { NotificationArtworkList } from "app/Scenes/Activity/components/NotificationArtworkList"
 import { goBack, navigate } from "app/system/navigation/navigate"
 import { FC } from "react"
 import { ScrollView, TouchableOpacity } from "react-native"
-import { useFragment, graphql } from "react-relay"
+import { graphql, useFragment } from "react-relay"
 
 interface AlertNotificationProps {
   notification: AlertNotification_notification$key
@@ -86,7 +86,9 @@ export const AlertNotification: FC<AlertNotificationProps> = ({ notification })
 
         <NotificationArtworkList artworksConnection={artworksConnection} />
 
-        <Flex mx={2} mt={1} mb={2}>
+        <Spacer y={2} />
+
+        <Flex mx={2}>
           <Button
             block
             variant="outline"

diff --git a/src/app/Scenes/Activity/components/ArtworkPublishedNotification.tsx b/src/app/Scenes/Activity/components/ArtworkPublishedNotification.tsx
@@ -1,10 +1,10 @@
 import {
+  ArrowRightIcon,
   Flex,
-  Text,
-  Screen,
   FollowButton,
+  Screen,
   Spacer,
-  ArrowRightIcon,
+  Text,
   Touchable,
 } from "@artsy/palette-mobile"
 import { ArtworkPublishedNotificationFollowArtistMutation } from "__generated__/ArtworkPublishedNotificationFollowArtistMutation.graphql"
@@ -14,7 +14,7 @@ import { NotificationArtworkList } from "app/Scenes/Activity/components/Notifica
 import { goBack, navigate } from "app/system/navigation/navigate"
 import { FC } from "react"
 import { ScrollView } from "react-native"
-import { useFragment, graphql, useMutation } from "react-relay"
+import { graphql, useFragment, useMutation } from "react-relay"
 
 interface ArtworkPublishedNotificationProps {
   notification: ArtworkPublishedNotification_notification$key
@@ -81,7 +81,9 @@ export const ArtworkPublishedNotification: FC<ArtworkPublishedNotificationProps>
 
         <NotificationArtworkList artworksConnection={artworksConnection} />
 
-        <Flex mx={2} mt={1} mb={2}>
+        <Spacer y={2} />
+
+        <Flex mx={2}>
           <Touchable onPress={handleViewAllWorksPress}>
             <Flex flexDirection="row">
               <Text fontWeight="bold">View all works by {artist.name}</Text>

diff --git a/src/app/Scenes/Activity/components/NotificationArtworkList.tsx b/src/app/Scenes/Activity/components/NotificationArtworkList.tsx
@@ -7,7 +7,7 @@ import { CommercialButtonsQueryRenderer } from "app/Scenes/Activity/components/N
 import { extractNodes } from "app/utils/extractNodes"
 import { FC } from "react"
 import { ImageBackground } from "react-native"
-import { useFragment, graphql } from "react-relay"
+import { graphql, useFragment } from "react-relay"
 
 export interface PartnerOffer {
   internalID: string
@@ -36,7 +36,8 @@ export const NotificationArtworkList: FC<NotificationArtworkListProps> = (props)
   const color = useColor()
 
   return (
-    <Flex minHeight={400}>
+    // Setting the min heiht here because Flashlist needs a container with a valid height.
+    <Flex minHeight={1}>
       <MasonryInfiniteScrollArtworkGrid
         animated
         artworks={artworks}
@@ -48,14 +49,15 @@ export const NotificationArtworkList: FC<NotificationArtworkListProps> = (props)
         onScroll={scrollHandler}
         partnerOffer={partnerOffer}
         priceOfferMessage={priceOfferMessage}
-        style={{ paddingBottom: 120 }}
       />
+
       {!!showArtworkCommercialButtons && (
         <CommercialButtonsQueryRenderer
           artworkID={artworks[0].internalID}
           partnerOffer={partnerOffer}
         />
       )}
+
       {!!note && (
         <Flex width="100%" flexDirection="row" p={2}>
           <Flex width="100%" flexDirection="row" bg="black5" p={1}>
-Original file line number
+Diff line change
@@ Expand Up / @@ -1134,5 +1134,5 @@ @@
           }
         ]
       },
-      "generated_at": "2024-10-24T13:23:36Z"
+      "generated_at": "2024-10-28T12:12:54Z"
     }