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) => (