[PAY-1425][PAY-1424] DMs: Fix image unfurls, fix purple halo around u…

…nfurls (#3554)
AudiusProject · Jun 9, 2023 · a8e92b7 · a8e92b7
1 parent 940aebe
commit a8e92b7
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 58 deletions.
diff --git a/packages/web/src/pages/chat-page/components/ChatMessageListItem.module.css b/packages/web/src/pages/chat-page/components/ChatMessageListItem.module.css
@@ -15,13 +15,16 @@
   z-index: 1;
   display: inline-block;
   max-width: 448px;
-  border-radius: var(--unit-3);
   filter: var(--drop-shadow-near);
   color: var(--static-netural);
-  background-color: var(--bubble-color);
   transition: background-color var(--calm), filter var(--calm);
 }
 
+.bubbleCorners {
+  border-radius: var(--unit-3);
+  overflow: hidden;
+}
+
 .text a {
   color: var(--neutral);
   text-decoration: underline !important;
@@ -45,16 +48,12 @@
   --bubble-color: var(--secondary-light-1);
 }
 
-.bubble .unfurlOtherUser {
+.bubble .unfurl:not(:last-child) {
   border-bottom: 1px solid var(--neutral-light-7);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
 }
 
-.bubble .unfurlAuthor {
+.isAuthor .bubble .unfurl:not(:last-child) {
   border-bottom: 1px solid var(--secondary-dark-1);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
 }
 
 .text {
@@ -64,6 +63,7 @@
   text-align: left;
   line-height: 150%;
   user-select: text;
+  background-color: var(--bubble-color);
 }
 
 .meta {
@@ -168,6 +168,7 @@
   display: flex;
   position: absolute;
   bottom: 0;
+  z-index: -1;
 }
 
 :not(.hideMessage) .tail svg * {

diff --git a/packages/web/src/pages/chat-page/components/ChatMessageListItem.tsx b/packages/web/src/pages/chat-page/components/ChatMessageListItem.tsx
@@ -178,11 +178,6 @@ export const ChatMessageListItem = (props: ChatMessageListItemProps) => {
     )
   }
 
-  const unfurlClassNames = cn({
-    [styles.unfurlAuthor]: !hideMessage && isAuthor,
-    [styles.unfurlOtherUser]: !hideMessage && !isAuthor
-  })
-
   return (
     <div
       className={cn(styles.root, {
@@ -195,54 +190,56 @@ export const ChatMessageListItem = (props: ChatMessageListItemProps) => {
           [styles.hideMessage]: hideMessage
         })}
       >
-        {isCollectionUrl(linkValue) ? (
-          <ChatMessagePlaylist
-            className={unfurlClassNames}
-            link={link.value}
-            onEmpty={onUnfurlEmpty}
-            onSuccess={onUnfurlSuccess}
-          />
-        ) : isTrackUrl(linkValue) ? (
-          <ChatMessageTrack
-            className={unfurlClassNames}
-            link={link.value}
-            onEmpty={onUnfurlEmpty}
-            onSuccess={onUnfurlSuccess}
-          />
-        ) : link ? (
-          <LinkPreview
-            className={unfurlClassNames}
-            href={link.href}
-            chatId={chatId}
-            messageId={message.message_id}
-            onEmpty={onUnfurlEmpty}
-            onSuccess={onUnfurlSuccess}
-          />
-        ) : null}
-        {!hideMessage ? (
-          <div className={styles.text}>
-            <Linkify
-              options={{
-                attributes: {
-                  onClick: (event: React.MouseEvent<HTMLAnchorElement>) => {
-                    const url = event.currentTarget.href
+        <div className={styles.bubbleCorners}>
+          {isCollectionUrl(linkValue) ? (
+            <ChatMessagePlaylist
+              className={styles.unfurl}
+              link={link.value}
+              onEmpty={onUnfurlEmpty}
+              onSuccess={onUnfurlSuccess}
+            />
+          ) : isTrackUrl(linkValue) ? (
+            <ChatMessageTrack
+              className={styles.unfurl}
+              link={link.value}
+              onEmpty={onUnfurlEmpty}
+              onSuccess={onUnfurlSuccess}
+            />
+          ) : link ? (
+            <LinkPreview
+              className={styles.unfurl}
+              href={link.href}
+              chatId={chatId}
+              messageId={message.message_id}
+              onEmpty={onUnfurlEmpty}
+              onSuccess={onUnfurlSuccess}
+            />
+          ) : null}
+          {!hideMessage ? (
+            <div className={styles.text}>
+              <Linkify
+                options={{
+                  attributes: {
+                    onClick: (event: React.MouseEvent<HTMLAnchorElement>) => {
+                      const url = event.currentTarget.href
 
-                    if (isAudiusUrl(url)) {
-                      const path = getPathFromAudiusUrl(url)
-                      event.nativeEvent.preventDefault()
-                      onClickInternalLink(path ?? '/')
+                      if (isAudiusUrl(url)) {
+                        const path = getPathFromAudiusUrl(url)
+                        event.nativeEvent.preventDefault()
+                        onClickInternalLink(path ?? '/')
+                      }
                     }
+                  },
+                  target: (href) => {
+                    return isAudiusUrl(href) ? '' : '_blank'
                   }
-                },
-                target: (href) => {
-                  return isAudiusUrl(href) ? '' : '_blank'
-                }
-              }}
-            >
-              {message.message}
-            </Linkify>
-          </div>
-        ) : null}
+                }}
+              >
+                {message.message}
+              </Linkify>
+            </div>
+          ) : null}
+        </div>
         {renderReactions()}
         {hasTail ? (
           <div className={styles.tail}>

diff --git a/packages/web/src/pages/chat-page/components/LinkPreview.module.css b/packages/web/src/pages/chat-page/components/LinkPreview.module.css
@@ -33,6 +33,7 @@
 }
 
 .image {
+  display: block;
   max-width: 448px;
 }