const { addMemberInputOpen, componentOwnerId, setSelectedUser, setMemberInputOpen, selectedUser, boardMembers, users, addMember, addMemberStatus, onSelectRemovingMember, } = props; const OptionContainer = styled.div` display: flex; flex-direction: column; width: 100%; position: relative; `; const AddMemberButton = styled.div` color: #0e0e10; background-color: #d0fc42; display: flex; flex-direction: row; ${({ center }) => center && 'justify-content: center;'} border-radius: 4px; height: 40px; gap: 4px; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; cursor: pointer; :hover { opacity: 0.8; } `; const MemberListItem = styled.div` display: flex; flex-direction: row; 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 MemberList = styled.div` margin-top: 16px; margin-bottom: 16px; overflow-y: scroll; max-height: 24rem; scroll-behavior: smooth; ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background-color: #1d1d21; } ::-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 MemberInfo = styled.div` display: flex; column-gap: 0.5rem; `; const MemberId = styled.div` display: flex; justify-content: start; align-items: center; width: 100%; `; const RemoveMemberButton = styled.div` color: #6b7280; :hover { color: #d0fc42; } cursor: pointer; `; const AddUserButton = styled.button` background-color: #D0FC42; :hover { back } padding: 2px 8px 2px 8px; width: 100% border: none; border-radius: 4px; font-size: 12px; font-weight: 400; line-height: 24px; letter-spacing: 0em; text-align: center; `; return ( <OptionContainer> {addMemberInputOpen ? ( <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.UserDropdown`} props={{ users, componentOwnerId, onClick: setSelectedUser, onClose: () => { setMemberInputOpen(false); setSelectedUser(undefined); }, selectedUser, addMemberStatus, }} /> ) : ( <AddMemberButton onClick={() => setMemberInputOpen(true)}> <i className="bi bi-plus-circle-fill"></i> <p>Add new Member</p> </AddMemberButton> )} <MemberList> {boardMembers.length && boardMembers.map((member, id) => ( <MemberListItem key={id}> <MemberInfo> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.ProfileIcon.UserProfileIcon`} props={{ accountId: member.id, componentOwnerId, }} /> <MemberId>{member.id}</MemberId> </MemberInfo> <RemoveMemberButton onClick={() => onSelectRemovingMember(member)}> <i className="bi bi-x-circle"></i> </RemoveMemberButton> </MemberListItem> ))} </MemberList> {selectedUser && ( <AddMemberButton center={true} onClick={() => addMember(selectedUser.id)}> Add member </AddMemberButton> )} </OptionContainer> );