Merge branch 'chats-styles' into 'develop'

Improve chats styles and chat placeholder

See merge request soapbox-pub/soapbox!1951

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

@@ -35,29 +35,29 @@ const Chat: React.FC<IChat> = ({ chatId, onClick }) => {
       <button className='floating-link' onClick={() => onClick(chat)} />
       <HStack key={account.id} space={3} className='relative overflow-hidden'>
         <Avatar className='flex-none' src={account.avatar} size={36} />
-        <Stack className='overflow-hidden'>
+        <Stack className='overflow-hidden flex-1'>
           <DisplayName account={account} withSuffix={false} />
-          {attachment && (
-            <Icon
-              className='chat__attachment-icon'
-              src={image ? require('@tabler/icons/photo.svg') : require('@tabler/icons/paperclip.svg')}
-            />
-          )}
-          {content ? (
-            <Text
-              theme='muted'
-              size='sm'
-              className='chat__last-message'
-              dangerouslySetInnerHTML={{ __html: parsedContent }}
-              truncate
-            />
-          ) : attachment && (
-            <span
-              className='chat__last-message attachment'
-            >
-              {image ? <FormattedMessage id='chats.attachment_image' defaultMessage='Image' /> : <FormattedMessage id='chats.attachment' defaultMessage='Attachment' />}
-            </span>
-          )}
+          <HStack space={1} justifyContent='between'>
+            {content ? (
+              <Text
+                theme='muted'
+                size='sm'
+                className='max-h-5'
+                dangerouslySetInnerHTML={{ __html: parsedContent }}
+                truncate
+              />
+            ) : attachment && (
+              <Text theme='muted' size='sm' className='italic'>
+                {image ? <FormattedMessage id='chats.attachment_image' defaultMessage='Image' /> : <FormattedMessage id='chats.attachment' defaultMessage='Attachment' />}
+              </Text>
+            )}
+            {attachment && (
+              <Icon
+                className='chat__attachment-icon'
+                src={image ? require('@tabler/icons/photo.svg') : require('@tabler/icons/paperclip.svg')}
+              />
+            )}
+          </HStack>
           {unreadCount > 0 && (
             <div className='absolute top-1 right-0'>
               <Counter count={unreadCount} />

app/soapbox/features/placeholder/components/placeholder-chat.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { HStack, Stack } from 'soapbox/components/ui';
+
 import { randomIntFromInterval, generateText } from '../utils';
 
 import PlaceholderAvatar from './placeholder-avatar';
@@ -10,20 +12,16 @@ const PlaceholderChat: React.FC = () => {
   const messageLength = randomIntFromInterval(5, 75);
 
   return (
-    <div className='chat-list-item chat-list-item--placeholder'>
-      <div className='account'>
-        <div className='account__wrapper'>
-          <div className='account__display-name'>
-            <div className='account__avatar-wrapper'>
-              <PlaceholderAvatar size={36} />
-            </div>
-            <PlaceholderDisplayName minLength={3} maxLength={25} />
-            <span className='chat__last-message'>
-              {generateText(messageLength)}
-            </span>
-          </div>
-        </div>
-      </div>
+    <div className='account chat-list-item--placeholder'>
+      <HStack space={3}>
+        <PlaceholderAvatar size={36} />
+        <Stack className='overflow-hidden'>
+          <PlaceholderDisplayName minLength={3} maxLength={25} withSuffix={false} />
+          <span className='overflow-hidden text-ellipsis whitespace-nowrap text-primary-50 dark:text-primary-800'>
+            {generateText(messageLength)}
+          </span>
+        </Stack>
+      </HStack>
     </div>
   );
 };

app/soapbox/features/placeholder/components/placeholder-display-name.tsx

@@ -5,17 +5,18 @@ import { randomIntFromInterval, generateText } from '../utils';
 interface IPlaceholderDisplayName {
   maxLength: number,
   minLength: number,
+  withSuffix?: boolean,
 }
 
 /** Fake display name to show when data is loading. */
-const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength, maxLength }) => {
+const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength, maxLength, withSuffix = true }) => {
   const length = randomIntFromInterval(maxLength, minLength);
   const acctLength = randomIntFromInterval(maxLength, minLength);
 
   return (
     <div className='flex flex-col text-primary-50 dark:text-primary-800'>
       <p>{generateText(length)}</p>
-      <p>{generateText(acctLength)}</p>
+      {withSuffix && <p>{generateText(acctLength)}</p>}
     </div>
   );
 };

app/styles/chats.scss

@@ -306,28 +306,6 @@
   }
 }
 
-.chat {
-  &__attachment-icon {
-    float: right;
-  }
-
-  &__last-message {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-height: 19px;
-
-    a {
-      color: var(--highlight-text-color);
-    }
-
-    &.attachment {
-      font-style: italic;
-    }
-  }
-}
-
 .chat-message__media {
   height: 120px;
 }