From fb0bd2fc8c96aedfa307789a9353e6482350b804 Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Mon, 24 Jan 2022 21:39:47 +0100 Subject: [PATCH] UI general fixes (#200) --- .../ActivityCenter/ActivityMessage.tsx | 6 +- packages/react-chat/src/components/Chat.tsx | 2 +- .../src/components/Chat/ChatCreation.tsx | 180 +++++++++--------- .../src/components/Chat/ChatTopbar.tsx | 1 + .../src/components/Form/ChannelMenu.tsx | 4 +- .../react-chat/src/components/Icons/Icon.ts | 16 -- .../src/components/Members/Member.tsx | 9 +- .../src/components/Messages/Styles.tsx | 39 ++++ .../src/components/Messages/UiMessage.tsx | 34 +++- .../UserCreation/UserCreationButtons.tsx | 2 +- 10 files changed, 163 insertions(+), 130 deletions(-) delete mode 100644 packages/react-chat/src/components/Icons/Icon.ts diff --git a/packages/react-chat/src/components/ActivityCenter/ActivityMessage.tsx b/packages/react-chat/src/components/ActivityCenter/ActivityMessage.tsx index 7c4cfe36..617a7eaa 100644 --- a/packages/react-chat/src/components/ActivityCenter/ActivityMessage.tsx +++ b/packages/react-chat/src/components/ActivityCenter/ActivityMessage.tsx @@ -14,7 +14,6 @@ import { CheckIcon } from "../Icons/CheckIcon"; import { ClearSvg } from "../Icons/ClearIcon"; import { CommunityIcon } from "../Icons/CommunityIcon"; import { GroupIcon } from "../Icons/GroupIcon"; -import { Icon } from "../Icons/Icon"; import { MoreIcon } from "../Icons/MoreIcon"; import { ReadMessageIcon } from "../Icons/ReadMessageIcon"; import { ReplyIcon } from "../Icons/ReplyActivityIcon"; @@ -99,10 +98,7 @@ export function ActivityMessage({ <> - - - - + diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index ef82d406..83effd34 100644 --- a/packages/react-chat/src/components/Chat.tsx +++ b/packages/react-chat/src/components/Chat.tsx @@ -84,7 +84,7 @@ const ChatWrapper = styled.div` const ChannelsWrapper = styled.div` width: 21%; height: 100%; - min-width: 196px; + min-width: 250px; background-color: ${({ theme }) => theme.sectionBackgroundColor}; padding: 10px 16px; display: flex; diff --git a/packages/react-chat/src/components/Chat/ChatCreation.tsx b/packages/react-chat/src/components/Chat/ChatCreation.tsx index a0d57735..85843326 100644 --- a/packages/react-chat/src/components/Chat/ChatCreation.tsx +++ b/packages/react-chat/src/components/Chat/ChatCreation.tsx @@ -15,7 +15,6 @@ import { Member } from "../Members/Member"; import { SearchBlock } from "../SearchBlock"; import { textMediumStyles } from "../Text"; -import { Wrapper } from "./ChatBody"; import { ChatInput } from "./ChatInput"; interface ChatCreationProps { @@ -76,101 +75,107 @@ export function ChatCreation({ ); return ( - - - - {narrow && ( - setChatState(ChatState.ChatBody)} - className="narrow" - /> - )} - - - To: - - {styledGroup.map((member) => ( - - {member.slice(0, 10)} - removeMember(member)}> - - - - ))} - - {styledGroup.length < 5 && ( - - setQuery(e.currentTarget.value)} - /> - - - )} - {!narrow && styledGroup.length === 5 && ( - 5 user Limit reached - )} - - {narrow && styledGroup.length === 5 && ( - 5 user Limit reached + + + {narrow && ( + setChatState(ChatState.ChatBody)} + className="narrow" + /> + )} + + + To: + + {styledGroup.map((member) => ( + + {member.slice(0, 10)} + removeMember(member)}> + + + + ))} + + {styledGroup.length < 5 && ( + + setQuery(e.currentTarget.value)} + /> + + )} - - { - if (!activeChannel) { - createChat(styledGroup); - } else { - addMembers(styledGroup, activeChannel.id); - } - setEditGroup?.(false); - }} - > - Confirm - - {!narrow && } - - {!setEditGroup && !query && ( - - Contacts - - {identity && - Object.values(contacts) - .filter( - (e) => - e.id != bufToHex(identity.publicKey) && - !styledGroup.includes(e.id) - ) - .map((contact) => ( - addMember(contact.id)} - /> - ))} - - - )} - {!activeChannel && ( - - )} - - + {!narrow && styledGroup.length === 5 && ( + 5 user Limit reached + )} + + {narrow && styledGroup.length === 5 && ( + 5 user Limit reached + )} + + { + if (!activeChannel) { + createChat(styledGroup); + } else { + addMembers(styledGroup, activeChannel.id); + } + setEditGroup?.(false); + }} + > + Confirm + + {!narrow && } + + {!setEditGroup && !query && ( + + Contacts + + {identity && + Object.values(contacts) + .filter( + (e) => + e.id != bufToHex(identity.publicKey) && + !styledGroup.includes(e.id) + ) + .map((contact) => ( + addMember(contact.id)} + /> + ))} + + + )} + {!activeChannel && ( + + )} + ); } const CreationWrapper = styled.div` display: flex; flex-direction: column; - width: 100%; + width: 79%; height: 100%; + max-width: calc(100% - 250px); background-color: ${({ theme }) => theme.bodyBackgroundColor}; padding: 8px 16px; + + &.narrow { + width: 100%; + max-width: 100%; + } `; const CreationBar = styled.div` @@ -190,9 +195,6 @@ const Column = styled.div` flex: 1; margin-right: 16px; overflow-x: hidden; - - &.narrow { - } `; const InputBar = styled.div` diff --git a/packages/react-chat/src/components/Chat/ChatTopbar.tsx b/packages/react-chat/src/components/Chat/ChatTopbar.tsx index 175ed027..a161828e 100644 --- a/packages/react-chat/src/components/Chat/ChatTopbar.tsx +++ b/packages/react-chat/src/components/Chat/ChatTopbar.tsx @@ -114,6 +114,7 @@ export function ChatTopbar({ {showChannelMenu && ( switchShowState(ChatBodyState.Members)} setShowChannelMenu={setShowChannelMenu} setEditGroup={setEditGroup} diff --git a/packages/react-chat/src/components/Form/ChannelMenu.tsx b/packages/react-chat/src/components/Form/ChannelMenu.tsx index ae8fb5e9..08180d35 100644 --- a/packages/react-chat/src/components/Form/ChannelMenu.tsx +++ b/packages/react-chat/src/components/Form/ChannelMenu.tsx @@ -24,6 +24,7 @@ import { DropdownMenu, MenuItem, MenuText } from "./DropdownMenu"; interface ChannelMenuProps { channel: ChannelData; setShowChannelMenu?: (val: boolean) => void; + showNarrowMembers?: boolean; switchMemberList?: () => void; setEditGroup?: (val: boolean) => void; className?: string; @@ -32,6 +33,7 @@ interface ChannelMenuProps { export const ChannelMenu = ({ channel, setShowChannelMenu, + showNarrowMembers, switchMemberList, setEditGroup, className, @@ -62,7 +64,7 @@ export const ChannelMenu = ({ }} > - View Members + {showNarrowMembers ? "Hide" : "View"} Members )} {channel.type === "group" && ( diff --git a/packages/react-chat/src/components/Icons/Icon.ts b/packages/react-chat/src/components/Icons/Icon.ts deleted file mode 100644 index e9ff55d0..00000000 --- a/packages/react-chat/src/components/Icons/Icon.ts +++ /dev/null @@ -1,16 +0,0 @@ -import styled from "styled-components"; - -export const Icon = styled.div` - width: 40px; - height: 40px; - display: flex; - justify-content: center; - align-items: end; - border-radius: 50%; - background-color: #bcbdff; - background-size: contain; - background-position: center; - flex-shrink: 0; - position: relative; - cursor: pointer; -`; diff --git a/packages/react-chat/src/components/Members/Member.tsx b/packages/react-chat/src/components/Members/Member.tsx index c6a38ab0..2b3a091e 100644 --- a/packages/react-chat/src/components/Members/Member.tsx +++ b/packages/react-chat/src/components/Members/Member.tsx @@ -4,8 +4,7 @@ import styled from "styled-components"; import { useIdentity } from "../../contexts/identityProvider"; import { Contact } from "../../models/Contact"; import { ContactMenu } from "../Form/ContactMenu"; -import { Icon } from "../Icons/Icon"; -import { UserAddress } from "../Messages/Styles"; +import { IconBtn, UserAddress } from "../Messages/Styles"; import { UserLogo } from "./UserLogo"; @@ -78,13 +77,9 @@ export const MemberName = styled.p` white-space: nowrap; `; -export const MemberIcon = styled(Icon)` +export const MemberIcon = styled(IconBtn)` width: 29px; height: 29px; - position: relative; - background-size: contain; - background-position: center; - flex-shrink: 0; &.offline { &::after { diff --git a/packages/react-chat/src/components/Messages/Styles.tsx b/packages/react-chat/src/components/Messages/Styles.tsx index 2eb19a8b..26f84d9b 100644 --- a/packages/react-chat/src/components/Messages/Styles.tsx +++ b/packages/react-chat/src/components/Messages/Styles.tsx @@ -79,6 +79,23 @@ export const UserName = styled.p` ${textMediumStyles} `; +export const UserNameBtn = styled.button` + padding: 0; + border: none; + outline: none; + position: relative; + color: ${({ theme }) => theme.tertiary}; + + &:hover { + text-decoration: underline; + } + + &:disabled { + cursor: default; + text-decoration: none; + } +`; + export const UserAddress = styled.p` font-size: 10px; line-height: 14px; @@ -115,3 +132,25 @@ export const MessageText = styled.div` white-space: pre-wrap; color: ${({ theme }) => theme.primary}; `; + +export const IconBtn = styled.button` + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: end; + flex-shrink: 0; + border: none; + border-radius: 50%; + background-color: #bcbdff; + background-size: contain; + background-position: center; + padding: 0; + outline: none; + position: relative; + cursor: pointer; + + &:disabled { + cursor: default; + } +`; diff --git a/packages/react-chat/src/components/Messages/UiMessage.tsx b/packages/react-chat/src/components/Messages/UiMessage.tsx index db54480a..90ae52eb 100644 --- a/packages/react-chat/src/components/Messages/UiMessage.tsx +++ b/packages/react-chat/src/components/Messages/UiMessage.tsx @@ -12,7 +12,6 @@ import { ChatMessage } from "../../models/ChatMessage"; import { equalDate } from "../../utils"; import { ChatMessageContent } from "../Chat/ChatMessageContent"; import { ContactMenu } from "../Form/ContactMenu"; -import { Icon } from "../Icons/Icon"; import { UntrustworthIcon } from "../Icons/UntrustworthIcon"; import { UserLogo } from "../Members/UserLogo"; import { Reactions } from "../Reactions/Reactions"; @@ -22,6 +21,7 @@ import { MessageReactions } from "./MessageReactions"; import { ContentWrapper, DateSeparator, + IconBtn, MessageHeaderWrapper, MessageOuterWrapper, MessageText, @@ -29,6 +29,7 @@ import { TimeWrapper, UserAddress, UserName, + UserNameBtn, UserNameWrapper, } from "./Styles"; @@ -111,10 +112,11 @@ export function UiMessage({ - { if (identity) setShowMenu((e) => !e); }} + disabled={!identity} > {showMenu && ( @@ -128,11 +130,21 @@ export function UiMessage({ ["green", 360], ]} /> - + - {contact?.customName ?? contact.trueName} + { + if (identity) setShowMenu((e) => !e); + }} + disabled={!identity} + > + + {" "} + {contact?.customName ?? contact.trueName} + + {message.sender.slice(0, 5)}...{message.sender.slice(-3)} @@ -156,12 +168,14 @@ export function UiMessage({ )} - + {identity && ( + + )} ); diff --git a/packages/react-chat/src/components/UserCreation/UserCreationButtons.tsx b/packages/react-chat/src/components/UserCreation/UserCreationButtons.tsx index 643dd56a..daec9217 100644 --- a/packages/react-chat/src/components/UserCreation/UserCreationButtons.tsx +++ b/packages/react-chat/src/components/UserCreation/UserCreationButtons.tsx @@ -55,7 +55,7 @@ export function UserCreationButtons({ permission }: UserCreationProps) { setCreationStartModal(false); }} > - Use a throwaway account + Use a throwaway profile )}