From e379aeca84b56150ac18e9f02b737ee0a5ae43e6 Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Thu, 30 Sep 2021 08:35:53 +0200 Subject: [PATCH] Add icons (#19) --- .../react-chat/src/components/Channels.tsx | 8 +++++ packages/react-chat/src/components/Chat.tsx | 9 +++-- .../src/components/Chat/ChatBody.tsx | 29 ++++++++++++++- .../src/components/Chat/ChatMessages.tsx | 9 ++++- .../src/components/Icons/MembersIcon.tsx | 33 +++++++++++++++++ .../src/components/Icons/MutedIcon.tsx | 35 +++++++++++++++++++ .../src/components/Icons/UserIcon.tsx | 35 +++++++++++++++++++ .../react-chat/src/components/ReactChat.tsx | 2 +- .../react-chat/src/helpers/channelsMock.ts | 2 ++ packages/react-chat/src/styles/themes.ts | 3 ++ 10 files changed, 159 insertions(+), 6 deletions(-) create mode 100644 packages/react-chat/src/components/Icons/MembersIcon.tsx create mode 100644 packages/react-chat/src/components/Icons/MutedIcon.tsx create mode 100644 packages/react-chat/src/components/Icons/UserIcon.tsx diff --git a/packages/react-chat/src/components/Channels.tsx b/packages/react-chat/src/components/Channels.tsx index 99c0b3c1..9edcdc2b 100644 --- a/packages/react-chat/src/components/Channels.tsx +++ b/packages/react-chat/src/components/Channels.tsx @@ -4,6 +4,8 @@ import styled from "styled-components"; import { ChannelData, channels } from "../helpers/channelsMock"; import { Theme } from "../styles/themes"; +import { MutedIcon } from "./Icons/MutedIcon"; + interface ChannelsProps { theme: Theme; icon: string; @@ -50,6 +52,7 @@ export function Channels({ channel={channel} theme={theme} isActive={channel.id === activeChannelId} + isMuted={channel.isMuted || false} notification={ notifications[channel.name] > 0 ? notifications[channel.name] @@ -70,6 +73,7 @@ interface ChannelProps { channel: ChannelData; notification?: number; isActive: boolean; + isMuted: boolean; activeView?: boolean; onClick?: () => void; } @@ -78,6 +82,7 @@ export function Channel({ theme, channel, isActive, + isMuted, activeView, onClick, notification, @@ -106,6 +111,8 @@ export function Channel({ ? "active" : notification && notification > 0 ? "notified" + : isMuted + ? "muted" : "" } > @@ -122,6 +129,7 @@ export function Channel({ {notification && notification > 0 && !activeView && ( {notification} )} + {isMuted && !notification && } ); } diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index cb94aa81..cd7c602d 100644 --- a/packages/react-chat/src/components/Chat.tsx +++ b/packages/react-chat/src/components/Chat.tsx @@ -12,11 +12,12 @@ import { Members } from "./Members"; interface ChatProps { theme: Theme; channelsON?: boolean; - membersON?: boolean; } -export function Chat({ theme, channelsON, membersON }: ChatProps) { +export function Chat({ theme, channelsON }: ChatProps) { const [activeChannel, setActiveChannel] = useState(channels[0]); + const [showMembers, setShowMembers] = useState(true); + const { messenger, messages, @@ -48,11 +49,13 @@ export function Chat({ theme, channelsON, membersON }: ChatProps) { channel={activeChannel} messages={messages} sendMessage={sendMessage} + onClick={() => setShowMembers(!showMembers)} + showMembers={showMembers} /> ) : ( Connecting to waku )} - {membersON && } + {showMembers && } ); } diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx index 82fbab93..5388ebad 100644 --- a/packages/react-chat/src/components/Chat/ChatBody.tsx +++ b/packages/react-chat/src/components/Chat/ChatBody.tsx @@ -5,6 +5,7 @@ import { ChannelData } from "../../helpers/channelsMock"; import { ChatMessage } from "../../models/ChatMessage"; import { Theme } from "../../styles/themes"; import { Channel } from "../Channels"; +import { MembersIcon } from "../Icons/MembersIcon"; import { ChatInput } from "./ChatInput"; import { ChatMessages } from "./ChatMessages"; @@ -14,6 +15,8 @@ interface ChatBodyProps { channel: ChannelData; messages: ChatMessage[]; sendMessage: (text: string) => void; + onClick: () => void; + showMembers: boolean; } export function ChatBody({ @@ -21,6 +24,8 @@ export function ChatBody({ channel, messages, sendMessage, + onClick, + showMembers, }: ChatBodyProps) { return ( @@ -30,7 +35,15 @@ export function ChatBody({ theme={theme} isActive={true} activeView={true} + isMuted={false} /> + + + @@ -50,5 +63,19 @@ const ChatBodyWrapper = styled.div` `; const ChannelWrapper = styled.div` - padding-left: 8px; + display: flex; + justify-content: space-between; + padding: 0 8px; +`; + +const MemberBtn = styled.button` + width: 32px; + height: 32px; + border-radius: 8px; + padding: 0; + margin-top: 12px; + + &.active { + background: ${({ theme }) => theme.inputColor}; + } `; diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx index 3b63a4dd..4b769e01 100644 --- a/packages/react-chat/src/components/Chat/ChatMessages.tsx +++ b/packages/react-chat/src/components/Chat/ChatMessages.tsx @@ -3,6 +3,7 @@ import styled from "styled-components"; import { ChatMessage } from "../../models/ChatMessage"; import { Theme } from "../../styles/themes"; +import { UserIcon } from "../Icons/UserIcon"; type ChatMessagesProps = { messages: ChatMessage[]; @@ -21,7 +22,10 @@ export function ChatMessages({ messages, theme }: ChatMessagesProps) { {messages.map((message, idx) => ( - + + + + @@ -71,6 +75,9 @@ const MessageHeaderWrapper = styled.div` const Icon = styled.div` width: 40px; height: 40px; + display: flex; + justify-content: center; + align-items: end; border-radius: 50%; background-color: #bcbdff; `; diff --git a/packages/react-chat/src/components/Icons/MembersIcon.tsx b/packages/react-chat/src/components/Icons/MembersIcon.tsx new file mode 100644 index 00000000..faf8e867 --- /dev/null +++ b/packages/react-chat/src/components/Icons/MembersIcon.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import styled from "styled-components"; + +import { Theme } from "../../styles/themes"; + +interface ThemeProps { + theme: Theme; +} + +export const MembersIcon = ({ theme }: ThemeProps) => { + return ( + + + + + ); +}; + +const Icon = styled.svg` + & > path { + fill: ${({ theme }) => theme.textPrimaryColor}; + } +`; diff --git a/packages/react-chat/src/components/Icons/MutedIcon.tsx b/packages/react-chat/src/components/Icons/MutedIcon.tsx new file mode 100644 index 00000000..103a7f4e --- /dev/null +++ b/packages/react-chat/src/components/Icons/MutedIcon.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import styled from "styled-components"; + +import { Theme } from "../../styles/themes"; + +interface ThemeProps { + theme: Theme; +} + +export const MutedIcon = ({ theme }: ThemeProps) => { + return ( + + + + + ); +}; + +const Icon = styled.svg` + & > path { + fill: ${({ theme }) => theme.textPrimaryColor}; + } +`; diff --git a/packages/react-chat/src/components/Icons/UserIcon.tsx b/packages/react-chat/src/components/Icons/UserIcon.tsx new file mode 100644 index 00000000..e0160149 --- /dev/null +++ b/packages/react-chat/src/components/Icons/UserIcon.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import styled from "styled-components"; + +import { Theme } from "../../styles/themes"; + +interface ThemeProps { + theme: Theme; +} + +export const UserIcon = ({ theme }: ThemeProps) => { + return ( + + + + + ); +}; + +const Icon = styled.svg` + & > path, + & > ellipse { + fill: ${({ theme }) => theme.iconUserColor}; + } +`; diff --git a/packages/react-chat/src/components/ReactChat.tsx b/packages/react-chat/src/components/ReactChat.tsx index 1d68426c..88e56e25 100644 --- a/packages/react-chat/src/components/ReactChat.tsx +++ b/packages/react-chat/src/components/ReactChat.tsx @@ -9,7 +9,7 @@ export function ReactChat() { return (
- +
); } diff --git a/packages/react-chat/src/helpers/channelsMock.ts b/packages/react-chat/src/helpers/channelsMock.ts index c0f50701..1ed9bd60 100644 --- a/packages/react-chat/src/helpers/channelsMock.ts +++ b/packages/react-chat/src/helpers/channelsMock.ts @@ -4,6 +4,7 @@ export type ChannelData = { icon?: string; members: number; notifications?: number; + isMuted?: boolean; }; export const channels = [ @@ -28,5 +29,6 @@ export const channels = [ id: 4, name: "random", members: 6, + isMuted: true, }, ]; diff --git a/packages/react-chat/src/styles/themes.ts b/packages/react-chat/src/styles/themes.ts index ee83d793..2a992fed 100644 --- a/packages/react-chat/src/styles/themes.ts +++ b/packages/react-chat/src/styles/themes.ts @@ -6,6 +6,7 @@ export type Theme = { memberNameColor: string; guestNameColor: string; iconColor: string; + iconUserColor: string; iconTextColor: string; activeChannelBackground: string; notificationColor: string; @@ -20,6 +21,7 @@ export const lightTheme: Theme = { memberNameColor: "#4360DF", guestNameColor: "#887AF9", iconColor: "#D37EF4", + iconUserColor: "#717199", iconTextColor: "rgba(255, 255, 255, 0.7)", activeChannelBackground: "#E9EDF1", notificationColor: "#4360DF", @@ -34,6 +36,7 @@ export const darkTheme: Theme = { memberNameColor: "#88B0FF", guestNameColor: "#887AF9", iconColor: "#D37EF4", + iconUserColor: "#717199", iconTextColor: "rgba(0, 0, 0, 0.7)", activeChannelBackground: "#2C2C2C", notificationColor: "#887AF9",