Update member drawer icons (#1312)

* update folds * update member drawer icons
cinnyapp · Jun 25, 2023 · b6283b3 · b6283b3
1 parent b19e248
commit b6283b3
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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,15 +276,16 @@ 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) => (
                     <PopOut
                       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,14 +386,15 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
                   )}
                 </UseStateProvider>
               </Box>
-
               <Box direction="Column" gap="100">
                 <Input
                   ref={searchInputRef}
                   onChange={handleSearchChange}
                   style={{ paddingRight: config.space.S200 }}
                   placeholder="Type name..."
                   variant="Surface"
+                  size="400"
+                  radii="400"
                   before={<Icon size="50" src={Icons.Search} />}
                   after={
                     result && (