[PAY-1426] DMs: Simplify unfurl styles for mobile, fix border radius …

…shadow (#3555)
AudiusProject · Jun 9, 2023 · 49ff351 · 49ff351
1 parent 63faad0
commit 49ff351
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 29 deletions.
diff --git a/packages/mobile/src/screens/chat-screen/ChatMessageListItem.tsx b/packages/mobile/src/screens/chat-screen/ChatMessageListItem.tsx
@@ -49,7 +49,8 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
   bubble: {
     marginTop: spacing(2),
     backgroundColor: palette.white,
-    borderRadius: spacing(3)
+    borderRadius: spacing(3),
+    overflow: 'hidden'
   },
   isAuthor: {
     backgroundColor: palette.secondaryLight2
@@ -133,7 +134,8 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
   },
   unfurl: {
     width: Dimensions.get('window').width - 48,
-    minHeight: 72
+    minHeight: 72,
+    borderRadius: 0 // Undoes border radius from track/collection tiles
   }
 }))
 
@@ -236,18 +238,12 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
   const { secondaryDark1, neutralLight7 } = useThemeColors()
 
   const borderBottomColor = isAuthor ? secondaryDark1 : neutralLight7
-  const borderBottomWidth = hideMessage
-    ? 0
-    : isCollection || isTrack
-    ? undefined
-    : 1
-  const borderBottomRadius = hideMessage ? undefined : 0
+  const borderBottomWidth =
+    hideMessage || isCollection || isTrack ? undefined : 1
   const unfurlStyles = {
     ...styles.unfurl,
     borderBottomColor,
-    borderBottomWidth,
-    borderBottomLeftRadius: borderBottomRadius,
-    borderBottomRightRadius: borderBottomRadius
+    borderBottomWidth
   }
 
   return (
@@ -309,7 +305,6 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
                       chatId={chatId}
                       messageId={message.message_id}
                       href={link.href}
-                      hideMessage={hideMessage}
                       onLongPress={handleLongPress}
                       onPressIn={handlePressIn}
                       onPressOut={handlePressOut}

diff --git a/packages/mobile/src/screens/chat-screen/LinkPreview.tsx b/packages/mobile/src/screens/chat-screen/LinkPreview.tsx
@@ -11,13 +11,7 @@ import { REACTION_LONGPRESS_DELAY } from './constants'
 
 const useStyles = makeStyles(({ spacing, palette, typography }) => ({
   root: {
-    backgroundColor: palette.white,
-    borderTopLeftRadius: spacing(3),
-    borderTopRightRadius: spacing(3),
-    overflow: 'hidden'
-  },
-  rootIsLinkPreviewOnly: {
-    borderRadius: spacing(3)
+    backgroundColor: palette.white
   },
   pressed: {
     backgroundColor: palette.neutralLight10
@@ -73,7 +67,6 @@ type LinkPreviewProps = {
   chatId: string
   messageId: string
   href: string
-  hideMessage: boolean
   isPressed: boolean
   onLongPress: (event: GestureResponderEvent) => void
   onPressIn: (event: GestureResponderEvent) => void
@@ -87,7 +80,6 @@ export const LinkPreview = ({
   chatId,
   messageId,
   href,
-  hideMessage,
   isPressed = false,
   onLongPress,
   onPressIn,
@@ -118,14 +110,7 @@ export const LinkPreview = ({
       onPressIn={onPressIn}
       onPressOut={onPressOut}
     >
-      <View
-        style={[
-          styles.root,
-          isPressed ? styles.pressed : null,
-          hideMessage ? styles.rootIsLinkPreviewOnly : null,
-          style
-        ]}
-      >
+      <View style={[styles.root, isPressed ? styles.pressed : null, style]}>
         {description || title ? (
           <>
             {image ? (