feat: redesign EmptyStateIndicator for channel message list (#2960)

Author: MartinCupela

src/components/Channel/styling/Channel.scss

@@ -21,17 +21,6 @@
   }
 }
 
-.str-chat__empty-channel {
-  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 136);
-  @include utils.empty-layout;
-  position: relative;
-
-  .str-chat__empty-channel-notifications {
-    position: absolute;
-    inset-block-end: var(--str-chat__spacing-2);
-  }
-}
-
 .str-chat__loading-channel {
   $text-height: calc(var(--str-chat__spacing-px) * 16);
   height: 100%;
@@ -169,9 +158,6 @@
   /* The icon color used when no channel is selected */
   --str-chat__channel-empty-indicator-color: var(--str-chat__disabled-color);
 
-  /* The text color used when no channel is selected */
-  --str-chat__channel-empty-color: var(--str-chat__text-low-emphasis-color);
-
   /* The color of the loading indicator */
   --str-chat__channel-loading-state-color: var(--str-chat__disabled-color);
 }
@@ -180,16 +166,6 @@
   @include utils.component-layer-overrides('channel');
 }
 
-.str-chat__empty-channel {
-  --str-chat-icon-color: var(--str-chat__channel-empty-color);
-  @include utils.component-layer-overrides('channel');
-  @include utils.empty-theme('channel');
-
-  .str-chat__empty-channel-text {
-    color: var(--str-chat__channel-empty-color);
-  }
-}
-
 .str-chat__loading-channel {
   @include utils.loading-animation;
 

src/components/EmptyStateIndicator/EmptyStateIndicator.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { useTranslationContext } from '../../context/TranslationContext';
 import { ChatBubble } from './icons';
+import { IconBubble3ChatMessage } from '../Icons';
 
 export type EmptyStateIndicatorProps = {
   /** List Type: channel | message */
@@ -28,10 +29,10 @@ const UnMemoizedEmptyStateIndicator = (props: EmptyStateIndicatorProps) => {
   }
 
   if (listType === 'message') {
-    const text = t('No chats here yet…');
+    const text = t('Send a message to start the conversation');
     return (
       <div className='str-chat__empty-channel'>
-        <ChatBubble />
+        <IconBubble3ChatMessage />
         <p className='str-chat__empty-channel-text' role='listitem'>
           {text}
         </p>

src/components/EmptyStateIndicator/__tests__/EmptyStateIndicator.test.js

@@ -22,7 +22,9 @@ describe('EmptyStateIndicator', () => {
 
   it('should display correct text when listType is message', () => {
     render(<EmptyStateIndicator listType='message' />);
-    expect(screen.queryByText('No chats here yet…')).toBeInTheDocument();
+    expect(
+      screen.queryByText('Send a message to start the conversation'),
+    ).toBeInTheDocument();
   });
 
   it('should display correct text when listType is channel', () => {

src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss

@@ -0,0 +1,38 @@
+@use '../../../styling/utils';
+
+.str-chat {
+  /* The text color used when no channel is selected */
+  --str-chat__channel-empty-color: var(--text-secondary);
+}
+
+.str-chat__empty-channel {
+  --str-chat-icon-color: var(--text-tertiary);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--spacing-md);
+  position: relative;
+  gap: var(--spacing-xs);
+  text-align: center;
+  @include utils.component-layer-overrides('channel');
+  color: var(--text-secondary);
+  font: var(--str-chat__caption-default-text);
+
+  svg {
+    width: 32px;
+    height: 32px;
+    color: var(--str-chat-icon-color);
+  }
+
+  .str-chat__empty-channel-notifications {
+    position: absolute;
+    inset-block-end: var(--str-chat__spacing-2);
+  }
+
+  .str-chat__empty-channel-text {
+    margin: 0;
+    max-width: 160px;
+  }
+}

src/components/EmptyStateIndicator/styling/index.scss

@@ -0,0 +1 @@
+@use 'EmptyStateIndicator';

src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap

@@ -47,7 +47,7 @@ exports[`VirtualizedMessageList should render the list without any message 1`] =
                   class="str-chat__empty-channel-text"
                   role="listitem"
                 >
-                  No chats here yet…
+                  Send a message to start the conversation
                 </p>
               </div>
             </div>

src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageListComponents.test.js.snap

@@ -42,7 +42,7 @@ exports[`VirtualizedMessageComponents EmptyPlaceholder should render for main me
       class="str-chat__empty-channel-text"
       role="listitem"
     >
-      No chats here yet…
+      Send a message to start the conversation
     </p>
   </div>
 </div>

src/i18n/de.json

@@ -253,6 +253,7 @@
   "Select up to {{count}}_one": "Bis zu {{count}} auswählen",
   "Select up to {{count}}_other": "Bis zu {{count}} auswählen",
   "Send": "Senden",
+  "Send a message to start the conversation": "Senden Sie eine Nachricht, um die Unterhaltung zu beginnen",
   "Send Anyway": "Trotzdem senden",
   "Send message request failed": "Senden der Nachrichtenanfrage fehlgeschlagen",
   "Send poll": "Umfrage senden",

src/i18n/en.json

@@ -253,6 +253,7 @@
   "Select up to {{count}}_one": "Select up to {{count}}",
   "Select up to {{count}}_other": "Select up to {{count}}",
   "Send": "Send",
+  "Send a message to start the conversation": "Send a message to start the conversation",
   "Send Anyway": "Send Anyway",
   "Send message request failed": "Send message request failed",
   "Send poll": "Send poll",

src/i18n/es.json

@@ -262,6 +262,7 @@
   "Select up to {{count}}_many": "Selecciona hasta {{count}}",
   "Select up to {{count}}_other": "Selecciona hasta {{count}}",
   "Send": "Enviar",
+  "Send a message to start the conversation": "Envía un mensaje para iniciar la conversación",
   "Send Anyway": "Enviar de todos modos",
   "Send message request failed": "Error al enviar la solicitud de mensaje",
   "Send poll": "Enviar encuesta",