From 39b9a86ef4fe4b97d4f62e937008dfef4c86130a Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Mon, 24 Jan 2022 14:39:51 +0100 Subject: [PATCH] Update channel menu (#199) --- .../ActivityCenter/ActivityMessage.tsx | 4 +- .../src/components/Buttons/BackButton.tsx | 4 +- .../src/components/Channels/Channel.tsx | 74 +++----- .../src/components/Channels/ChannelIcon.tsx | 54 ++++++ .../src/components/Channels/Channels.tsx | 26 ++- .../src/components/Channels/EmptyChannel.tsx | 3 +- packages/react-chat/src/components/Chat.tsx | 5 +- .../src/components/Chat/ChatBody.tsx | 12 +- .../src/components/Form/ChannelMenu.tsx | 169 +++++++++++------- .../src/components/Form/ContactMenu.tsx | 8 +- .../src/components/Form/DropdownMenu.tsx | 10 ++ .../src/components/Form/ImageMenu.tsx | 4 +- .../src/components/Form/LoginInstructions.tsx | 4 +- .../src/components/Icons/AddMemberIcon.tsx | 24 +-- .../src/components/Icons/CheckIcon.tsx | 8 +- .../src/components/Icons/DownloadIcon.tsx | 18 +- .../src/components/Icons/EditIcon.tsx | 22 +-- .../src/components/Icons/LeftIcon.tsx | 4 +- .../src/components/Icons/MembersSmallIcon.tsx | 20 +-- .../src/components/Icons/MuteIcon.tsx | 22 +-- .../src/components/Icons/ProfileIcon.tsx | 8 +- .../src/components/Modals/EditModal.tsx | 2 +- .../src/components/Modals/ProfileModal.tsx | 10 +- .../components/Modals/UserCreationModal.tsx | 4 +- .../components/NarrowMode/NarrowTopbar.tsx | 1 + .../components/ToastMessages/ToastMessage.tsx | 8 +- .../react-chat/src/hooks/useContextMenu.ts | 13 +- 27 files changed, 295 insertions(+), 246 deletions(-) create mode 100644 packages/react-chat/src/components/Channels/ChannelIcon.tsx 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 && ( - { - switchMemberList(); - setShowChannelMenu(false); - }} - > - - View Members - - )} - {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 && ( { - setEditGroup(true); - setShowChannelMenu(false); + if (switchMemberList) switchMemberList(); + setShowMenu(false); }} > - - Add / remove from group + + View Members - setModal(true)}> - - Edit name and image + )} + {channel.type === "group" && ( + <> + { + if (setEditGroup) setEditGroup(true); + setShowMenu(false); + }} + > + + Add / remove from group + + setModal(true)}> + + Edit name and image + + + )} + {channel.type === "dm" && ( + { + setProfileModal({ + id: channel.name, + renamingState: false, + requestState: false, + }); + setShowMenu(false); + }} + > + + View Profile - - )} - { - channel.isMuted = !channel.isMuted; - setShowChannelMenu(false); - }} - > - - - {(channel.isMuted ? "Unmute" : "Mute") + - (channel.type === "group" ? " Group" : " Chat")} - - - clearNotifications(channel.id)}> - - Mark as Read - - {(channel.type === "group" || channel.type === "dm") && ( - - {" "} + )} + + { + channel.isMuted = !channel.isMuted; + setShowMenu(false); + }} + > + + + {(channel.isMuted ? "Unmute" : "Mute") + + (channel.type === "group" ? " Group" : " Chat")} + + + clearNotifications(channel.id)}> + + Mark as Read + + + + Fetch Messages + + + {(channel.type === "group" || channel.type === "dm") && ( { setLeavingModal(true); - setShowChannelMenu(false); + setShowMenu(false); }} > {channel.type === "group" && ( - + )} {channel.type === "dm" && ( @@ -100,14 +136,23 @@ export const ChannelMenu = ({ {channel.type === "group" ? "Leave Group" : "Delete Chat"} - - )} - - ); + )} + + ); + } 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 }; };