Change members UI (#38)

packages/react-chat/src/components/Channels.tsx

@@ -120,10 +120,10 @@ export function Channel({
             # {channel.name}
           </ChannelName>
           {activeView && (
-            <MembersAmount theme={theme}>
+            <ChannelDescription theme={theme}>
               {" "}
-              {channel.membersList.length} members
+              {channel.description}
-            </MembersAmount>
+            </ChannelDescription>
           )}
         </ChannelTextInfo>
       </ChannelInfo>
@@ -153,7 +153,7 @@ const StyledCommunity = styled(Community)`
   margin: 0 0 16px;
 `;
 
-const MembersAmount = styled.p<ThemeProps>`
+const ChannelDescription = styled.p<ThemeProps>`
   font-size: 12px;
   line-height: 16px;
   letter-spacing: 0.1px;
@@ -199,6 +199,7 @@ const ChannelLogo = styled.div<ThemeProps>`
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   margin-right: 10px;
   border-radius: 50%;
   font-weight: bold;

packages/react-chat/src/components/Chat.tsx

@@ -66,7 +66,7 @@ export function Chat({ theme, community }: ChatProps) {
       {showMembers && !narrow && (
         <Members
           theme={theme}
-          channel={activeChannel}
+          community={community}
           setShowChannels={setShowChannels}
         />
       )}

packages/react-chat/src/components/CommunityIdentity.tsx

@@ -23,10 +23,10 @@ export const CommunityIdentity = ({
   return (
     <Row className={className}>
       <Logo src={icon} alt={`${name} logo`} />
-      <div>
+      <Column>
         <Name theme={theme}>{name}</Name>
         <Subtitle theme={theme}>{subtitle}</Subtitle>
-      </div>
+      </Column>
     </Row>
   );
 };
@@ -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;

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 (
     <MembersWrapper theme={theme}>
       <MemberHeading theme={theme}>Members</MemberHeading>
@@ -29,7 +29,7 @@ export function Members({ theme, channel, setShowChannels }: MembersProps) {
         </MemberCategory>
         <MemberCategory>
           <MemberCategoryName theme={theme}>Online</MemberCategoryName>
-          {channel.membersList
+          {community.membersList
             .filter((member) => member.isOnline)
             .map((member) => (
               <Member
@@ -43,7 +43,7 @@ export function Members({ theme, channel, setShowChannels }: MembersProps) {
         </MemberCategory>
         <MemberCategory>
           <MemberCategoryName theme={theme}>Offline</MemberCategoryName>
-          {channel.membersList
+          {community.membersList
             .filter((member) => !member.isOnline)
             .map((member) => (
               <Member

packages/react-chat/src/helpers/channelsMock.ts

@@ -1,130 +1,34 @@
 export type ChannelData = {
   id: number;
   name: string;
+  description: string;
   icon?: string;
   notifications?: number;
   isMuted?: boolean;
-  membersList: any[];
 };
 
 export const channels = [
   {
     id: 1,
     name: "welcome",
+    description: "Welcome to CryptoKitties community!",
     icon: "https://www.cryptokitties.co/icons/logo.svg",
-    membersList: [
-      {
-        id: 1,
-        name: "jason.eth",
-        avatar:
-          "https://images.unsplash.com/photo-1613329150701-f8cecb3900e0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=928&q=80",
-        isOnline: true,
-      },
-      {
-        id: 2,
-        name: "viola.stateofus.eth",
-        avatar:
-          "https://images.unsplash.com/photo-1603924885283-b6674696b114?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=774&q=80",
-        isOnline: false,
-      },
-      {
-        id: 3,
-        name: "GuestFest",
-        isOnline: true,
-      },
-      {
-        id: 4,
-        name: "Guest33334",
-        isOnline: true,
-      },
-      {
-        id: 5,
-        name: "Guest333",
-        isOnline: true,
-      },
-      {
-        id: 6,
-        name: "Guest33",
-        isOnline: false,
-      },
-      {
-        id: 7,
-        name: "Guest9283",
-        isOnline: true,
-      },
-    ],
   },
   {
     id: 2,
     name: "general",
-    membersList: [
+    description: "General discussions about CryptoKitties",
-      {
-        id: 1,
-        name: "jason.eth",
-        avatar:
-          "https://images.unsplash.com/photo-1613329150701-f8cecb3900e0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=928&q=80",
-        isOnline: true,
-      },
-      {
-        id: 2,
-        name: "viola.stateofus.eth",
-        avatar:
-          "https://images.unsplash.com/photo-1603924885283-b6674696b114?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=774&q=80",
-        isOnline: false,
-      },
-      {
-        id: 3,
-        name: "Guest",
-        isOnline: true,
-      },
-    ],
   },
   {
     id: 3,
     name: "beginners",
+    description: "How to start",
     notifications: 1,
-    membersList: [
-      {
-        id: 1,
-        name: "jason.eth",
-        avatar:
-          "https://images.unsplash.com/photo-1613329150701-f8cecb3900e0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=928&q=80",
-        isOnline: true,
-      },
-      {
-        id: 2,
-        name: "viola.stateofus.eth",
-        avatar:
-          "https://images.unsplash.com/photo-1603924885283-b6674696b114?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=774&q=80",
-        isOnline: false,
-      },
-      {
-        id: 3,
-        name: "Merry Silvester Christmas",
-        isOnline: true,
-      },
-    ],
   },
   {
     id: 4,
     name: "random",
+    description: "Whatever you want to talk",
     isMuted: true,
-    membersList: [
-      {
-        id: 14,
-        name: "jason",
-        isOnline: true,
-      },
-      {
-        id: 16,
-        name: "jonh",
-        isOnline: false,
-      },
-      {
-        id: 3,
-        name: "Guest",
-        isOnline: true,
-      },
-    ],
   },
 ];

packages/react-chat/src/helpers/communityMock.ts

@@ -3,6 +3,7 @@ export type CommunityData = {
   name: string;
   icon: string;
   members: number;
+  membersList: any[];
   description: string;
 };
 
@@ -11,5 +12,46 @@ export const community = {
   name: "CryptoKitties",
   icon: "https://www.cryptokitties.co/icons/logo.svg",
   members: 186,
+  membersList: [
+    {
+      id: 1,
+      name: "jason.eth",
+      avatar:
+        "https://images.unsplash.com/photo-1613329150701-f8cecb3900e0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=928&q=80",
+      isOnline: true,
+    },
+    {
+      id: 2,
+      name: "viola.stateofus.eth",
+      avatar:
+        "https://images.unsplash.com/photo-1603924885283-b6674696b114?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=774&q=80",
+      isOnline: false,
+    },
+    {
+      id: 3,
+      name: "GuestFest",
+      isOnline: true,
+    },
+    {
+      id: 4,
+      name: "Guest33334",
+      isOnline: true,
+    },
+    {
+      id: 5,
+      name: "Guest333",
+      isOnline: true,
+    },
+    {
+      id: 6,
+      name: "Guest33",
+      isOnline: false,
+    },
+    {
+      id: 7,
+      name: "Guest9283",
+      isOnline: true,
+    },
+  ],
   description: "A community of cat lovers, meow!",
 };