Update channel menu (#199)
This commit is contained in:
Maria Rushkova
GitHub
parent
954a286e36
commit
39b9a86ef4
|
|
@ -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"
|
||||
>
|
||||
<CheckSvg width={20} height={20} className="accept" />
|
||||
<CheckIcon width={20} height={20} className="accept" />
|
||||
</ActivityBtn>
|
||||
<ActivityBtn
|
||||
onClick={() => {
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<BackBtn onClick={onBtnClick} className={className}>
|
||||
<LeftIconSvg width={24} height={24} className="black" />
|
||||
<LeftIcon width={24} height={24} className="black" />
|
||||
</BackBtn>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<ChannelLogo
|
||||
icon={channel.icon}
|
||||
className={activeView ? "active" : narrow ? "narrow" : ""}
|
||||
>
|
||||
{!channel.icon && channel.name.slice(0, 1).toUpperCase()}
|
||||
</ChannelLogo>
|
||||
);
|
||||
}
|
||||
|
||||
interface ChannelProps {
|
||||
channel: ChannelData;
|
||||
notified?: boolean;
|
||||
|
|
@ -56,6 +41,7 @@ interface ChannelProps {
|
|||
isActive: boolean;
|
||||
activeView?: boolean;
|
||||
onClick?: () => void;
|
||||
setEditGroup?: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
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"}` : ""}
|
||||
>
|
||||
<ChannelInfo>
|
||||
<ChannelIcon channel={channel} activeView={activeView} />
|
||||
|
|
@ -92,21 +80,34 @@ export function Channel({
|
|||
<NotificationBagde>{mention}</NotificationBagde>
|
||||
)}
|
||||
{channel?.isMuted && !activeView && <MutedIcon />}
|
||||
{!activeView && (
|
||||
<ChannelMenu
|
||||
channel={channel}
|
||||
setEditGroup={setEditGroup}
|
||||
className={narrow ? "narrow" : "side"}
|
||||
/>
|
||||
)}
|
||||
</ChannelWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<ChannelLogo
|
||||
icon={channel.icon}
|
||||
className={activeView ? "active" : narrow ? "narrow" : ""}
|
||||
>
|
||||
{!channel.icon && channel.name.slice(0, 1).toUpperCase()}
|
||||
</ChannelLogo>
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
`;
|
||||
|
|
@ -11,13 +11,18 @@ import { Channel } from "./Channel";
|
|||
|
||||
interface ChannelsProps {
|
||||
onCommunityClick?: () => void;
|
||||
setEditGroup?: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
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<React.SetStateAction<boolean>>;
|
||||
};
|
||||
|
||||
function ChatsSideBar({ onCommunityClick }: ChatsListProps) {
|
||||
function ChatsSideBar({ onCommunityClick, setEditGroup }: ChatsListProps) {
|
||||
const setChatState = useChatState()[1];
|
||||
return (
|
||||
<>
|
||||
|
|
@ -60,21 +67,28 @@ function ChatsSideBar({ onCommunityClick }: ChatsListProps) {
|
|||
</EditBtn>
|
||||
</ChatsBar>
|
||||
<ChatsList>
|
||||
<GenerateChannels type={"group"} onCommunityClick={onCommunityClick} />
|
||||
<GenerateChannels
|
||||
type={"group"}
|
||||
onCommunityClick={onCommunityClick}
|
||||
setEditGroup={setEditGroup}
|
||||
/>
|
||||
<GenerateChannels type={"dm"} onCommunityClick={onCommunityClick} />
|
||||
</ChatsList>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function Channels({ onCommunityClick }: ChannelsProps) {
|
||||
export function Channels({ onCommunityClick, setEditGroup }: ChannelsProps) {
|
||||
const identity = useIdentity();
|
||||
return (
|
||||
<ChannelList>
|
||||
<GenerateChannels type={"channel"} onCommunityClick={onCommunityClick} />
|
||||
<Chats>
|
||||
{identity ? (
|
||||
<ChatsSideBar onCommunityClick={onCommunityClick} />
|
||||
<ChatsSideBar
|
||||
onCommunityClick={onCommunityClick}
|
||||
setEditGroup={setEditGroup}
|
||||
/>
|
||||
) : (
|
||||
<UserCreation permission={true} />
|
||||
)}
|
||||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<ChatWrapper>
|
||||
{!narrow && (
|
||||
<ChannelsWrapper>
|
||||
<StyledCommunity />
|
||||
<Channels />
|
||||
<Channels setEditGroup={setEditGroup} />
|
||||
</ChannelsWrapper>
|
||||
)}
|
||||
{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 && <Members />}
|
||||
|
|
|
|||
|
|
@ -74,11 +74,19 @@ interface ChatBodyProps {
|
|||
onClick: () => void;
|
||||
showMembers: boolean;
|
||||
permission: boolean;
|
||||
editGroup: boolean;
|
||||
setEditGroup: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
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]);
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<DropdownMenu closeMenu={setShowChannelMenu}>
|
||||
{narrow && (
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
switchMemberList();
|
||||
setShowChannelMenu(false);
|
||||
}}
|
||||
>
|
||||
<MembersSmallSvg width={16} height={16} />
|
||||
<MenuText>View Members</MenuText>
|
||||
</MenuItem>
|
||||
)}
|
||||
{channel.type === "group" && (
|
||||
<>
|
||||
const { showMenu, setShowMenu: setShowSideMenu } = useContextMenu(
|
||||
channel.id + "contextMenu"
|
||||
);
|
||||
|
||||
const setShowMenu = useMemo(
|
||||
() => (setShowChannelMenu ? setShowChannelMenu : setShowSideMenu),
|
||||
[setShowChannelMenu, setShowSideMenu]
|
||||
);
|
||||
|
||||
if (showMenu || setShowChannelMenu) {
|
||||
return (
|
||||
<DropdownMenu closeMenu={setShowMenu} className={className}>
|
||||
{narrow && !className && (
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setEditGroup(true);
|
||||
setShowChannelMenu(false);
|
||||
if (switchMemberList) switchMemberList();
|
||||
setShowMenu(false);
|
||||
}}
|
||||
>
|
||||
<AddMemberIconSvg width={16} height={16} />
|
||||
<MenuText>Add / remove from group</MenuText>
|
||||
<MembersSmallIcon width={16} height={16} />
|
||||
<MenuText>View Members</MenuText>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => setModal(true)}>
|
||||
<EditSvg width={16} height={16} />
|
||||
<MenuText>Edit name and image</MenuText>
|
||||
)}
|
||||
{channel.type === "group" && (
|
||||
<>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
if (setEditGroup) setEditGroup(true);
|
||||
setShowMenu(false);
|
||||
}}
|
||||
>
|
||||
<AddMemberIcon width={16} height={16} />
|
||||
<MenuText>Add / remove from group</MenuText>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => setModal(true)}>
|
||||
<EditIcon width={16} height={16} />
|
||||
<MenuText>Edit name and image</MenuText>
|
||||
</MenuItem>
|
||||
</>
|
||||
)}
|
||||
{channel.type === "dm" && (
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setProfileModal({
|
||||
id: channel.name,
|
||||
renamingState: false,
|
||||
requestState: false,
|
||||
});
|
||||
setShowMenu(false);
|
||||
}}
|
||||
>
|
||||
<ProfileIcon width={16} height={16} />
|
||||
<MenuText>View Profile</MenuText>
|
||||
</MenuItem>
|
||||
</>
|
||||
)}
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
channel.isMuted = !channel.isMuted;
|
||||
setShowChannelMenu(false);
|
||||
}}
|
||||
>
|
||||
<MuteSvg width={16} height={16} />
|
||||
<MenuText>
|
||||
{(channel.isMuted ? "Unmute" : "Mute") +
|
||||
(channel.type === "group" ? " Group" : " Chat")}
|
||||
</MenuText>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => clearNotifications(channel.id)}>
|
||||
<CheckSvg width={16} height={16} />
|
||||
<MenuText>Mark as Read</MenuText>
|
||||
</MenuItem>
|
||||
{(channel.type === "group" || channel.type === "dm") && (
|
||||
<MenuSection>
|
||||
{" "}
|
||||
)}
|
||||
<MenuSection className={`${channel.type === "channel" && "channel"}`}>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
channel.isMuted = !channel.isMuted;
|
||||
setShowMenu(false);
|
||||
}}
|
||||
>
|
||||
<MuteIcon width={16} height={16} />
|
||||
<MenuText>
|
||||
{(channel.isMuted ? "Unmute" : "Mute") +
|
||||
(channel.type === "group" ? " Group" : " Chat")}
|
||||
</MenuText>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => clearNotifications(channel.id)}>
|
||||
<CheckIcon width={16} height={16} />
|
||||
<MenuText>Mark as Read</MenuText>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<DownloadIcon width={16} height={16} />
|
||||
<MenuText>Fetch Messages</MenuText>
|
||||
</MenuItem>
|
||||
</MenuSection>
|
||||
{(channel.type === "group" || channel.type === "dm") && (
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setLeavingModal(true);
|
||||
setShowChannelMenu(false);
|
||||
setShowMenu(false);
|
||||
}}
|
||||
>
|
||||
{channel.type === "group" && (
|
||||
<LeftIconSvg width={16} height={16} className="red" />
|
||||
<LeftIcon width={16} height={16} className="red" />
|
||||
)}
|
||||
{channel.type === "dm" && (
|
||||
<DeleteIcon width={16} height={16} className="red" />
|
||||
|
|
@ -100,14 +136,23 @@ export const ChannelMenu = ({
|
|||
{channel.type === "group" ? "Leave Group" : "Delete Chat"}
|
||||
</MenuText>
|
||||
</MenuItem>
|
||||
</MenuSection>
|
||||
)}
|
||||
</DropdownMenu>
|
||||
);
|
||||
)}
|
||||
</DropdownMenu>
|
||||
);
|
||||
} 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;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
}}
|
||||
>
|
||||
<ProfileSvg width={16} height={16} />
|
||||
<ProfileIcon width={16} height={16} />
|
||||
<MenuText>View Profile</MenuText>
|
||||
</MenuItem>
|
||||
{!contact.isFriend && (
|
||||
|
|
@ -83,7 +83,7 @@ export function ContactMenu({ id, setShowMenu }: ContactMenuProps) {
|
|||
setModal({ id, renamingState: true });
|
||||
}}
|
||||
>
|
||||
<EditSvg width={16} height={16} />
|
||||
<EditIcon width={16} height={16} />
|
||||
<MenuText>Rename</MenuText>
|
||||
</MenuItem>
|
||||
</MenuSection>
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -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) => {
|
|||
<CopySvg height={16} width={16} /> <MenuText>Copy image</MenuText>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => downloadImg(imageId)}>
|
||||
<DownloadSvg height={16} width={16} />
|
||||
<DownloadIcon height={16} width={16} />
|
||||
<MenuText> Download image</MenuText>
|
||||
</MenuItem>
|
||||
</ImageDropdown>
|
||||
|
|
|
|||
|
|
@ -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{" "}
|
||||
<InstructionIcon>
|
||||
{" "}
|
||||
<ProfileSvg width={13} height={13} /> <span>Profile</span>
|
||||
<ProfileIcon width={13} height={13} /> <span>Profile</span>
|
||||
</InstructionIcon>{" "}
|
||||
tab
|
||||
</InstructionStep>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<svg
|
||||
<Icon
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 16 16"
|
||||
|
|
@ -30,20 +30,10 @@ export function AddMemberIconSvg({
|
|||
<path d="M12.056 7.86634C13.0869 7.86634 13.9227 7.03061 13.9227 5.99967C13.9227 4.96874 13.0869 4.13301 12.056 4.13301C11.7389 4.13301 11.4403 4.21207 11.1788 4.35155L10.8655 3.61285C11.2238 3.43377 11.6281 3.33301 12.056 3.33301C13.5287 3.33301 14.7227 4.52692 14.7227 5.99967C14.7227 7.47243 13.5287 8.66634 12.056 8.66634C11.2283 8.66634 10.4886 8.28921 9.99949 7.69741L10.6323 7.20702C10.9747 7.61038 11.4855 7.86634 12.056 7.86634Z" />
|
||||
<path d="M8.07357 11.6671C8.35289 11.6707 8.60016 11.4677 8.62336 11.1893C8.64601 10.9175 8.44624 10.6758 8.17357 10.6689C8.11597 10.6674 8.05818 10.6667 8.00022 10.6667C5.97321 10.6667 4.15749 11.5713 2.93477 12.9989C2.77487 13.1856 2.79579 13.4622 2.96961 13.636C3.18548 13.8519 3.54282 13.8208 3.74449 13.5916C4.78296 12.4114 6.30462 11.6667 8.00022 11.6667C8.02471 11.6667 8.04916 11.6668 8.07357 11.6671Z" />
|
||||
<path d="M10.167 11.1667C10.167 10.8905 10.3908 10.6667 10.667 10.6667H11.5003C11.6844 10.6667 11.8337 10.5174 11.8337 10.3333V9.5C11.8337 9.22386 12.0575 9 12.3337 9C12.6098 9 12.8337 9.22386 12.8337 9.5V10.3333C12.8337 10.5174 12.9829 10.6667 13.167 10.6667H14.0003C14.2765 10.6667 14.5003 10.8905 14.5003 11.1667C14.5003 11.4428 14.2765 11.6667 14.0003 11.6667H13.167C12.9829 11.6667 12.8337 11.8159 12.8337 12V12.8333C12.8337 13.1095 12.6098 13.3333 12.3337 13.3333C12.0575 13.3333 11.8337 13.1095 11.8337 12.8333V12C11.8337 11.8159 11.6844 11.6667 11.5003 11.6667H10.667C10.3908 11.6667 10.167 11.4428 10.167 11.1667Z" />
|
||||
</svg>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export const AddMemberIcon = () => {
|
||||
return <Icon width={16} height={16} />;
|
||||
};
|
||||
|
||||
const Icon = styled(AddMemberIconSvg)`
|
||||
& > path {
|
||||
fill: ${({ theme }) => theme.tertiary};
|
||||
}
|
||||
|
||||
&:hover > path {
|
||||
fill: ${({ theme }) => theme.bodyBackgroundColor};
|
||||
}
|
||||
const Icon = styled.svg`
|
||||
fill: ${({ theme }) => theme.tertiary};
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Icon
|
||||
width={width}
|
||||
|
|
@ -26,10 +26,6 @@ export function CheckSvg({ width, height, className }: CheckSvgProps) {
|
|||
);
|
||||
}
|
||||
|
||||
export const CheckIcon = () => {
|
||||
return <Icon width={16} height={16} />;
|
||||
};
|
||||
|
||||
const Icon = styled.svg`
|
||||
fill: ${({ theme }) => theme.tertiary};
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<svg
|
||||
<Icon
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 16 16"
|
||||
|
|
@ -18,16 +18,10 @@ export function DownloadSvg({ width, height, className }: DownloadSvgProps) {
|
|||
>
|
||||
<path d="M10.6668 8.83399C10.6668 8.55784 10.8924 8.33835 11.1647 8.29286C12.5846 8.05568 13.6668 6.82121 13.6668 5.33399C13.6668 3.67713 12.3237 2.33399 10.6668 2.33399L5.3335 2.33399C3.67664 2.33399 2.3335 3.67713 2.3335 5.33399C2.3335 6.82121 3.4157 8.05568 4.83559 8.29286C5.10796 8.33835 5.3335 8.55784 5.3335 8.83399C5.3335 9.11013 5.10852 9.33726 4.83449 9.30316C2.86085 9.05755 1.3335 7.37414 1.3335 5.33399C1.3335 3.12485 3.12436 1.33398 5.3335 1.33398L10.6668 1.33399C12.876 1.33399 14.6668 3.12485 14.6668 5.33399C14.6668 7.37414 13.1395 9.05755 11.1658 9.30316C10.8918 9.33726 10.6668 9.11013 10.6668 8.83399Z" />
|
||||
<path d="M8.00016 4.83399C8.27631 4.83399 8.50016 5.05784 8.50016 5.33399V11.9888C8.50016 12.2858 8.85921 12.4345 9.0692 12.2245L10.3133 10.9804C10.5085 10.7852 10.8251 10.7852 11.0204 10.9804C11.2156 11.1757 11.2156 11.4923 11.0204 11.6875L8.35372 14.3542C8.15845 14.5495 7.84187 14.5495 7.64661 14.3542L4.97994 11.6875C4.78468 11.4923 4.78468 11.1757 4.97994 10.9804C5.1752 10.7852 5.49179 10.7852 5.68705 10.9804L6.93113 12.2245C7.14112 12.4345 7.50016 12.2858 7.50016 11.9888V5.33399C7.50016 5.05784 7.72402 4.83399 8.00016 4.83399Z" />
|
||||
</svg>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export const DownloadIcon = () => {
|
||||
return <Icon width={16} height={16} />;
|
||||
};
|
||||
|
||||
const Icon = styled(DownloadSvg)`
|
||||
& > path {
|
||||
fill: ${({ theme }) => theme.tertiary};
|
||||
}
|
||||
const Icon = styled.svg`
|
||||
fill: ${({ theme }) => theme.tertiary};
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<svg
|
||||
<Icon
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 16 16"
|
||||
|
|
@ -21,20 +21,10 @@ export function EditSvg({ width, height, className }: EditSvgProps) {
|
|||
clipRule="evenodd"
|
||||
d="M10.7914 2.16376C11.6321 1.32302 12.9952 1.32302 13.836 2.16376C14.6767 3.00451 14.6767 4.36763 13.836 5.20838L6.0015 13.0429C5.71671 13.3276 5.36405 13.5352 4.97679 13.6458L2.1717 14.4472C1.99679 14.4972 1.80854 14.4484 1.67992 14.3198C1.55129 14.1912 1.50251 14.0029 1.55249 13.828L2.35394 11.0229C2.46459 10.6357 2.6721 10.283 2.95688 9.99823L10.7914 2.16376ZM13.1276 2.87212C12.6781 2.42258 11.9492 2.42258 11.4997 2.87212L3.66524 10.7066C3.50083 10.871 3.38103 11.0746 3.31716 11.2981C3.07579 12.1429 3.85682 12.9239 4.70159 12.6826C4.92515 12.6187 5.12874 12.4989 5.29315 12.3345L13.1276 4.50003C13.5772 4.05049 13.5772 3.32165 13.1276 2.87212Z"
|
||||
/>
|
||||
</svg>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export const EditIcon = () => {
|
||||
return <Icon width={16} height={16} />;
|
||||
};
|
||||
|
||||
const Icon = styled(EditSvg)`
|
||||
& > path {
|
||||
fill: ${({ theme }) => theme.tertiary};
|
||||
}
|
||||
|
||||
&:hover > path {
|
||||
fill: ${({ theme }) => theme.bodyBackgroundColor};
|
||||
}
|
||||
const Icon = styled.svg`
|
||||
fill: ${({ theme }) => theme.tertiary};
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Icon
|
||||
width={width}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
type MembersSmallSvgProps = {
|
||||
type MembersSmallIconProps = {
|
||||
width: number;
|
||||
height: number;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export function MembersSmallSvg({
|
||||
export function MembersSmallIcon({
|
||||
height,
|
||||
width,
|
||||
className,
|
||||
}: MembersSmallSvgProps) {
|
||||
}: MembersSmallIconProps) {
|
||||
return (
|
||||
<svg
|
||||
<Icon
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 16 17"
|
||||
|
|
@ -27,16 +27,10 @@ export function MembersSmallSvg({
|
|||
d="M9.5012 8.81038C9.6626 8.72884 9.8625 8.77133 9.98065 8.90821C10.4697 9.47475 11.193 9.83333 12.0001 9.83333C13.4729 9.83333 14.6668 8.63943 14.6668 7.16667C14.6668 5.69391 13.4729 4.5 12.0001 4.5C11.8043 4.5 11.6134 4.52111 11.4296 4.56118C11.253 4.59968 11.0675 4.51392 10.9871 4.35205C10.4417 3.25437 9.30903 2.5 8.00016 2.5C6.6913 2.5 5.55862 3.25438 5.01322 4.35206C4.93279 4.51393 4.74735 4.59968 4.57074 4.56118C4.38691 4.52111 4.196 4.5 4.00016 4.5C2.5274 4.5 1.3335 5.69391 1.3335 7.16667C1.3335 8.63943 2.5274 9.83333 4.00016 9.83333C4.80729 9.83333 5.53066 9.47475 6.01966 8.90821C6.13781 8.77132 6.33772 8.72884 6.49911 8.81037C6.95024 9.03828 7.46021 9.16667 8.00016 9.16667C8.54012 9.16667 9.05008 9.03828 9.5012 8.81038ZM10.3335 5.83333C10.3335 7.122 9.28883 8.16667 8.00016 8.16667C6.7115 8.16667 5.66683 7.122 5.66683 5.83333C5.66683 4.54467 6.7115 3.5 8.00016 3.5C9.28883 3.5 10.3335 4.54467 10.3335 5.83333ZM10.6905 7.80176C10.6082 7.91411 10.5901 8.06636 10.6746 8.17708C10.9791 8.57597 11.4596 8.83333 12.0001 8.83333C12.9206 8.83333 13.6668 8.08714 13.6668 7.16667C13.6668 6.24619 12.9206 5.5 12.0001 5.5C11.8289 5.5 11.6637 5.52583 11.5082 5.57381C11.3976 5.60792 11.3335 5.71762 11.3335 5.83333C11.3335 6.56962 11.0948 7.25016 10.6905 7.80176ZM4.49218 5.57381C4.33666 5.52583 4.17143 5.5 4.00016 5.5C3.07969 5.5 2.3335 6.24619 2.3335 7.16667C2.3335 8.08714 3.07969 8.83333 4.00016 8.83333C4.54075 8.83333 5.02123 8.57596 5.32574 8.17707C5.41026 8.06635 5.39216 7.9141 5.30982 7.80175C4.90555 7.25015 4.66683 6.56962 4.66683 5.83333C4.66683 5.71763 4.60274 5.60793 4.49218 5.57381Z"
|
||||
/>
|
||||
<path d="M3.43173 14.5246C3.68748 14.5885 3.94646 14.4427 4.05591 14.2029C4.73877 12.7066 6.24803 11.6667 8.00019 11.6667C9.77912 11.6667 11.3077 12.7386 11.9752 14.2718C12.0861 14.5265 12.3654 14.6775 12.6306 14.5947C12.8925 14.5128 13.0416 14.2337 12.9376 13.9797C12.1414 12.0359 10.2307 10.6667 8.00019 10.6667C5.80286 10.6667 3.9159 11.9955 3.09905 13.8934C2.98436 14.1599 3.15026 14.4542 3.43173 14.5246Z" />
|
||||
</svg>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export const MembersIcon = () => {
|
||||
return <Icon width={32} height={32} />;
|
||||
};
|
||||
|
||||
const Icon = styled(MembersSmallSvg)`
|
||||
& > path {
|
||||
fill: ${({ theme }) => theme.primary};
|
||||
}
|
||||
const Icon = styled.svg`
|
||||
fill: ${({ theme }) => theme.primary};
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<svg
|
||||
<Icon
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 16 16"
|
||||
|
|
@ -22,20 +22,10 @@ export function MuteSvg({ width, height, className }: MuteSvgProps) {
|
|||
clipRule="evenodd"
|
||||
d="M10.1873 12.6668C9.96313 12.6668 9.80205 12.8855 9.82292 13.1087C9.82962 13.1804 9.83328 13.2553 9.83328 13.3335C9.83328 14.2594 9.02904 15.1668 7.99995 15.1668C6.97085 15.1668 6.16662 14.2594 6.16662 13.3335C6.16662 13.2553 6.17028 13.1804 6.17698 13.1087C6.19784 12.8855 6.03677 12.6668 5.81257 12.6668H3.68068C2.52316 12.6668 1.91546 11.2931 2.6941 10.4366L3.47867 9.57357C3.81915 9.19905 4.046 8.73536 4.13273 8.23669L4.87637 3.96073C5.14048 2.44212 6.45854 1.3335 7.99995 1.3335C9.54136 1.3335 10.8594 2.44211 11.1235 3.96073L11.8672 8.23668C11.9539 8.73535 12.1808 9.19905 12.5212 9.57357L13.3058 10.4366C14.0844 11.2931 13.4767 12.6668 12.3192 12.6668H10.1873ZM7.35483 12.6857L7.35418 12.6864L7.35935 12.6811L7.36097 12.6794C7.3618 12.6785 7.36222 12.678 7.36227 12.678C7.36253 12.6777 7.36229 12.6779 7.36227 12.678L7.36097 12.6794C7.36831 12.6717 7.37871 12.6668 7.38931 12.6668H8.61059C8.62119 12.6668 8.63124 12.6714 8.63858 12.6791C8.64051 12.6813 8.64525 12.687 8.65203 12.696C8.66736 12.7164 8.69261 12.7535 8.7194 12.8071C8.77216 12.9126 8.83328 13.0865 8.83328 13.3335C8.83328 13.7409 8.44361 14.1668 7.99995 14.1668C7.55628 14.1668 7.16662 13.7409 7.16662 13.3335C7.16662 13.0865 7.22773 12.9126 7.2805 12.8071C7.30729 12.7535 7.33254 12.7164 7.34787 12.696C7.35465 12.687 7.35905 12.6816 7.36097 12.6794L7.35935 12.6811L7.35811 12.6824L7.35603 12.6845L7.35483 12.6857ZM3.43404 11.1093L4.21861 10.2462C4.68676 9.73127 4.99869 9.0937 5.11794 8.40803L5.86158 4.13207C6.04239 3.09244 6.94472 2.3335 7.99995 2.3335C9.05518 2.3335 9.95751 3.09244 10.1383 4.13207L10.882 8.40803C11.0012 9.0937 11.3131 9.73127 11.7813 10.2462L12.5659 11.1093C12.7605 11.3234 12.6086 11.6668 12.3192 11.6668H3.68068C3.3913 11.6668 3.23938 11.3234 3.43404 11.1093Z"
|
||||
/>
|
||||
</svg>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export const MuteIcon = () => {
|
||||
return <Icon width={16} height={16} />;
|
||||
};
|
||||
|
||||
const Icon = styled(MuteSvg)`
|
||||
& > path {
|
||||
fill: ${({ theme }) => theme.tertiary};
|
||||
}
|
||||
|
||||
&:hover > path {
|
||||
fill: ${({ theme }) => theme.bodyBackgroundColor};
|
||||
}
|
||||
const Icon = styled.svg`
|
||||
fill: ${({ theme }) => theme.tertiary};
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Icon
|
||||
width={width}
|
||||
|
|
@ -32,10 +32,6 @@ export function ProfileSvg({ width, height, className }: ProfileSvgProps) {
|
|||
);
|
||||
}
|
||||
|
||||
export const ProfileIcon = () => {
|
||||
return <Icon width={16} height={16} />;
|
||||
};
|
||||
|
||||
const Icon = styled.svg`
|
||||
fill: ${({ theme }) => theme.tertiary};
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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 && (
|
||||
<button onClick={() => setRenaming(true)}>
|
||||
{" "}
|
||||
{!requestCreation && <EditSvg width={24} height={24} />}
|
||||
{!requestCreation && <EditIcon width={24} height={24} />}
|
||||
</button>
|
||||
)}
|
||||
</UserNameWrapper>
|
||||
|
|
@ -179,7 +179,7 @@ export const ProfileModal = () => {
|
|||
{renaming ? (
|
||||
<>
|
||||
<BackBtn onClick={() => setRenaming(false)}>
|
||||
<LeftIconSvg width={28} height={28} />
|
||||
<LeftIcon width={28} height={28} />
|
||||
</BackBtn>
|
||||
<Btn
|
||||
disabled={!customNameInput}
|
||||
|
|
@ -194,7 +194,7 @@ export const ProfileModal = () => {
|
|||
) : requestCreation ? (
|
||||
<>
|
||||
<BackBtn onClick={() => setRequestCreation(false)}>
|
||||
<LeftIconSvg width={28} height={28} />
|
||||
<LeftIcon width={28} height={28} />
|
||||
</BackBtn>
|
||||
<Btn
|
||||
disabled={!request}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import { ClearBtn, NameInput, NameInputWrapper } from "../Form/inputStyles";
|
|||
import { AddIcon } from "../Icons/AddIcon";
|
||||
import { ChainIcon } from "../Icons/ChainIcon";
|
||||
import { ClearSvgFull } from "../Icons/ClearIconFull";
|
||||
import { LeftIconSvg } from "../Icons/LeftIcon";
|
||||
import { LeftIcon } from "../Icons/LeftIcon";
|
||||
import { UserLogo } from "../Members/UserLogo";
|
||||
|
||||
import { AgreementModalName } from "./AgreementModal";
|
||||
|
|
@ -134,7 +134,7 @@ export function UserCreationModal() {
|
|||
</MiddleSection>
|
||||
<ButtonSection>
|
||||
<BackBtn onClick={() => setModal(false)}>
|
||||
<LeftIconSvg width={28} height={28} />
|
||||
<LeftIcon width={28} height={28} />
|
||||
</BackBtn>
|
||||
<Btn
|
||||
onClick={() => {
|
||||
|
|
|
|||
|
|
@ -51,4 +51,5 @@ export const ListWrapper = styled.div`
|
|||
padding: 16px;
|
||||
background: ${({ theme }) => theme.bodyBackgroundColor};
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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) {
|
|||
<ToastBlock>
|
||||
{toast.type === "confirmation" && (
|
||||
<IconWrapper className="green">
|
||||
<CheckSvg width={20} height={20} className="green" />
|
||||
<CheckIcon width={20} height={20} className="green" />
|
||||
</IconWrapper>
|
||||
)}
|
||||
{toast.type === "incoming" && (
|
||||
<IconWrapper className="blue">
|
||||
<ProfileSvg width={20} height={20} />
|
||||
<ProfileIcon width={20} height={20} />
|
||||
</IconWrapper>
|
||||
)}
|
||||
{(toast.type === "approvement" || toast.type === "rejection") && (
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue