UI fixes changes (#218)

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

@@ -64,7 +64,7 @@ function ChatsSideBar({ onCommunityClick, setEditGroup }: ChatsListProps) {
   return (
     <>
       <ChatsBar>
-        <Heading>Chat</Heading>
+        <Heading>Messages</Heading>
         <EditBtn onClick={() => setChatState(ChatState.ChatCreation)}>
           <CreateIcon />
         </EditBtn>

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

@@ -104,7 +104,7 @@ export function ChatTopbar({
       </ChannelWrapper>
 
       <MenuWrapper>
-        {!narrow && (
+        {!narrow && activeChannel.type !== "dm" && (
           <TopBtn onClick={onClick} className={showMembers ? "active" : ""}>
             <MembersIcon />
           </TopBtn>

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

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import styled from "styled-components";
 
 import { ChatState, useChatState } from "../contexts/chatStateProvider";
+import { useMessengerContext } from "../contexts/messengerProvider";
 import { useNarrow } from "../contexts/narrowProvider";
 
 import { Channels } from "./Channels/Channels";
@@ -49,6 +50,8 @@ export function CommunityChatRoom() {
   const [showMembers, setShowMembers] = useState(false);
   const [editGroup, setEditGroup] = useState(false);
   const narrow = useNarrow();
+  const { activeChannel } = useMessengerContext();
+
   return (
     <ChatWrapper>
       {!narrow && (
@@ -66,7 +69,11 @@ export function CommunityChatRoom() {
           setEditGroup={setEditGroup}
         />
       )}
-      {showMembers && !narrow && state === ChatState.ChatBody && <Members />}
+      {showMembers &&
+        !narrow &&
+        state === ChatState.ChatBody &&
+        activeChannel &&
+        activeChannel.type !== "dm" && <Members />}
       {state === ChatState.ChatCreation && <ChatCreation />}
       <Modals />
       <ToastMessageList />

packages/react-chat/src/components/Form/ChannelMenu.tsx

@@ -1,9 +1,10 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 
 import { useMessengerContext } from "../../contexts/messengerProvider";
 import { useModal } from "../../contexts/modalProvider";
 import { useNarrow } from "../../contexts/narrowProvider";
+import { useClickOutside } from "../../hooks/useClickOutside";
 import { useContextMenu } from "../../hooks/useContextMenu";
 import { ChannelData } from "../../models/ChannelData";
 import { AddMemberIcon } from "../Icons/AddMemberIcon";
@@ -56,10 +57,13 @@ export const ChannelMenu = ({
     [setShowChannelMenu, setShowSideMenu]
   );
 
+  const ref = useRef(null);
+  useClickOutside(ref, () => setShowMenu(false));
+
   if (showMenu || setShowChannelMenu) {
     return (
-      <ChannelDropdown className={className}>
+      <ChannelDropdown className={className} menuRef={ref}>
-        {narrow && !className && (
+        {narrow && channel.type !== "dm" && (
           <MenuItem
             onClick={() => {
               if (switchMemberList) switchMemberList();
@@ -106,7 +110,10 @@ export const ChannelMenu = ({
           <MenuItem
             onClick={() => {
               if (channel.isMuted) {
-                channelsDispatch({ type: "ToggleMuted", payload: channel.id });
+                channelsDispatch({
+                  type: "ToggleMuted",
+                  payload: channel.id,
+                });
                 setShowMenu(false);
               }
             }}
@@ -121,12 +128,15 @@ export const ChannelMenu = ({
             {!channel.isMuted && <NextIcon />}
             <MenuText>
               {(channel.isMuted ? "Unmute" : "Mute") +
-                (channel.type === "group" ? " Group" : " CommunityChatRoom")}
+                (channel.type === "group" ? " Group" : "Chat")}
             </MenuText>
             {!channel.isMuted && showSubmenu && (
               <MuteMenu
                 setIsMuted={() =>
-                  channelsDispatch({ type: "ToggleMuted", payload: channel.id })
+                  channelsDispatch({
+                    type: "ToggleMuted",
+                    payload: channel.id,
+                  })
                 }
                 className={className}
               />
@@ -155,9 +165,7 @@ export const ChannelMenu = ({
               <DeleteIcon width={16} height={16} className="red" />
             )}
             <MenuText className="red">
-              {channel.type === "group"
+              {channel.type === "group" ? "Leave Group" : "Delete Chat"}
-                ? "Leave Group"
-                : "Delete CommunityChatRoom"}
             </MenuText>
           </MenuItem>
         )}

packages/react-chat/src/components/Form/DropdownMenu.tsx

@@ -7,15 +7,19 @@ type DropdownMenuProps = {
   children: ReactNode;
   className?: string;
   style?: { top: number; left: number };
+  menuRef?: React.MutableRefObject<null>;
+  id?: string;
 };
 
 export function DropdownMenu({
   children,
   className,
   style,
+  menuRef,
+  id,
 }: DropdownMenuProps) {
   return (
-    <MenuBlock className={className} style={style}>
+    <MenuBlock className={className} style={style} ref={menuRef} id={id}>
       <MenuList>{children}</MenuList>
     </MenuBlock>
   );

packages/react-chat/src/components/Form/ImageMenu.tsx

@@ -21,17 +21,15 @@ export const ImageMenu = ({ imageId }: ImageMenuProps) => {
   useClickOutside(ref, () => setShowMenu(false));
 
   return showMenu ? (
-    <div ref={ref}>
+    <ImageDropdown menuRef={ref}>
-      <ImageDropdown>
+      <MenuItem onClick={() => copyImg(imageId)}>
-        <MenuItem onClick={() => copyImg(imageId)}>
+        <CopyIcon height={16} width={16} /> <MenuText>Copy image</MenuText>
-          <CopyIcon height={16} width={16} /> <MenuText>Copy image</MenuText>
+      </MenuItem>
-        </MenuItem>
+      <MenuItem onClick={() => downloadImg(imageId)}>
-        <MenuItem onClick={() => downloadImg(imageId)}>
+        <DownloadIcon height={16} width={16} />
-          <DownloadIcon height={16} width={16} />
+        <MenuText> Download image</MenuText>
-          <MenuText> Download image</MenuText>
+      </MenuItem>
-        </MenuItem>
+    </ImageDropdown>
-      </ImageDropdown>
-    </div>
   ) : (
     <></>
   );

packages/react-chat/src/components/Form/MessageMenu.tsx

@@ -53,64 +53,62 @@ export const MessageMenu = ({
   );
 
   return userPK && showMenu ? (
-    <div ref={ref} id={"messageDropdown"}>
+    <MessageDropdown style={menuStyle} menuRef={ref} id="messageDropdown">
-      <MessageDropdown style={menuStyle}>
+      <MenuItem className="picker">
-        <MenuItem className="picker">
+        <ReactionPicker
-          <ReactionPicker
+          messageReactions={messageReactions}
-            messageReactions={messageReactions}
+          setMessageReactions={setMessageReactions}
-            setMessageReactions={setMessageReactions}
+          className="menu"
-            className="menu"
+        />
-          />
+      </MenuItem>
+      <MenuSection className={`${!userMessage && "message"}`}>
+        <MenuItem
+          onClick={() => {
+            setReply({
+              sender: message.sender,
+              content: message.content,
+              image: message.image,
+              id: message.id,
+            });
+            setShowMenu(false);
+          }}
+        >
+          <ReplySvg width={16} height={16} className="menu" />
+          <MenuText>Reply</MenuText>
         </MenuItem>
-        <MenuSection className={`${!userMessage && "message"}`}>
-          <MenuItem
-            onClick={() => {
-              setReply({
-                sender: message.sender,
-                content: message.content,
-                image: message.image,
-                id: message.id,
-              });
-              setShowMenu(false);
-            }}
-          >
-            <ReplySvg width={16} height={16} className="menu" />
-            <MenuText>Reply</MenuText>
-          </MenuItem>
 
-          {userMessage && (
-            <MenuItem
-              onClick={() => {
-                setShowMenu(false);
-              }}
-            >
-              <EditIcon width={16} height={16} />
-              <MenuText>Edit</MenuText>
-            </MenuItem>
-          )}
-          {activeChannel?.type !== "channel" && (
-            <MenuItem
-              onClick={() => {
-                setShowMenu(false);
-              }}
-            >
-              <PinIcon width={16} height={16} className="menu" />
-              <MenuText>Pin</MenuText>
-            </MenuItem>
-          )}
-        </MenuSection>
         {userMessage && (
           <MenuItem
             onClick={() => {
               setShowMenu(false);
             }}
           >
-            <DeleteIcon width={16} height={16} className="red" />
+            <EditIcon width={16} height={16} />
-            <MenuText className="red">Delete message</MenuText>
+            <MenuText>Edit</MenuText>
           </MenuItem>
         )}
-      </MessageDropdown>
+        {activeChannel?.type !== "channel" && (
-    </div>
+          <MenuItem
+            onClick={() => {
+              setShowMenu(false);
+            }}
+          >
+            <PinIcon width={16} height={16} className="menu" />
+            <MenuText>Pin</MenuText>
+          </MenuItem>
+        )}
+      </MenuSection>
+      {userMessage && (
+        <MenuItem
+          onClick={() => {
+            setShowMenu(false);
+          }}
+        >
+          <DeleteIcon width={16} height={16} className="red" />
+          <MenuText className="red">Delete message</MenuText>
+        </MenuItem>
+      )}
+    </MessageDropdown>
   ) : (
     <></>
   );

packages/react-chat/src/components/Messages/MessageReactions.tsx

@@ -1,5 +1,5 @@
 import { BaseEmoji, Emoji } from "emoji-mart";
-import React from "react";
+import React, { useCallback } from "react";
 import styled from "styled-components";
 
 import { ReactionButton } from "../Reactions/ReactionButton";
@@ -16,12 +16,22 @@ export function MessageReactions({
   const isMyReactionIncluded = (emoji: BaseEmoji) =>
     messageReactions.includes(emoji); // temporary function while message reactions are not added to waku
 
+  const handleReaction = useCallback(
+    (emoji: BaseEmoji) => {
+      messageReactions.find((e) => e === emoji)
+        ? setMessageReactions((prev) => prev.filter((e) => e != emoji))
+        : setMessageReactions((prev) => [...prev, emoji]);
+    },
+    [messageReactions, setMessageReactions]
+  );
+
   return (
     <Reactions>
       {messageReactions.map((reaction) => (
         <EmojiReaction
           className={`${isMyReactionIncluded(reaction) && "chosen"}`}
           key={reaction.id}
+          onClick={() => handleReaction(reaction)}
         >
           <Emoji emoji={reaction} set={"twitter"} size={16} />
           <p>1</p>

packages/react-chat/src/components/Messages/UiMessage.tsx

@@ -107,7 +107,6 @@ export function UiMessage({
                     if (identity) setShowMenu((e) => !e);
                   }}
                   disabled={!identity}
-                  ref={ref}
                 >
                   <UserName>
                     {" "}