diff --git a/src/app/molecules/room-members/RoomMembers.jsx b/src/app/molecules/room-members/RoomMembers.jsx index f7dfbf2..1f409f4 100644 --- a/src/app/molecules/room-members/RoomMembers.jsx +++ b/src/app/molecules/room-members/RoomMembers.jsx @@ -137,22 +137,25 @@ function RoomMembers({ roomId }) { const mList = searchMembers ? searchMembers.data : members.slice(0, itemCount); return (
- { - const getSegmentIndex = { join: 0, invite: 1, ban: 2 }; - return getSegmentIndex[membership]; - })() - } - segments={[{ text: 'Joined' }, { text: 'Invited' }, { text: 'Banned' }]} - onSelect={(index) => { - const memberships = ['join', 'invite', 'ban']; - setMembership(memberships[index]); - }} - /> - -
+ Search member + +
{`${searchMembers ? `Found — ${mList.length}` : members.length} members`} + { + const getSegmentIndex = { join: 0, invite: 1, ban: 2 }; + return getSegmentIndex[membership]; + })() + } + segments={[{ text: 'Joined' }, { text: 'Invited' }, { text: 'Banned' }]} + onSelect={(index) => { + const memberships = ['join', 'invite', 'ban']; + setMembership(memberships[index]); + }} + /> +
+
{mList.map((member) => ( * { - flex: 1; - } } + &__header { + display: flex; + align-items: flex-start; + & .context-menu__header { + @extend .cp-fx__item-one; + margin-top: 14px; + border-top: 1px solid var(--bg-surface-border); + border-bottom: none; + } + & .segmented-controls { + @include dir.side(margin, 0, var(--sp-normal)); + & > button { + padding: var(--sp-ultra-tight) 0; + } + } + } &__list { + & .people-selector__container:last-child { margin-bottom: var(--sp-extra-tight); }