update member drawer icons

This commit is contained in:
Ajay Bura 2023-06-24 20:44:18 +05:30
parent 81833b9005
commit 51e64b8f31
2 changed files with 12 additions and 8 deletions

View file

@ -19,7 +19,7 @@ export const MemberDrawerContentBase = style({
}); });
export const MemberDrawerContent = style({ export const MemberDrawerContent = style({
padding: `${config.space.S300} 0`, padding: `${config.space.S200} 0`,
}); });
const ScrollBtnAnime = keyframes({ const ScrollBtnAnime = keyframes({

View file

@ -131,11 +131,11 @@ const useSortFilterMenu = (): SortFilter[] =>
filterFn: SortFilters.filterDescending, filterFn: SortFilters.filterDescending,
}, },
{ {
name: 'New First', name: 'Newest',
filterFn: SortFilters.filterNewestFirst, filterFn: SortFilters.filterNewestFirst,
}, },
{ {
name: 'Old First', name: 'Oldest',
filterFn: SortFilters.filterOldest, filterFn: SortFilters.filterOldest,
}, },
], ],
@ -254,6 +254,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
<TooltipProvider <TooltipProvider
position="Bottom" position="Bottom"
align="End" align="End"
offset={4}
tooltip={ tooltip={
<Tooltip> <Tooltip>
<Text>Invite Member</Text> <Text>Invite Member</Text>
@ -275,8 +276,8 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
</Header> </Header>
<Box className={css.MemberDrawerContentBase} grow="Yes"> <Box className={css.MemberDrawerContentBase} grow="Yes">
<Scroll ref={scrollRef} variant="Background" size="300" visibility="Hover"> <Scroll ref={scrollRef} variant="Background" size="300" visibility="Hover">
<Box className={css.MemberDrawerContent} direction="Column" gap="300"> <Box className={css.MemberDrawerContent} direction="Column" gap="200">
<Box ref={scrollTopAnchorRef} className={css.DrawerGroup} direction="Column" gap="100"> <Box ref={scrollTopAnchorRef} className={css.DrawerGroup} direction="Column" gap="200">
<Box alignItems="Center" justifyContent="SpaceBetween" gap="200"> <Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
<UseStateProvider initial={false}> <UseStateProvider initial={false}>
{(open, setOpen) => ( {(open, setOpen) => (
@ -284,6 +285,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
open={open} open={open}
position="Bottom" position="Bottom"
align="Start" align="Start"
offset={4}
content={ content={
<FocusTrap <FocusTrap
focusTrapOptions={{ focusTrapOptions={{
@ -324,7 +326,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
variant={filter.membershipFilter.color} variant={filter.membershipFilter.color}
size="400" size="400"
radii="300" radii="300"
before={<Icon src={Icons.Funnel} size="50" />} before={<Icon src={Icons.Filter} size="50" />}
> >
<Text size="T200">{filter.membershipFilter.name}</Text> <Text size="T200">{filter.membershipFilter.name}</Text>
</Chip> </Chip>
@ -338,6 +340,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
open={open} open={open}
position="Bottom" position="Bottom"
align="End" align="End"
offset={4}
content={ content={
<FocusTrap <FocusTrap
focusTrapOptions={{ focusTrapOptions={{
@ -374,7 +377,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
variant="Background" variant="Background"
size="400" size="400"
radii="300" radii="300"
after={<Icon src={Icons.Category} size="50" />} after={<Icon src={Icons.Sort} size="50" />}
> >
<Text size="T200">{filter.sortFilter.name}</Text> <Text size="T200">{filter.sortFilter.name}</Text>
</Chip> </Chip>
@ -383,7 +386,6 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
)} )}
</UseStateProvider> </UseStateProvider>
</Box> </Box>
<Box direction="Column" gap="100"> <Box direction="Column" gap="100">
<Input <Input
ref={searchInputRef} ref={searchInputRef}
@ -391,6 +393,8 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
style={{ paddingRight: config.space.S200 }} style={{ paddingRight: config.space.S200 }}
placeholder="Type name..." placeholder="Type name..."
variant="Surface" variant="Surface"
size="400"
radii="400"
before={<Icon size="50" src={Icons.Search} />} before={<Icon size="50" src={Icons.Search} />}
after={ after={
result && ( result && (