status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor channel menu (#105)

This commit is contained in:
Szymon Szlachtowicz 2021-11-02 11:45:00 +01:00 committed by GitHub
parent d697346a5d
commit df8387d5c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 131 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
packages/react-chat/src/components/Form/ChannelMenu.tsx
View File

@ -5,8 +5,27 @@ import { useMessengerContext } from "../../contexts/messengerProvider";
import { useNarrow } from "../../contexts/narrowProvider"; import { useNarrow } from "../../contexts/narrowProvider";
import { ChannelData } from "../../models/ChannelData"; import { ChannelData } from "../../models/ChannelData";
import { ChatMessage } from "../../models/ChatMessage"; import { ChatMessage } from "../../models/ChatMessage";
import { CheckSvg } from "../Icons/CheckIcon";
import { ClearSvg } from "../Icons/ClearIcon";
import { MembersSmallSvg } from "../Icons/MembersSmallIcon";
import { MuteSvg } from "../Icons/MuteIcon";
import { textSmallStyles } from "../Text"; import { textSmallStyles } from "../Text";
type MenuItemProps = {
Svg: ({ width, height }: { width: number; height: number }) => JSX.Element;
text: string;
onClick: () => void;
};
function MenuItem({ Svg, text, onClick }: MenuItemProps) {
return (
<Item onClick={onClick}>
<Svg width={16} height={16} />
<MenuText>{text}</MenuText>
</Item>
);
}
interface ChannelMenuProps { interface ChannelMenuProps {
channel: ChannelData; channel: ChannelData;
@ -34,74 +53,25 @@ export const ChannelMenu = ({
switchMemberList(); switchMemberList();
setShowChannelMenu(false); setShowChannelMenu(false);
}} }}
> Svg={MembersSmallSvg}
<svg text="View Members"
width="16"
height="17"
viewBox="0 0 16 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
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>
<MenuText>View members</MenuText>
</MenuItem>
)} )}
<MenuItem onClick={() => channel.isMuted === true}> <MenuItem
<svg onClick={() => channel.isMuted === true}
width="16" Svg={MuteSvg}
height="16" text="Mute Chat"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
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> <MenuItem
<MenuText>Mute Chat</MenuText> onClick={() => clearNotifications(channel.id)}
</MenuItem> Svg={CheckSvg}
<MenuItem onClick={() => clearNotifications(channel.id)}> text="Mark as Read"
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M11.0826 5.61085C11.2358 5.38108 11.1737 5.07065 10.9439 4.91747C10.7142 4.7643 10.4037 4.82638 10.2506 5.05615L6.58887 10.5487L5.02014 8.97994C4.82488 8.78468 4.50829 8.78468 4.31303 8.97994C4.11777 9.17521 4.11777 9.49179 4.31303 9.68705L6.31303 11.687C6.41895 11.793 6.56679 11.8458 6.71585 11.8311C6.86492 11.8163 6.99952 11.7355 7.08261 11.6108L11.0826 5.61085Z" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.99992 14.6668C4.31802 14.6668 1.33325 11.6821 1.33325 8.00016C1.33325 4.31826 4.31802 1.3335 7.99992 1.3335C11.6818 1.3335 14.6666 4.31826 14.6666 8.00016C14.6666 11.6821 11.6818 14.6668 7.99992 14.6668ZM7.99992 13.6668C4.8703 13.6668 2.33325 11.1298 2.33325 8.00016C2.33325 4.87055 4.8703 2.3335 7.99992 2.3335C11.1295 2.3335 13.6666 4.87055 13.6666 8.00016C13.6666 11.1298 11.1295 13.6668 7.99992 13.6668Z"
/> />
</svg> <MenuItem
<MenuText>Mark as Read</MenuText> onClick={() => messages.length === 0}
</MenuItem> Svg={ClearSvg}
<MenuItem onClick={() => messages.length === 0}> text="Clear History"
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M10.6868 5.31319C10.8821 5.50846 10.8821 5.82504 10.6868 6.0203L8.94269 7.76442C8.81251 7.89459 8.81251 8.10565 8.94269 8.23582L10.6868 9.97994C10.8821 10.1752 10.8821 10.4918 10.6868 10.687C10.4915 10.8823 10.175 10.8823 9.9797 10.687L8.23558 8.94293C8.10541 8.81276 7.89435 8.81276 7.76417 8.94293L6.02014 10.687C5.82488 10.8822 5.50829 10.8822 5.31303 10.687C5.11777 10.4917 5.11777 10.1751 5.31303 9.97986L7.05707 8.23582C7.18724 8.10565 7.18724 7.89459 7.05707 7.76442L5.31303 6.02038C5.11777 5.82512 5.11777 5.50854 5.31303 5.31328C5.50829 5.11801 5.82488 5.11801 6.02014 5.31328L7.76418 7.05731C7.89435 7.18749 8.10541 7.18749 8.23558 7.05731L9.9797 5.31319C10.175 5.11793 10.4915 5.11793 10.6868 5.31319Z" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.99992 14.6668C11.6818 14.6668 14.6666 11.6821 14.6666 8.00016C14.6666 4.31826 11.6818 1.3335 7.99992 1.3335C4.31802 1.3335 1.33325 4.31826 1.33325 8.00016C1.33325 11.6821 4.31802 14.6668 7.99992 14.6668ZM7.99992 13.6668C11.1295 13.6668 13.6666 11.1298 13.6666 8.00016C13.6666 4.87055 11.1295 2.3335 7.99992 2.3335C4.87031 2.3335 2.33325 4.87055 2.33325 8.00016C2.33325 11.1298 4.87031 13.6668 7.99992 13.6668Z"
/> />
</svg>
<MenuText>Clear History</MenuText>
</MenuItem>
</MenuList> </MenuList>
</MenuBlock> </MenuBlock>
); );
@ -124,7 +94,7 @@ const MenuList = styled.ul`
list-style: none; list-style: none;
`; `;
const MenuItem = styled.li` const Item = styled.li`
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;

23
packages/react-chat/src/components/Icons/CheckIcon.tsx
View File

@ -1,14 +1,21 @@
import React from "react"; import React from "react";
import styled from "styled-components"; import styled from "styled-components";
export const CheckIcon = () => { type CheckSvgProps = {
width: number;
height: number;
className?: string;
};
export function CheckSvg({ width, height, className }: CheckSvgProps) {
return ( return (
<Icon <svg
width="16" width={width}
height="16" height={height}
viewBox="0 0 16 16" viewBox="0 0 16 16"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className={className}
> >
<path d="M11.0826 5.61085C11.2358 5.38108 11.1737 5.07065 10.9439 4.91747C10.7142 4.7643 10.4037 4.82638 10.2506 5.05615L6.58887 10.5487L5.02014 8.97994C4.82488 8.78468 4.50829 8.78468 4.31303 8.97994C4.11777 9.17521 4.11777 9.49179 4.31303 9.68705L6.31303 11.687C6.41895 11.793 6.56679 11.8458 6.71585 11.8311C6.86492 11.8163 6.99952 11.7355 7.08261 11.6108L11.0826 5.61085Z" /> <path d="M11.0826 5.61085C11.2358 5.38108 11.1737 5.07065 10.9439 4.91747C10.7142 4.7643 10.4037 4.82638 10.2506 5.05615L6.58887 10.5487L5.02014 8.97994C4.82488 8.78468 4.50829 8.78468 4.31303 8.97994C4.11777 9.17521 4.11777 9.49179 4.31303 9.68705L6.31303 11.687C6.41895 11.793 6.56679 11.8458 6.71585 11.8311C6.86492 11.8163 6.99952 11.7355 7.08261 11.6108L11.0826 5.61085Z" />
<path <path
@ -16,11 +23,15 @@ export const CheckIcon = () => {
clipRule="evenodd" clipRule="evenodd"
d="M7.99992 14.6668C4.31802 14.6668 1.33325 11.6821 1.33325 8.00016C1.33325 4.31826 4.31802 1.3335 7.99992 1.3335C11.6818 1.3335 14.6666 4.31826 14.6666 8.00016C14.6666 11.6821 11.6818 14.6668 7.99992 14.6668ZM7.99992 13.6668C4.8703 13.6668 2.33325 11.1298 2.33325 8.00016C2.33325 4.87055 4.8703 2.3335 7.99992 2.3335C11.1295 2.3335 13.6666 4.87055 13.6666 8.00016C13.6666 11.1298 11.1295 13.6668 7.99992 13.6668Z" d="M7.99992 14.6668C4.31802 14.6668 1.33325 11.6821 1.33325 8.00016C1.33325 4.31826 4.31802 1.3335 7.99992 1.3335C11.6818 1.3335 14.6666 4.31826 14.6666 8.00016C14.6666 11.6821 11.6818 14.6668 7.99992 14.6668ZM7.99992 13.6668C4.8703 13.6668 2.33325 11.1298 2.33325 8.00016C2.33325 4.87055 4.8703 2.3335 7.99992 2.3335C11.1295 2.3335 13.6666 4.87055 13.6666 8.00016C13.6666 11.1298 11.1295 13.6668 7.99992 13.6668Z"
/> />
</Icon> </svg>
); );
}
export const CheckIcon = () => {
return <Icon width={16} height={16} />;
}; };
const Icon = styled.svg` const Icon = styled(CheckSvg)`
& > path { & > path {
fill: ${({ theme }) => theme.tertiary}; fill: ${({ theme }) => theme.tertiary};
} }

23
packages/react-chat/src/components/Icons/ClearIcon.tsx
View File

@ -1,14 +1,21 @@
import React from "react"; import React from "react";
import styled from "styled-components"; import styled from "styled-components";
export const ClearIcon = () => { type ClearSvgProps = {
width: number;
height: number;
className?: string;
};
export function ClearSvg({ height, width, className }: ClearSvgProps) {
return ( return (
<Icon <svg
width="16" width={width}
height="16" height={height}
viewBox="0 0 16 16" viewBox="0 0 16 16"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className={className}
> >
<path d="M10.6868 5.31319C10.8821 5.50846 10.8821 5.82504 10.6868 6.0203L8.94269 7.76442C8.81251 7.89459 8.81251 8.10565 8.94269 8.23582L10.6868 9.97994C10.8821 10.1752 10.8821 10.4918 10.6868 10.687C10.4915 10.8823 10.175 10.8823 9.9797 10.687L8.23558 8.94293C8.10541 8.81276 7.89435 8.81276 7.76417 8.94293L6.02014 10.687C5.82488 10.8822 5.50829 10.8822 5.31303 10.687C5.11777 10.4917 5.11777 10.1751 5.31303 9.97986L7.05707 8.23582C7.18724 8.10565 7.18724 7.89459 7.05707 7.76442L5.31303 6.02038C5.11777 5.82512 5.11777 5.50854 5.31303 5.31328C5.50829 5.11801 5.82488 5.11801 6.02014 5.31328L7.76418 7.05731C7.89435 7.18749 8.10541 7.18749 8.23558 7.05731L9.9797 5.31319C10.175 5.11793 10.4915 5.11793 10.6868 5.31319Z" /> <path d="M10.6868 5.31319C10.8821 5.50846 10.8821 5.82504 10.6868 6.0203L8.94269 7.76442C8.81251 7.89459 8.81251 8.10565 8.94269 8.23582L10.6868 9.97994C10.8821 10.1752 10.8821 10.4918 10.6868 10.687C10.4915 10.8823 10.175 10.8823 9.9797 10.687L8.23558 8.94293C8.10541 8.81276 7.89435 8.81276 7.76417 8.94293L6.02014 10.687C5.82488 10.8822 5.50829 10.8822 5.31303 10.687C5.11777 10.4917 5.11777 10.1751 5.31303 9.97986L7.05707 8.23582C7.18724 8.10565 7.18724 7.89459 7.05707 7.76442L5.31303 6.02038C5.11777 5.82512 5.11777 5.50854 5.31303 5.31328C5.50829 5.11801 5.82488 5.11801 6.02014 5.31328L7.76418 7.05731C7.89435 7.18749 8.10541 7.18749 8.23558 7.05731L9.9797 5.31319C10.175 5.11793 10.4915 5.11793 10.6868 5.31319Z" />
<path <path
@ -16,11 +23,15 @@ export const ClearIcon = () => {
clipRule="evenodd" clipRule="evenodd"
d="M7.99992 14.6668C11.6818 14.6668 14.6666 11.6821 14.6666 8.00016C14.6666 4.31826 11.6818 1.3335 7.99992 1.3335C4.31802 1.3335 1.33325 4.31826 1.33325 8.00016C1.33325 11.6821 4.31802 14.6668 7.99992 14.6668ZM7.99992 13.6668C11.1295 13.6668 13.6666 11.1298 13.6666 8.00016C13.6666 4.87055 11.1295 2.3335 7.99992 2.3335C4.87031 2.3335 2.33325 4.87055 2.33325 8.00016C2.33325 11.1298 4.87031 13.6668 7.99992 13.6668Z" d="M7.99992 14.6668C11.6818 14.6668 14.6666 11.6821 14.6666 8.00016C14.6666 4.31826 11.6818 1.3335 7.99992 1.3335C4.31802 1.3335 1.33325 4.31826 1.33325 8.00016C1.33325 11.6821 4.31802 14.6668 7.99992 14.6668ZM7.99992 13.6668C11.1295 13.6668 13.6666 11.1298 13.6666 8.00016C13.6666 4.87055 11.1295 2.3335 7.99992 2.3335C4.87031 2.3335 2.33325 4.87055 2.33325 8.00016C2.33325 11.1298 4.87031 13.6668 7.99992 13.6668Z"
/> />
</Icon> </svg>
); );
}
export const ClearIcon = () => {
return <Icon width={16} height={16} />;
}; };
const Icon = styled.svg` const Icon = styled(ClearSvg)`
& > path { & > path {
fill: ${({ theme }) => theme.tertiary}; fill: ${({ theme }) => theme.tertiary};
} }

42
packages/react-chat/src/components/Icons/MembersSmallIcon.tsx Normal file
View File

@ -0,0 +1,42 @@
import React from "react";
import styled from "styled-components";
type MembersSmallSvgProps = {
width: number;
height: number;
className?: string;
};
export function MembersSmallSvg({
height,
width,
className,
}: MembersSmallSvgProps) {
return (
<svg
width={width}
height={height}
viewBox="0 0 16 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<path
fillRule="evenodd"
clipRule="evenodd"
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>
);
}
export const MembersIcon = () => {
return <Icon width={32} height={32} />;
};
const Icon = styled(MembersSmallSvg)`
& > path {
fill: ${({ theme }) => theme.primary};
}
`;

23
packages/react-chat/src/components/Icons/MuteIcon.tsx
View File

@ -1,25 +1,36 @@
import React from "react"; import React from "react";
import styled from "styled-components"; import styled from "styled-components";
export const MuteIcon = () => { type MuteSvgProps = {
width: number;
height: number;
className?: string;
};
export function MuteSvg({ width, height, className }: MuteSvgProps) {
return ( return (
<Icon <svg
width="16" width={width}
height="16" height={height}
viewBox="0 0 16 16" viewBox="0 0 16 16"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className={className}
> >
<path <path
fillRule="evenodd" fillRule="evenodd"
clipRule="evenodd" 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" 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"
/> />
</Icon> </svg>
); );
}
export const MuteIcon = () => {
return <Icon width={16} height={16} />;
}; };
const Icon = styled.svg` const Icon = styled(MuteSvg)`
& > path { & > path {
fill: ${({ theme }) => theme.tertiary}; fill: ${({ theme }) => theme.tertiary};
} }