fix(teams): make EmptyChannelListIndicator less prominent (#98)

Author: MartinCupela

team-ts/src/components/Sidebar/EmptyChannelListIndicator.tsx

@@ -0,0 +1,18 @@
+
+
+export const EmptyGroupChannelListIndicator = ({
+
+}) => {
+
+  return (
+    <div className="team-empty-channel-list-indicator">There are no group channels. Start by creating some.</div>
+  );
+};
+export const EmptyDMChannelListIndicator = ({
+
+}) => {
+
+  return (
+    <div className="team-empty-channel-list-indicator">There are no DM channels. Start by creating some.</div>
+  );
+};

team-ts/src/components/Sidebar/Sidebar.tsx

@@ -1,5 +1,9 @@
 import { ChannelList } from 'stream-chat-react';
 
+import {
+    EmptyDMChannelListIndicator,
+    EmptyGroupChannelListIndicator
+} from "./EmptyChannelListIndicator";
 import { ChannelSearch } from '../ChannelSearch/ChannelSearch';
 import { TeamChannelList } from '../TeamChannelList/TeamChannelList';
 import { ChannelPreview } from '../ChannelPreview/ChannelPreview';
@@ -40,6 +44,7 @@ const TeamChannelsList = () => (
     filters={filters[0]}
     options={options}
     sort={sort}
+    EmptyStateIndicator={EmptyGroupChannelListIndicator}
     List={(listProps) => (
       <TeamChannelList
         {...listProps}
@@ -62,6 +67,7 @@ const MessagingChannelsList = () => (
     options={options}
     sort={sort}
     setActiveChannelOnMount={false}
+    EmptyStateIndicator={EmptyDMChannelListIndicator}
     List={(listProps) => (
       <TeamChannelList
         {...listProps}

team-ts/src/styles/ChannelList/ChannelList.layout.scss

@@ -39,3 +39,8 @@
     }
   }
 }
+
+.team-empty-channel-list-indicator {
+  padding-inline: 1rem;
+  font-size: 0.75rem;
+}

team-ts/src/styles/ChannelList/ChannelList.theme.scss

@@ -25,3 +25,7 @@
     }
   }
 }
+
+.team-empty-channel-list-indicator {
+  color: white;
+}