supnas/cinny
2
1
Fork 0
Code Issues 3 Pull requests 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",
"flux": "4.0.3",
"focus-trap-react": "10.0.2",
"folds": "1.2.1",
"folds": "1.3.0",
"formik": "2.2.9",
"html-react-parser": "3.0.4",
"immer": "9.0.16",
@ -3271,9 +3271,9 @@
}
},
"node_modules/folds": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/folds/-/folds-1.2.1.tgz",
"integrity": "sha512-BCV5oFCndiGFp1HyeSnbDKmTSbu1yfAtAIF6znPvLthuI/QG4516bBUr6+MyNUQWx/IAkj1bdQL/cdD+jEZWCw==",
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/folds/-/folds-1.3.0.tgz",
"integrity": "sha512-Jcv6xN9woJWaTaATDGCD9xFqUhjuSw+afvChYoUt4UsAyY351hfpkGNYzglN+gA5fvJw6N9oa6Ogjj2p84kFfA==",
"peerDependencies": {
"@vanilla-extract/css": "^1.9.2",
"@vanilla-extract/recipes": "^0.3.0",

2
package.json
View file

@ -38,7 +38,7 @@
"file-saver": "2.0.5",
"flux": "4.0.3",
"focus-trap-react": "10.0.2",
"folds": "1.2.1",
"folds": "1.3.0",
"formik": "2.2.9",
"html-react-parser": "3.0.4",
"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({
padding: `${config.space.S300} 0`,
padding: `${config.space.S200} 0`,
});
const ScrollBtnAnime = keyframes({

18
src/app/organisms/room/MembersDrawer.tsx
View file

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