feat: channel list and message list empty redesign

Author: khushal87

package/src/components/Indicators/EmptyStateIndicator.tsx

@@ -3,8 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
-import { useViewport } from '../../hooks/useViewport';
-import { ChatIcon, MessageBubbleEmpty, MessageIcon } from '../../icons';
+import { MessageBubbleEmpty } from '../../icons';
 import { primitives } from '../../theme';
 
 export type EmptyStateProps = {
@@ -14,59 +13,41 @@ export type EmptyStateProps = {
 export const EmptyStateIndicator = ({ listType }: EmptyStateProps) => {
   const {
     theme: {
-      colors: { black, grey, grey_gainsboro },
-      emptyStateIndicator: {
-        channelContainer,
-        channelDetails,
-        channelTitle,
-        messageContainer,
-        messageTitle,
-      },
+      emptyStateIndicator: { channelContainer, channelTitle, messageContainer, messageTitle },
       semantics,
     },
   } = useTheme();
-  const { vw } = useViewport();
-  const width = vw(33);
   const { t } = useTranslationContext();
   const styles = useStyles();
 
   switch (listType) {
     case 'channel':
       return (
         <View style={[styles.container, channelContainer]}>
-          <MessageIcon height={width} pathFill={grey_gainsboro} width={width} />
-          <Text
-            style={[styles.channelTitle, { color: black }, channelTitle]}
-            testID='empty-channel-state-title'
-          >
-            {t("Let's start chatting!")}
-          </Text>
-          <Text
-            style={[styles.channelDetails, { color: grey, width: vw(66) }, channelDetails]}
-            testID='empty-channel-state-details'
-          >
-            {t('How about sending your first message to a friend?')}
+          <MessageBubbleEmpty height={27} stroke={semantics.textTertiary} width={25} />
+          <Text style={[styles.channelTitle, channelTitle]} testID='empty-channel-state-title'>
+            {t('No conversations yet')}
           </Text>
         </View>
       );
     case 'message':
       return (
         <View style={[styles.container, messageContainer]}>
-          <ChatIcon height={width} pathFill={grey_gainsboro} width={width} />
-          <Text style={[styles.messageTitle, { color: grey_gainsboro }, messageTitle]}>
-            {t('No chats here yet…')}
-          </Text>
+          <MessageBubbleEmpty height={27} stroke={semantics.textTertiary} width={25} />
+          <Text style={[styles.messageTitle, messageTitle]}>{t('No chats here yet…')}</Text>
         </View>
       );
     case 'threads':
       return (
-        <View style={[styles.container]}>
+        <View style={styles.container}>
           <MessageBubbleEmpty height={27} stroke={semantics.textTertiary} width={25} />
           <Text style={styles.threadText}>{t('Reply to a message to start a thread')}</Text>
         </View>
       );
     default:
-      return <Text style={[{ color: black }, messageContainer]}>No items exist</Text>;
+      return (
+        <Text style={[{ color: semantics.textSecondary }, messageContainer]}>No items exist</Text>
+      );
   }
 };
 
@@ -82,9 +63,12 @@ const useStyles = () => {
         textAlign: 'center',
       },
       channelTitle: {
-        fontSize: 16,
-        paddingBottom: 8,
-        paddingTop: 16,
+        color: semantics.textSecondary,
+        fontSize: primitives.typographyFontSizeMd,
+        fontWeight: primitives.typographyFontWeightRegular,
+        lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'center',
+        paddingVertical: primitives.spacingSm,
       },
       container: {
         alignItems: 'center',
@@ -97,7 +81,7 @@ const useStyles = () => {
         paddingBottom: 8,
       },
       threadText: {
-        color: semantics.textTertiary,
+        color: semantics.textSecondary,
         fontSize: primitives.typographyFontSizeMd,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightNormal,

package/src/i18n/en.json

@@ -180,5 +180,6 @@
   "Poll has ended": "Poll has ended",
   "Reply to a message to start a thread": "Reply to a message to start a thread",
   "Couldn't load new threads. Tap to retry": "Couldn't load new threads. Tap to retry",
-  "{{count}} new threads": "{{count}} new threads"
+  "{{count}} new threads": "{{count}} new threads",
+  "No conversations yet": "No conversations yet"
 }

package/src/i18n/es.json

@@ -180,5 +180,6 @@
   "Poll has ended": "Votación finalizada",
   "Reply to a message to start a thread": "Responde a un mensaje para empezar un hilo",
   "Couldn't load new threads. Tap to retry": "No se pudieron cargar nuevos hilos. Toca para reintentar",
-  "{{count}} new threads": "{{count}} nuevos hilos"
+  "{{count}} new threads": "{{count}} nuevos hilos",
+  "No conversations yet": "No hay conversaciones todavía"
 }

package/src/i18n/fr.json

@@ -180,5 +180,6 @@
   "Poll has ended": "Vote terminé",
   "Reply to a message to start a thread": "Répondre à un message pour commencer un fil",
   "Couldn't load new threads. Tap to retry": "Impossible de charger les nouveaux fils. Appuyez pour réessayer",
-  "{{count}} new threads": "{{count}} nouveaux fils"
+  "{{count}} new threads": "{{count}} nouveaux fils",
+  "No conversations yet": "Aucune conversation pour le moment"
 }

package/src/i18n/he.json

@@ -180,5 +180,6 @@
   "Poll has ended": "ההצבעה הסתיימה",
   "Reply to a message to start a thread": "השב/י להודעה כדי להתחיל שרשור",
   "Couldn't load new threads. Tap to retry": "לא ניתן לטעון שרשורים חדשים. הקש כדי לנסות שוב",
-  "{{count}} new threads": "{{count}} שרשורים חדשים"
+  "{{count}} new threads": "{{count}} שרשורים חדשים",
+  "No conversations yet": "אין שיחות עדיין"
 }

