fix: Activity Item screen spacing

artsy · Oct 28, 2024 · 90616fc · 90616fc
1 parent 76bd596
commit 90616fc
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 15 deletions.
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
@@ -48,14 +48,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}>