[PAY-2980] Improve collection card touch response (#8451)

AudiusProject · May 13, 2024 · ce006a3 · ce006a3
1 parent bd89388
commit ce006a3
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 29 deletions.
diff --git a/packages/mobile/src/components/collection-list/CollectionCard.tsx b/packages/mobile/src/components/collection-list/CollectionCard.tsx
@@ -116,7 +116,7 @@ export const CollectionCard = (props: CollectionCardProps) => {
             strength='strong'
             color='subdued'
             // Ensures footer height is not affected
-            style={{ lineHeight: 0 }}
+            style={{ lineHeight: 16 }}
           >
             {messages.hidden}
           </Text>
@@ -130,7 +130,7 @@ export const CollectionCard = (props: CollectionCardProps) => {
             </Flex>
             <Flex direction='row' gap='xs' alignItems='center'>
               <IconHeart size='s' color='subdued' />
-              <Text variant='label' color='subdued' style={{ lineHeight: 0 }}>
+              <Text variant='label' color='subdued'>
                 {formatCount(save_count)}
               </Text>
             </Flex>

diff --git a/packages/mobile/src/components/core/DogEar.tsx b/packages/mobile/src/components/core/DogEar.tsx
@@ -17,8 +17,8 @@ import { useThemeColors } from 'app/utils/theme'
 const useStyles = makeStyles(({ spacing }) => ({
   container: {
     position: 'absolute',
-    top: 0,
-    left: 0,
+    top: -1,
+    left: -1,
     zIndex: 10,
     width: spacing(12),
     height: spacing(12),

diff --git a/packages/mobile/src/components/track-list/TrackListItem.tsx b/packages/mobile/src/components/track-list/TrackListItem.tsx
@@ -351,7 +351,8 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => {
     isContextPlaylistOwner,
     dispatch,
     track_id,
-    contextPlaylistId
+    contextPlaylistId,
+    isLocked
   ])
 
   const handlePressOverflow = (e: NativeSyntheticEvent<NativeTouchEvent>) => {

diff --git a/packages/mobile/src/harmony-native/components/layout/Paper/Paper.tsx b/packages/mobile/src/harmony-native/components/layout/Paper/Paper.tsx
@@ -1,7 +1,8 @@
 import { forwardRef } from 'react'
 
+import { MobileOS } from '@audius/common/models'
 import type { View } from 'react-native'
-import { Pressable } from 'react-native'
+import { Platform, Pressable } from 'react-native'
 import { Gesture, GestureDetector } from 'react-native-gesture-handler'
 import Animated, {
   interpolate,
@@ -47,28 +48,6 @@ export const Paper = forwardRef<View, PaperProps>((props, ref) => {
     })
 
   const interactiveStyles = useAnimatedStyle(() => ({
-    shadowOpacity: interpolate(
-      pressed.value,
-      [0, 1],
-      [shadowStyle.shadowOpacity, shadows.near.shadowOpacity]
-    ),
-    shadowRadius: interpolate(
-      pressed.value,
-      [0, 1],
-      [shadowStyle.shadowRadius, shadows.near.shadowRadius]
-    ),
-    shadowOffset: {
-      width: interpolate(
-        pressed.value,
-        [0, 1],
-        [shadowStyle.shadowOffset.width, shadows.near.shadowOffset.width]
-      ),
-      height: interpolate(
-        pressed.value,
-        [0, 1],
-        [shadowStyle.shadowOffset.height, shadows.near.shadowOffset.height]
-      )
-    },
     shadowColor: interpolateColor(
       pressed.value,
       [0, 1],
@@ -78,7 +57,31 @@ export const Paper = forwardRef<View, PaperProps>((props, ref) => {
       {
         scale: interpolate(pressed.value, [0, 1], [1, 0.995])
       }
-    ]
+    ],
+    ...(Platform.OS === MobileOS.IOS && {
+      shadowOpacity: interpolate(
+        pressed.value,
+        [0, 1],
+        [shadowStyle.shadowOpacity, shadows.near.shadowOpacity]
+      ),
+      shadowRadius: interpolate(
+        pressed.value,
+        [0, 1],
+        [shadowStyle.shadowRadius, shadows.near.shadowRadius]
+      ),
+      shadowOffset: {
+        width: interpolate(
+          pressed.value,
+          [0, 1],
+          [shadowStyle.shadowOffset.width, shadows.near.shadowOffset.width]
+        ),
+        height: interpolate(
+          pressed.value,
+          [0, 1],
+          [shadowStyle.shadowOffset.height, shadows.near.shadowOffset.height]
+        )
+      }
+    })
   }))
 
   const flexProps = { backgroundColor, borderRadius, shadow }