Change members UI (#38)

2021-10-05 10:39:20 +02:00 · 2021-10-05 10:39:20 +02:00 · aad475a435
parent 8346801e51
commit aad475a435
6 changed files with 67 additions and 113 deletions
--- 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}
          </ChannelName>
          {activeView && (
-            <MembersAmount theme={theme}>
+            <ChannelDescription theme={theme}>
              {" "}
-              {channel.membersList.length} members
-            </MembersAmount>
+              {channel.description}
+            </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;
--- 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 && (
        <Members
          theme={theme}
-          channel={activeChannel}
+          community={community}
          setShowChannels={setShowChannels}
        />
      )}
--- a/packages/react-chat/src/components/CommunityIdentity.tsx
+++ b/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;
--- 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 (
    <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
--- a/packages/react-chat/src/helpers/channelsMock.ts
+++ b/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: [
-      {
-        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,
-      },
-    ],
+    description: "General discussions about CryptoKitties",
  },
  {
    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,
-      },
-    ],
  },
 ];
--- a/packages/react-chat/src/helpers/communityMock.ts
+++ b/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!",
 };