Merge branch 'media-rounded' into 'develop'

Improve rounded courners in MediaGallery and Chats

See merge request soapbox-pub/soapbox!2310

app/soapbox/components/media-gallery.tsx

@@ -152,7 +152,14 @@ const Item: React.FC<IItem> = ({
     );
 
     return (
-      <div className={clsx('media-gallery__item', { standalone })} key={attachment.id} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
+      <div
+        className={clsx('media-gallery__item', {
+          standalone,
+          'rounded-md': total > 1,
+        })}
+        key={attachment.id}
+        style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}
+      >
         <a className='media-gallery__item-thumbnail' href={attachment.url} target='_blank' style={{ cursor: 'pointer' }}>
           <Blurhash hash={attachment.blurhash} className='media-gallery__preview' />
           <span className='media-gallery__item__icons'>{attachmentIcon}</span>
@@ -245,7 +252,14 @@ const Item: React.FC<IItem> = ({
   }
 
   return (
-    <div className={clsx('media-gallery__item', `media-gallery__item--${attachment.type}`, { standalone })} key={attachment.id} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
+    <div
+      className={clsx('media-gallery__item', `media-gallery__item--${attachment.type}`, {
+        standalone,
+        'rounded-md': total > 1,
+      })}
+      key={attachment.id}
+      style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}
+    >
       {last && total > ATTACHMENT_LIMIT && (
         <div className='media-gallery__item-overflow'>
           +{total - ATTACHMENT_LIMIT + 1}
@@ -260,7 +274,7 @@ const Item: React.FC<IItem> = ({
   );
 };
 
-interface IMediaGallery {
+export interface IMediaGallery {
   sensitive?: boolean
   media: ImmutableList<Attachment>
   height?: number
@@ -270,13 +284,15 @@ interface IMediaGallery {
   visible?: boolean
   onToggleVisibility?: () => void
   displayMedia?: string
-  compact: boolean
+  compact?: boolean
+  className?: string
 }
 
 const MediaGallery: React.FC<IMediaGallery> = (props) => {
   const {
     media,
     defaultWidth = 0,
+    className,
     onOpenMedia,
     cacheWidth,
     compact,
@@ -546,7 +562,11 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
   }, [node.current]);
 
   return (
-    <div className={clsx('media-gallery', { 'media-gallery--compact': compact })} style={sizeData.style} ref={node}>
+    <div
+      className={clsx(className, 'media-gallery', { 'media-gallery--compact': compact })}
+      style={sizeData.style}
+      ref={node}
+    >
       {children}
     </div>
   );

app/soapbox/features/chats/components/chat-message.tsx

@@ -23,6 +23,7 @@ import ChatMessageReaction from './chat-message-reaction';
 import ChatMessageReactionWrapper from './chat-message-reaction-wrapper/chat-message-reaction-wrapper';
 
 import type { Menu as IMenu } from 'soapbox/components/dropdown-menu';
+import type { IMediaGallery } from 'soapbox/components/media-gallery';
 import type { ChatMessage as ChatMessageEntity } from 'soapbox/types/entities';
 
 const messages = defineMessages({
@@ -112,8 +113,12 @@ const ChatMessage = (props: IChatMessage) => {
 
     return (
       <Bundle fetchComponent={MediaGallery}>
-        {(Component: any) => (
+        {(Component: React.FC<IMediaGallery>) => (
           <Component
+            className={clsx({
+              'rounded-br-sm': isMyMessage && content,
+              'rounded-bl-sm': !isMyMessage && content,
+            })}
             media={chatMessage.media_attachments}
             onOpenMedia={onOpenMedia}
             visible

app/styles/components/media-gallery.scss

@@ -1,21 +1,21 @@
 $media-compact-size: 50px;
 
 .media-gallery {
+  @apply rounded-lg;
   box-sizing: border-box;
   overflow: hidden;
-  border-radius: 10px;
   isolation: isolate;
   position: relative;
   width: 100%;
   height: auto;
 
   &__item {
+    @apply rounded-sm;
     border: 0;
     box-sizing: border-box;
     display: block;
     float: left;
     position: relative;
-    border-radius: 10px;
     overflow: hidden;
 
     &__icons {