diff --git a/packages/react-chat/src/components/ActivityCenter/ActivityMessage.tsx b/packages/react-chat/src/components/ActivityCenter/ActivityMessage.tsx
index 749a6f20..7c4cfe36 100644
--- a/packages/react-chat/src/components/ActivityCenter/ActivityMessage.tsx
+++ b/packages/react-chat/src/components/ActivityCenter/ActivityMessage.tsx
@@ -10,7 +10,7 @@ import { Mention } from "../Chat/ChatMessageContent";
import { Logo } from "../CommunityIdentity";
import { ContactMenu } from "../Form/ContactMenu";
import { Tooltip } from "../Form/Tooltip";
-import { CheckSvg } from "../Icons/CheckIcon";
+import { CheckIcon } from "../Icons/CheckIcon";
import { ClearSvg } from "../Icons/ClearIcon";
import { CommunityIcon } from "../Icons/CommunityIcon";
import { GroupIcon } from "../Icons/GroupIcon";
@@ -203,7 +203,7 @@ export function ActivityMessage({
}}
className="accept"
>
-
+
{
diff --git a/packages/react-chat/src/components/Buttons/BackButton.tsx b/packages/react-chat/src/components/Buttons/BackButton.tsx
index 9bfaf2c3..152c6265 100644
--- a/packages/react-chat/src/components/Buttons/BackButton.tsx
+++ b/packages/react-chat/src/components/Buttons/BackButton.tsx
@@ -1,7 +1,7 @@
import React from "react";
import styled from "styled-components";
-import { LeftIconSvg } from "../Icons/LeftIcon";
+import { LeftIcon } from "../Icons/LeftIcon";
interface BackButtonProps {
onBtnClick: () => void;
@@ -11,7 +11,7 @@ interface BackButtonProps {
export function BackButton({ onBtnClick, className }: BackButtonProps) {
return (
-
+
);
}
diff --git a/packages/react-chat/src/components/Channels/Channel.tsx b/packages/react-chat/src/components/Channels/Channel.tsx
index ce20897d..39a32d4b 100644
--- a/packages/react-chat/src/components/Channels/Channel.tsx
+++ b/packages/react-chat/src/components/Channels/Channel.tsx
@@ -4,10 +4,13 @@ import styled from "styled-components";
import { useMessengerContext } from "../../contexts/messengerProvider";
import { useNarrow } from "../../contexts/narrowProvider";
import { ChannelData } from "../../models/ChannelData";
+import { ChannelMenu } from "../Form/ChannelMenu";
import { GroupIcon } from "../Icons/GroupIcon";
import { MutedIcon } from "../Icons/MutedIcon";
import { textMediumStyles } from "../Text";
+import { ChannelIcon } from "./ChannelIcon";
+
function RenderChannelName({
channel,
className,
@@ -31,24 +34,6 @@ function RenderChannelName({
}
}
-function ChannelIcon({
- channel,
- activeView,
-}: {
- channel: ChannelData;
- activeView?: boolean;
-}) {
- const narrow = useNarrow();
- return (
-
- {!channel.icon && channel.name.slice(0, 1).toUpperCase()}
-
- );
-}
-
interface ChannelProps {
channel: ChannelData;
notified?: boolean;
@@ -56,6 +41,7 @@ interface ChannelProps {
isActive: boolean;
activeView?: boolean;
onClick?: () => void;
+ setEditGroup?: React.Dispatch>;
}
export function Channel({
@@ -65,6 +51,7 @@ export function Channel({
onClick,
notified,
mention,
+ setEditGroup,
}: ChannelProps) {
const narrow = useNarrow();
@@ -73,6 +60,7 @@ export function Channel({
className={`${isActive && "active"}`}
isNarrow={narrow && activeView}
onClick={onClick}
+ id={!activeView ? `${channel.id + "contextMenu"}` : ""}
>
@@ -92,21 +80,34 @@ export function Channel({
{mention}
)}
{channel?.isMuted && !activeView && }
+ {!activeView && (
+
+ )}
);
}
const ChannelWrapper = styled.div<{ isNarrow?: boolean }>`
+ width: ${({ isNarrow }) => (isNarrow ? "calc(100% - 162px)" : "100%")};
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px;
+ border-radius: 8px;
+ position: relative;
cursor: pointer;
- width: ${({ isNarrow }) => (isNarrow ? "calc(100% - 162px)" : "100%")};
- &.active {
+ &.active,
+ &:active {
background-color: ${({ theme }) => theme.activeChannelBackground};
- border-radius: 8px;
+ }
+
+ &:hover {
+ background-color: ${({ theme }) => theme.border};
}
`;
@@ -124,37 +125,6 @@ const ChannelTextInfo = styled.div`
white-space: nowrap;
`;
-export const ChannelLogo = styled.div<{ icon?: string }>`
- width: 24px;
- height: 24px;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-shrink: 0;
- margin-right: 10px;
- border-radius: 50%;
- font-weight: bold;
- font-size: 15px;
- line-height: 20px;
- background-color: ${({ theme }) => theme.iconColor};
- background-size: cover;
- background-repeat: no-repeat;
- background-image: ${({ icon }) => icon && `url(${icon}`};
- color: ${({ theme }) => theme.iconTextColor};
-
- &.active {
- width: 36px;
- height: 36px;
- font-size: 20px;
- }
-
- &.narrow {
- width: 40px;
- height: 40px;
- font-size: 20px;
- }
-`;
-
export const ChannelName = styled(RenderChannelName)<{
muted?: boolean;
notified?: boolean;
diff --git a/packages/react-chat/src/components/Channels/ChannelIcon.tsx b/packages/react-chat/src/components/Channels/ChannelIcon.tsx
new file mode 100644
index 00000000..7f736b48
--- /dev/null
+++ b/packages/react-chat/src/components/Channels/ChannelIcon.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import styled from "styled-components";
+
+import { useNarrow } from "../../contexts/narrowProvider";
+import { ChannelData } from "../../models/ChannelData";
+
+interface ChannelIconProps {
+ channel: ChannelData;
+ activeView?: boolean;
+}
+
+export function ChannelIcon({ channel, activeView }: ChannelIconProps) {
+ const narrow = useNarrow();
+
+ return (
+
+ {!channel.icon && channel.name.slice(0, 1).toUpperCase()}
+
+ );
+}
+
+export const ChannelLogo = styled.div<{ icon?: string }>`
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ margin-right: 10px;
+ border-radius: 50%;
+ font-weight: bold;
+ font-size: 15px;
+ line-height: 20px;
+ background-color: ${({ theme }) => theme.iconColor};
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-image: ${({ icon }) => icon && `url(${icon}`};
+ color: ${({ theme }) => theme.iconTextColor};
+
+ &.active {
+ width: 36px;
+ height: 36px;
+ font-size: 20px;
+ }
+
+ &.narrow {
+ width: 40px;
+ height: 40px;
+ font-size: 20px;
+ }
+`;
diff --git a/packages/react-chat/src/components/Channels/Channels.tsx b/packages/react-chat/src/components/Channels/Channels.tsx
index e0526b4b..d05d6039 100644
--- a/packages/react-chat/src/components/Channels/Channels.tsx
+++ b/packages/react-chat/src/components/Channels/Channels.tsx
@@ -11,13 +11,18 @@ import { Channel } from "./Channel";
interface ChannelsProps {
onCommunityClick?: () => void;
+ setEditGroup?: React.Dispatch>;
}
type GenerateChannelsProps = ChannelsProps & {
type: string;
};
-function GenerateChannels({ type, onCommunityClick }: GenerateChannelsProps) {
+function GenerateChannels({
+ type,
+ onCommunityClick,
+ setEditGroup,
+}: GenerateChannelsProps) {
const { mentions, notifications, activeChannel, setActiveChannel, channels } =
useMessengerContext();
const setChatState = useChatState()[1];
@@ -39,6 +44,7 @@ function GenerateChannels({ type, onCommunityClick }: GenerateChannelsProps) {
}
setChatState(ChatState.ChatBody);
}}
+ setEditGroup={setEditGroup}
/>
))}
>
@@ -47,9 +53,10 @@ function GenerateChannels({ type, onCommunityClick }: GenerateChannelsProps) {
type ChatsListProps = {
onCommunityClick?: () => void;
+ setEditGroup?: React.Dispatch>;
};
-function ChatsSideBar({ onCommunityClick }: ChatsListProps) {
+function ChatsSideBar({ onCommunityClick, setEditGroup }: ChatsListProps) {
const setChatState = useChatState()[1];
return (
<>
@@ -60,21 +67,28 @@ function ChatsSideBar({ onCommunityClick }: ChatsListProps) {
-
+
>
);
}
-export function Channels({ onCommunityClick }: ChannelsProps) {
+export function Channels({ onCommunityClick, setEditGroup }: ChannelsProps) {
const identity = useIdentity();
return (
{identity ? (
-
+
) : (
)}
@@ -86,7 +100,6 @@ export function Channels({ onCommunityClick }: ChannelsProps) {
export const ChannelList = styled.div`
display: flex;
flex-direction: column;
- overflow-y: scroll;
&::-webkit-scrollbar {
width: 0;
@@ -123,7 +136,6 @@ const ChatsBar = styled.div`
const ChatsList = styled.div`
display: flex;
flex-direction: column;
- overflow: auto;
`;
const Heading = styled.p`
diff --git a/packages/react-chat/src/components/Channels/EmptyChannel.tsx b/packages/react-chat/src/components/Channels/EmptyChannel.tsx
index 7d29a85c..948068a5 100644
--- a/packages/react-chat/src/components/Channels/EmptyChannel.tsx
+++ b/packages/react-chat/src/components/Channels/EmptyChannel.tsx
@@ -7,7 +7,8 @@ import { useMessengerContext } from "../../contexts/messengerProvider";
import { ChannelData } from "../../models/ChannelData";
import { textMediumStyles } from "../Text";
-import { ChannelInfo, ChannelLogo, ChannelName } from "./Channel";
+import { ChannelInfo, ChannelName } from "./Channel";
+import { ChannelLogo } from "./ChannelIcon";
type ChannelBeggingTextProps = {
channel: ChannelData;
diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx
index fff1d895..ef82d406 100644
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/packages/react-chat/src/components/Chat.tsx
@@ -47,13 +47,14 @@ function Modals() {
export function Chat() {
const [state] = useChatState();
const [showMembers, setShowMembers] = useState(false);
+ const [editGroup, setEditGroup] = useState(false);
const narrow = useNarrow();
return (
{!narrow && (
-
+
)}
{state === ChatState.ChatBody && (
@@ -61,6 +62,8 @@ export function Chat() {
onClick={() => setShowMembers(!showMembers)}
showMembers={showMembers}
permission={true}
+ editGroup={editGroup}
+ setEditGroup={setEditGroup}
/>
)}
{showMembers && !narrow && state === ChatState.ChatBody && }
diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx
index c076c398..688224e0 100644
--- a/packages/react-chat/src/components/Chat/ChatBody.tsx
+++ b/packages/react-chat/src/components/Chat/ChatBody.tsx
@@ -74,11 +74,19 @@ interface ChatBodyProps {
onClick: () => void;
showMembers: boolean;
permission: boolean;
+ editGroup: boolean;
+ setEditGroup: React.Dispatch>;
}
-export function ChatBody({ onClick, showMembers, permission }: ChatBodyProps) {
+export function ChatBody({
+ onClick,
+ showMembers,
+ permission,
+ editGroup,
+ setEditGroup,
+}: ChatBodyProps) {
const { messenger, activeChannel, communityData } = useMessengerContext();
- const [editGroup, setEditGroup] = useState(false);
+
const narrow = useNarrow();
const className = useMemo(() => (narrow ? "narrow" : ""), [narrow]);
diff --git a/packages/react-chat/src/components/Form/ChannelMenu.tsx b/packages/react-chat/src/components/Form/ChannelMenu.tsx
index 25dfe24a..ae8fb5e9 100644
--- a/packages/react-chat/src/components/Form/ChannelMenu.tsx
+++ b/packages/react-chat/src/components/Form/ChannelMenu.tsx
@@ -1,97 +1,133 @@
-import React from "react";
+import React, { useMemo } from "react";
import styled from "styled-components";
import { useMessengerContext } from "../../contexts/messengerProvider";
import { useModal } from "../../contexts/modalProvider";
import { useNarrow } from "../../contexts/narrowProvider";
+import { useContextMenu } from "../../hooks/useContextMenu";
import { ChannelData } from "../../models/ChannelData";
-import { AddMemberIconSvg } from "../Icons/AddMemberIcon";
-import { CheckSvg } from "../Icons/CheckIcon";
+import { AddMemberIcon } from "../Icons/AddMemberIcon";
+import { CheckIcon } from "../Icons/CheckIcon";
import { DeleteIcon } from "../Icons/DeleteIcon";
-import { EditSvg } from "../Icons/EditIcon";
-import { LeftIconSvg } from "../Icons/LeftIcon";
-import { MembersSmallSvg } from "../Icons/MembersSmallIcon";
-import { MuteSvg } from "../Icons/MuteIcon";
+import { DownloadIcon } from "../Icons/DownloadIcon";
+import { EditIcon } from "../Icons/EditIcon";
+import { LeftIcon } from "../Icons/LeftIcon";
+import { MembersSmallIcon } from "../Icons/MembersSmallIcon";
+import { MuteIcon } from "../Icons/MuteIcon";
+import { ProfileIcon } from "../Icons/ProfileIcon";
import { EditModalName } from "../Modals/EditModal";
import { LeavingModalName } from "../Modals/LeavingModal";
+import { ProfileModalName } from "../Modals/ProfileModal";
import { DropdownMenu, MenuItem, MenuText } from "./DropdownMenu";
interface ChannelMenuProps {
channel: ChannelData;
- switchMemberList: () => void;
- setShowChannelMenu: (val: boolean) => void;
- setEditGroup: (val: boolean) => void;
+ setShowChannelMenu?: (val: boolean) => void;
+ switchMemberList?: () => void;
+ setEditGroup?: (val: boolean) => void;
+ className?: string;
}
export const ChannelMenu = ({
channel,
- switchMemberList,
setShowChannelMenu,
+ switchMemberList,
setEditGroup,
+ className,
}: ChannelMenuProps) => {
const narrow = useNarrow();
const { clearNotifications } = useMessengerContext();
const { setModal } = useModal(EditModalName);
const { setModal: setLeavingModal } = useModal(LeavingModalName);
+ const { setModal: setProfileModal } = useModal(ProfileModalName);
- return (
-
- {narrow && (
-
- )}
- {channel.type === "group" && (
- <>
+ const { showMenu, setShowMenu: setShowSideMenu } = useContextMenu(
+ channel.id + "contextMenu"
+ );
+
+ const setShowMenu = useMemo(
+ () => (setShowChannelMenu ? setShowChannelMenu : setShowSideMenu),
+ [setShowChannelMenu, setShowSideMenu]
+ );
+
+ if (showMenu || setShowChannelMenu) {
+ return (
+
+ {narrow && !className && (
-
- );
+ )}
+
+ );
+ } else {
+ return null;
+ }
};
const MenuSection = styled.div`
- margin-top: 5px;
- padding-top: 5px;
+ padding: 4px 0;
+ margin: 4px 0;
border-top: 1px solid ${({ theme }) => theme.inputColor};
+ border-bottom: 1px solid ${({ theme }) => theme.inputColor};
+
+ &.channel {
+ padding: 0;
+ margin: 0;
+ border: none;
+ }
`;
diff --git a/packages/react-chat/src/components/Form/ContactMenu.tsx b/packages/react-chat/src/components/Form/ContactMenu.tsx
index 877d4617..c3126e62 100644
--- a/packages/react-chat/src/components/Form/ContactMenu.tsx
+++ b/packages/react-chat/src/components/Form/ContactMenu.tsx
@@ -8,8 +8,8 @@ import { useManageContact } from "../../hooks/useManageContact";
import { AddContactSvg } from "../Icons/AddContactIcon";
import { BlockSvg } from "../Icons/BlockIcon";
import { ChatSvg } from "../Icons/ChatIcon";
-import { EditSvg } from "../Icons/EditIcon";
-import { ProfileSvg } from "../Icons/ProfileIcon";
+import { EditIcon } from "../Icons/EditIcon";
+import { ProfileIcon } from "../Icons/ProfileIcon";
import { UntrustworthIcon } from "../Icons/UntrustworthIcon";
import { UserIcon } from "../Icons/UserIcon";
import { WarningSvg } from "../Icons/WarningIcon";
@@ -59,7 +59,7 @@ export function ContactMenu({ id, setShowMenu }: ContactMenuProps) {
setModal({ id, renamingState: false, requestState: false });
}}
>
-
+
View Profile
{!contact.isFriend && (
@@ -83,7 +83,7 @@ export function ContactMenu({ id, setShowMenu }: ContactMenuProps) {
setModal({ id, renamingState: true });
}}
>
-
+
Rename
diff --git a/packages/react-chat/src/components/Form/DropdownMenu.tsx b/packages/react-chat/src/components/Form/DropdownMenu.tsx
index e2371911..9c0537c1 100644
--- a/packages/react-chat/src/components/Form/DropdownMenu.tsx
+++ b/packages/react-chat/src/components/Form/DropdownMenu.tsx
@@ -69,6 +69,16 @@ const MenuBlock = styled.div`
right: 8px;
top: calc(100% - 8px);
z-index: 2;
+
+ &.side {
+ top: 20px;
+ right: -90px;
+ }
+
+ &.narrow {
+ top: 20px;
+ right: 0;
+ }
`;
const MenuList = styled.ul`
diff --git a/packages/react-chat/src/components/Form/ImageMenu.tsx b/packages/react-chat/src/components/Form/ImageMenu.tsx
index 5879edaf..0931202b 100644
--- a/packages/react-chat/src/components/Form/ImageMenu.tsx
+++ b/packages/react-chat/src/components/Form/ImageMenu.tsx
@@ -5,7 +5,7 @@ import { useContextMenu } from "../../hooks/useContextMenu";
import { copyImg } from "../../utils/copyImg";
import { downloadImg } from "../../utils/downloadImg";
import { CopySvg } from "../Icons/CopyIcon";
-import { DownloadSvg } from "../Icons/DownloadIcon";
+import { DownloadIcon } from "../Icons/DownloadIcon";
import { DropdownMenu, MenuItem, MenuText } from "./DropdownMenu";
@@ -22,7 +22,7 @@ export const ImageMenu = ({ imageId }: ImageMenuProps) => {
Copy image
downloadImg(imageId)}>
-
+
Download image
diff --git a/packages/react-chat/src/components/Form/LoginInstructions.tsx b/packages/react-chat/src/components/Form/LoginInstructions.tsx
index 91fa8f06..820e7c41 100644
--- a/packages/react-chat/src/components/Form/LoginInstructions.tsx
+++ b/packages/react-chat/src/components/Form/LoginInstructions.tsx
@@ -2,7 +2,7 @@ import React from "react";
import styled from "styled-components";
import { MobileIcon } from "../Icons/MobileIcon";
-import { ProfileSvg } from "../Icons/ProfileIcon";
+import { ProfileIcon } from "../Icons/ProfileIcon";
import { ScanIcon } from "../Icons/ScanIcon";
import { textMediumStyles } from "../Text";
@@ -20,7 +20,7 @@ export function LoginInstructions({ mobileFlow }: LoginInstructionsProps) {
Navigate yourself to{" "}
{" "}
- Profile
+ Profile
{" "}
tab
diff --git a/packages/react-chat/src/components/Icons/AddMemberIcon.tsx b/packages/react-chat/src/components/Icons/AddMemberIcon.tsx
index 09bc54ba..9e3104dc 100644
--- a/packages/react-chat/src/components/Icons/AddMemberIcon.tsx
+++ b/packages/react-chat/src/components/Icons/AddMemberIcon.tsx
@@ -1,19 +1,19 @@
import React from "react";
import styled from "styled-components";
-type AddMemberIconSvgProps = {
+type AddMemberIconProps = {
width: number;
height: number;
className?: string;
};
-export function AddMemberIconSvg({
+export function AddMemberIcon({
width,
height,
className,
-}: AddMemberIconSvgProps) {
+}: AddMemberIconProps) {
return (
-
-
+
);
}
-export const AddMemberIcon = () => {
- return ;
-};
-
-const Icon = styled(AddMemberIconSvg)`
- & > path {
- fill: ${({ theme }) => theme.tertiary};
- }
-
- &:hover > path {
- fill: ${({ theme }) => theme.bodyBackgroundColor};
- }
+const Icon = styled.svg`
+ fill: ${({ theme }) => theme.tertiary};
`;
diff --git a/packages/react-chat/src/components/Icons/CheckIcon.tsx b/packages/react-chat/src/components/Icons/CheckIcon.tsx
index d6da69d7..91870685 100644
--- a/packages/react-chat/src/components/Icons/CheckIcon.tsx
+++ b/packages/react-chat/src/components/Icons/CheckIcon.tsx
@@ -1,13 +1,13 @@
import React from "react";
import styled from "styled-components";
-type CheckSvgProps = {
+type CheckIconProps = {
width: number;
height: number;
className?: string;
};
-export function CheckSvg({ width, height, className }: CheckSvgProps) {
+export function CheckIcon({ width, height, className }: CheckIconProps) {
return (
{
- return ;
-};
-
const Icon = styled.svg`
fill: ${({ theme }) => theme.tertiary};
diff --git a/packages/react-chat/src/components/Icons/DownloadIcon.tsx b/packages/react-chat/src/components/Icons/DownloadIcon.tsx
index 3d63c1af..eedb0ec0 100644
--- a/packages/react-chat/src/components/Icons/DownloadIcon.tsx
+++ b/packages/react-chat/src/components/Icons/DownloadIcon.tsx
@@ -1,15 +1,15 @@
import React from "react";
import styled from "styled-components";
-type DownloadSvgProps = {
+type DownloadIconProps = {
width: number;
height: number;
className?: string;
};
-export function DownloadSvg({ width, height, className }: DownloadSvgProps) {
+export function DownloadIcon({ width, height, className }: DownloadIconProps) {
return (
-
+
);
}
-export const DownloadIcon = () => {
- return ;
-};
-
-const Icon = styled(DownloadSvg)`
- & > path {
- fill: ${({ theme }) => theme.tertiary};
- }
+const Icon = styled.svg`
+ fill: ${({ theme }) => theme.tertiary};
`;
diff --git a/packages/react-chat/src/components/Icons/EditIcon.tsx b/packages/react-chat/src/components/Icons/EditIcon.tsx
index c2b516c6..fc2f1d7f 100644
--- a/packages/react-chat/src/components/Icons/EditIcon.tsx
+++ b/packages/react-chat/src/components/Icons/EditIcon.tsx
@@ -1,15 +1,15 @@
import React from "react";
import styled from "styled-components";
-type EditSvgProps = {
+type EditIconProps = {
width: number;
height: number;
className?: string;
};
-export function EditSvg({ width, height, className }: EditSvgProps) {
+export function EditIcon({ width, height, className }: EditIconProps) {
return (
-
-
+
);
}
-export const EditIcon = () => {
- return ;
-};
-
-const Icon = styled(EditSvg)`
- & > path {
- fill: ${({ theme }) => theme.tertiary};
- }
-
- &:hover > path {
- fill: ${({ theme }) => theme.bodyBackgroundColor};
- }
+const Icon = styled.svg`
+ fill: ${({ theme }) => theme.tertiary};
`;
diff --git a/packages/react-chat/src/components/Icons/LeftIcon.tsx b/packages/react-chat/src/components/Icons/LeftIcon.tsx
index 1eab4dfe..971b9545 100644
--- a/packages/react-chat/src/components/Icons/LeftIcon.tsx
+++ b/packages/react-chat/src/components/Icons/LeftIcon.tsx
@@ -1,13 +1,13 @@
import React from "react";
import styled from "styled-components";
-type LeftIconSvgProps = {
+type LeftIconProps = {
width: number;
height: number;
className?: string;
};
-export function LeftIconSvg({ width, height, className }: LeftIconSvgProps) {
+export function LeftIcon({ width, height, className }: LeftIconProps) {
return (
-
+
);
}
-export const MembersIcon = () => {
- return ;
-};
-
-const Icon = styled(MembersSmallSvg)`
- & > path {
- fill: ${({ theme }) => theme.primary};
- }
+const Icon = styled.svg`
+ fill: ${({ theme }) => theme.primary};
`;
diff --git a/packages/react-chat/src/components/Icons/MuteIcon.tsx b/packages/react-chat/src/components/Icons/MuteIcon.tsx
index 7e6dff13..33a37caa 100644
--- a/packages/react-chat/src/components/Icons/MuteIcon.tsx
+++ b/packages/react-chat/src/components/Icons/MuteIcon.tsx
@@ -1,15 +1,15 @@
import React from "react";
import styled from "styled-components";
-type MuteSvgProps = {
+type MuteIconProps = {
width: number;
height: number;
className?: string;
};
-export function MuteSvg({ width, height, className }: MuteSvgProps) {
+export function MuteIcon({ width, height, className }: MuteIconProps) {
return (
-
-
+
);
}
-export const MuteIcon = () => {
- return ;
-};
-
-const Icon = styled(MuteSvg)`
- & > path {
- fill: ${({ theme }) => theme.tertiary};
- }
-
- &:hover > path {
- fill: ${({ theme }) => theme.bodyBackgroundColor};
- }
+const Icon = styled.svg`
+ fill: ${({ theme }) => theme.tertiary};
`;
diff --git a/packages/react-chat/src/components/Icons/ProfileIcon.tsx b/packages/react-chat/src/components/Icons/ProfileIcon.tsx
index 20b05c9f..a0a13941 100644
--- a/packages/react-chat/src/components/Icons/ProfileIcon.tsx
+++ b/packages/react-chat/src/components/Icons/ProfileIcon.tsx
@@ -1,13 +1,13 @@
import React from "react";
import styled from "styled-components";
-type ProfileSvgProps = {
+type ProfileIconProps = {
width: number;
height: number;
className?: string;
};
-export function ProfileSvg({ width, height, className }: ProfileSvgProps) {
+export function ProfileIcon({ width, height, className }: ProfileIconProps) {
return (
{
- return ;
-};
-
const Icon = styled.svg`
fill: ${({ theme }) => theme.tertiary};
`;
diff --git a/packages/react-chat/src/components/Modals/EditModal.tsx b/packages/react-chat/src/components/Modals/EditModal.tsx
index 6d3a8a5b..3bfe9991 100644
--- a/packages/react-chat/src/components/Modals/EditModal.tsx
+++ b/packages/react-chat/src/components/Modals/EditModal.tsx
@@ -4,7 +4,7 @@ import styled from "styled-components";
import { useMessengerContext } from "../../contexts/messengerProvider";
import { useModal } from "../../contexts/modalProvider";
import { buttonStyles } from "../Buttons/buttonStyle";
-import { ChannelLogo } from "../Channels/Channel";
+import { ChannelLogo } from "../Channels/ChannelIcon";
import { inputStyles } from "../Form/inputStyles";
import { AddIcon } from "../Icons/AddIcon";
import { textMediumStyles } from "../Text";
diff --git a/packages/react-chat/src/components/Modals/ProfileModal.tsx b/packages/react-chat/src/components/Modals/ProfileModal.tsx
index def2e55a..1ea1ed5d 100644
--- a/packages/react-chat/src/components/Modals/ProfileModal.tsx
+++ b/packages/react-chat/src/components/Modals/ProfileModal.tsx
@@ -17,8 +17,8 @@ import {
} from "../Form/inputStyles";
import { ClearSvgFull } from "../Icons/ClearIconFull";
import { CopySvg } from "../Icons/CopyIcon";
-import { EditSvg } from "../Icons/EditIcon";
-import { LeftIconSvg } from "../Icons/LeftIcon";
+import { EditIcon } from "../Icons/EditIcon";
+import { LeftIcon } from "../Icons/LeftIcon";
import { UntrustworthIcon } from "../Icons/UntrustworthIcon";
import { UserIcon } from "../Icons/UserIcon";
import { textMediumStyles, textSmallStyles } from "../Text";
@@ -111,7 +111,7 @@ export const ProfileModal = () => {
{!renaming && (
)}
@@ -179,7 +179,7 @@ export const ProfileModal = () => {
{renaming ? (
<>
setRenaming(false)}>
-
+
{
) : requestCreation ? (
<>
setRequestCreation(false)}>
-
+
setModal(false)}>
-
+
{
diff --git a/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx b/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx
index ca6463b4..a815824b 100644
--- a/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx
+++ b/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx
@@ -51,4 +51,5 @@ export const ListWrapper = styled.div`
padding: 16px;
background: ${({ theme }) => theme.bodyBackgroundColor};
overflow: auto;
+ flex: 1;
`;
diff --git a/packages/react-chat/src/components/ToastMessages/ToastMessage.tsx b/packages/react-chat/src/components/ToastMessages/ToastMessage.tsx
index ced6ac55..adb5c9f9 100644
--- a/packages/react-chat/src/components/ToastMessages/ToastMessage.tsx
+++ b/packages/react-chat/src/components/ToastMessages/ToastMessage.tsx
@@ -4,10 +4,10 @@ import styled, { keyframes } from "styled-components";
import { useToasts } from "../../contexts/toastProvider";
import { Toast } from "../../models/Toast";
import { Column } from "../CommunityIdentity";
-import { CheckSvg } from "../Icons/CheckIcon";
+import { CheckIcon } from "../Icons/CheckIcon";
import { CommunityIcon } from "../Icons/CommunityIcon";
import { CrossIcon } from "../Icons/CrossIcon";
-import { ProfileSvg } from "../Icons/ProfileIcon";
+import { ProfileIcon } from "../Icons/ProfileIcon";
import { textSmallStyles } from "../Text";
export function AnimationToastMessage() {
@@ -37,12 +37,12 @@ export function ToastMessage({ toast }: ToastMessageProps) {
{toast.type === "confirmation" && (
-
+
)}
{toast.type === "incoming" && (
-
+
)}
{(toast.type === "approvement" || toast.type === "rejection") && (
diff --git a/packages/react-chat/src/hooks/useContextMenu.ts b/packages/react-chat/src/hooks/useContextMenu.ts
index 3db1c6f9..31bf3102 100644
--- a/packages/react-chat/src/hooks/useContextMenu.ts
+++ b/packages/react-chat/src/hooks/useContextMenu.ts
@@ -2,7 +2,6 @@ import { useCallback, useEffect, useState } from "react";
export const useContextMenu = (elementId: string) => {
const [showMenu, setShowMenu] = useState(false);
- const element = document.getElementById(elementId) || document;
const handleContextMenu = useCallback(
(event) => {
@@ -12,21 +11,17 @@ export const useContextMenu = (elementId: string) => {
[setShowMenu]
);
- const handleClick = useCallback(
- () => (showMenu ? setShowMenu(false) : null),
- [showMenu]
- );
-
useEffect(() => {
- element.addEventListener("click", handleClick);
+ const element = document.getElementById(elementId) || document;
+
element.addEventListener("contextmenu", handleContextMenu);
document.addEventListener("click", () => setShowMenu(false));
return () => {
- element.removeEventListener("click", handleClick);
element.removeEventListener("contextmenu", handleContextMenu);
document.removeEventListener("click", () => setShowMenu(false));
+ setShowMenu(false);
};
- });
+ }, [elementId]);
return { showMenu, setShowMenu };
};