package/src/i18n/hi.json

@@ -180,5 +180,6 @@
   "Poll has ended": "वोट समाप्त",
   "Reply to a message to start a thread": "एक संदेश का जवाब देकर थ्रेड शुरू करें",
   "Couldn't load new threads. Tap to retry": "नये थ्रेड्स लोड नहीं हो सके। टैप करके पुनः कोशिश करें",
-  "{{count}} new threads": "{{count}} नये थ्रेड्स"
+  "{{count}} new threads": "{{count}} नये थ्रेड्स",
+  "No conversations yet": "अभी तक कोई चैट नहीं है"
 }

package/src/i18n/it.json

@@ -180,5 +180,6 @@
   "Poll has ended": "Votazione terminata",
   "Reply to a message to start a thread": "Rispondi a un messaggio per iniziare un thread",
   "Couldn't load new threads. Tap to retry": "Impossibile caricare nuovi thread. Tocca per riprovare",
-  "{{count}} new threads": "{{count}} nuovi thread"
+  "{{count}} new threads": "{{count}} nuovi thread",
+  "No conversations yet": "Ancora nessuna conversazione"
 }

package/src/i18n/ja.json

@@ -180,5 +180,6 @@
   "Poll has ended": "投票終了",
   "Reply to a message to start a thread": "メッセージに返信してスレッドを開始",
   "Couldn't load new threads. Tap to retry": "新しいスレッドを読み込めませんでした。タップして再試行",
-  "{{count}} new threads": "{{count}} 新しいスレッド"
+  "{{count}} new threads": "{{count}} 新しいスレッド",
+  "No conversations yet": "まだ会話がありません"
 }

package/src/i18n/ko.json

@@ -180,5 +180,6 @@
   "Poll has ended": "투표 종료됨",
   "Reply to a message to start a thread": "메시지에 답장하여 스레드 시작",
   "Couldn't load new threads. Tap to retry": "새로운 스레드를 로드할 수 없습니다. 탭하여 다시 시도",
-  "{{count}} new threads": "{{count}} 새로운 스레드"
+  "{{count}} new threads": "{{count}} 새로운 스레드",
+  "No conversations yet": "아직 대화가 없습니다"
 }

package/src/i18n/nl.json

@@ -180,5 +180,6 @@
   "Poll has ended": "Stemmen beëindigd",
   "Reply to a message to start a thread": "Antwoord op een bericht om een thread te starten",
   "Couldn't load new threads. Tap to retry": "Kan nieuwe threads niet laden. Tik om opnieuw te proberen",
-  "{{count}} new threads": "{{count}} nieuwe threads"
+  "{{count}} new threads": "{{count}} nieuwe threads",
+  "No conversations yet": "Nog geen gesprekken"
 }