From 4de063de988f9569ea1468699b79a7bc9408ece8 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Fri, 28 Jul 2023 04:37:34 +0800
Subject: [PATCH] style: adjust collection modal style (#3407)

---
 .../page-list/filter/filter-list.tsx          | 27 ++++++++++---------
 .../page-list/view/create-collection.tsx      |  1 +
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/component/src/components/page-list/filter/filter-list.tsx b/packages/component/src/components/page-list/filter/filter-list.tsx
index 134690ea3a..52e75fdd27 100644
--- a/packages/component/src/components/page-list/filter/filter-list.tsx
+++ b/packages/component/src/components/page-list/filter/filter-list.tsx
@@ -2,7 +2,7 @@ import type { Filter } from '@affine/env/filter';
 import type { PropertiesMeta } from '@affine/env/filter';
 import { CloseIcon, PlusIcon } from '@blocksuite/icons';
 
-import { Menu } from '../../..';
+import { Button, IconButton, Menu } from '../../..';
 import { Condition } from './condition';
 import * as styles from './index.css';
 import { CreateFilterMenu } from './vars';
@@ -22,6 +22,7 @@ export const FilterList = ({
         display: 'flex',
         flexWrap: 'wrap',
         gap: 10,
+        alignItems: 'center',
       }}
     >
       {value.map((filter, i) => {
@@ -57,17 +58,19 @@ export const FilterList = ({
           />
         }
       >
-        <div
-          style={{
-            cursor: 'pointer',
-            padding: 4,
-            marginLeft: 4,
-            display: 'flex',
-            alignItems: 'center',
-          }}
-        >
-          <PlusIcon />
-        </div>
+        {value.length === 0 ? (
+          <Button
+            icon={<PlusIcon />}
+            iconPosition="end"
+            style={{ fontSize: 'var(--affine-font-xs)', padding: '0 8px' }}
+          >
+            Add Filters
+          </Button>
+        ) : (
+          <IconButton size="small">
+            <PlusIcon />
+          </IconButton>
+        )}
       </Menu>
     </div>
   );
diff --git a/packages/component/src/components/page-list/view/create-collection.tsx b/packages/component/src/components/page-list/view/create-collection.tsx
index c1c8bada0e..81e92dba71 100644
--- a/packages/component/src/components/page-list/view/create-collection.tsx
+++ b/packages/component/src/components/page-list/view/create-collection.tsx
@@ -201,6 +201,7 @@ export const EditCollection = ({
             borderRadius: 8,
             padding: 18,
             marginTop: 20,
+            minHeight: '200px',
           }}
         >
           <div className={styles.filterTitle}>Filters</div>