hippoz/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update member drawer icons (#1312)

Browse source 
* update folds

* update member drawer icons
This commit is contained in:
Ajay Bura 2023-06-25 08:40:48 +05:30 committed by GitHub
parent b19e248383
commit b6283b3469
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
package-lock.json generated
View file

@ -28,7 +28,7 @@
"file-saver": "2.0.5", "file-saver": "2.0.5",
"flux": "4.0.3", "flux": "4.0.3",
"focus-trap-react": "10.0.2", "focus-trap-react": "10.0.2",
"folds": "1.2.1", "folds": "1.3.0",
"formik": "2.2.9", "formik": "2.2.9",
"html-react-parser": "3.0.4", "html-react-parser": "3.0.4",
"immer": "9.0.16", "immer": "9.0.16",
@ -3271,9 +3271,9 @@
} }
}, },
"node_modules/folds": { "node_modules/folds": {
"version": "1.2.1", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/folds/-/folds-1.2.1.tgz", "resolved": "https://registry.npmjs.org/folds/-/folds-1.3.0.tgz",
"integrity": "sha512-BCV5oFCndiGFp1HyeSnbDKmTSbu1yfAtAIF6znPvLthuI/QG4516bBUr6+MyNUQWx/IAkj1bdQL/cdD+jEZWCw==", "integrity": "sha512-Jcv6xN9woJWaTaATDGCD9xFqUhjuSw+afvChYoUt4UsAyY351hfpkGNYzglN+gA5fvJw6N9oa6Ogjj2p84kFfA==",
"peerDependencies": { "peerDependencies": {
"@vanilla-extract/css": "^1.9.2", "@vanilla-extract/css": "^1.9.2",
"@vanilla-extract/recipes": "^0.3.0", "@vanilla-extract/recipes": "^0.3.0",

2
package.json
View file

@ -38,7 +38,7 @@
"file-saver": "2.0.5", "file-saver": "2.0.5",
"flux": "4.0.3", "flux": "4.0.3",
"focus-trap-react": "10.0.2", "focus-trap-react": "10.0.2",
"folds": "1.2.1", "folds": "1.3.0",
"formik": "2.2.9", "formik": "2.2.9",
"html-react-parser": "3.0.4", "html-react-parser": "3.0.4",
"immer": "9.0.16", "immer": "9.0.16",

2
src/app/organisms/room/MembersDrawer.css.ts
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({

18
src/app/organisms/room/MembersDrawer.tsx
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 && (