feat: redesign EmptyStateIndicator for message list

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 */
@@ -31,7 +32,7 @@ const UnMemoizedEmptyStateIndicator = (props: EmptyStateIndicatorProps) => {
     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/styling/EmptyStateIndicator.scss

@@ -1,23 +1,29 @@
-// Figma design: empty channel only (str-chat__empty-channel). str-chat__channel-list-empty unchanged.
+@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(--str-chat__spacing-4);
+  padding: var(--spacing-md);
   position: relative;
-  gap: var(--str-chat__spacing-3); // 12px – Figma spacing/sm
+  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: calc(var(--str-chat__spacing-px) * 136);
-    height: calc(var(--str-chat__spacing-px) * 136);
-
-    path {
-      fill: var(--text-tertiary);
-    }
+    width: 32px;
+    height: 32px;
+    color: var(--str-chat-icon-color);
   }
 
   .str-chat__empty-channel-notifications {
@@ -26,8 +32,7 @@
   }
 
   .str-chat__empty-channel-text {
-    font: 400 14px / 20px var(--str-chat__font-family); // Figma caption/default
-    color: var(--text-tertiary);
     margin: 0;
+    max-width: 160px;
   }
 }

src/i18n/de.json

@@ -250,6 +250,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

@@ -250,6 +250,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

@@ -259,6 +259,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",

src/i18n/fr.json

@@ -259,6 +259,7 @@
   "Select up to {{count}}_many": "Sélectionner jusqu'à {{count}}",
   "Select up to {{count}}_other": "Sélectionner jusqu'à {{count}}",
   "Send": "Envoyer",
+  "Send a message to start the conversation": "Envoyez un message pour commencer la conversation",
   "Send Anyway": "Envoyer quand même",
   "Send message request failed": "Échec de la demande d'envoi de message",
   "Send poll": "Envoyer le sondage",

src/i18n/hi.json

@@ -251,6 +251,7 @@
   "Select up to {{count}}_one": "अधिकतम {{count}} तक चुनें",
   "Select up to {{count}}_other": "अधिकतम {{count}} तक चुनें",
   "Send": "भेजे",
+  "Send a message to start the conversation": "बातचीत शुरू करने के लिए संदेश भेजें",
   "Send Anyway": "वैसे भी भेजें",
   "Send message request failed": "संदेश भेजने का अनुरोध विफल रहा",
   "Send poll": "पोल भेजें",

src/i18n/it.json

@@ -259,6 +259,7 @@
   "Select up to {{count}}_many": "Seleziona fino a {{count}}",
   "Select up to {{count}}_other": "Seleziona fino a {{count}}",
   "Send": "Invia",
+  "Send a message to start the conversation": "Invia un messaggio per iniziare la conversazione",
   "Send Anyway": "Invia comunque",
   "Send message request failed": "Richiesta di invio messaggio non riuscita",
   "Send poll": "Invia sondaggio",

src/i18n/ja.json

@@ -250,6 +250,7 @@
   "Select up to {{count}}_one": "最大{{count}}まで選択",
   "Select up to {{count}}_other": "最大{{count}}まで選択",
   "Send": "送信",
+  "Send a message to start the conversation": "メッセージを送って会話を始めましょう",
   "Send Anyway": "とにかく送信する",
   "Send message request failed": "メッセージ送信リクエストが失敗しました",
   "Send poll": "アンケートを送信",