diff --git a/packages/react-chat/src/components/Channels/Channels.tsx b/packages/react-chat/src/components/Channels/Channels.tsx
index c92ad327..d8dc3429 100644
--- a/packages/react-chat/src/components/Channels/Channels.tsx
+++ b/packages/react-chat/src/components/Channels/Channels.tsx
@@ -81,7 +81,7 @@ export function Channels({
onClick={() => {
setActiveChannel({
id: group.join(""),
- name: group.join(", ").slice(0, 10),
+ name: group.join(", "),
type: "group",
});
setCreateChat(false);
diff --git a/packages/react-chat/src/components/Channels/EmptyChannel.tsx b/packages/react-chat/src/components/Channels/EmptyChannel.tsx
index 54d791c4..e9298c07 100644
--- a/packages/react-chat/src/components/Channels/EmptyChannel.tsx
+++ b/packages/react-chat/src/components/Channels/EmptyChannel.tsx
@@ -43,8 +43,7 @@ export function EmptyChannel({ channel }: EmptyChannelProps) {
) : (
- Welcome to the beginning of the #{channel.name}
- channel!
+ Welcome to the beginning of the #{channel.name} channel!
)}
diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx
index 1cb2f43c..46d1432e 100644
--- a/packages/react-chat/src/components/Chat/ChatBody.tsx
+++ b/packages/react-chat/src/components/Chat/ChatBody.tsx
@@ -130,6 +130,7 @@ export function ChatBody({
setShowChannelMenu={setShowChannelMenu}
setEditGroup={setEditGroup}
onEditClick={onEditClick}
+ setGroupList={setGroupList}
/>
)}
diff --git a/packages/react-chat/src/components/CommunityIdentity.tsx b/packages/react-chat/src/components/CommunityIdentity.tsx
index 1baddbbd..30aa2dca 100644
--- a/packages/react-chat/src/components/CommunityIdentity.tsx
+++ b/packages/react-chat/src/components/CommunityIdentity.tsx
@@ -15,9 +15,20 @@ export const CommunityIdentity = ({
className,
}: CommunityIdentityProps) => {
const { communityData } = useMessengerContext();
+
return (
-
+
+ {" "}
+ {communityData?.icon === undefined &&
+ communityData?.name.slice(0, 1).toUpperCase()}
+
{communityData?.name}
{subtitle}
@@ -36,11 +47,22 @@ export const Column = styled.div`
align-items: flex-start;
`;
-const Logo = styled.img`
+const Logo = styled.div`
width: 36px;
height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
border-radius: 50%;
margin-right: 8px;
+ background-color: ${({ theme }) => theme.tertiary};
+ background-size: cover;
+ background-repeat: no-repeat;
+ color: ${({ theme }) => theme.iconTextColor};
+ font-weight: bold;
+ font-size: 15px;
+ line-height: 20px;
`;
const Name = styled.p`
diff --git a/packages/react-chat/src/components/Form/ChannelMenu.tsx b/packages/react-chat/src/components/Form/ChannelMenu.tsx
index b959f2ae..217cb894 100644
--- a/packages/react-chat/src/components/Form/ChannelMenu.tsx
+++ b/packages/react-chat/src/components/Form/ChannelMenu.tsx
@@ -22,6 +22,7 @@ interface ChannelMenuProps {
setShowChannelMenu: (val: boolean) => void;
setEditGroup: (val: boolean) => void;
onEditClick: () => void;
+ setGroupList: any;
}
export const ChannelMenu = ({
@@ -31,9 +32,11 @@ export const ChannelMenu = ({
setShowChannelMenu,
setEditGroup,
onEditClick,
+ setGroupList,
}: ChannelMenuProps) => {
const narrow = useNarrow();
- const { clearNotifications } = useMessengerContext();
+ const { clearNotifications, setActiveChannel, channels } =
+ useMessengerContext();
return (
@@ -50,7 +53,12 @@ export const ChannelMenu = ({
)}
{channel.type === "group" && (
<>
-