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: scroll; max-height: 24rem; `; const UserInfo = styled.div` display: flex; column-gap: 0.5rem; `; const Text = styled.div` display: flex; justify-content: start; align-items: center; width: 100%; `; return ( <> <AddMemberButton onClick={props.addMember}> <i class="bi bi-plus-circle-fill" /> Add new member </AddMemberButton> <UserList> {props.userList.length && props.userList.map((user, id) => ( <UserListItem key={id}> <UserInfo> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.ProfileIcon.UserProfileIcon`} props={{ accountId: user.id, active: user.active, }} /> <Text>{user.id}</Text> </UserInfo> </UserListItem> ))} </UserList> </> );