Update member drawer icons (#1312)

* update folds

* update member drawer icons

diff --git a/package-lock.json b/package-lock.json
index 61eebbf90e4a326c10a3e5257b0c61a1a62b150a..d5867ae16d225528267f26ca58b5ae0a4068bd85 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",

diff --git a/package.json b/package.json
index beaae095615d52f16f3fac9211096ce8aad7f2d1..5eb3fa9885e55dcfe057f0b3aa6d408b2e894bae 100644 (file)
--- a/package.json
+++ b/package.json
@@ -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",

diff --git a/src/app/organisms/room/MembersDrawer.css.ts b/src/app/organisms/room/MembersDrawer.css.ts
index 6d347bf1a043748130e8492919681252db19bd33..a1f4153e84595a1f54f519200ec4e9dfb69dd41d 100644 (file)
--- a/src/app/organisms/room/MembersDrawer.css.ts
+++ b/src/app/organisms/room/MembersDrawer.css.ts
@@ -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({

diff --git a/src/app/organisms/room/MembersDrawer.tsx b/src/app/organisms/room/MembersDrawer.tsx
index 680a4e9d4c187d23fd03804a94b8ab8c005c3f6f..5712c66f6bae2546ddd579f9c5c9803c891bda57 100644 (file)
--- a/src/app/organisms/room/MembersDrawer.tsx
+++ b/src/app/organisms/room/MembersDrawer.tsx
@@ -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 && (