From b19e24838364aff27aa90fcdc6a704968363085a Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Fri, 23 Jun 2023 09:46:04 +1000 Subject: [PATCH] Fix member panel filter layout (#1307) * fix member panel filter layout * make member role text lowercase --- src/app/organisms/room/MembersDrawer.css.ts | 2 +- src/app/organisms/room/MembersDrawer.tsx | 98 ++++++++++----------- 2 files changed, 50 insertions(+), 50 deletions(-) diff --git a/src/app/organisms/room/MembersDrawer.css.ts b/src/app/organisms/room/MembersDrawer.css.ts index 2718e92..6d347bf 100644 --- a/src/app/organisms/room/MembersDrawer.css.ts +++ b/src/app/organisms/room/MembersDrawer.css.ts @@ -41,7 +41,7 @@ export const DrawerScrollTop = style({ }); export const DrawerGroup = style({ - padding: `0 ${config.space.S100} 0 ${config.space.S300}`, + paddingLeft: config.space.S200, }); export const MembersGroup = style({ diff --git a/src/app/organisms/room/MembersDrawer.tsx b/src/app/organisms/room/MembersDrawer.tsx index d50c366..680a4e9 100644 --- a/src/app/organisms/room/MembersDrawer.tsx +++ b/src/app/organisms/room/MembersDrawer.tsx @@ -75,7 +75,7 @@ const useMembershipFilterMenu = (): MembershipFilter[] => { name: 'Joined', filterFn: MembershipFilters.filterJoined, - color: 'Surface', + color: 'Background', }, { name: 'Invited', @@ -131,11 +131,11 @@ const useSortFilterMenu = (): SortFilter[] => filterFn: SortFilters.filterDescending, }, { - name: 'Newest First', + name: 'New First', filterFn: SortFilters.filterNewestFirst, }, { - name: 'Oldest First', + name: 'Old First', filterFn: SortFilters.filterOldest, }, ], @@ -275,10 +275,9 @@ export function MembersDrawer({ room }: MembersDrawerProps) { - - - Filter - + + + {(open, setOpen) => ( { setFilter((f) => ({ ...f, membershipFilter: menuItem })); @@ -322,9 +322,9 @@ export function MembersDrawer({ room }: MembersDrawerProps) { ref={anchorRef} onClick={() => setOpen(!open)} variant={filter.membershipFilter.color} - radii="400" - outlined - after={} + size="400" + radii="300" + before={} > {filter.membershipFilter.name} @@ -337,7 +337,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) { setOpen(!open)} - variant="Surface" - radii="400" - outlined - after={} + variant="Background" + size="400" + radii="300" + after={} > - {`Order: ${filter.sortFilter.name}`} + {filter.sortFilter.name} )} )} - - - Search - } - after={ - result && ( - 0 ? 'Success' : 'Critical'} - size="400" - radii="Pill" - onClick={() => { - if (searchInputRef.current) searchInputRef.current.value = ''; - resetSearch(); - }} - after={} - > - {`${result.items.length || 'No'} ${ - result.items.length === 1 ? 'Result' : 'Results' - }`} - - ) - } - /> + + } + after={ + result && ( + 0 ? 'Success' : 'Critical'} + size="400" + radii="Pill" + aria-pressed + onClick={() => { + if (searchInputRef.current) { + searchInputRef.current.value = ''; + searchInputRef.current.focus(); + } + resetSearch(); + }} + after={} + > + {`${result.items.length || 'No'} ${ + result.items.length === 1 ? 'Result' : 'Results' + }`} + + ) + } + /> + {!onTop && ( @@ -458,7 +458,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) { ref={virtualizer.measureElement} key={`${room.roomId}-${vItem.index}`} className={classNames(css.MembersGroupLabel, css.DrawerVirtualItem)} - size="O400" + size="L400" > {tagOrMember.name}