const users = props.users; const componentOwnerId = props.componentOwnerId; const onClick = props.onClick; const onClose = props.onClose; const onAdd = props.onAdd; const onSelect = props.onSelect; const selectedUser = props.selectedUser; const addMemberStatus = props.addMemberStatus; 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; cursor: pointer; :hover { background-color: #d0fc42; } background-color: #1d1d21; `; const Container = styled.div` z-index: 30; outline-color: #777583; outline-style: solid; outline-width: 1px; ${({ selected }) => selected ? "border-radius: 4px 4px 4px 4px;" : "border-radius: 4px 4px 0px 0px;"} width: inherit; font-family: Helvetica Neue; `; const UserList = styled.div` overflow-y: scroll; max-height: 200px; position: absolute; z-index: 30; outline-color: #777583; outline-style: solid; outline-width: 1px; border-radius: 0px 0px 4px 4px; width: inherit; 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 UserInfo = styled.div` display: flex; column-gap: 0.5rem; `; const UserId = styled.div` display: flex; justify-content: start; align-items: center; width: 100%; `; const AddUserInput = styled.div` color: #fff; display: flex; border-radius: 4px; height: 40px; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; border: none; width: 100%; background-color: #1d1d21; `; const CloseUserDropdownButton = styled.div` color: #6b7280; :hover { color: #d0fc42; } cursor: pointer; position: absolute; right: 10px; top: 10px; `; return ( <Container selected={selectedUser || users.length === 0}> <AddUserInput> {users.length > 0 ? selectedUser?.id : "No users to add"} </AddUserInput> {!selectedUser && users.length > 0 && ( <UserList> {users.map((user) => ( <> <UserListItem key={user.id} onClick={() => onClick(user)}> <UserInfo> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.ProfileIcon.UserProfileIcon`} props={{ accountId: user.id, componentOwnerId, }} /> <UserId>{user.id}</UserId> </UserInfo> </UserListItem> </> ))} </UserList> )} <CloseUserDropdownButton onClick={onClose}> <i className="bi bi-x-circle"></i> </CloseUserDropdownButton> </Container> );