From 1c7ae04f4f27e0212c32915b8ccea0dbb0449edf Mon Sep 17 00:00:00 2001
From: Himself65 <himself65@outlook.com>
Date: Wed, 31 May 2023 11:26:20 +0800
Subject: [PATCH] feat: update filter button (#2609)

---
 .../components/page-list/view/view-list.css.ts   |  7 +++++++
 .../src/components/page-list/view/view-list.tsx  | 16 ++++++++--------
 2 files changed, 15 insertions(+), 8 deletions(-)
 create mode 100644 packages/component/src/components/page-list/view/view-list.css.ts

diff --git a/packages/component/src/components/page-list/view/view-list.css.ts b/packages/component/src/components/page-list/view/view-list.css.ts
new file mode 100644
index 0000000000..cbaa56dcd5
--- /dev/null
+++ b/packages/component/src/components/page-list/view/view-list.css.ts
@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+
+export const filterButton = style({
+  borderRadius: '8px',
+  padding: '2px 8px 2px 4px',
+  margin: '20px',
+});
diff --git a/packages/component/src/components/page-list/view/view-list.tsx b/packages/component/src/components/page-list/view/view-list.tsx
index 9445a0bf00..3a9853cab2 100644
--- a/packages/component/src/components/page-list/view/view-list.tsx
+++ b/packages/component/src/components/page-list/view/view-list.tsx
@@ -1,12 +1,10 @@
-import { MenuItem, styled } from '@affine/component';
+import { Button, MenuItem } from '@affine/component';
+import { FilteredIcon } from '@blocksuite/icons';
 
 import Menu from '../../../ui/menu/menu';
 import { CreateFilterMenu } from '../filter/vars';
 import type { useAllPageSetting } from '../use-all-page-setting';
-
-const NoDragDiv = styled('div')`
-  -webkit-app-region: no-drag;
-`;
+import { filterButton } from './view-list.css';
 
 export const ViewList = ({
   setting,
@@ -33,9 +31,9 @@ export const ViewList = ({
             </div>
           }
         >
-          <NoDragDiv style={{ marginRight: 12, cursor: 'pointer' }}>
+          <Button style={{ marginRight: 12, cursor: 'pointer' }}>
             {setting.currentView.name}
-          </NoDragDiv>
+          </Button>
         </Menu>
       )}
       <Menu
@@ -52,7 +50,9 @@ export const ViewList = ({
           />
         }
       >
-        <NoDragDiv style={{ cursor: 'pointer' }}>Filter</NoDragDiv>
+        <Button icon={<FilteredIcon />} className={filterButton}>
+          Filter
+        </Button>
       </Menu>
     </div>
   );