diff --git a/packages/react-chat/src/components/Channels.tsx b/packages/react-chat/src/components/Channels.tsx
index 5ce3461..a38f7a0 100644
--- a/packages/react-chat/src/components/Channels.tsx
+++ b/packages/react-chat/src/components/Channels.tsx
@@ -120,10 +120,10 @@ export function Channel({
# {channel.name}
{activeView && (
-
+
{" "}
- {channel.membersList.length} members
-
+ {channel.description}
+
)}
@@ -153,7 +153,7 @@ const StyledCommunity = styled(Community)`
margin: 0 0 16px;
`;
-const MembersAmount = styled.p`
+const ChannelDescription = styled.p`
font-size: 12px;
line-height: 16px;
letter-spacing: 0.1px;
@@ -199,6 +199,7 @@ const ChannelLogo = styled.div`
display: flex;
align-items: center;
justify-content: center;
+ flex-shrink: 0;
margin-right: 10px;
border-radius: 50%;
font-weight: bold;
diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx
index 04c34df..3d6ce7b 100644
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/packages/react-chat/src/components/Chat.tsx
@@ -66,7 +66,7 @@ export function Chat({ theme, community }: ChatProps) {
{showMembers && !narrow && (
)}
diff --git a/packages/react-chat/src/components/CommunityIdentity.tsx b/packages/react-chat/src/components/CommunityIdentity.tsx
index 2e6d739..fb76f25 100644
--- a/packages/react-chat/src/components/CommunityIdentity.tsx
+++ b/packages/react-chat/src/components/CommunityIdentity.tsx
@@ -23,10 +23,10 @@ export const CommunityIdentity = ({
return (
-
+
{name}
{subtitle}
-
+
);
};
@@ -35,6 +35,12 @@ const Row = styled.div`
display: flex;
`;
+const Column = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+`;
+
const Logo = styled.img`
width: 36px;
height: 36px;
@@ -51,6 +57,7 @@ const Name = styled.p`
`;
const Subtitle = styled.p`
+ font-family: "Inter", sans-serif;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.1px;
diff --git a/packages/react-chat/src/components/Members.tsx b/packages/react-chat/src/components/Members.tsx
index 49f47f1..c7638c7 100644
--- a/packages/react-chat/src/components/Members.tsx
+++ b/packages/react-chat/src/components/Members.tsx
@@ -1,7 +1,7 @@
import React from "react";
import styled from "styled-components";
-import { ChannelData } from "../helpers/channelsMock";
+import { CommunityData } from "../helpers/communityMock";
import { Theme } from "../styles/themes";
import { Icon } from "./Chat/ChatMessages";
@@ -9,11 +9,11 @@ import { UserIcon } from "./Icons/UserIcon";
interface MembersProps {
theme: Theme;
- channel: ChannelData;
+ community: CommunityData;
setShowChannels: (val: boolean) => void;
}
-export function Members({ theme, channel, setShowChannels }: MembersProps) {
+export function Members({ theme, community, setShowChannels }: MembersProps) {
return (
Members
@@ -29,7 +29,7 @@ export function Members({ theme, channel, setShowChannels }: MembersProps) {
Online
- {channel.membersList
+ {community.membersList
.filter((member) => member.isOnline)
.map((member) => (
Offline
- {channel.membersList
+ {community.membersList
.filter((member) => !member.isOnline)
.map((member) => (