const componentOwnerId = props.componentOwnerId; const userList = props.userList; const addMember = props.addMember; const channelName = props.channelName; const AddMemberButton = styled.div` display: flex; column-gap: 0.5rem; padding-left: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; color: #fff; :hover { background-color: #5765f2; } border-radius: 4px; font-family: Helvetica Neue; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; cursor: pointer; `; const UserListItem = styled.div` display: flex; justify-content: space-between; align-items: center; color: #777583; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; border-radius: 0.5rem; cursor: pointer; `; const UserList = styled.div` overflow-y: scroll; max-height: 24rem; scrollbar-color: black black; ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background-color: black; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background-color: black; } * { scrollbar-color: black black; } html::-webkit-scrollbar { width: 12px; } html::-webkit-scrollbar-thumb { background-color: black; border-radius: 6px; } html::-webkit-scrollbar-thumb:hover { background-color: black; } `; const UserInfo = styled.div` display: flex; column-gap: 0.5rem; `; const Text = styled.div` display: flex; justify-content: start; align-items: center; width: 100%; `; const AddUserDialog = ({ addMember, channelName, componentOwnerId }) => { const addUser = useCallback( (account) => addMember({ account, channel: channelName }), [addMember, channelName, channelName] ); return ( <Widget src={`${componentOwnerId}/widget/Calimero.Common.Popups.InputPopup`} props={{ componentOwnerId, title: `Invite user to #${channelName}`, placeholder: "ex: username.near", buttonText: "Invite", functionLoader: addUser, toggle: <AddMemberButton> <i className="bi bi-plus-circle-fill" /> Add new member </AddMemberButton>, }} /> ); }; return ( <> <AddUserDialog {...props}/> <UserList> {userList.length && userList.map((user, id) => ( <UserListItem key={id}> <UserInfo> <Widget src={`${componentOwnerId}/widget/Calimero.Curb.ProfileIcon.UserProfileIcon`} props={{ accountId: user.id, active: user.active, componentOwnerId, }} /> <Text>{user.id}</Text> </UserInfo> </UserListItem> ))} </UserList> </> );