UI fixes group (#186)

* Scrolling input for group creation

* Add group description

* Adding members ro existing group
This commit is contained in:
Maria Rushkova 2022-01-14 01:52:35 +01:00 committed by GitHub
parent 39a02cc0ed
commit 15f64df575
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 2 deletions

View File

@ -48,6 +48,7 @@ export function ChatCreation({
}
});
setQuery("");
if (activeChannel) addMembers(styledGroup, activeChannel.id);
},
[setStyledGroup, styledGroup]
);
@ -86,9 +87,9 @@ export function ChatCreation({
className="narrow"
/>
)}
<InputBar>
<InputBar className={`${narrow && "narrow"}`}>
<InputText>To:</InputText>
<StyledList>
<StyledList className={`${narrow && "narrow"}`}>
{styledGroup.map((member) => (
<StyledMember key={member}>
<StyledName>{member.slice(0, 10)}</StyledName>
@ -182,6 +183,10 @@ const InputBar = styled.div`
margin-right: 16px;
${textMediumStyles}
&.narrow {
overflow-x: hidden;
}
`;
const Input = styled.input`
@ -216,6 +221,14 @@ const CreationBtn = styled.button`
const StyledList = styled.div`
display: flex;
&.narrow {
overflow-x: scroll;
&::-webkit-scrollbar {
display: none;
}
}
`;
const StyledMember = styled.div`

View File

@ -40,6 +40,7 @@ export function useGroupChats(
id: chat.chatId,
name: chat.name ?? chat.chatId,
type: "group",
description: `${chat.members.length} members`,
members: members,
};
setChannels((prev) => {